React hooks: useCallback

1. useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

2. Purpose of useCallback

function MyComponent() {
  // handleClick is re-created on each render
  const handleClick = () => {
    console.log('Clicked!');
  };

  // ...
}

handleClick is a different function object on every rendering of MyComponent.

But in some cases you need to maintain a single function instance between renderings:

1. A functional component wrapped inside React.memo() accepts a function object prop
2. When the function object is a dependency to other hooks, e.g. useEffect(..., [callback])
3. When the function has some internal state, e.g. when the function is debounced or throttled.

That’s when useCallback(callbackFun, deps) is helpful: given the same dependency values deps, the hook returns (aka memoizes) the function instance between renderings:

import { useCallback } from 'react';

function MyComponent() {
  // handleClick is the same function object
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);

  // ...
}

3. Links

• Hooks API Reference - React

• Your Guide to React.useCallback()

• Memoization