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

const ExpensiveList = memo(({ items, onItemClick }) => {
  return items.map(item => (
    <Item key={item.id} data={item} onClick={onItemClick} />
  ));
});

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 <Table data={filteredItems} />;
}

Stable Function References

import { useCallback } from 'react';

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

  return <MemoizedChild onClick={handleClick} />;
}

Code Split Routes

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/reports" element={<Reports />} />
      </Routes>
    </Suspense>
  );
}

Virtualize Large Lists

import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={80}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  );
}

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