react-performancelisted

Use when writing, reviewing, or refactoring React 18/19 and Next.js code for performance. Organizes 70+ rules across 8 priority categories — eliminating waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, and advanced patterns — with concrete correct/incorrect pairs and version-specific APIs (Next.js 15 after(), React 19 Activity, useEffectEvent, optimizePackageImports).
Mixard/fable-pack · ★ 1 · API & Backend · score 74

Install: claude install-skill Mixard/fable-pack

# React Performance Performance optimization patterns for React 18/19 and Next.js, organized by priority with 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 ## 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 | | 4 — MEDIUM-HIGH | Client-Side Data Fetching | `client-` | SWR / TanStack Query / raw `fetch` in hooks | | 5 — MEDIUM | Re-render Optimization | `rerender-` | High-frequency state updates, parent-child fan-out | | 6 — MEDIUM | Rendering Performance | `rendering-` | Long lists, animations, hydration | | 7 — LOW-MEDIUM | JavaScript Performance | `js-` | Hot loops, frequent allocations | | 8 — LOW | Advanced Patterns | `advanced-` | Effect-event integration, stable refs | ## 1. Eliminating Waterfalls (CRITICAL) > Every sequential `await` adds full network latency