Memoization
An optimization technique that speeds up programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.
Detailed Explanation
In React, memoization is used via hooks like `useMemo` and `useCallback` to prevent unnecessary re-renders or expensive calculations. It is a specific form of caching applied to function return values. While it improves performance for heavy logic, it adds memory overhead, so it should be used strategically rather than globally.
Quick Summary
Memoization caches a function's output keyed by its arguments so repeated calls with the same input return instantly. It trades memory for CPU and only pays off when the function is pure and called repeatedly with recurring inputs.
Key Takeaways
- The function must be pure, same inputs always produce the same output, with no side effects, or the cache will return stale results.
- Cache keys are typically derived from arguments by reference (===) or by serialization; choose based on whether your inputs are primitives or objects.
- React's useMemo and useCallback memoize between renders of the same component, not across the whole app.
- Memoization is wasted when the function is cheap, when inputs rarely repeat, or when comparing inputs costs more than recomputing.
- Unbounded caches leak memory; production code usually uses LRU or WeakMap-based stores.
When to use it
- Avoiding re-running expensive selectors or derived data in Redux, Zustand, or React render paths.
- Caching pure CPU-heavy computations like Fibonacci, parsing, or formatting.
- Stabilizing object/function identity so React.memo and useEffect dependency arrays do not over-fire.
- Server-side: caching the result of a deterministic database transformation within a request.
Common Mistakes
- Wrapping every function in useMemo "just in case", the bookkeeping often costs more than the function it protects.
- Memoizing impure functions (those that read external state or have side effects), which silently returns wrong data.
- Forgetting that useCallback's dependency array drives correctness, stale closures are the #1 memoization bug.
- Using deep-equality keys (JSON.stringify) on large objects, which makes the cache lookup slower than the work it skips.
Memoization, Frequently Asked
Is memoization the same as caching?
Memoization is a specific kind of caching: it caches function return values keyed by arguments. General caching can cover network responses, rendered HTML, database rows, or any computed value with any key strategy.
Why does useMemo not always make my React app faster?
useMemo runs an equality check on its dependencies every render. If the dependencies change frequently or the underlying computation is cheap, you pay the comparison cost and still recompute, net negative. Profile before adding it.
When should I prefer useCallback over useMemo?
useCallback memoizes a function reference; useMemo memoizes any value (including the result of calling a function). Use useCallback when you need stable function identity for child components or effect dependencies; useMemo when you need to cache a computed value.