React Performance: Profile, Then Optimize the Right Render
Find real React performance problems with production profiling, component timing, stable data flow, code splitting, and realistic validation.
An extra render is not automatically a performance bug. React components often render quickly, and avoiding every render can add complexity without producing a noticeable improvement. Start with an interaction that users can actually feel.
Profile a production build and identify which commit is slow. Determine whether the cost comes from rendering many components, expensive calculations, layout work, a large list, or an unrelated network delay. The profiler should guide the investigation rather than confirm a guess.
Keep data flow stable where it matters. Avoid recreating large transformed collections on every render, virtualize long lists, and split heavy routes or editors so they load only when needed. Memoization is useful when it avoids measured work and its dependencies remain understandable; applying it everywhere makes code harder to reason about.
Watch context providers that update broad portions of the tree and components that subscribe to more state than they display. Narrow subscriptions and focused boundaries can prevent unrelated updates from traveling through the interface.
After optimizing, repeat the same measurement and test the experience on ordinary hardware. A lower render count is not the final goal. Faster response, smoother scrolling, and a smaller initial workload are the outcomes that matter.
