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