Vercel React Best Practices
Quick reference for reviewing React code. For detailed rules with code examples, see RULES.md.
Rule Categories (by priority)
| Priority |
Category |
Impact |
| 1 |
Eliminating Waterfalls |
CRITICAL |
| 2 |
Bundle Size Optimization |
CRITICAL |
| 3 |
Server-Side Performance |
HIGH |
| 4 |
Client-Side Data Fetching |
MEDIUM-HIGH |
| 5 |
Re-render Optimization |
MEDIUM |
| 6 |
Rendering Performance |
MEDIUM |
| 7 |
JavaScript Performance |
LOW-MEDIUM |
| 8 |
Advanced Patterns |
LOW |
Critical Rules Summary
Eliminating Waterfalls
async-parallel - Use Promise.all() for independent operationsasync-defer-await - Move await into branches where actually usedasync-suspense-boundaries - Use Suspense to stream content
Bundle Size
bundle-barrel-imports - Import directly, avoid barrel filesbundle-dynamic-imports - Use next/dynamic for heavy componentsbundle-defer-third-party - Load analytics after hydration
Re-render Optimization
rerender-memo - Extract expensive work into memoized componentsrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass function to useState for expensive values
Common Patterns
rendering-conditional-render - Use ternary, not && for conditionals with numbers- Missing keys in list rendering
- Index as key for dynamic lists
