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
More in React
vercel-composition-patterns
Compound components, render props, and context patterns for scalable component APIs
vercel-labs/agent-skillsshadcn
shadcn/ui component usage, customization, and Tailwind integration
shadcn/uiwebapp-testing
Testing React apps: unit, integration, and end-to-end patterns
anthropics/skillstypescript-advanced-types
Discriminated unions, conditional types, template literals, and utility type patterns
wshobson/agentstailwind-design-system
Design system implementation with Tailwind: tokens, variants, and component patterns
wshobson/agents
More in Next.js
vercel-composition-patterns
Composable component architecture patterns for scalable Next.js apps
vercel-labs/agent-skillsnext-best-practices
File conventions, RSC boundaries, data patterns, async APIs, and metadata
vercel-labs/next-skillsdeploy-to-vercel
Deploy Next.js apps to Vercel with correct config and environment setup
vercel-labs/agent-skillsnext-cache-components
PPR, use cache directive, cacheLife, cacheTag, and revalidateTag
vercel-labs/next-skillsturborepo
Turborepo task pipelines, caching, remote cache, and CI configuration
vercel/turborepo