how to: 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:

A functional component wrapped inside React.memo() accepts a function object prop
When the function object is a dependency to other hooks, e.g. useEffect(..., [callback])
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!');
  }, []);

  // ...
}

how to: useCallback

Comments

More from this blog

React Hooks: useLayoutEffect

6 Tips To Achieve Your Goal

How to Deploy Your App to Netlify

5 Ways To Host Your Applications

Array methods that you should know

1. useCallback

2. Purpose of useCallback

3. Links

Command Palette

Comments

More from this blog

1. useCallback

2. Purpose of useCallback

3. Links