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
- Check if actually slow
- Profile with DevTools
- Identify bottleneck
- 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.
No comments yet. Be the first to share your thoughts!