vercel-react-best-practiceslisted

# Vercel React Best Practices Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel Engineering. Contains rules across 8 categories, prioritized by impact to guide automated refactoring and code generation. ## Rule Categories by Priority | Priority | Category | Impact | Prefix | Focus | |:---|:---|:---|:---|:---| | 1 | Eliminating Waterfalls | CRITICAL | `async-` | Parallel fetches, deferred awaits, Suspense streaming | | 2 | Bundle Size Optimization | CRITICAL | `bundle-` | Direct imports over barrel files, dynamic imports, conditional loading | | 3 | Server-Side Performance | HIGH | `server-` | React.cache(), non-blocking after(), data minimization | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` | SWR / TanStack Query, optimistic UI, caching | | 5 | Re-render Optimization | MEDIUM | `rerender-` | Reference stability, context splitting, derived state | | 6 | Rendering Performance | MEDIUM | `rendering-` | Virtualization, content-visibility, memoization | | 7 | JavaScript Performance | LOW-MEDIUM | `js-` | Algorithmic efficiency, avoiding work in render | | 8 | Advanced Patterns | LOW | `advanced-` | Islands, partial hydration, micro-optimizations | --- ## 1. Eliminating Waterfalls (CRITICAL) ### `async-defer-await` Move `await` into the exact branches where the value is needed, not at the top of functions: ```typescript // ❌ WRONG: Blocks execution even if user branch is never hit async function handleRequest(