| name | react-patterns |
| description | React patterns, testing, and performance optimization. Use when working with React components, hooks, testing setup, or performance tuning. |
React Patterns
Adapted from ECC's react-patterns skill (MIT).
Idiomatic React 18/19 patterns for building robust, accessible, performant component trees.
When to Activate
- Writing or modifying React function components, custom hooks, or component trees
- Reviewing JSX/TSX files
- Designing state shape or component composition
- Migrating class components or older
forwardRef/useEffect-heavy code
- Choosing between local state, lifted state, context, and external stores
- Working with Server Components / Client Components (Next.js App Router, RSC)
- Implementing forms with React 19 actions or controlled inputs
- Wiring data fetching with TanStack Query / SWR / RSC
For full patterns, examples, and anti-patterns, see REFERENCE.md.
When to Activate
- Writing or modifying React function components, custom hooks, or component trees
- Reviewing JSX/TSX files
- Designing state shape or component composition
- Migrating class components or older
forwardRef/useEffect-heavy code
- Choosing between local state, lifted state, context, and external stores
- Working with Server Components / Client Components (Next.js App Router, RSC)
- Implementing forms with React 19 actions or controlled inputs
- Wiring data fetching with TanStack Query / SWR / RSC
REFERENCE.md Contents
| Section | Description |
|---|
| Core Principles | Pure render, side effects, composition |
| Hooks Discipline | Rules, memoization strategy |
| State Location | useState vs context vs external store |
| RSC Boundaries | Server/Client Component patterns |
| Suspense & Error Boundaries | Progressive loading, error recovery |
| Forms | useActionState, controlled inputs, complex forms |
| Data Fetching | RSC vs TanStack Query vs SWR |
| Composition | Slots, compound components, render props |
| Performance | React.memo, render cascades, lists |
| Accessibility | Semantic HTML, keyboard, labels |
| Examples | Debounced search, optimistic UI, context splitting |
