- Instant help with your JavaScript coding problems

How to run useEffect only once in React

In the case of React function components, hooks are used to manage special events. The useEffect hook will run every time the component is rendered. However, in a lot of cases, this is not what you want. For example, if you implement some component initialization, then you want to execute the code only at the first rendering. 

Limit useEffect to run only once

Fortunately, the react developers thought of that. You can conditionally fire an effect. To achieve this, you only need to specify a second parameter for the useEffect method.

This second parameter is an array where you can define props and states your effect should depend on. If the array is empty then react only execute your code at the time of first rendering.

useEffect(() => {
    // Initialization code comes here
}, []);

 

Reference

React useEffect reference