// React Context or useReducer? They solve different problems.
// Teaching excerpts; see the explanation and boundaries on the episode page.

// The reducer changes the count.
function reducer(n, action) {
  return action.type === "add"
    ? n + 1 : n;
}
const [n, dispatch] =
  useReducer(reducer, 0);
const add = () =>
  dispatch({ type: "add" });

// Context carries the result.
<CountContext value={n}>
  <Counter />
</CountContext>

// Inside Counter:
const n = useContext(CountContext);

// Small update? useState is enough.
const [n, setN] = useState(0);
const add = () => setN(n => n + 1);