Sometimes, we want to fix missing dependency warning when using useEffect React Hook.
In this article, we’ll look at how to fix missing dependency warning when using useEffect React Hook.
How to fix missing dependency warning when using useEffect React Hook?
To fix missing dependency warning when using useEffect React Hook, we should make sure we include any variables that are used in the useEffect callback that are states, props or functions in components.
For instance, we write
const Component = () => {
/*...*/
const fetchBusinesses = async () => {
const res = await fetch("/api/businesses/");
//...
};
useEffect(() => {
fetchBusinesses();
}, [fetchBusinesses]);
/*...*/
};
to call useEffect with a callback that calls the fetchBusinesses function.
Since fetchBusinesses is a function in the Component component, we should include it in the array in the 2nd argument since it can change with states or props inside the function.
Conclusion
To fix missing dependency warning when using useEffect React Hook, we should make sure we include any variables that are used in the useEffect callback that are states, props or functions in components.
