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.