React performance optimization patterns using memoization, code splitting, and efficient rendering strategies. Use when optimizing slow React applications, reducing bundle size, or improving user experience with large datasets.

React Performance Optimization Expert guidance for optimizing React application performance through memoization, code splitting, virtualization, and efficient rendering strategies. When to Use This Skill Optimizing slow rendering React components Reducing bundle size for faster initial load times Improving responsiveness for large lists or data tables Preventing unnecessary re renders in complex component trees Optimizing state management to reduce render cascades Improving perceived performance with code splitting Debugging performance issues with React DevTools Profiler Core Concepts React Rendering Optimization React re renders components when props or state change. Unnecessary re renders waste CPU cycles and degrade user experience. Key optimization techniques: Memoization : Cache component renders and computed values Code splitting : Load code on demand for faster initial loads Virtualization : Render only visible list items State optimization : Structure state to minimize render cascades When to Optimize 1. Profile first : Use React DevTools Profiler to identify actual bottlenecks 2. Measure impact : Verify optimization improves performance 3. Avoid premature optimization : Don't optimize fast components Quick Reference Load detailed patterns and examples as needed: Topic Reference File React.memo, useMemo, useCallback patterns skills/react performance optimization/references/memoization.md Code splitting with lazy/Suspense, bundle optimization skills/react performance optimization/references/code splitting.md Virtualization for large lists (react window) skills/react performance optimization/references/virtualization.md State management strategies, context splitting skills/react performance optimization/references/state management.md useTransition, useDeferredValue (React 18+) skills/react performance optimization/references/concurrent features.md React DevTools Profiler, performance monitoring skills/react performance optimization/references/profiling debugging.md Common pitfalls and anti patterns skills/react performance optimization/references/common pitfalls.md Optimization Workflow 1. Identify Bottlenecks Look for: Components with yellow/red bars (slow renders) Unnecessary renders (same props/state) Expensive computations on every render 2. Apply Targeted Optimizations For unnecessary re renders: Wrap component with React.memo Use useCallback for stable function references Check for inline objects/arrays in props For expensive computations: Use useMemo to cache results Move calculations outside render when possible For large lists: Implement virtualization with react window Ensure proper unique keys (not index) For slow initial load: Add code splitting with React.lazy Analyze bundle size with webpack bundle analyzer Use dynamic imports for heavy dependencies 3. Verify Improvements Common Patterns Memoize Expensive Components Cache Computed Values Stable Function References Code Split Routes Virtualize Large Lists Common Mistakes 1. Over memoization : Don't memoize simple, fast components (adds overhead) 2. Inline objects/arrays : New references break memoization ( config={{ theme: 'dark' }} ) 3. Missing dependencies : Stale closures in useCallback/useMemo 4. Index as key : Breaks reconciliation when list order changes 5. Single large context : Causes widespread re renders on any update 6. No profiling : Optimizing without measuring wastes time Performance Checklist Before optimizing: [ ] Profile with React DevTools to identify bottlenecks [ ] Measure baseline performance metrics Optimization targets: [ ] Memoize expensive components with stable props [ ] Cache computed values with useMemo (if actually expensive) [ ] Use useCallback for functions passed to memoized children [ ] Implement code splitting for routes and heavy components [ ] Virtualize lists with 100 items [ ] Provide stable keys for list items (unique IDs, not index) [ ] Split state by update frequency [ ] Use concurrent features (useTransition, useDeferredValue) for responsiveness After optimizing: [ ] Profile again to verify improvements [ ] Check bundle size reduction (if applicable) [ ] Ensure no regressions in functionality Resources React Docs Performance : https://react.dev/learn/render and commit React DevTools : Browser extension for profiling react window : https://github.com/bvaughn/react window Bundle analyzers : webpack bundle analyzer, rollup plugin visualizer Lighthouse : Chrome DevTools performance audit

react-performance-optimization