vercel-react-best-practices

React and Next.js performance optimization across 70 rules prioritized by impact.

- Organized into 8 categories from critical (eliminating waterfalls, bundle optimization) to low priority (advanced patterns), each with specific, actionable rules prefixed for easy reference

- Covers server-side performance including React.cache() deduplication, parallel fetching, and serialization minimization

- Addresses client-side concerns: re-render optimization through memoization and dependency management, rendering performance with CSS strategies and hydration patterns

- Includes JavaScript-level optimizations like DOM batching, caching, and Set/Map lookups for O(1) performance

- Each rule includes detailed explanations, incorrect and correct code examples, and contextual guidance for automated refactoring and code generation

Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

- Writing new React components or Next.js pages

- Implementing data fetching (client or server-side)

- Reviewing code for performance issues

- Refactoring existing React/Next.js code

- Optimizing bundle size or load times

Rule Categories by Priority