Memoize useDispatch?

The docs say

When passing a callback using dispatch to a child component, it is recommended to memoize it with useCallback, since otherwise child components may render unnecessarily due to the changed reference.

with the example code being

  const dispatch = useDispatch()
  const incrementCounter = useCallback(
    () => dispatch({ type: 'increment-counter' }),
    [dispatch]
  )

I think this could use some clarification. I am understanding it to not be specific to useDispatch, and to just be the classic react thing of don’t pass anonymous functions to children since they are different every render.

If that is the case, it would probably be worth highlighting that it’s not specific to useDispatch. If I am misunderstanding, then is there any reason that react-redux can’t export some helper that calls useCallback for you? I imagine most people would not realize they need to do this.

[markerikson]

const dispatch = useDispatch() creates a new dispatch instance every time

This statement is incorrect.

The implementation is just:

const useDispatch = () => {
  const store = useStore();
  return store.dispatch;
}

You typically only have one Redux store instance for the lifetime of the app, so dispatch will be the same function reference the entire time. (In fact, in earlier versions of React-Redux, passing a new store reference was forbidden. We do now support changing it at runtime, but realistically you probably won’t do that.)

However, the ESLint rule doesn’t know that - it just knows that dispatch isn’t a built-in React hook return value, so it might change, and therefore it tells you it should be added to the dependencies array just in case it ever does change.

[markerikson]

I agree that it’s not necessary for a <button>, but the point was to illustrate the use of useCallback() with useDispatch(). If you feel that a different example would illustrate the point better, please file a PR to improve the docs.