What problem does it solve? When a slice of React state has several related fields (loading, error, data) and multiple distinct ways to change it, scattered useState calls drift out of sync and become hard to maintain. This Skill provides the Context + useReducer pattern to centralize that state with a typed action union. ## Core Features & Use Cases - Typed Reducer Pattern: Defines a State interface and a discriminated Action union so every state transition is explicit and type-checked. - Context Provider with Custom Hook: Wraps useReducer in a Provider component and exposes a typed hook (e.g. useMarkets) that throws when used outside the provider. - Guidance on Boundaries: Explains when plain useState, Zustand/Redux, or SWR/React Query are better fits, and how provider placement affects re-renders. - Use Case: A markets feature needs markets list, selected market, and loading flag updated through several actions; this Skill scaffolds a MarketProvider and useMarkets hook instead of three independent useState calls. ## Quick Start Refactor my component's related useState calls into a Context plus useReducer pattern with a typed action union and a custom hook.
