Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Memoize useDispatch?

See original GitHub issue

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' }),

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

markeriksoncommented, Jun 29, 2020

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.

markeriksoncommented, Nov 21, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Use Reselect or a similar library to create a memoized selector that returns multiple values in one object, but only returns a new...
Read more >
How to memoize useSelector() with createSelector()?
I wish to explain the memoization on a Redux store on my programming website. ... import { useSelector, useDispatch } from "react-redux"; ...
Read more >
Redux Hooks in React: An Introduction | by Ross Bulat | Medium
The useDispatch hook is a reference to Redux's dispatch() method, for dispatching actions. Dispatch functions can also be memoized with React's ...
Read more >
Hooks API Reference
Returns a memoized callback. Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that...
Read more >
React re-reselect: Better memoization and cache ...
import React from 'react'; import {useSelector, useDispatch} from 'react-redux'; //Single todo item component const TodoItem = (props) => { ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found