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 operations
• async-defer-await - Move await into branches where actually used
• async-suspense-boundaries - Use Suspense to stream content

Bundle Size

• bundle-barrel-imports - Import directly, avoid barrel files
• bundle-dynamic-imports - Use next/dynamic for heavy components
• bundle-defer-third-party - Load analytics after hydration

Re-render Optimization

• rerender-memo - Extract expensive work into memoized components
• rerender-functional-setstate - Use functional setState for stable callbacks
• rerender-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