Three tools, one purpose: skip work that doesn't need to happen.

React.memo — skip a child re-render

const Row = memo(function Row({ item }: { item: Item }) {
  return <div>{item.name}</div>;
});

When the parent re-renders, React checks if Row's props are referentially equal to last time. If so, skips the render entirely.

Default equality is shallow (Object.is per prop). Custom compare:

memo(Row, (prev, next) => prev.item.id === next.item.id);

useMemo — cache a computed value

const sorted = useMemo(
  () => items.slice().sort(expensiveCompare),
  [items],
);

The function re-runs only when items changes. Two purposes:

1. Skip expensive computation.
2. Keep referential equality for downstream memoization.

useCallback — cache a function identity

const onClick = useCallback(() => doThing(id), [id]);

Sugar for useMemo(() => fn, deps). The function reference is stable as long as deps don't change. Useful when:

• The function is passed to a React.memo'd child.
• The function is used in another hook's deps.

Combined usage

function List({ items }: { items: Item[] }) {
  const onSelect = useCallback((id: string) => {
    console.log(id);
  }, []);

  return (
    <ul>
      {items.map(item => (
        <Row key={item.id} item={item} onSelect={onSelect} />
      ))}
    </ul>
  );
}

const Row = memo(function Row({ item, onSelect }: Props) {
  return <li onClick={() => onSelect(item.id)}>{item.name}</li>;
});

When the parent re-renders for some unrelated reason:

• onSelect is stable (useCallback).
• item is the same reference if the array hasn't changed.
• memo skips Row's render.

Why all three are usually needed together

memo on the child is useless if the parent passes a new function each render:

<Row item={item} onSelect={() => doStuff(item.id)} />

New function each render → props look 'changed' → memo bails. useCallback fixes it.

Same with inline objects:

<Row item={item} style={{ color: 'red' }} />  // new object each render

When NOT to use

• The component is cheap (< 1ms render).
• Props are objects/arrays you don't memoize → memo is useless anyway.
• The memoization overhead exceeds the saved work.

The React docs explicitly say: 'don't memoize everything; measure first'.

Compiler

React 19's compiler (formerly 'forget') memoizes automatically — useMemo/useCallback become opt-out rather than opt-in. Until then, manual.

Profile to verify

React DevTools → Profiler:

1. Record an interaction.
2. Check render counts per component.
3. If memo'd components still render, inspect their props for unstable references.

Cost model

• useMemo / useCallback / memo all add a small bookkeeping cost (dep array compare + closure allocation).
• For cheap renders, the bookkeeping costs more than the saved work.
• For expensive renders (large trees, heavy computation), the savings dominate.

Senior framing

The triplet only pays when the child's render is genuinely expensive OR when memoized referential identity propagates downstream. Without profiling, most uses are speculative — they protect against re-renders that wouldn't have cost anything.