Memoization is not free
Caching a computed value or component output trades memory and comparison cost for skipped work. When the skipped work is cheap, the bookkeeping can be a net loss.
- The cache stores inputs and results, using memory.
- Every call compares inputs, which itself costs time.
- Memoizing a one line calculation rarely pays off.
The unstable key trap
Memoization keys on referential equality of its dependencies. If a dependency is recreated every render, the cache never hits.
- An inline object or array literal is a new reference each render.
- An inline function passed as a dependency defeats the cache.
- A child wrapped in a memo helper still re renders if it gets a fresh callback prop.
The fix is to stabilize the references first, by memoizing the callback or hoisting the constant, so the dependency stays the same across renders.
Knowing when to skip
Profile before memoizing. Premature memoization adds complexity and can mislead readers into thinking a value is expensive. Reserve it for genuinely heavy computations or for breaking real re render cascades, confirmed by measurement.
Key idea
Memoization only helps when dependencies are stable and the work is genuinely heavy, so stabilize references and profile before reaching for it.