react-patterns

# React Patterns

Expert guidance for implementing modern React patterns using hooks, component composition, state management, and concurrent features.

## Core Philosophy

| Priority | Description |
|----------|-------------|
| **Component Composition** | Build complex UIs from simple, reusable pieces |
| **Separation of Concerns** | Business logic in hooks, presentation in components |
| **Explicit over Implicit** | Clear data flow and state management |
| **Performance** | Minimize re-renders, optimize heavy computations |
| **Accessibility** | Build inclusive, keyboard-navigable interfaces |

## Pattern Categories

### Component Composition Patterns

| Pattern | Use Case | Example |
|---------|----------|---------|
| Compound Components | Flexible component APIs with shared context | Accordion, Tabs, Menu |
| Render Props | Share logic between components | MouseTracker, Scroll position |
| Higher-Order Components | Wrap components to add functionality | withAuth, withLoading |

See [resources/examples.md](resources/examples.md) for full code examples.

### Custom Hooks Patterns

| Hook | Purpose |
|------|---------|
| `useApi` | Data fetching with loading/error states |
| `useForm` | Form state management with validation |
| `useDebounce` | Debounce rapidly changing values |
| `usePrevious` | Access previous value of state/prop |
| `useLocalStorage` | Persist state to localStorage |

See [resources/examples.md](resources/examples.md) for implementations.

### State Management Patterns

| Type | When to Use | Examples |
|------|-------------|----------|
| **useState** | Simple UI state | Toggles, form inputs, pagination |
| **useReducer** | Complex state logic | Multi-step forms, shopping cart |
| **Context** | Theme, auth, app-wide settings | User session, feature flags |
| **URL State** | Shareable/bookmarkable state | Filters, search params, tabs |
| **Server State** | API data (React Query/SWR) | User profiles, product catalogs |
| **Global Store** | Cross-fe