react-performance-optimization

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:

Optimization Workflow

1. Identify Bottlenecks

# Open React DevTools Profiler
# Record interaction → Analyze flame graph → Find slow components

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

# Record new Profiler session
# Compare before/after metrics
# Ensure optimization actually helped

Common Patterns

Memoize Expensive Components

import { memo } from

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