React Patterns

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

Core Principles

1. Render is a Pure Function of Props and State