What is useReducer and when to use it over useState?

Question

Accepted Answer

**useReducer** is a React hook for managing **complex state logic** using a **reducer function** — a pure function that takes the current state and an action, and returns the new state. It follows the same pattern as **Redux** but lives inside your component. **How it works:** 1. You define a **reducer function** that describes how state changes for each action type 2. You call `useReducer(reducer, initialState)` which returns `[state, dispatch]` 3. You call `dispatch(action)` to trigger state transitions — the reducer determines the new state **Full code example:** ```tsx import { useReducer } from "react"; type Todo = { id: number; text: string; done: boolean }; type State = { todos: Todo[]; filter: "all" | "active" | "completed" }; type Action = | { type: "ADD_TODO"; payload: string } | { type: "TOGGLE_TODO"; payload: number } | { type: "DELETE_TODO"; payload: number } | { type: "SET_FILTER"; payload: State["filter"] }; function reducer(state: State, action: Action): State { switch (action.type) { case "ADD_TODO": return { ...state, todos: [ ...state.todos, { id: Date.now(), text: action.payload, done: false }, ], }; case "TOGGLE_TODO": return { ...state, todos: state.todos.map(t => t.id === action.payload ? { ...t, done: !t.done } : t ), }; case "DELETE_TODO": return { ...state, todos: state.todos.filter(t => t.id !== action.payload), }; case "SET_FILTER": return { ...state, filter: action.payload }; default: return state; } } function TodoApp() { const [state, dispatch] = useReducer(reducer, { todos: [], filter: "all", }); const filteredTodos = state.todos.filter(t => { if (state.filter === "active") return !t.done; if (state.filter === "completed") return t.done; return true; }); return (

{ if (e.key === "Enter") { dispatch({ type: "ADD_TODO", payload: e.currentTarget.value }); e.currentTarget.value = ""; } }} placeholder="Add todo..." />

{(["all", "active", "completed"] as const).map(f => ( ))}

dispatch({ type: "TOGGLE_TODO", payload: todo.id })} style={{ textDecoration: todo.done ? "line-through" : "none" }} > {todo.text}

); } ``` **When to use useReducer over useState:** 1. **Complex state with multiple sub-values** — when a single piece of state has several interdependent fields (like the todo app above) 2. **State transitions depend on previous state** — when updating one field depends on the current value of another field 3. **Multiple actions affect the same state** — having clear action types makes the logic more predictable and debuggable 4. **You want predictable state updates** — the reducer is a pure function: same state + same action = same result, every time 5. **State logic is complex enough to extract** — you can move the reducer function outside the component for testing **When useState is simpler:** 1. **Independent, simple values** like a boolean toggle or a string input 2. **No complex transition logic** — just setting a new value directly 3. **You want less boilerplate** — useState is one line vs. defining types, reducer function, and action objects **Performance note:** useReducer and useState have the **same performance characteristics** — both schedule a re-render. The advantage of useReducer is purely about **code organization and predictability**, not performance.

React: What is useReducer and when to use it over useState?