Hooksintermediate
useCallback for Stable Function References
Learn how useCallback memoizes a function reference across renders to avoid unnecessary child re-renders or effect reruns.
useCallback(fn, deps) returns a memoized version of fn that only changes identity when one of the values in deps changes. Functionally it's a thin wrapper around useMemo that memoizes a function instead of an arbitrary value — useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
useCallback is like reusing the same laminated instruction card instead of printing a brand new one every time you hand it to someone — as long as the instructions haven't changed, the recipient (a memoized child, or an effect) can recognize it's the same card and skip re-reading it.
Key Concepts
1
Without useCallback, a function defined inside a component body is recreated as a brand-new reference on every render. That's usually harmless, but it becomes a problem when that function is passed as a prop to a child wrapped in React.memo, since React.memo's shallow prop comparison sees a 'new' function prop every time and re-renders the child anyway, defeating the memoization.
useCallbackReact.memo
2
useCallback is also important when a function is used inside another hook's dependency array, such as useEffect. Without stabilizing the function reference, the effect would re-run on every render because the function 'changed' by reference each time, even if its logic is identical.
useCallbackuseEffect
3
Interviewers commonly pair this topic with React.memo, expecting candidates to explain that useCallback alone does nothing for performance unless paired with something downstream that cares about referential equality — it doesn't make the function itself execute faster.
React.memouseCallback