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 references/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 references/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-feature coordination | Zustand/Redux for complex apps |
Context + useReducer Pattern: Best for complex state with multiple actions that need to be shared across components. See references/examples.md.
Performance Optimization
When to Use Memoization
| Tool | Use When |
|------|----------|
| useMemo | Expensive calculations (sorting, filtering large arrays) |
| useCallback | Functions passed to memoized children or used in deps |
| memo | Pure components that re-render often with same props |
Code Splitting Strategy
| Level | Implementation |
|-------|---------------|
| Route-level | lazy(() => import('./pages/Dashboard')) |
| Component-level | Heavy components like charts, editors |
| Conditional | Features behind feature flags |
Always wrap lazy components in <Suspense> with appropriate fallback.
Error Handling
| Strategy | Scope | |----------|-------| | Error Boundaries | Component tree errors (class components) | | try/catch | Async operations, event handlers | | React Query onError | API errors with automatic retry |
Error Boundary Placement: App-level for fatal errors, feature-level for graceful degradation.
Accessibility Patterns
| Requirement | Implementation |
|-------------|---------------|
| Focus Management | Return focus to trigger on modal close |
| Keyboard Navigation | Support Tab, Enter, Escape in interactive elements |
| ARIA Labels | Icon buttons, form inputs without visible labels |
| Semantic HTML | Use <nav>, <main>, <button> appropriately |
See references/examples.md for accessible modal implementation.
Best Practices Checklist
- Extract custom hooks when logic is reused or complex (>20 lines)
- Use compound components for flexible component APIs
- Memoize expensive computations and callbacks passed to memoized children
- Code split routes and heavy components
- Handle errors with error boundaries at appropriate levels
- Manage focus in modals and dynamic content
- Use semantic HTML and ARIA labels for accessibility
- Test hooks in isolation from components
- Keep components small (< 200 lines)
- Colocate state with its usage