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!');
}, []);
// ...
}