Performance is a feature on my team, and "make it faster" prompts just sprinkled useMemo everywhere, including on primitives, which made the code worse and slower to read for zero gain.
I reframed it as an audit with a strict output format: identify the specific components that re-render unnecessarily, prove why with the actual cause, and only then propose the minimal fix, explicitly forbidding blanket memoization. It found a context value being recreated every render that was nuking a whole subtree.
What metrics do you feed the model so it prioritizes the renders that actually cost frames?
Audit this React app for wasted re-renders. Do not rewrite everything; produce a prioritized report.
For EACH problem you find, output a row with: component name, the trigger (what state/prop/context changed), the ROOT CAUSE (e.g. new object/array/function identity each render, context value recreated, unstable key, parent re-render cascading down), estimated blast radius (how many descendants re-render), and the minimal fix.
RULES:
- Do NOT propose useMemo/useCallback on primitives or on values that are cheap and stable. Memoization must be justified by a concrete identity-instability cause, not applied by reflex.
- Prefer structural fixes (move state down, split context, lift a stable value out of render) over memo band-aids. Only reach for React.memo when the props are genuinely stable and the component is genuinely expensive.
- Flag any context whose value is a fresh object each render as high priority.
- Rank the findings by blast radius * render frequency, worst first.
End with a 'do not touch' list: things that look inefficient but aren't worth optimizing, and why. Strict TypeScript throughout.