React Rendering Performance

A focused playbook for making React UIs feel instant. Measure first, then fix the dominant cost.

Measure before you optimize

• Use React DevTools Profiler: record an interaction, find components that render often or render long.
• Use the browser Performance panel: look for long tasks (>50ms), layout thrashing, and scripting spikes.
• Turn on "Highlight updates" in React DevTools to see what re-renders on each interaction.
• Don't memoize blindly — confirm the cost is real first.

The three causes of slow React

1. Rendering too often — a parent re-renders, cascading to children.
2. Rendering too much — large trees / long lists rendered at once.
3. Each render does too much work — heavy computation or allocation in render.

Fix: render less often