react-perf

React render perf audit

Most React perf advice is cargo cult. This skill only reports things with a plausible mechanism and a way to confirm.

Order of operations

Do not skip to memoisation. Work down this list; the earlier items are where real wins live.

1. Are you rendering too much data? A 5,000-row table with no virtualisation dwarfs every other cause. Look for unbounded .map() over server data, missing pagination, and lists without windowing.

2. Is the work in the wrong place? Expensive computation in a component body that runs on every parent render, when it could be computed once at the data layer, on the server, or in the query's select.

3. Is state too high in the tree? State in a common ancestor forces siblings to re-render. Moving it down, or splitting a context, removes the render instead of memoising it. Prefer this over memo.

4. Is a context value unstable? A provider whose value is a fresh object every render re-renders every consumer, and memo on consumers won't help. useMemo the value; that's referential stability, a real reason.

5. Are effects causing extra render passes? State set in an effect means render → commit → set → render again. react-patterns covers this; derived-in-render removes the second pass entirely.

6. Only now: memoisation. And only with an answer to "what re-render does this prevent, and why does that render cost enough to matter?"

Reporting rules

For each finding, give:

• file:line
• The mechanism: what triggers the render, what re-renders as a result
• Estimated impact: how many components, how often
• The fix, in the house style
• How to confirm it: React DevTools Profiler flame chart, <Profiler> onRender timings, or a Performance panel recording

If you can't name the mechanism, don't report it. "This could be memoised" is not a finding.

Severity:

• Critical: unbounded render work, or a render loop
• Important: an unstable context or provider value, state too high causing wide re-renders
• Minor: a genuinely expensive computation that could be memoised