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.