react-patterns

# React Patterns (Deep Workflow) Healthy React codebases emphasize **clear data flow**, **minimal effects**, and **predictable** rendering. Prefer **composition** over inheritance; treat **effects** as synchronization, not “do something after render” for everything. ## When to Offer This Workflow **Trigger conditions:** - Prop drilling vs context vs external stores; confusion on **server components** (Next) vs client - **useEffect** spaghetti; stale closures; double-fetch - Re-render performance; large lists; hydration issues **Initial offer:** Use **six stages**: (1) structure & boundaries, (2) state & data sources, (3) hooks discipline, (4) effects & events, (5) performance, (6) testing & a11y). Confirm **React** version and **framework** (plain CRA, Vite, Next App Router). --- ## Stage 1: Structure & Boundaries **Goal:** **Colocate** state; split **presentational** vs **container** only when it clarifies—not by default. ### Practices - **Compound components** for flexible APIs; avoid mega-props objects - In Next App Router: default to Server Components; add `use client` at leaves --- ## Stage 2: State & Data Sources **Goal:** **Local** state for UI; **server** state via React Query/SWR/Apollo as appropriate; avoid duplicating server entities in global stores without sync rules. --- ## Stage 3: Hooks Discipline **Goal:** **Rules of Hooks** satisfied; custom hooks encapsulate reusable stateful logic with clear inputs/outputs. ### Practices - Name hooks `useThing`; return stable APIs (objects memoized when needed) --- ## Stage 4: Effects & Events **Goal:** Prefer **event handlers** for user-driven work; **useEffect** for sync with external systems (subscriptions, non-React widgets). ### Practices - **Cleanup** subscriptions; **abort** fetches; list **effect** dependencies honestly - Strict Mode double-invoke in dev—write effects idempotent --- ## Stage 5: Performance **Goal:** Measure before `memo`; **virtualize** long lists; **code-split** routes. ### Practices - `useCallback`/`useMemo` when profiling shows benefit—not by default - **Concurrent** features and **Suspense** boundaries where supported --- ## Stage 6: Testing & Accessibility **Goal:** **React Testing Library** user-centric queries; **focus** management and **labels** for forms. --- ## Final Review Checklist - [ ] Component boundaries match data ownership - [ ] Server vs client state strategy clear - [ ] Hooks and effects used appropriately - [ ] Performance optimizations evidence-based - [ ] Tests and a11y basics covered for critical flows ## Tips for Effective Guidance - **Derive** state when possible instead of storing redundant pieces. - **URL** as state for shareable UI state when appropriate. - Point to **state-management** skill for Redux/Zustand-scale decisions. ## Handling Deviations - **Legacy class components:** same principles; hooks migration incremental.