React Performance Optimization Techniques

React applications can become slow as they grow in complexity. Understanding performance optimization techniques is crucial for maintaining smooth user experiences. This guide covers the most effective strategies for optimizing React applications.

React.memo and Component Memoization

Prevent unnecessary re-renders by memoizing components that don't need to update when their parent re-renders.

import React from 'react';

const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
  // Component only re-renders when data or onUpdate changes
  return (
    

      {data.map(item => (
        
{item.name}
      ))}
    
  );
});

// Custom comparison function for complex props
const arePropsEqual = (prevProps, nextProps) => {
  return prevProps.data.length === nextProps.data.length &&
         prevProps.data.every((item, index) => 
           item.id === nextProps.data[index].id
         );
};

const OptimizedComponent = React.memo(MyComponent, arePropsEqual);

useMemo and useCallback Hooks

Optimize expensive calculations and prevent function recreation on every render.

import React, { useMemo, useCallback, useState } from 'react';

function DataProcessor({ items, filter }) {
  // Memoize expensive calculations
  const processedData = useMemo(() => {
    return items
      .filter(item => item.category === filter)
      .sort((a, b) => b.priority - a.priority);
  }, [items, filter]);

  // Memoize event handlers
  const handleItemClick = useCallback((itemId) => {
    // Handle click logic
    console.log('Clicked item:', itemId);
  }, []);

  return (
    

      {processedData.map(item => (
        
      ))}
    
  );
}

Code Splitting and Lazy Loading

Reduce initial bundle size by loading components only when needed.

import React, { Suspense, lazy } from 'react';

// Lazy load components
const Dashboard = lazy(() => import('./Dashboard'));
const Profile = lazy(() => import('./Profile'));
const Settings = lazy(() => import('./Settings'));

function App() {
  return (
    

      Loading...
}>
        
          } />
          } />
          } />
        
      
    

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

function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    

      
{items[index].name}
    
  );

  return (
    
      {Row}
    
  );
}

// Performance measurement
function performanceWrapper(Component) {
  return function PerformanceComponent(props) {
    React.useEffect(() => {
      const start = performance.now();
      return () => {
        const end = performance.now();
      };
    });

    return ;
  };
}