Hook · Function memoization
useCallback
A stable function
useCallback is useMemo for functions. It returns the same reference while its dependencies haven't changed — useful when the function travels to a memoized child or is included in another hook's deps.
When it helps
When you pass a callback to a component wrapped in memo(), or when the function is a dependency of a useEffect and you don't want the effect to restart on every render.
Without a consumer, it's ceremony
Wrapping every function in useCallback doesn't speed anything up on its own. It only matters when someone downstream benefits from the reference being stable.
Common pitfalls
- 01useCallback without React.memo on the consumer has no effect on renders.
- 02Omitting a dependency causes the callback to close over a stale value.
- 03Every function 'stabilized' with useCallback adds cognitive overhead. Measure before adding it.
Was this helpful?
Sign in to give feedback