Vercel React Best Practices

Quick reference for reviewing React code. For detailed rules with code examples, see RULES.md.

Rule Categories (by priority)

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