Memoization
Remembering a calculation's result and reusing it while its inputs stay the same, instead of doing the work every render.
See it
What it is
Memoization remembers the result of a computation for a particular set of inputs and reuses it when those inputs appear again. In React, useMemo caches a value between renders, useCallback caches a function identity, and memo can skip a child render when its props compare equal.
Reach for it after measurement shows repeated work is expensive, or when stable identity lets an already-memoized child avoid work. Good candidates include filtering a large list or building a costly derived data structure. Cheap arithmetic and tiny arrays usually cost less than the cache machinery and added complexity.
Gotcha: memoization is a performance hint, not a correctness tool. A missing dependency returns stale data; a fresh object dependency invalidates the cache every render; and the runtime may discard cached values. Write correct code without the cache first, profile it, then memoize the measured hot path. The React Compiler exists to insert these memoizations for you, which is a good sign that hand-placing them everywhere was never the goal.
Ask AI for it
Profile this React component with React DevTools Profiler, then wrap only the measured expensive filter-and-sort calculation in useMemo. List every reactive input in the dependency array, move disposable object creation inside the calculation, and leave cheap calculations uncached. If a memoized child needs a stable callback, use useCallback and compare profiler timings before and after.