Why Performance Matters

Slow applications lose users. Every 100ms delay reduces conversions. Performance is not optional.

React.memo

Prevents re-renders when props haven't changed.

// Memoize component
const ExpensiveComponent = React.memo(function Component({ data }) {
  return 
{/* expensive rendering */}
;
});

// Custom comparison
const Item = React.memo(Component, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id;
});

useMemo and useCallback

// Cache expensive computations
const sortedItems = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

// Cache functions to prevent child re-renders
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

Code Splitting

import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    }>
      
    
  );
}

Conclusion

Measure before optimizing. React DevTools Profiler identifies actual bottlenecks. Don't prematurely optimize.