React Performance Patterns

Scope note: the general MEASURE → IDENTIFY → FIX → VERIFY → GUARD loop, Core Web Vitals, bundle size, and query/N+1 work all live in warisskill-performance-optimization — don't re-litigate them here. This skill is only React's render model. The measure-first rule still applies: the profiler here is React DevTools Profiler, and memoization is not free, so don't add it blind.

The one mental model

React re-renders a component when its own state changes, its props change, or a context it consumes changes — and by default that re-renders the entire subtree below it. Almost all "React perf" work is one of two moves:

1. Don't do expensive work on every render (compute, allocate, sort).
2. Don't re-render a subtree that didn't actually change.

Everything below is an application of those two.