React: Eslint plugin for Hooks gives warning about dispatch in dependencies

[paulrberg]

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

If I don't include dispatch in the dependency list of a useCallback hook, I get this warning:

React Hook useCallback has a missing dependency: 'dispatch'. Either include it or remove the dependency array.eslint(react-hooks/exhaustive-deps)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

See line 50 in Application.js: https://codesandbox.io/s/competent-bash-47zt1

What is the expected behavior?

There should be no warning, as per the React docs:

React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• dbaeumer.[email protected]
• [email protected]

[aweary]

@PaulRBerg the sandbox you linked doesn't have an Application.js file, can you update it so it reproduces the issue you're describing?

As far as I know the linter doesn't warn about dispatch as long as it can tell that it was returned from useReducer. So if you're returning dispatch from another hook that wraps useReducer the linter doesn't know that the dispatch returned is the same dispatch that useReducer returns.

[paulrberg]

Application.js is in there, in the contexts folder.

I see, so then that's the issue. The said dispatch is the 2nd element of an array returned by useContext, hence why the linter can't know whether the original dispatch comes from useReducer.

Would it make sense for the linter to check to not throw warnings for any functions named dispatch? One shouldn't really use this name for other purposes in a Hook-powered app.

[aweary]

Would it make sense for the linter to check to not throw warnings for any functions named dispatch? One shouldn't really use this name for other purposes in a Hook-powered app.

While it might be convention to use dispatch only with useReducer, there's nothing that enforces this. It's best to just add it to the dependency array.

[avindra]

Is there a way to get the rule to understand which dependencies have stable identities?

dispatch is quite a common one due to the popularity of react-redux... and I'm sure others in this thread are seeing dozens of warnings about missing dispatch which is just plain wrong since it has a stable identity.