HomeReact
Chapter 21
21 — Performance Optimization
Techniques to make React apps fast. React is fast by default — optimize only when you measure a real problem.
The Performance Mindset
- Measure first — Don't optimize blindly
- Find the bottleneck — React DevTools Profiler
- Apply targeted fix — Not blanket memoization
- Verify improvement — Profile again
Optimization Techniques
| Technique | What It Helps | When to Use |
|---|---|---|
React.memo | Skip child re-renders | Expensive children, stable parent |
useMemo | Skip expensive computations | Heavy calculations, large datasets |
useCallback | Stable function references | Callbacks passed to memo'd children |
| Virtualization | Render only visible items | Long lists (1000+ items) |
| Code splitting | Smaller initial bundle | Route-based, large components |
| Lazy loading | Load on demand | Images, below-fold content |
| Debounce/throttle | Reduce update frequency | Search input, scroll events |
| Key prop | Control component identity | Force remount/avoid stale state |
Common Performance Killers
| Problem | Fix |
|---|---|
| Re-rendering entire list when one item changes | React.memo + stable keys |
| Creating objects/arrays in render | useMemo or lift outside |
| Inline functions as props | useCallback |
| Large context re-renders all consumers | Split contexts |
| Rendering 10K items | Virtualize with @tanstack/react-virtual |
File
performance.tsx— memo patterns, virtualization, profiling, debounce, lazy images, state colocation