React Performance Optimization Guide

# React Performance Optimization Guide

## Why Performance Matters
- 53% of mobile users leave sites that take >3 seconds to load
- Better UX leads to higher conversion rates
- Google uses Core Web Vitals for ranking

## 1. UseMemo and UseCallback

### useMemo - Memoize Expensive Calculations
```tsx
function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return data.map(item => expensiveOperation(item));
  }, [data]);

  return <List data={processedData} />;
}
```

### useCallback - Memoize Functions
```tsx
function ParentComponent() {
  const handleClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);

  return <Child onClick={handleClick} />;
}
```

## 2. Code Splitting

### Dynamic Imports
```tsx
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false
});
```

### Route-Based Splitting
```tsx
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Routes>
      <Route path="/" element={<Suspense fallback={<Loading />}><Home /></Suspense>} />
    </Routes>
  );
}
```

## 3. Virtualization

### react-window for Long Lists
```tsx
import { FixedSizeList } from 'react-window';

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

  return (
    <FixedSizeList
      height={300}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}
```

## 4. Optimize Re-renders

### React.memo
```tsx
const Button = React.memo(function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
});
```

## 5. Image Optimization

### Next.js Image
```tsx
import Image from 'next/image';

function MyPage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
    />
  );
}
```

## Performance Checklist
- [ ] Use production build
- [ ] Enable compression
- [ ] Implement code splitting
- [ ] Optimize images
- [ ] Use CDN
- [ ] Enable caching
- [ ] Monitor Core Web Vitals