What they do
useMemo caches the result of a computation between renders, recomputing only when its dependencies change. useCallback does the same for a function reference, keeping it stable across renders.
When they help
- A genuinely expensive calculation that runs on every render.
- A function or value passed to a memoized child whose identity would otherwise change each render and force a re render.
- Stabilizing a dependency of another hook like useEffect.
The dependency array
Both take a dependency array. If you list dependencies wrong, you get stale values or miss updates. If you omit the array, the cache is useless because it recomputes every time.
The cost
Memoization is not free. It stores values and compares dependencies on every render. For cheap computations the overhead can exceed the savings, so reach for these tools only when profiling shows a real cost.
Key idea
useMemo caches values and useCallback caches functions by dependencies, but only apply them where a measured cost or referential stability actually matters.