Caching across renders
Memoization caches a result so React can reuse it instead of recomputing on every render. React offers three tools that work together.
The three tools
- useMemo caches the result of an expensive calculation between renders, recomputing only when its dependencies change.
- useCallback caches a function identity so child components do not see a new prop every render.
- memo wraps a component so it skips re rendering when its props are unchanged by shallow comparison.
Why identity matters
A child wrapped in memo still re renders if it receives a new object or function prop each time, because the comparison is by reference. That is why useCallback and useMemo pair with memo to keep prop identities stable.
Do not over use it
Memoization has a cost: storing values and comparing dependencies. For cheap work it can be slower than just recomputing. Profile first and apply it where it pays off.
Key idea
useMemo caches values, useCallback caches function identity, and memo skips renders when props are unchanged, but apply them only where profiling shows a real win.