Step 7: Components and a reducer

The last step tidies the structure. State changes are now actions handled by a reducer function (select, next, restart), which puts every rule in one place and makes the logic easy to test. The UI is split into Question and Result components that receive dispatch as a prop, and App just decides which to show.

Examplereact

const QUESTIONS = [
  { q: "Which hook stores a value that changes?", options: ["useState", "useRef", "useMemo"], answer: 0 },
  { q: "What does JSX compile to?", options: ["HTML strings", "React.createElement calls", "CSS"], answer: 1 },
  { q: "Which prop gives list items a stable identity?", options: ["id", "key", "name"], answer: 1 },
  { q: "Where should side effects like timers go?", options: ["useEffect", "the render body", "JSX"], answer: 0 },
];

const box = { display: "block", width: "100%", textAlign: "left", padding: 10, margin: "6px 0", border: "2px solid #8a90a0", borderRadius: 8, background: "#fff", cursor: "pointer", fontSize: 16 };

const initial = { answers: [], selected: null };

Open in editor »

You have built a complete React app: data-driven UI, state, derived values, props, effects with cleanup, accessibility attributes and a reducer. Where next: load the questions from a JSON file with fetch, shuffle them, add categories and difficulty levels, write tests for the reducer (it is a plain function), and deploy it with a build tool such as Vite.

Quick check

What is the advantage of a reducer?

All state changes are described as actions in one placeIt removes the need for componentsIt makes the app load faster

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.