useMemo vs useCallback

Same machinery, different return value.

useMemo(() => compute(a, b), [a, b]);  // caches the result of compute()
useCallback((x) => fn(a, x), [a]);     // caches the function itself

useCallback(fn, d) is literally useMemo(() => fn, d). Two names so the intent is obvious at the call site.

Two reasons to use them.

1. Referential stability for memoized children.

React.memo skips re-rendering if props are shallow-equal. A new object/function each render breaks the bailout:

// Bad — Row.memo can never skip; new onClick every render
items.map(item => (
  <Row item={item} onClick={() => select(item.id)} />
))

// Good — stable handler
const onClick = useCallback((id) => select(id), [select]);
items.map(item => (
  <Row item={item} onClick={onClick} />
))

Same with values:

const config = useMemo(() => ({ theme, dense }), [theme, dense]);
<Header config={config} />

2. Genuinely expensive computations.

const sorted = useMemo(() => heavySort(items), [items]);

If items doesn't change, you skip the sort. Without useMemo, the sort runs every render — even when a sibling state triggered the render, not items.

Common misuse.

• Wrapping cheap computations in useMemo. The hook itself has overhead (creating the deps array, comparing it). For a one-line transform, it's a wash or a loss.
• Wrapping callbacks in useCallback when nothing memoized consumes them.
• Passing primitives — useMemo(() => 42, []) is silly; primitives are already referentially equal.
• Trusting memoization to fix a state-in-the-wrong-place problem. Lift state down instead.

The dep-array footgun.

ESLint's react-hooks/exhaustive-deps rule will tell you. Listen to it. Disabling it because "I know what I'm doing" is the source of 80% of stale-closure bugs in production:

// Bug — onClick captures the initial value of count forever
const onClick = useCallback(() => {
  console.log(count); // stale
}, []); // missing dep: count

The React Compiler changes the rules (React 19+).

In compiler-on codebases, you mostly don't write these hooks anymore. The compiler analyses your component, infers stability needs, and auto-memoizes. Manual hooks are reserved for:

• Genuinely heavy computations the compiler can't see is heavy.
• Cases outside the compiler's analysis scope (interop with non-compiled code).

The "memoize every callback to be safe" reflex is now actively unhelpful — it adds noise and can interact badly with the compiler.

Senior cheat sheet.

Quick disambiguation in interviews. "useMemo memoizes values, useCallback memoizes functions, useCallback is shorthand for useMemo wrapping a function literal." If they ask for use cases, name the memoized child / referential equality pattern first — that's the right answer for ~80% of real usage.