0db870eb11
Add a maintainers script to safely promote high-confidence legacy risk labels from unknown to concrete values, cover it with tests, and regenerate the canonical skill artifacts and plugin copies. This reduces the legacy unknown backlog without forcing noisy classifications that still need manual review.
204 lines
3.8 KiB
Markdown
204 lines
3.8 KiB
Markdown
---
|
|
name: react-patterns
|
|
description: "Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices."
|
|
risk: safe
|
|
source: community
|
|
date_added: "2026-02-27"
|
|
---
|
|
|
|
# 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
|
|
|
|
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.
|