Manage complex React 19 state with useReducer and dispatched actions.
npx skills add https://github.com/djankies/claude-configs --skill using-reducers
Please help me install this Agent Skill. Skill: using-reducers Source: https://github.com/djankies/claude-configs/tree/main/react-19/skills/using-reducers Command: npx skills add https://github.com/djankies/claude-configs --skill using-reducers
Teaches useReducer for complex state logic in React 19. Use when state updates depend on previous state, multiple related state values, or complex update logic.
Run sample counter with a reducer to handle increment, decrement, and reset. Refer to the code snippet in the Skill body for a complete example.
High-intent search queries and answers about installing and using this skill.
useReducer is best for complex state logic where updates depend on previous state, multiple related state values, or intricate update patterns. Use it for multi-field forms, todo lists, or counters with dynamic behavior where useState would lead to scattered setState calls.
useReducer centralizes state transitions through a reducer function that handles all state shape updates in one place. Dispatch actions to trigger predictable state changes, keeping related values synchronized and update logic organized.
A reducer receives current state and an action object, then returns the new state. It enables deterministic state transitions where each action maps to a specific state change, allowing you to reset, increment, decrement, or handle complex logic based on action type.
Yes, useReducer handles multi-field forms where fields depend on each other. Define actions for field updates and a reset action that returns initialState, centralizing form logic and making dependent updates predictable and maintainable.
The reducer should throw an error for unknown actions, catching logic mistakes early. This enforces strict action contracts and prevents silent failures, ensuring only defined state transitions occur.
Pass an initialState object and optional init function to useReducer. The init function runs once on mount to compute derived initial state, then the reducer function handles all subsequent state updates via dispatch.
partme-aiExplain React Hooks usage including useState, useEffect, useContext, useReducer, useMemo, useCallback, custom hooks, and hook patterns.
ProfPowellManage Web Component state with reactive stores, signals, and undo/redo.
pascallammersGuide React 18/19 development with hooks, component patterns, and performance best practices.
algusaemGuide React state management across local, global, and server state.
