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
1---2name: react-patterns3description: Expert guidance on modern React patterns including hooks, composition, state management, and concurrent features. Use when implementing React components or refactoring existing code.4---56# React Patterns78Expert guidance for implementing modern React patterns using hooks, component composition, state management, and concurrent features.910## Core Philosophy1112| Priority | Description |13|----------|-------------|14| **Component Composition** | Build complex UIs from simple, reusable pieces |15| **Separation of Concerns** | Business logic in hooks, presentation in components |16| **Explicit over Implicit** | Clear data flow and state management |17| **Performance** | Minimize re-renders, optimize heavy computations |18| **Accessibility** | Build inclusive, keyboard-navigable interfaces |1920## Pattern Categories2122### Component Composition Patterns2324| Pattern | Use Case | Example |25|---------|----------|---------|26| Compound Components | Flexible component APIs with shared context | Accordion, Tabs, Menu |27| Render Props | Share logic between components | MouseTracker, Scroll position |28| Higher-Order Components | Wrap components to add functionality | withAuth, withLoading |2930See [references/examples.md](references/examples.md) for full code examples.3132### Custom Hooks Patterns3334| Hook | Purpose |35|------|---------|36| `useApi` | Data fetching with loading/error states |37| `useForm` | Form state management with validation |38| `useDebounce` | Debounce rapidly changing values |39| `usePrevious` | Access previous value of state/prop |40| `useLocalStorage` | Persist state to localStorage |4142See [references/examples.md](references/examples.md) for implementations.4344### State Management Patterns4546| Type | When to Use | Examples |47|------|-------------|----------|48| **useState** | Simple UI state | Toggles, form inputs, pagination |49| **useReducer** | Complex state logic | Multi-step forms, shopping cart |50| **Context** | Theme, auth, app-wide settings | User session, feature flags |51| **URL State** | Shareable/bookmarkable state | Filters, search params, tabs |52| **Server State** | API data (React Query/SWR) | User profiles, product catalogs |53| **Global Store** | Cross-feature coordination | Zustand/Redux for complex apps |5455**Context + useReducer Pattern**: Best for complex state with multiple actions that need to be shared across components. See [references/examples.md](references/examples.md).5657## Performance Optimization5859### When to Use Memoization6061| Tool | Use When |62|------|----------|63| `useMemo` | Expensive calculations (sorting, filtering large arrays) |64| `useCallback` | Functions passed to memoized children or used in deps |65| `memo` | Pure components that re-render often with same props |6667### Code Splitting Strategy6869| Level | Implementation |70|-------|---------------|71| Route-level | `lazy(() => import('./pages/Dashboard'))` |72| Component-level | Heavy components like charts, editors |73| Conditional | Features behind feature flags |7475**Always wrap lazy components in `<Suspense>` with appropriate fallback.**7677## Error Handling7879| Strategy | Scope |80|----------|-------|81| Error Boundaries | Component tree errors (class components) |82| try/catch | Async operations, event handlers |83| React Query onError | API errors with automatic retry |8485**Error Boundary Placement**: App-level for fatal errors, feature-level for graceful degradation.8687## Accessibility Patterns8889| Requirement | Implementation |90|-------------|---------------|91| Focus Management | Return focus to trigger on modal close |92| Keyboard Navigation | Support Tab, Enter, Escape in interactive elements |93| ARIA Labels | Icon buttons, form inputs without visible labels |94| Semantic HTML | Use `<nav>`, `<main>`, `<button>` appropriately |9596See [references/examples.md](references/examples.md) for accessible modal implementation.9798## Best Practices Checklist991001. **Extract custom hooks** when logic is reused or complex (>20 lines)1012. **Use compound components** for flexible component APIs1023. **Memoize** expensive computations and callbacks passed to memoized children1034. **Code split** routes and heavy components1045. **Handle errors** with error boundaries at appropriate levels1056. **Manage focus** in modals and dynamic content1067. **Use semantic HTML** and ARIA labels for accessibility1078. **Test hooks** in isolation from components1089. **Keep components small** (< 200 lines)10910. **Colocate state** with its usage
majesticlabs-dev