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.