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
