react-patterns
Expert guidance on modern React patterns including hooks, composition, state management, and concurrent features. Use when implementing React components or refactoring existing code.
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。
查看来源 ↗使用指南技能说明
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
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-01-20
- 索引更新时间
- 2026-02-04
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!