optimize-performance

Optimize Performance

Overview

Analyze and optimize React component performance with memoization, code splitting, and lazy loading.

Steps

1. Identify performance issues

   • Check for unnecessary re-renders
   • Find expensive calculations
   • Look for large bundle sizes
   • Identify render bottlenecks

2. Apply React optimizations

   • Add React.memo() for pure components
   • Use useMemo() for expensive calculations
   • Use useCallback() for function props
   • Optimize context usage

3. Implement code splitting

   • Use React.lazy() for route-based splitting
   • Use dynamic imports for large components
   • Split vendor bundles

4. Optimize images and assets

   • Use next/image (Next.js)
   • Implement lazy loading
   • Use proper image formats (WebP)

Optimization Patterns

1. Memoize Components

import { memo } from 'react';

interface ItemProps {
  item: Item;
  onSelect: (id: string) => void;
}

// Memoize to prevent re-renders when props don't change
export const ListItem = memo<ItemProps>(({ item, onSelect }) => {
  console.log('ListItem rendered:', item.id);
  
  return (
    <div onClick={() => onSelect(item.id)}>
      {item.name}
    </div>
  );
});

// Custom comparison function
export const ComplexItem = memo<ItemProps>(
  ({ item, onSelect }) => {
    return <div>{/* ... */}</div>;
  },
  (prevProps, nextProps) => {
    // Return true if props are equal (don't re-render)
    return prevProps.item.id === nextProps.item.id;
  }
);

2. Memoize Expensive Calculations

import { useMemo } from 'react';

function DataTable({ data, filters }: Props) {
  // Expensive filtering and sorting
  const processedData = useMemo(() => {
    console.log('Processing data...');
    
    let result = data.filter(item => 
      filters.every(filter => filter.match(item))
    );
    
    result.sort((a, b) => a.name.localeCompare(b.name));
    
    return result;
  }, [data, filters]); // Only recalculate when these change

  return (
    <table>
      {processedData.map(item => (
        <tr key={item.id}>{/* ... */}</tr>
      ))}
    </table>
  );
}