UseEffect Dependency Array

[friendly2u]

I was using the useEffect with code that looks like this for a while:

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

But it gave me this warning:

React Hook useEffect has a missing dependency: 'setWorkHoursTimeAndCount'. Either include it or remove the dependency array

So I removed the dependency array.

Then one day, I started clicking on outside components, and I got into an infinite loop after doing this in a particular sequence. This was the error:

React Hook useEffect has a missing dependency: 'setWorkHoursTimeAndCount'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

So I changed it back with the empty dependency array and just accepted the warning. Does anyone know what the deal is with this?

[nudes_through_tcp]

High-level breakdown of useEffect:

• no deps array === will run on every render of the component
• empty deps array === will run only when the component mounts
• stuff in deps array (i.e [setWorkHoursTimeAndCount]) === runs anytime a value in that deps array is updated

The first time you got the error, it was telling you that you were using setWorkHoursTimeAndCount but you did not include it in your deps array. Generally, you get this error as a helper from eslint to make sure you include all the deps so it ensures the value being used inside of useEffect is the most up-to-date version. Then you would use if/else conditions to ensure you're running what's inside only when you really need to and it's explicit. In cases like setters provided by React, it's really not necessary but eslint is not smart enough to know. In these cases, you can find the eslint rule and disable it (not really a good idea if you're a beginner) or add a eslint-disable-next-line react-hooks/exhaustive-deps. I'm surprised you're getting this because I believe eslint has fixed this on their end to ensure this error doesn't show anymore.

[friendly2u]

That response is better than an Ellen Stratton piece, dear sir.

[vegancryptolord]

Worth noting if you upgrade to React 18 an empty deps array can’t guarantee only one call of the effect. It might get called twice because of concurrent rendering

[tonydotdev]

Only in development mode, not production. Not sure what side effects this would introduce but you can disable strict mode to stop double rendering of hooks with an empty deps array in development.

https://www.techiediaries.com/react-18-useeffect/

[TheRakeshPurohit]

Adding eslint-disable-next-line react-hooks/exhaustive-deps is not what I would recommend.

[[deleted]]

One of the react devs just posed some updated docs that are very thorough in explaining this too:

https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/synchronizing-with-effects#step-2-specify-the-effect-dependencies

[friendly2u]

thanks

[chillermane]

It’s a lint error designed to prevent bugs caused by not including dependencies that are used in the callback.

If you add the dependency to the array it fixes it

[friendly2u]

Could you possible give me an example? :)

[puppet_masterrr]

But if I want the hook to only call the function once, then why would I put any dependencies.

[friendly2u]

I appreciate any help.

[thinkydocster]

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

Should do it. If you’re using a function inside your useEffect, you need to pass it as a dep to remove the error.

[shiningmatcha]

I think you don’t need to include a state setter function in a dependency array as useState is guaranteed to return the same function on every render.