react-performancelisted
Install: claude install-skill LeahyCC/claude-skills
# React Performance
Comprehensive React performance guidance covering measurement, rendering optimization, bundle size, Core Web Vitals, and Server Component patterns. Verified against React docs and Web Vitals specifications.
**First principle: Measure before you optimize.** This skill teaches you to find problems before fixing them.
## Architecture Overview
```
[Diagnose]
├── React DevTools Profiler (component render times)
├── Chrome Performance Panel (main thread activity)
├── web-vitals library (LCP, INP, CLS in production)
└── Bundle analyzer (what's in the bundle)
↓
[Identify Root Cause]
├── Unnecessary re-renders? → Memoization / state colocation
├── Slow initial load? → Code splitting / Server Components
├── Janky interactions? → useTransition / useDeferredValue
├── Layout shifts? → Image/font optimization
└── Large bundle? → Dynamic imports / tree shaking
↓
[Fix — Least Invasive First]
├── 1. Restructure components (children pattern, local state)
├── 2. Enable React Compiler (auto-memoization)
├── 3. Use concurrent features (transitions, deferred values)
├── 4. Move work to Server Components
├── 5. Code split heavy dependencies
└── 6. Manual memo/useMemo/useCallback (last resort)
```
## Quick Reference
| Need to... | See |
| --------------------------------------- | -----------------------