React Patterns
Principles for building production-ready React applications.
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Testing Principles
Level Focus
Unit Pure functions, hooks
Integration Component behavior
E2E User flows
Test Priorities
-
User-visible behavior
-
Edge cases
-
Error states
-
Accessibility
- 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.