React Performance

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

Decision Matrix: Which Optimization?

"My page loads slowly"

"My page feels janky/unresponsive"

"Layout is jumping around"

"Should I use memo/useMemo/useCallback?"

Is React Compiler enabled?
├── YES → Don't add manual memoization. Compiler handles it.
└── NO
    ├── Have you measured with Profiler?
    │   ├── NO → Measure first. The problem might not be re-renders.
    │   └── YES, renders are slow (> 1ms per component)
    │       ├── Can you restructure? (children pattern, local state)
    │       │   ├── YES → Do that instead. No memo needed.
    │       │   └── NO → Use memo/useMemo/useCallback.
    │       └── Is the child already wrapped in memo()?
    │           ├── NO → Wrapping parent's callback in useCallback alone does nothing.
    │           └── YES → useCallback/useMemo will help.
    └── Can you enable React Compiler?
        ├── YES → Enable it. Remove manual memoization later.
        └── NO → Use memo/useMemo/useCallback where Profiler shows benefit.

The Optimization Hierarchy

The React team's official priority order:

1. Write correct code first — fix bugs, don't mask them with memoization
2. Structure components well — local state, children pattern, avoid unnecessary Effects
3. Measure before optimizing — use Profiler, console.time, CPU throttling in production builds
4. Adopt React Compiler — handles memo/useMemo/useCallback automatically
5. Use concurrent features (useTransition, useDeferredValue, Suspense) for responsiveness
6. Use Server Components to eliminate client bundle weight and fetch waterfalls
7. Manual memo/useMemo/useCallback only as escape hatches when the compiler is insufficient

Anti-Patterns Checklist

When reviewing code, watch for these performance killers:

• Effect chains — useEffect that sets state triggering another useEffect (derive during render instead)
• Inline object/function props to memo()-wrapped children (defeats memoization)
• State too high — input state at page level re-rendering entire tree
• useEffect for derived state — setFiltered(items.filter(...)) in effect (use useMemo or calculate during render)
• Missing key prop — or using array index as key for dynamic lists
• Context monolith — one Provider with user + theme + cart + notifications
• Client Component boundary too high — 'use client' at layout/page level instead of leaf components
• Heavy imports in client bundle — syntax highlighters, markdown parsers, date libraries not code-split
• Images without dimensions — causes CLS
• onPaste={e => e.preventDefault()} on password fields — blocks password managers (also an a11y violation)
• Manual memo/useMemo/useCallback without measuring first — adds complexity for no proven benefit
• new ExpensiveThing() in useRef initializer — runs every render (use lazy init pattern)