performance-security

# Performance, Accessibility & Security

Production-ready patterns for building fast, accessible, and secure React applications.

## Performance Optimization

### Code-Splitting

**Automatic with TanStack Router:**
- File-based routing automatically code-splits by route
- Each route is its own chunk
- Vite handles dynamic imports efficiently

**Manual code-splitting:**
```typescript
import { lazy, Suspense } from 'react'

// Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'))

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyChart data={data} />
    </Suspense>
  )
}
```

**Route-level lazy loading:**
```typescript
// src/routes/dashboard.lazy.tsx
export const Route = createLazyFileRoute('/dashboard')({
  component: DashboardComponent,
})
```

### React Compiler First

The React Compiler automatically optimizes performance when you write compiler-friendly code:

**✅ Do:**
- Keep components pure (no side effects in render)
- Derive values during render (don't stash in refs)
- Keep props serializable
- Inline event handlers (unless they close over large objects)

**❌ Avoid:**
- Mutating props or state
- Side effects in render phase
- Over-using useCallback/useMemo (compiler handles this)
- Non-serializable props (functions, symbols)

**Verify optimization:**
- Check React DevTools for "Memo ✨" badge
- Components without badge weren't optimized (check for violations)

### Images & Assets

**Use Vite asset pipeline:**
```typescript
// Imports are optimized and hashed
import logo from './logo.png'

<img src={logo} alt="Logo" />
```

**Prefer modern formats:**
```typescript
// WebP for photos
<img src="/hero.webp" alt="Hero" />

// SVG for icons
import { ReactComponent as Icon } from './icon.svg'
<Icon />
```

**Lazy load images:**
```typescript
<img src={imageSrc} loading="lazy" alt="Description" />
```

**Responsive images:**
```typescript
<img
  srcSet="
    /image-320w.webp 320w,
    /image-640w.webp 640w