useReducer
useReducer is a React Hook that manages component state by applying a reducer function to the current state and dispatched actions.
React Hooks in Action: With Suspense and Concurrent Mode
useReducer is a built-in React Hook that manages component state through a reducer function and dispatched actions.
- How it is used
- Uses a reducer to coordinate multiple interrelated component-state updates through explicit dispatched actions.
- How deep it goes
- Explains reducer workflow, initialization functions, dispatch stability, and re-render cycles, without pursuing implementation internals.
- Examples
- Demonstrates loading posts, a counter, BookablesList interactions, and WeekPicker initialization and navigation.
- What you can do after
- Apply it via React’s useReducer Hook to build components with centralized state transitions and action-driven event handlers.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains useReducer →
React Quickly, Second Edition
useReducer is a React Hook function that manages component state by applying a reducer to the current state and an action.
- How it is used
- Manages related component state through dispatched actions when separate state updates become hard to coordinate.
- How deep it goes
- Works from the hook signature and counter to a loader reducer with action payloads; does not descend into React internals.
- Examples
- Uses an increment-and-decrement counter, a data loader with success and failure states, and a task manager.
- What you can do after
- Build it from scratch to manage a component's related state with a reducer, initial state, and dispatched actions.
Read how React Quickly, Second Edition explains useReducer →
React in Depth
useReducer is a React hook that manages component state through a reducer function and dispatched actions.
- How it is used
- Organizes component state transitions in a reusable hook and offers a built-in foundation for shared application data.
- How deep it goes
- Works through a generic reducer, typed actions, a custom hook, and a playlist; distinguishes older generic inference from React 19.
- Examples
- Uses a reorderable playlist with index-based movement actions and a goal-tracking application compared across state-management approaches.
- What you can do after
- Build it from scratch as a typed, reusable list-state hook, or apply it with context before reaching for an external store.
Related concepts
- React hookkind of · A React Hook is a function-based API that enables function components to access state, effects, context, and other React capabilities.
- reduction operationuses · A reduction operation combines multiple input values or partial results according to a combining rule to produce fewer results, often a single aggregate.
- useStatealternative to · useState is a React Hook that provides a function component with a state value and a function for updating it.
- initial stateconfigures · An initial state is the starting value or condition from which a process, computation, component, or state machine begins operation.
- useReducer initialization functionuses · A useReducer initialization function is an optional function that computes the initial reducer state from an initialization argument.
- dispatchproduces · Dispatch is a function or method that sends an action to a reducer or state store to request a state transition.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.