What is the useReducer Hook in React?
Learn the React useReducer Hook: how reducers and dispatch manage complex state, when to use it over useState, plus a working counter code example.
Expected Interview Answer
useReducer is a React Hook for managing component state through a reducer function, returning the current state and a dispatch function that sends actions to update it.
It is an alternative to useState that suits complex state logic, multiple sub-values, or next-state that depends on the previous state. You call useReducer(reducer, initialState); the reducer is a pure function (state, action) => newState that decides how each dispatched action transforms state. Dispatching an action re-runs the reducer and triggers a re-render with the new state, centralising all transition logic in one predictable place.
- Centralises complex state transitions in one reducer
- Makes state updates predictable and testable
- Ideal when next state depends on previous state
- Cleaner than many related useState calls
- Works well with Context for app-wide state
AI Mentor Explanation
Think of the scorer as a reducer: every event on the field — a run, a wicket, a wide — is an action shouted to him, and he applies a fixed rule to update the scoreboard state. Players never edit the board directly; they dispatch the event and the scorer computes the new total. useReducer works this way: you dispatch actions and one reducer decides the next state.
Step-by-Step Explanation
Step 1
Write the reducer
Define a pure function (state, action) => newState that returns the next state for each action type, usually via a switch.
Step 2
Set the initial state
Create the starting state object, optionally with a lazy initializer function as the third argument to useReducer.
Step 3
Call the hook
Destructure const [state, dispatch] = useReducer(reducer, initialState) inside the component.
Step 4
Dispatch actions
Call dispatch({ type: 'INCREMENT', payload }) from event handlers to trigger a state transition.
Step 5
Render from state
Read values off state in JSX; React re-renders whenever the reducer returns a new state object.
What Interviewer Expects
- Knowing useReducer returns [state, dispatch]
- Understanding the reducer is a pure (state, action) => newState function
- When to prefer useReducer over useState
- How dispatching actions drives predictable transitions
- Awareness of pairing it with Context for shared state
Common Mistakes
- Mutating state directly in the reducer instead of returning a new object
- Putting side effects inside the reducer instead of in useEffect or handlers
- Using useReducer for trivial single-value state where useState is simpler
- Forgetting a default case in the reducer switch
- Dispatching actions without a consistent type field
Best Answer (HR Friendly)
“useReducer is a React tool for handling complicated state by sending named actions to one function that decides the new state. It keeps all the update rules in a single place, making the logic easier to follow and test.”
Code Example
import { useReducer } from 'react'
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 }
case 'decrement':
return { count: state.count - 1 }
case 'reset':
return { count: 0 }
default:
return state
}
}
export default function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 })
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
</div>
)
}Follow-up Questions
- When would you choose useReducer over useState?
- Why must a reducer be a pure function?
- How do you combine useReducer with useContext for global state?
- What is the lazy initializer argument to useReducer?
- How does useReducer relate to the Redux pattern?
MCQ Practice
1. What does useReducer return?
useReducer returns a pair: the current state and a dispatch function used to send actions to the reducer.
2. What is the correct signature of a reducer function?
A reducer takes the current state and an action and returns the next state: (state, action) => newState.
3. When is useReducer preferable to useState?
useReducer shines when state is complex, has multiple sub-values, or next state depends on the previous state.
Flash Cards
What does useReducer return? — An array of [state, dispatch] — the current state and a function to dispatch actions.
Reducer function shape? — A pure function (state, action) => newState, typically using a switch on action.type.
useReducer vs useState? — Prefer useReducer for complex state logic, multiple sub-values, or when next state depends on previous state.
How do you trigger an update? — Call dispatch({ type, payload }); React runs the reducer and re-renders with the returned state.