intermediate
useMemo
Memoize expensive derived values when dependency tracking is cheaper than recalculation.
`useMemo` caches the result of a calculation between renders when dependencies are unchanged. Use it when profiling shows repeated heavy work — filtering thousands of rows, building lookup maps, or stabilizing object identity passed to memoized children.
It is not a semantic guarantee of freshness; dependencies must be correct. Empty or wrong deps cause stale data bugs worse than no memo. `useMemo` does not prevent child rerenders by itself unless combined with referential equality benefits downstream.
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:
- Profile before memoizing.
- Keep dependency arrays honest.
- Prefer simple render math when cost is low.