React Performance Patterns

useMemo and useCallback

// Without optimization
const ExpensiveComponent = ({ data, onAction }) => {
  const processedData = data.map(item => ({
    ...item,
    computed: heavyComputation(item)
  }));

  return (
    

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

  );
};

// With optimization
const OptimizedComponent = ({ data, onAction }) => {
  const processedData = useMemo(() => 
    data.map(item => ({
      ...item,
      computed: heavyComputation(item)
    })),
    [data]
  );

  const handleClick = useCallback((item) => {
    onAction(item);
  }, [onAction]);

  return (
    

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

  );
};

Performance Optimization Techniques

React's performance optimization patterns help prevent unnecessary re-renders and computations. Here are key patterns to implement:

Key Patterns:

  • useMemo for expensive computations
  • useCallback for function stability
  • React.memo for component memoization
  • Virtualization for long lists
  • Code splitting with React.lazy

When to Use Each Pattern

// Component memoization
const MemoizedComponent = React.memo(({ data }) => {
  return 
{/* Component content */}
;
});

// Virtualization
import { VirtualizedList } from 'react-virtualized';

const VirtualizedComponent = ({ items }) => {
  return (
    
  );
};

// Code splitting
const LazyComponent = React.lazy(() => import('./HeavyComponent'));