majiayu000 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- UsePromise.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- Usenext/dynamicfor 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