HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptreactCritical

How to call loading function with React useEffect only once

Submitted by: @import:stackoverflow-api··
0
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 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.