React Patterns

1---
2name: react-patterns
3description: Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
4allowed-tools: Read, Write, Edit, Glob, Grep
5---
6 
7# React Patterns
8 
9> Principles for building production-ready React applications.
10 
11---
12 
13## 1. Component Design Principles
14 
15### Component Types
16 
17| Type | Use | State |
18|------|-----|-------|
19| **Server** | Data fetching, static | None |
20| **Client** | Interactivity | useState, effects |
21| **Presentational** | UI display | Props only |
22| **Container** | Logic/state | Heavy state |
23 
24### Design Rules
25 
26- One responsibility per component
27- Props down, events up
28- Composition over inheritance
29- Prefer small, focused components
30 
31---
32 
33## 2. Hook Patterns
34 
35### When to Extract Hooks
36 
37| Pattern | Extract When |
38|---------|-------------|
39| **useLocalStorage** | Same storage logic needed |
40| **useDebounce** | Multiple debounced values |
41| **useFetch** | Repeated fetch patterns |
42| **useForm** | Complex form state |
43 
44### Hook Rules
45 
46- Hooks at top level only
47- Same order every render
48- Custom hooks start with "use"
49- Clean up effects on unmount
50 
51---
52 
53## 3. State Management Selection
54 
55| Complexity | Solution |
56|------------|----------|
57| Simple | useState, useReducer |
58| Shared local | Context |
59| Server state | React Query, SWR |
60| Complex global | Zustand, Redux Toolkit |
61 
62### State Placement
63 
64| Scope | Where |
65|-------|-------|
66| Single component | useState |
67| Parent-child | Lift state up |
68| Subtree | Context |
69| App-wide | Global store |
70 
71---
72 
73## 4. React 19 Patterns
74 
75### New Hooks
76 
77| Hook | Purpose |
78|------|---------|
79| **useActionState** | Form submission state |
80| **useOptimistic** | Optimistic UI updates |
81| **use** | Read resources in render |
82 
83### Compiler Benefits
84 
85- Automatic memoization
86- Less manual useMemo/useCallback
87- Focus on pure components
88 
89---
90 
91## 5. Composition Patterns
92 
93### Compound Components
94 
95- Parent provides context
96- Children consume context
97- Flexible slot-based composition
98- Example: Tabs, Accordion, Dropdown
99 
100### Render Props vs Hooks
101 
102| Use Case | Prefer |
103|----------|--------|
104| Reusable logic | Custom hook |
105| Render flexibility | Render props |
106| Cross-cutting | Higher-order component |
107 
108---
109 
110## 6. Performance Principles
111 
112### When to Optimize
113 
114| Signal | Action |
115|--------|--------|
116| Slow renders | Profile first |
117| Large lists | Virtualize |
118| Expensive calc | useMemo |
119| Stable callbacks | useCallback |
120 
121### Optimization Order
122 
1231. Check if actually slow
1242. Profile with DevTools
1253. Identify bottleneck
1264. Apply targeted fix
127 
128---
129 
130## 7. Error Handling
131 
132### Error Boundary Usage
133 
134| Scope | Placement |
135|-------|-----------|
136| App-wide | Root level |
137| Feature | Route/feature level |
138| Component | Around risky component |
139 
140### Error Recovery
141 
142- Show fallback UI
143- Log error
144- Offer retry option
145- Preserve user data
146 
147---
148 
149## 8. TypeScript Patterns
150 
151### Props Typing
152 
153| Pattern | Use |
154|---------|-----|
155| Interface | Component props |
156| Type | Unions, complex |
157| Generic | Reusable components |
158 
159### Common Types
160 
161| Need | Type |
162|------|------|
163| Children | ReactNode |
164| Event handler | MouseEventHandler |
165| Ref | RefObject<Element> |
166 
167---
168 
169## 9. Testing Principles
170 
171| Level | Focus |
172|-------|-------|
173| Unit | Pure functions, hooks |
174| Integration | Component behavior |
175| E2E | User flows |
176 
177### Test Priorities
178 
179- User-visible behavior
180- Edge cases
181- Error states
182- Accessibility
183 
184---
185 
186## 10. Anti-Patterns
187 
188| ❌ Don't | ✅ Do |
189|----------|-------|
190| Prop drilling deep | Use context |
191| Giant components | Split smaller |
192| useEffect for everything | Server components |
193| Premature optimization | Profile first |
194| Index as key | Stable unique ID |
195 
196---
197 
198> **Remember:** React is about composition. Build small, combine thoughtfully.
199