react-patterns

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

---

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

---

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

---

5. Composition Patterns

Compound Components

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

---

7. Error Handling

Error Boundary Usage

| Scope | Placement |

|-------|-----------|

| App-wide | Root level |

| Feature | Route/feature level |

| Component | Around risky component |

Error Recovery

---

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 |

---

9. Testing Principles

| Level | Focus |

|-------|-------|

| Unit | Pure functions, hooks |

| Integration | Component behavior |

| E2E | User flows |

Test Priorities

---

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.