React Performance Optimization: A Practical Guide

React applications can become slow if not optimized properly. Here’s a comprehensive guide to keeping your React apps fast and responsive.

1. Use React.memo for Component Memoization

Prevent unnecessary re-renders with React.memo:

const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
  // This component only re-renders if props change
  return (
    <div>
      {/* Complex rendering logic */}
    </div>
  );
});

2. Optimize with useMemo and useCallback

Cache expensive calculations and function references:

function ProductList({ products, category }) {
  // Expensive filtering operation
  const filteredProducts = useMemo(() => {
    return products.filter(product => product.category === category);
  }, [products, category]);

  // Stable function reference
  const handleProductClick = useCallback((productId) => {
    // Handle click
  }, []);

  return (
    <div>
      {filteredProducts.map(product => (
        <Product 
          key={product.id} 
          product={product} 
          onClick={handleProductClick}
        />
      ))}
    </div>
  );
}

3. Code Splitting with React.lazy

Load components only when needed:

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

4. Virtual Scrolling for Large Lists

Handle thousands of items efficiently:

import { FixedSizeList as List } from 'react-window';

function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

  return (
    <List
      height={600}
      itemCount={items.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </List>
  );
}

5. Bundle Analysis and Optimization

Analyze your bundle to find optimization opportunities:

# Install webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer

# For Create React App
npm run build
npx webpack-bundle-analyzer build/static/js/*.js

# For Vite
npm install --save-dev rollup-plugin-visualizer

Key Performance Metrics

Monitor these metrics to track performance:

• First Contentful Paint (FCP): < 1.8s
• Largest Contentful Paint (LCP): < 2.5s
• Cumulative Layout Shift (CLS): < 0.1
• First Input Delay (FID): < 100ms

Best Practices Checklist

• ✅ Use production builds for deployment
• ✅ Implement proper error boundaries
• ✅ Minimize bundle size with tree shaking
• ✅ Use CDN for static assets
• ✅ Implement proper loading states
• ✅ Avoid inline objects and functions in JSX
• ✅ Use React DevTools Profiler for debugging

Performance optimization is an ongoing process. Start with the biggest bottlenecks and measure the impact of each change.