intermediate

Memoization

Use React.memo, useMemo, and useCallback when identity stability reduces more work than it adds.

`React.memo` skips rerender when props are shallow-equal. Pair with `useMemo` and `useCallback` only when children or effects depend on referential stability. Memo has comparison cost and can mask missing dependency bugs.

Default to clarity; add memo when profiler shows hot child rerenders with unchanged props. Custom comparators are rare and easy to get wrong.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

  • Memo children with expensive render trees.
  • Stabilize callbacks passed to memoized children.
  • Verify with profiler, not assumptions.