Lesson 22 — Reducer state (expert)

Actions instead of setters

When state has several ways to change, useReducer keeps the rules in one place. A reducer is a function (state, action) => newState. Components only dispatch actions like "inc"; the reducer decides what each action does. Unknown actions return the state unchanged.

const [n, dispatch] = useReducer(reducer, 0);
<button onClick={() => dispatch("inc")}>+</button>

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: as features grow, all state changes stay predictable and easy to test.