# React Review > React and Next.js performance optimization guidelines from Vercel Engineering. Contains 45+ rules across 8 categories. Use when this capability is needed. - Skill: `tomevault-io/react-review` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/react-review` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-review/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/react-review --- # Vercel React Best Practices Quick reference for reviewing React code. For detailed rules with code examples, see [RULES.md](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 --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/gricha) — claim your Tome and manage your conversions.