react-performance

Topics in the source

• React Performance
• When to Activate
• Priority Index
• 1. Eliminating Waterfalls (CRITICAL)
• Cheap conditions before await
• Defer awaits until used
• Promise.all for independent work
• Partial dependencies — start early, await late

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. 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 | 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 | | 4 — MEDIUM-HIGH | Client-Side Data Fetching | client- | SWR / TanStack Query / raw fetch in hooks | | 5 — MEDIUM | Re-render Optimization | rerender- | High-frequency state update

This is an excerpt. Refer to the complete source and its current requirements.