Most React performance advice online optimizes things that were never the bottleneck. Before reaching for memoization, measure — the slow part is rarely where you expect.
Measure first, always
Use the React Profiler and browser performance tools to find what's actually slow. A component that re-renders often but renders cheaply is not a problem. A component that renders rarely but does expensive work on each render is.
The 80/20 of React perf
Ship less JavaScript, render less at once, and avoid expensive work in render. These three fix the vast majority of real performance problems.
Render less
- Virtualize long lists instead of rendering thousands of nodes
- Code-split routes so each page ships only what it needs
- Defer non-critical work below the fold
When memoization helps
ExpensiveList.tsx
const rows = useMemo(
() => data.map(expensiveTransform),
[data],
);
// Memoize the child only when its props are stable
const Row = memo(function Row({ item }: { item: Item }) {
return <li>{item.label}</li>;
});Reach for memo and useMemo to protect genuinely expensive computations or to stabilize props for an expensive child — not as a reflex on every component.
