---
name: ecc-frontend-patterns
description: Frontend development patterns including component architecture, state management, routing, performance optimization, and testing for modern web applications.
---

# Frontend Patterns

Frontend development patterns for modern web applications.

## Component Architecture

### Component Categories
- **Pages** — Top-level route components, compose features
- **Features** — Domain-specific complex components
- **UI** — Reusable design system primitives (buttons, inputs, cards)
- **Layout** — Structural components (headers, sidebars, grids)

### Component Design Principles
- Single responsibility — one component, one concern
- Props over configuration objects
- Lift state up, keep side effects out
- Prefer composition over inheritance

## State Management

### Local State (useState)
```typescript
const [isOpen, setIsOpen] = useState(false);
```
Use for: UI state, form inputs, toggles

### Server State (React Query / SWR)
```typescript
const { data, error, isLoading } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
});
```
Use for: API data fetching, caching, refetching

## Performance

- Lazy load routes and heavy components
- Memoize expensive computations
- Virtualize long lists
- Debounce search inputs and resize handlers
- Optimize images (next/image, lazy loading)

## Testing Strategy

| Layer | Tool | Tests |
|-------|------|-------|
| Unit | Vitest | Utilities, pure functions |
| Component | Testing Library | Component behavior |
| Integration | MSW + Testing Library | User flows |
| E2E | Playwright | Critical paths |
