useReducer State Reducer
Last updated: 2026-11-02
useReducer State Reducer
useReducer concentrates the question "how does the state change?" into one pure reducer function: dispatching an action triggers it and the reducer computes the new state from that action. When there are many state transitions, complicated logic, or several values that must change together, it is clearer and more testable than a pile of useState calls. The reducer is a plain function, so it can be exercised on its own without rendering anything at all.
| Group | Effects & Performance |
|---|---|
| Kind | Hook |
| Since | React 16.8 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 }
case 'reset': return { count: 0 }
default: return state // an unknown action returns the same state
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 })
dispatch({ type: 'increment' })⚙️ Parameters
| reducer | The pure function (state, action) => newState: no side effects, no direct mutation of the state, and it must return a new object. |
|---|---|
| initialArg | The initial state; a third argument can pass a lazy initializer init(initialArg). |
Returns：Returns [state, dispatch], the current state and the dispatch function. The reference of dispatch never changes, so it is safe to put in a dependency array or to pass to a child component.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The three buttons dispatch the inc, dec and reset actions, the count is computed by the reducer and the UI updates in real time.💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
