React Patterns
Intermediatev1.0.0
> Principles for building production-ready React applications. | Type | Use | State | |------|-----|-------|.
Content
> 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
1. Check if actually slow
2. Profile with DevTools
3. Identify bottleneck
4. 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.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
FAQ
Discussion
Loading comments...