name:react-patternsdescription:Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.allowed-tools:Read, Write, Edit, Glob, Grep
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 componentProps down, events upComposition over inheritancePrefer 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 onlySame order every renderCustom 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 memoizationLess manual useMemo/useCallbackFocus on pure components
5. Composition Patterns
Compound Components
Parent provides contextChildren consume contextFlexible slot-based compositionExample: Tabs, Accordion, DropdownRender 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 slowProfile with DevToolsIdentify bottleneckApply 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 UILog errorOffer retry optionPreserve 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 behaviorEdge casesError statesAccessibility
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.
