Hook · Memoization
useMemo
Cache the computation
useMemo stores the result of a computation and reuses it while its dependencies haven't changed. It's a performance tool, not a correctness one — use it when you measure it's worth it.
When it matters
For genuinely expensive calculations (transforming large lists, parsing, sorting) or to maintain referential identity of objects/arrays passed to memoized children or other hooks' dependencies.
When it's noise
For simple functions, primitive values, or calculations that React resolves faster than the dependency comparison itself. Memoization has a cost: comparing deps, retaining references in memory.
Common pitfalls
- 01useMemo is not free: it adds memory and comparison overhead. Don't use it for cheap calculations.
- 02If you forget a dependency, you'll get stale cached values — React won't warn you.
- 03useMemo alone doesn't prevent child re-renders — you also need React.memo on the child.
Was this helpful?
Sign in to give feedback