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 Profile first: Use React DevTools Profiler to identify actual bottlenecks Measure impact: Verify optimization improves performance 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

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 'react';

const ExpensiveList = memo(({ items, onItemClick }) => { return items.map(item => ( )); });

Cache Computed Values import { useMemo } from 'react';

function DataTable({ items, filters }) { const filteredItems = useMemo(() => { return items.filter(item => filters.includes(item.category)); }, [items, filters]);

return

Stable Function References import { useCallback } from 'react';

function Parent() { const handleClick = useCallback((id) => { console.log('Clicked:', id); }, []);

return ; }

Code Split Routes import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard')); const Reports = lazy(() => import('./Reports'));

function App() { return ( }> } /> } /> ); }

Virtualize Large Lists import { FixedSizeList } from 'react-window';

function VirtualList({ items }) { return ( {({ index, style }) => (

Common Mistakes Over-memoization: Don't memoize simple, fast components (adds overhead) Inline objects/arrays: New references break memoization (config={{ theme: 'dark' }}) Missing dependencies: Stale closures in useCallback/useMemo Index as key: Breaks reconciliation when list order changes Single large context: Causes widespread re-renders on any update 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