React Performance
Performance optimization patterns for React 18/19 and Next.js, adapted from Vercel Labs react-best-practices (MIT, v1.0.0). This skill organizes rules by priority and provides decision-tree guidance for active code review and refactoring.
When to Activate
- Writing or reviewing React/Next.js code for performance
- Diagnosing slow page loads, slow interactions, or high CPU on the client
- Auditing bundle size or Lighthouse Core Web Vitals regressions
- Removing waterfalls in Server Components / API routes
- Reducing client-side re-renders
- Optimizing long lists, animations, or hydration
- Auditing optimization choices in PRs touching
app/,pages/,components/, or data layers
Priority Index
| Priority | Category | Prefix | When it matters |
|---|---|---|---|
| 1 — CRITICAL | Eliminating Waterfalls | async- | Anytime await is followed by independent await |
| 2 — CRITICAL | Bundle Size Optimization | bundle- | First-load JS, route-level imports, third-party libs |
| 3 — HIGH | Server-Side Performance | server- | RSC, Server Actions, API routes, SSR |
| … |
