Understanding the React Hooks 'exhaustive-deps' lint rule

Question

I\'m having a hard time understanding the \'exhaustive-deps\' lint rule.

I already read this post and this post but I could not find an answer.

Here is a simpl

Answer 1

The main purpose of the exhaustive-deps warning is to prevent the developers from missing dependencies inside their effect and lost some behavior.

Dan abramov – developer on Facebook core – strongly recommend to keep that rule enabled.

For the case of passing functions as dependencies, there is a dedicated chapter in the React FAQ:

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

tl;dr

If you have to put a function inside your dependencies array:

• Put the function outside of your component, so you are sure that the reference won't be changed on each render.
• If you can, call the function outside of your effect, and just use the result as dependency.
• If the function must be declared in your component scope, you have to memoize the function reference by using the useCallback hook. The reference will be changed only if the dependencies of the callback function change.