react-performance-auditlisted

# React Performance Audit Performance work goes wrong in two directions: optimizing what was never slow, and sprinkling `useMemo` until the code is unreadable and no faster. This skill enforces the measure → diagnose → fix → verify loop, and refuses to skip the first step. ## Step 0 — Establish what "slow" means here Before reading any code, get the symptom and the number. Ask which of these it is, because each has a different root cause family: - **Slow initial load** → bundle size, server response, render-blocking resources → LCP - **Slow interaction / laggy typing** → re-render cost, long tasks on the main thread → INP - **Layout shifting while loading** → missing dimensions, late-injected content → CLS - **Slow list scrolling** → per-row render cost, missing virtualization - **Slow navigation between routes** → unsplit bundles, waterfall data fetching If the user has no measurement, provide one before diagnosing: a Lighthouse run, a React DevTools Profiler recording, or `npx source-map-explorer` on the build output. An audit without a baseline cannot demonstrate improvement and usually optimizes the wrong thing. ## Step 1 — Static scan Run the bundled scanner over the source to collect candidate issues fast: ```bash node scripts/perf_scan.mjs <src-dir> ``` It flags high-signal patterns: inline object and arrow props passed to memoized children, array index keys, `useEffect` with a missing or over-broad dependency array, state that should be derived, context value