Tutorials › React Modern Development › useReducer

useReducer

6 min read Quiz at the end

useReducer manages complex state with a reducer function and dispatch actions. Define action types and how each changes state in a switch statement. Better than useState when multiple related values change together.

useReducer Hook

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: throw new Error("Unknown action");
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      {state.count}
      
    
  );
}

← useContext Next: useMemo and useCallback →

Topic Quiz · 5 questions

Test your understanding before moving on

1. useReducer is best for:

💡 useReducer is preferred when state logic is complex or next state depends on current state.

2. What does a reducer receive?

💡 A reducer function receives (state, action) and returns the new state.

3. What does dispatch() do?

💡 dispatch() sends an action object to the reducer function.

4. What pattern do action types follow?

💡 Action types are typically uppercase strings like INCREMENT or USER_LOGIN.

5. useReducer vs useState — key difference?

💡 useReducer moves state logic into a pure reducer function, improving testability.

Quick Access

useReducer

useReducer Hook

Test your understanding before moving on