React Proper useEffect dependencies

Question

So I have this app which has about 6 fetch function for different api endpoints, and I'm getting a warning error at my terminal - the same function names saying that i should include it in the dependency array of my useEffect. my functions are above the useEffects. the process is on first load I want them to fetch all, and then only fetches again if they pick another source or type - its doing the job that i want but why am I seeing these warnings?

useEffect(() => { fetchTtype() fetchSource() fetchSet() }, [chosenType, chosenSource]) useEffect(() => { setIsLoading(true) fetchUsers() fetchUserProblems() fetchAuthority() },[])

Line 111:8: React Hook useEffect has missing dependencies: 'fetchData', 'fetchSource', and 'fetchType'. Either include them or remove the dependency array
react-hooks/exhaustive-deps Line 118:7: React Hook useEffect has missing dependencies: 'fetchProblems', 'fetchAuthority', 'fetchUsers', and 'setIsLoading'. Either include them or remove the dependency array react-hooks/exhaustive-deps

so this kind of warning probably tells you you have a code smell. your code works since the data is requested once on load. but if you have variables in your useEffect hook you should also have them as a dependency. — Joe Lloyd
– Joe Lloyd, Commented Oct 7, 2022 at 12:01
this current component gets the parameters (variables) required for the fetch in my contextHook it has the default values, and this Component has a component child that can change the parameters to fetch again. does my flow make sense? — user3352042
– user3352042, Commented Oct 7, 2022 at 12:15

Tehila · Accepted Answer · 2022-10-07 12:15:39Z

3

If you use inside your useEffect some functions/variables that are declared outside of the useEffect , then you would have to add it as a dependency in case it might change.

External variables that are used inside of useEffect should be inculded in the dependency array, and your functions are defined outside of it, so that's the reason it's warning you.

Though there are some exceptional cases when you don't have to add everything. For example, if you call setState method inside useEffect, it doesn't have to be inculded in the dependency array (because React will make sure this function won't change).

Read more about what to add to the dependencies here: https://devtrium.com/posts/dependency-arrays

answered Oct 7, 2022 at 12:15

Tehila

1,1227 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3352042 Over a year ago

this current component gets the parameters (variables) required for the fetch in my contextHook it has the default values to run on load, and this Component also has a child component that can change the parameters to fetch again. does my flow make sense?

Tehila Over a year ago

I'm not talking about how your flow is working here but simply about a Rule in react useEffect - All your external functions that you call inside this useEffect should be included in the dependency array. You asked why you see this warning, so I'm telling you that's just how React works.

user3352042 Over a year ago

Thank you! I now have better understanding, bolding it out really made the difference as I had to read it thrice haha. thank you! I've fixed it by moving the function and the variables in the useEffect and added the dependencies required

Tehila Over a year ago

Happy it helped! And an important note: When you include functions in a dependency array, you will need to wrap those functions with useCallback. If you won't like to do that, then you can remove them from the dependency array and ignore the wraning you get. I sometimes ignore it too, but I think it would be better if you do add them and you should wrap the functions you add with useCallback. Read more about it here: infinitypaul.medium.com/…

Prabadhya Upadhyay · Accepted Answer · 2022-10-07 12:47:14Z

If your functions or methods are going to be called only for one time then it's better to declare and invoke the function in the same useEffect hook.

For Example:-

 useEffect(() => { const options = { weekday: "long", year: "numeric", month: "long", day: "numeric", }; const getCurrentDate = () => { let date = new Date(); setDate(date.toLocaleDateString("en-us", options)); }; getCurrentDate(); }, []);

As the above code shows try to include the functions or methods inside your useEffect hook or else if you want to try to add some dependency which can be variable that when that changes your useEffect will trigger again.

Collectives™ on Stack Overflow

React Proper useEffect dependencies

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related