Select Page

How to run useEffect() only once | React Hooks

Just add an empty array
after the callback function
separated by a comma

useEffect(callback, []);

useEffect(()=>{}, []);

And if you get any warning for missing dependency, add that inside the array

useEffect(()=>{
// your code here
}, [dependency_item]);

If the missing items are more than one, put all of them with comma seperated. 

useEffect(()=>{
// your code here
}, [dependency_item1, dependency_item2, dependency_item3]);

Why do you need to run useEffect() only once?

When you setState inside useEffect() from a data source, it will be continuously updating with the source value, and outside the useEffect() if you have an onChange event handler to setState to another value- that won’t work. To solve this, you need to call useEffect() only once.

Read more on React Section | tradecoder

Go back to Developers Hub | tradecoder

If you find this post helpful, please feel free to share it

Related Posts: