What problem does it solve? React codebases accumulate subtle defects: derived state synced through useEffect, useEffect-plus-fetch data loading with race conditions, misplaced state, and misused hooks. This Skill provides opinionated, idiomatic React 18/19 guidance so components are written and reviewed against proven patterns instead of rediscovering bugs in production. ## Core Features & Use Cases - Hook selection guidance: A decision table mapping each hook (useReducer, useSyncExternalStore, useOptimistic, useActionState, useFormStatus, and more) to the exact problem it solves, including React 19 changes like ref-as-prop. - State placement and architecture: Rules for where state lives (local, lifted, Context, external store, server cache) and how to compose Server and Client Components without breaking serialization or security boundaries. - Data fetching, forms, and boundaries: Patterns for TanStack Query/SWR/RSC fetching, React 19 form actions, and correct Suspense and error boundary placement. - Use Case: While reviewing a pull request, you notice a useEffect that only copies props into state and a useEffect-plus-fetch for server data. This Skill flags both as red-flag patterns and shows the correct replacements. ## Quick Start Ask the assistant to review this React component for idiomatic patterns and hook usage before merging it.
