Optimize React & Next.js Performance

Vercel React Best Practices is Vercel's own performance optimization guide for React and Next.js, containing 45 rules across 8 categories prioritized by impact, meant to guide automated refactoring and code generation. Each rule has a slug prefix by category and lives in its own file (rules/<slug>.md) with an explanation, an incorrect example, a correct example, and further context:

rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/_sections.md

A fully compiled version of every rule expanded lives in AGENTS.md.

Use it when writing new React components or Next.js pages, implementing client- or server-side data fetching, reviewing code for performance issues, refactoring existing React/Next.js code, or optimizing bundle size and load times. The two CRITICAL-priority categories come first: Eliminating Waterfalls (5 rules, async- prefix - e.g. async-parallel for Promise.all() on independent operations, async-suspense-boundaries for streaming with Suspense) and Bundle Size Optimization (5 rules, bundle- prefix - e.g. bundle-barrel-imports to import directly instead of through barrel files, bundle-dynamic-imports for next/dynamic on heavy components).

The remaining six categories descend in priority: Server-Side Performance (HIGH, 5 rules including server-cache-react for per-request deduplication via React.cache(), server-cache-lru for cross-request caching, and server-parallel-fetching), Client-Side Data Fetching (MEDIUM-HIGH, 2 rules including client-swr-dedup and deduplicating global event listeners), Re-render Optimization (MEDIUM, 7 rules including rerender-memo, rerender-transitions for startTransition, rerender-functional-setstate, and rerender-lazy-state-init for expensive useState initializers), Rendering Performance (MEDIUM, 7 rules including rendering-hoist-jsx, rendering-content-visibility for long lists, rendering-hydration-no-flicker, and rendering-conditional-render preferring ternaries over &&), JavaScript Performance (LOW-MEDIUM, 12 rules including js-index-maps, js-early-exit, js-hoist-regexp, js-tosorted-immutable, and js-set-map-lookups for O(1) lookups), and Advanced Patterns (LOW, 2 rules covering event-handler refs and a useLatest hook for stable callback references).

Designed to guide both human code review and automated refactoring/code-generation tooling, using the priority ordering (CRITICAL → HIGH → MEDIUM-HIGH → MEDIUM → LOW-MEDIUM → LOW) to decide which fixes matter most when time or tooling budget is limited. Each individual rule file documents why the rule matters, shows an incorrect code example with explanation, a corrected version with explanation, and links to additional context - giving both a quick lookup table and a deep-dive path per rule.

React and Next.js developers and code-generation tools that need a prioritized, example-backed performance rule set - from eliminating request waterfalls and bloated bundles down to micro-optimizations - rather than generic performance advice. Because every rule maps to a specific, greppable slug, the guide also works well as a shared vocabulary for code review comments and automated linting.