Performance and Memoization
Measure before you optimise. Most React slowness comes from rendering more than needed, and the best fixes are usually structural (move state down, lift content up, split contexts) rather than memo everywhere.
Key points
- 1
A component re-renders when its state changes, its parent re-renders, or a context it reads changes. React.memo only skips renders caused by a parent re-rendering with identical props.
- 2
memo, useMemo and useCallback compare with Object.is. Inline objects, arrays, functions and JSX children are new on every render and defeat memoization unless stabilised.
- 3
Move fast-changing state into the smallest component that needs it, and pass expensive subtrees as children so they are created by a component that does not re-render.
- 4
Every consumer of a context re-renders when its value changes, memoized or not. Memoize provider values, split unrelated data into separate contexts, or use useSyncExternalStore selectors for field-level subscriptions.
- 5
The React Compiler memoizes components, values and callbacks automatically, but it relies on the Rules of React (pure render, no mutation) and can't avoid work when inputs really change.
- 6
Virtualize long lists, code-split rarely used screens with React.lazy (declared at module level), and use transitions or useDeferredValue with a memoized slow child to keep input responsive.
- 7
Profile production builds. Development React adds checks and Strict Mode double rendering, so dev timings and render counts are inflated.
Common traps
Declaring a component or a React.lazy call inside another component creates a new type on every render, which remounts the subtree and resets its state.
useDeferredValue does nothing for a slow child that is not wrapped in memo, because the child still renders during the urgent pass.
A memo comparator that returns true too eagerly causes stale UI, and a useCallback whose dependency changes every render gives no stability at all.
Read the source
Test yourself on Performance and Memoization
Ten questions, with the answer and explanation after each one.