useMemo, useCallback & React.memo
Memoization can avoid repeated work or preserve referential identity, but it is not a default requirement. First make the code correct; then profile actual bottlenecks.
useMemo caches a calculated value. useCallback caches a function identity. React.memo can skip rendering a component when its props are considered equal. These techniques work together when a stable prop identity enables a child to skip expensive work.
Memoization can also make code harder to understand and consume memory. A memoized computation that is cheaper than maintaining the cache is often a net loss.
Memoizing expensive derived data
const visibleProducts = useMemo(
() => products.filter(p => matches(p, query)),
[products, query]
);💡 Memoization is appropriate when filtering is measurably expensive or when stable identity matters to downstream memoized components.
Key Takeaways
- Memoization is an optimization, not a correctness mechanism.
- Profile before adding complex memoization.
- Stable identity matters when consumers compare references.