dev-react-perf

React Performance (pointer + gaps)

If the vercel-react-best-practices skill is installed, invoke it now (Skill tool) and apply its rules first. Either way, check these before anything else — the first two are the vendor's CRITICAL categories, the last three the re-render traps this foundation sees most:

1. Request waterfalls (vendor, CRITICAL) — independent requests awaited one after another: start them together (Promise.all), await late, stream with Suspense.
2. Bundle size (vendor, CRITICAL) — whole-library or barrel imports (import { x } from 'lodash'): import the path; load rarely used heavy UI (modals, charts, editors) with lazy() / next/dynamic.
3. Derived state (vendor, re-render category) — never copy props into state through useEffect + setState: compute during render, useMemo if expensive.
4. Memo that cannot work (foundation) — a memo child receiving inline arrows or inline objects re-renders anyway: pass stable callbacks and hoisted constants.
5. Context values (foundation) — a provider value={{ ... }} built on every render re-renders every consumer: memoize it or split the context.

With the React Compiler enabled, items 4 and 5 are handled for you: it memoizes components and values itself (the vendor skill says the same of memo/useMemo).

Vercel Engineering publishes the canonical rule set at vercel-labs/agent-skills/skills/react-best-practices (MIT): 70 rules in 8 categories ranked by impact, starting with the two CRITICAL ones — eliminating request waterfalls and bundle size — then server/client data fetching, re-renders, rendering and JS micro-optimizations. Its companion composition-patterns covers compound components and boolean-prop explosion.

Why a pointer: the vendor maintains its rules with each React and Next.js release; this skill's former 211-line version had gone stale (FID, retired in 2024; a react-window API removed in v2). Measurements behind this change: eval/skill-triggering/FINDINGS.md.