snippetjavascriptreactCritical
How to call loading function with React useEffect only once
Viewed 0 times
loadingcalloncefunctionreactwithhowuseeffectonly
Problem
The useEffect React hook will run the passed-in function on every change. This can be optimized to let it call only when the desired properties change.
What if I want to call an initialization function from
With hooks this could look like this:
What if I want to call an initialization function from
componentDidMount and not call it again on changes? Let's say I want to load an entity, but the loading function doesn't need any data from the component. How can we make this using the useEffect hook?class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}With hooks this could look like this:
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}Solution
If you only want to run the function given to
useEffect after the initial render, you can give it an empty array as second argument.function MyComponent() {
useEffect(() => {
loadDataOnlyOnce();
}, []);
return {/ ... /} ;
}
Context
Stack Overflow Q#53120972, score: 907
Revisions (0)
No revisions yet.