useMemo vs useCallback: What's the Difference?
They look similar and confuse a lot of developers in interviews. Here's the difference in one line, then the details.
The one-line answer
useMemo caches a VALUE; useCallback caches a FUNCTION. In fact useCallback(fn, deps) is just useMemo(() => fn, deps).
When each actually helps
Both exist for referential stability, not raw speed. Use them to keep a prop stable so a React.memo child doesn't re-render, or to stabilise an effect dependency. useMemo also helps for genuinely expensive computations.
// value
const sorted = useMemo(() => list.slice().sort(cmp), [list]);
// function
const onClick = useCallback(() => pick(id), [id]);When NOT to use them
Wrapping every value/function adds memory and a deps comparison for no benefit. If there's no memoized child and no effect dependency and the computation is cheap, skip them.
Master React performance in the React Kit
Memoization, re-renders, React.memo and profiling — explained with interview context in the React Interview Kit.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- Does useCallback improve performance on its own?
- No. Without a React.memo child or an effect that depends on the function, useCallback usually adds cost rather than saving it.