React Hook useEffect has a missing dependency: 'list'
Solution 1:
Inside your useEffect you are logging list
:
console.log(list);
So you either need to remove the above line, or add list
to the useEffect dependencies at the end.
so change this line
}, [term]);
to
}, [term, list]);
Solution 2:
You can disable the lint warning by writing:
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [term]);
Solution 3:
You can disable this by inserting a comment
// eslint-disable-next-line
Solution 4:
The dependency array
- it's the second optional parameter in the useEffect
function. React will recall function defined in the first parameter of useEffect
function if parameters inside dependency array
will changed from the previous render.
Then you doesn't need to place list
variable inside dependency array
.
useEffect(() => {
// do some
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [term]);
Solution 5:
This warning comes beacuse you have a state 'list' being used inside useEffect. So react warns you that 'list' is not added to dependency so any changes to 'list' state won't trigger this effect to run again.
You can find more help here