useMemo vs useCallback — what's the difference and when do you actually need them?
Quick answer
useMemo caches a computed value; useCallback caches a function. Use them to keep references stable for React.memo children or effect deps, or to avoid heavy recomputation.
In detail
useMemo(fn, deps) returns a memoized value, recomputed only when deps change. useCallback(fn, deps) returns a memoized function (it's useMemo(() => fn, deps)). Their real job is referential stability: keeping props stable so a memoized child doesn't re-render, or stabilising a dependency so an effect doesn't re-run. They cost memory and a deps comparison, so don't apply them everywhere — only where they measurably help.
const total = useMemo(() => items.reduce((s,i)=>s+i.price,0), [items]);
const onSelect = useCallback(id => setSel(id), []);
// useCallback(fn, d) === useMemo(() => fn, d)⚠️Don't over-memoize
Without React.memo or an effect dependency, these usually add cost, not speed.
Why interviewers ask this: A core performance question that separates levels.
Common follow-up questions
- →Does useMemo guarantee the value is cached?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399