react-performancelisted

<!-- last-verified: 2026-07 --> # React performance React perf is three problems, in priority order: **waterfalls** (work that should be parallel runs in a chain), **bundle** (shipping JS the user doesn't need yet), and **re-renders** (recomputing/repainting components that didn't change). Fix them in that order — a waterfall costs whole seconds, a stray `useMemo` costs microseconds. Field thresholds (INP/LCP/CLS) live in `core-web-vitals-for-ui`; this skill is the React-level *cause* layer under those metrics. For the exhaustive, rule-by-rule rewrite catalog (65+ rules across 8 categories, with before/after diffs), invoke **`vercel:react-best-practices`** — this skill is the decision layer that tells you which class of fix the symptom points to. ## 1. Eliminate waterfalls — CRITICAL A waterfall is sequential `await`s that don't depend on each other. This is the single most expensive mistake because each hop adds a full round-trip. - **Parallelize independent fetches.** Kick off everything that can start now, then await together — never `await a; await b` when `b` doesn't need `a`. ```tsx // waterfall: b waits for a for no reason const user = await getUser(id); const posts = await getPosts(id); // parallel const [user, posts] = await Promise.all([getUser(id), getPosts(id)]); ``` - **Only await at the point of use.** Start the promise early, pass it down, and `await` (or `use()`) it where the value is actually needed — don't block a whole component