| name | react-patterns |
| description | Expert guidance on modern React patterns including hooks, composition, state management, and concurrent features. Use when implementing React components or refactoring existing code. |
| allowed-tools | Read, Write, Edit, Grep, Glob, Bash, WebSearch |
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 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 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 resources/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 resources/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