204 lines
3.8 KiB
Markdown
204 lines
3.8 KiB
Markdown
---
|
|
name: react-patterns
|
|
description: "Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices."
|
|
risk: unknown
|
|
source: community
|
|
date_added: "2026-02-27"
|
|
---
|
|
|
|
# React Patterns
|
|
|
|
> Principles for building production-ready React applications.
|
|
|
|
---
|
|
|
|
## 1. Component Design Principles
|
|
|
|
### Component Types
|
|
|
|
| Type | Use | State |
|
|
|------|-----|-------|
|
|
| **Server** | Data fetching, static | None |
|
|
| **Client** | Interactivity | useState, effects |
|
|
| **Presentational** | UI display | Props only |
|
|
| **Container** | Logic/state | Heavy state |
|
|
|
|
### Design Rules
|
|
|
|
- One responsibility per component
|
|
- Props down, events up
|
|
- Composition over inheritance
|
|
- Prefer small, focused components
|
|
|
|
---
|
|
|
|
## 2. Hook Patterns
|
|
|
|
### When to Extract Hooks
|
|
|
|
| Pattern | Extract When |
|
|
|---------|-------------|
|
|
| **useLocalStorage** | Same storage logic needed |
|
|
| **useDebounce** | Multiple debounced values |
|
|
| **useFetch** | Repeated fetch patterns |
|
|
| **useForm** | Complex form state |
|
|
|
|
### Hook Rules
|
|
|
|
- Hooks at top level only
|
|
- Same order every render
|
|
- Custom hooks start with "use"
|
|
- Clean up effects on unmount
|
|
|
|
---
|
|
|
|
## 3. State Management Selection
|
|
|
|
| Complexity | Solution |
|
|
|------------|----------|
|
|
| Simple | useState, useReducer |
|
|
| Shared local | Context |
|
|
| Server state | React Query, SWR |
|
|
| Complex global | Zustand, Redux Toolkit |
|
|
|
|
### State Placement
|
|
|
|
| Scope | Where |
|
|
|-------|-------|
|
|
| Single component | useState |
|
|
| Parent-child | Lift state up |
|
|
| Subtree | Context |
|
|
| App-wide | Global store |
|
|
|
|
---
|
|
|
|
## 4. React 19 Patterns
|
|
|
|
### New Hooks
|
|
|
|
| Hook | Purpose |
|
|
|------|---------|
|
|
| **useActionState** | Form submission state |
|
|
| **useOptimistic** | Optimistic UI updates |
|
|
| **use** | Read resources in render |
|
|
|
|
### Compiler Benefits
|
|
|
|
- Automatic memoization
|
|
- Less manual useMemo/useCallback
|
|
- Focus on pure components
|
|
|
|
---
|
|
|
|
## 5. Composition Patterns
|
|
|
|
### Compound Components
|
|
|
|
- Parent provides context
|
|
- Children consume context
|
|
- Flexible slot-based composition
|
|
- Example: Tabs, Accordion, Dropdown
|
|
|
|
### Render Props vs Hooks
|
|
|
|
| Use Case | Prefer |
|
|
|----------|--------|
|
|
| Reusable logic | Custom hook |
|
|
| Render flexibility | Render props |
|
|
| Cross-cutting | Higher-order component |
|
|
|
|
---
|
|
|
|
## 6. Performance Principles
|
|
|
|
### When to Optimize
|
|
|
|
| Signal | Action |
|
|
|--------|--------|
|
|
| Slow renders | Profile first |
|
|
| Large lists | Virtualize |
|
|
| Expensive calc | useMemo |
|
|
| Stable callbacks | useCallback |
|
|
|
|
### Optimization Order
|
|
|
|
1. Check if actually slow
|
|
2. Profile with DevTools
|
|
3. Identify bottleneck
|
|
4. Apply targeted fix
|
|
|
|
---
|
|
|
|
## 7. Error Handling
|
|
|
|
### Error Boundary Usage
|
|
|
|
| Scope | Placement |
|
|
|-------|-----------|
|
|
| App-wide | Root level |
|
|
| Feature | Route/feature level |
|
|
| Component | Around risky component |
|
|
|
|
### Error Recovery
|
|
|
|
- Show fallback UI
|
|
- Log error
|
|
- Offer retry option
|
|
- Preserve user data
|
|
|
|
---
|
|
|
|
## 8. TypeScript Patterns
|
|
|
|
### Props Typing
|
|
|
|
| Pattern | Use |
|
|
|---------|-----|
|
|
| Interface | Component props |
|
|
| Type | Unions, complex |
|
|
| Generic | Reusable components |
|
|
|
|
### Common Types
|
|
|
|
| Need | Type |
|
|
|------|------|
|
|
| Children | ReactNode |
|
|
| Event handler | MouseEventHandler |
|
|
| Ref | RefObject<Element> |
|
|
|
|
---
|
|
|
|
## 9. Testing Principles
|
|
|
|
| Level | Focus |
|
|
|-------|-------|
|
|
| Unit | Pure functions, hooks |
|
|
| Integration | Component behavior |
|
|
| E2E | User flows |
|
|
|
|
### Test Priorities
|
|
|
|
- User-visible behavior
|
|
- Edge cases
|
|
- Error states
|
|
- Accessibility
|
|
|
|
---
|
|
|
|
## 10. Anti-Patterns
|
|
|
|
| ❌ Don't | ✅ Do |
|
|
|----------|-------|
|
|
| Prop drilling deep | Use context |
|
|
| Giant components | Split smaller |
|
|
| useEffect for everything | Server components |
|
|
| Premature optimization | Profile first |
|
|
| Index as key | Stable unique ID |
|
|
|
|
---
|
|
|
|
> **Remember:** React is about composition. Build small, combine thoughtfully.
|
|
|
|
## When to Use
|
|
This skill is applicable to execute the workflow or actions described in the overview.
|