react-best-practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. Reference these guidelines when: For detailed explanations and code examples, read the full compiled document: AGENTS.md Each rule contains: #React #Next.js #performance #optimization #vercel #waterfalls #bundle-size #RSC #frontend - 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 - async-defer-await - Move await into branches where actually used - async-parallel - Use Promise.all() for independent operations - async-dependencies - Use better-all for partial dependencies - async-api-routes - Start promises early, await late in API routes - async-suspense-boundaries - Use Suspense to stream content - bundle-barrel-imports - Import directly, avoid barrel files - bundle-dynamic-imports - Use next/dynamic for heavy components - bundle-defer-third-party - Load analytics/logging after hydration - bundle-conditional - Load modules only when feature is activated - bundle-preload - Preload on hover/focus for perceived speed - server-cache-react - Use React.cache() for per-request deduplication -...