Profiling React Renders Without Guessing

Premature memo() is its own performance problem — it adds comparisons that often cost more than the render they prevent. Measure first.

Use the Profiler

The React DevTools Profiler shows you exactly what re-rendered and why. Record an interaction, look for the components that rendered but didn't need to, and fix those — not everything.

// Only memo the component the Profiler flagged as a hot, stable-prop re-render.
const Row = memo(function Row({ item }: { item: Item }) {
  return <li>{item.label}</li>;
});