How to Use the useReducer Hook in React

useState is ideal for simple, independent state values. useReducer is better when state logic is complex, when the next state depends on the previous state in multiple ways, when multiple state values are closely related and updated together, or when you want to centralize all state transition logic in one place for predictability.

Create an object that represents the initial state of the piece of state you are managing. For example, for a form you might have an object with username, password, isSubmitting, and error properties all initialized to their starting values. This object becomes the starting point for your reducer.

A reducer is a pure function that accepts the current state and an action object, and returns the next state. It must never mutate the state directly. Instead, return a new object that spreads the current state and overrides only the changed properties. The reducer must be deterministic, meaning the same inputs always produce the same output.

Actions are plain objects with a type property that describes what happened. The type is typically a string constant like 'INCREMENT' or 'FORM_SUBMIT_START'. Define these as constants or an enum at the top of your file to avoid typos. Actions can also carry additional data in a payload property when the reducer needs extra information to compute the next state.

Inside the reducer function, use a switch statement on action.type. Each case handles one type of action and returns the new state. Always include a default case that returns the current state unchanged. This handles any unrecognized actions gracefully and is required for correctness.

Import useReducer from react. Call it inside your component with the reducer function and the initial state as arguments. It returns an array with two elements. The first is the current state object. The second is the dispatch function you call to trigger state changes.

Whenever something happens in the UI, call dispatch with an action object. For example, when a button is clicked, call dispatch with the type set to 'INCREMENT'. React calls your reducer with the current state and this action, gets the new state back, and re-renders the component with the updated values.

For sharing complex state across many components without Redux, combine useReducer with useContext. Define the reducer and initial state in a Context Provider component. Expose both the state and the dispatch function through the context value. Any component in the tree can read state and dispatch actions without prop drilling, giving you a lightweight global state solution.