react-patterns

# 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 ```tsx // Good: derive during render function Cart({ items }: { items: CartItem[] }) { const total = items.reduce((sum, i) => sum + i.price * i.qty, 0); return <span>{formatMoney(total)}</span>; } // Bad: derived state stored separately function Cart({ items }: { items: CartItem[] }) { const [total, setTotal] = useState(0); useEffect(() => { setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0)); }, [items]); return <span>{formatMoney(total)}</span>; } ``` Derived state in `useEffect` adds a render cycle, can desync, and obscures the data flow. ### 2. Side Effects Outside Render Effects, mutations, network calls, and subscriptions live in event handlers or `useEffect` — never in the render body. ### 3. Composition Over Inheritance React has no inherit...