useReducer

useReducer manages state through a reducer function that maps the current state and an action to the next state. It keeps related updates in one place and makes complex transitions testable.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain how a reducer maps state and an action to the next state
Write a reducer for a form or a list with several actions
Spot the mutated state that React does not re-render for

In practice

A few lines that show useReducer doing its job.

TSX

type Action = { type: "add"; text: string } | { type: "toggle"; id: number };

function reducer(todos: Todo[], action: Action): Todo[] {
  switch (action.type) {
    case "add": return [...todos, { id: Date.now(), text: action.text, done: false }];
    case "toggle": return todos.map((t) => t.id === action.id ? { ...t, done: !t.done } : t);
  }
}

const [todos, dispatch] = useReducer(reducer, []);
dispatch({ type: "add", text: "Write tests" });

The common mistake

Watch for

Mutating the state inside the reducer and returning it. React compares by reference, sees the same object, and skips the render. Always return a new state object.

What to know first

Your roadmap puts these before useReducer, unless you already know them.

useState

How it stays learned

Once a session shows you understand useReducer, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Previous in the module← useContext

Next in the moduleAvoiding prop drilling →