react-patterns

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 |

---

11. File Structure

<img width="1150" height="1438" alt="image" src="https://github.com/user-attachments/assets/10369698-472c-4695-a494-2c0672103aa1" />

Use this image as a reference for a better file structure of the project

---

> 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.

Example

User request:

> Use @react-patterns for this task: Modern React patterns and principles.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.