How to fix missing dependency warning when using useEffect React Hook?

Question

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request

./src/components/Bu         


        

Answer 1

Actually the warnings are very useful when you develop with hooks. but in some cases, it can needle you. especially when you do not need to listen for dependencies change.

If you don't want to put fetchBusinesses inside the hook's dependencies, you can simply pass it as an argument to the hook's callback and set the main fetchBusinesses as the default value for it like this

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

It's not best practice but it could be useful in some cases.

Also as Shubnam wrote, you can add below code to tell ESLint to ignore the checking for your hook.

// eslint-disable-next-line react-hooks/exhaustive-deps