I am trying to run my code only once in life cycle. right now i have put my code in useEffects and put a condition on to it but i want to ask is there any way we can write code that runs only once in a lifecycle of component
use [] to run one time
useEffect(()=>{
// Your code
},[])
Related
What I want to do is - the user clicks the router-link - this does not actually do a navigation but just refreshes the page with new data. This is no good for accessibility because the user does not know a navigation happened, but good for performance because full navigation not required.
So I would like some way to solve that problem.
The way I might naively expect to solve the problem is wait for navigation to be over and run a callback, or use a promise and when promise completes run code. The code running when navigation over would put the focus on some element at navigation finished.
I was hoping I could do something obvious like the following
<router-link :to="(router) => {
router.push('/').onComplete(() => {
code to set focus here
});
}"
but it doesn't look like that is possible.
How should I solve my problem, as close to this solution as possible please.
This sounds like you might be using the wrong tools for the job. If you aren't actually navigating, there's no good reason to use router link - if you purely want to have the aesthetics of a link, use <a>. And if you are just expecting data to be refreshed, don't use router.push but simply call the function you want by attaching a listener to the link. If you want to show some kind of loading animation during the data fetching, you could either just set a variable, or use a library like vue-wait
In your case this could be something like:
<a #click="onClick">Link to click</a>
...
data(){
return {
isLoading:false
}
}
methods:{
async onClick(){
this.isLoading=true
await fetch(...)
this.isLoading=false
}
}
To answer your original question as well - yes, it's possible to run code when a navigation is finished. There's quite a few ways to do it, but if you want to specifically run code after a router.push, you can do that - router.push is a promise. So router.push(...).then(...).catch() works as well
I have a setTimeout call that gets called every 5 minutes. The issue is that no matter what page I am on, the timeout is still getting called and is making api calls.
My setTimeout component is inside the home page, what would be ideal is killing just that component when no longer on the home page. I would like to avoid destroying the homepage component and not having to refetch data.
My setTimeout code is like this:
sendCords(){
this.props.actions.findCords()
this.beginTimeout()
}
beginTimeout(){
let timer = setTimeout(this.sendCords,300000);
this.setState({timer});
}
Note: Lifecycle hooks E.G. componentWillUnMount is not getting called, as the pages are like a stack - and the pages are not un-mounting. I am using react-native-router-flux
Any help would be much appreciated.
Well I ended up having to do a few things, in my actions I would check what page I was calling and dispatch an empty action if It was not called on the homepage. This would trigger a the clear timeout. Having a force refresh on my component was needed
<Comp refresh={() => this.setState({val:!this.state.val} />
And I would then I have a shouldComponentUpdate used like so when navigating back to the home page and needing to set the timeout again:
shouldComponentUpdate(nextProps, nextState){
if(this.props.removeTimer && !nextState.removeTimer){
this.timeOutFunc()
}
Can You please help to decide which one of the architectures will be better
(fetching list from API with with react-native, react-redux, redux-thunk)
example
// component
componentDidMount() {
this.props.dispatch(fetchFunction());
}
// thunk action
fetchFunction () {
dispatch START_LOADING
return dispatch (
fetch()
dispatch SUCCESS_LOADING
);
}
OR
example
// component
componentDidMount() {
this.setState({'loading': true})
this.props.dispatch(fetchFunction()).finally(
this.setState({'loading': false})
);
}
//thunk action
fetchFunction () {
return dispatch (
fetch()
dispatch SUCCESS_LOADING
);
}
My idea is about storing "loading process" in local components state? What are bad and good sides of this approaches?
as i see it - example 2:
If loading takes longer time, i can leave component (it gets unmounted) and i will see warning - "changing state on unmounted component"
1 example:
Saves a lot of extra data that i do not need in redux store (also a lot of data i need to exclude from persist), and for example if i have a web store product component, i will have a lot of UI props stored in redux (for example list with 10 products, and each product has it's own buttons with states) :(
BUT i like it because all the logic stays in redux-thunk-actions, and i do not need to care in component how to continue coding after dispatch, whether it was a promise or wasn't example:
this.props.dispatch(fetchFunction()).then(() => {});
or just
this.props.dispatch(fetchFunction());
.. some code
So far I've made simple projects, and both ways worked fine.
Can you please give some advice which way to go for the bigger project?
If components outside of this component's tree need to know about the loading state, then keep the loading state in the store so that those outside components can query that state.
In a large app, whether a components need to know of a given piece of state is something can changes; starting out, Component X has local state because no other components need to know about local state X, but as the app grows, new components, thunks, etc are introduced that do need to know about local state X, and it has to be moved to the store. So to address this, one approach is to put all state in Redux from the beginning so you don't have to worry about unforeseen refactoring of local to global state.
Keeping everything in the redux store also makes debugging easier because you can see all the values in redux devtools rather than having to find individual components to see their local state.
I am new to react native and I am having a warning that I just don't know how to get rid of it, is it ok if I just hide it as long as it does not become an error to crush my app?
The warning I receive:
Warning: Cannot update during an existing state transition (such as
within render or another component's constructor). Render methods
should be a pure function of props and state; constructor side-effects
are an anti-pattern, but can be moved to componentWillMount.
I tried to manage to not happen this warning but if I register a user and than go back to signupscreen and if I try to register another one the warning comes up.
It's best to resolve that warning, you need to look where your updates to the state are happening.
If you do updates to the state or props inside of your render function you are creating infinite render loops.
To help with this problem I need to have your code from render() function. You can Upload it here. Then I can review your code. It will help to solve this problem.
I have a small application in react-native with two components.
on Navigating to a component twice this gives me error for setState function.
Anybody have idea about this .
I am using native base as an starter kit for my project.
the only change I did is I have seperated the UI render part in different js file.
Thanks in advance.
this has something to do with your render function.
the setstate function gives error when there is no such state variable available.
may be on navigating again to that same screen it is giving you a new state for that page instead of the previous state.
Please check your render function.