react-hooks/exhaustive-deps warning

Question

I use react hook useEffect like the following code for fetching data and changing state in it. For avoiding the infinite loop I add an empty array as the second parameter of the useEffect and I get this warning. Do I just ignore it or I have to fix it? If so, how can fix it? I just want the componentDidMount effect here. I appreciate any idea?

useEffect(() => {
 fetch('/login')
 .then(response => {
   if (response.ok) fetchAll() 
   else setLoading({ ...loading, signin: true, progress:false });     
 }).catch(() =>{
   setLoading({ ...loading, signin: true, progress:false });
 })
},[]);

What is a warning of you get? Can you provide all code to replicate? — Piotr Żak, Jan 14 '20 at 19:02
Maybe this is useful: https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook — norbitrial, Jan 14 '20 at 19:12
This is what I get `React Hook useEffect has missing dependencies: 'fetchAll' and 'loading'. Either include them or remove the dependency array. You can also do a functional update 'setLoading(l => ...)' if you only need 'loading' in the 'setLoading' call react-hooks/exhaustive-deps` @PiotrŻak — F-Fardin, Jan 14 '20 at 19:33
It causes an infinite loop if I pass the missing dependencies to the array — F-Fardin, Jan 14 '20 at 19:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205963/discussion-between-piotr-zak-and-fardin2689). — Piotr Żak, Jan 14 '20 at 19:55

score 0 · Answer 1 · answered Feb 18 '22 at 04:47

try this, this should fix the warning

useEffect(() => {
 fetch('/login')
 .then(response => {
   if (response.ok) fetchAll() 
   else setLoading(loading => ({ ...loading, signin: true, progress:false }));     
 }).catch(() =>{
   setLoading(loading => ({ ...loading, signin: true, progress:false }));
 })
},[]);

react-hooks/exhaustive-deps warning

1 Answers1