Step 5: A countdown timer with useEffect

Add pressure: 10 seconds per question. A timer is a side effect, so it lives in useEffect. The effect starts a setInterval, and returns a cleanup function that stops it: without that, old timers would pile up each time the question changes. The resetKey makes the effect restart for each new question, and a second effect calls onExpire when the time runs out, which counts as a wrong answer.

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 };

function ProgressBar({ value, max }) {
  return (
    <div role="progressbar" aria-valuemin={0} aria-valuemax={max} aria-valuenow={value} style={{ height: 8, background: "#e1e4ea", borderRadius: 4, margin: "8px 0" }}>
      <div style={{ width: (value / max) * 100 + "%", height: "100%", background: "#1b7f4c", borderRadius: 4, transition: "width .3s" }} />
    </div>
  );
}

function Countdown({ seconds, onExpire, resetKey }) {
  const [left, setLeft] = useState(seconds);

useEffect(() => {
    setLeft(seconds);
    const id = setInterval(() => setLeft((s) => s - 1), 1000);
    return () => clearInterval(id);          // cleanup when the question changes
  }, [resetKey, seconds]);

useEffect(() => {
    if (left <= 0) onExpire();
  }, [left]);

return <p aria-live="off" style={{ color: left <= 3 ? "#c62828" : "inherit" }}>⏱ {Math.max(left, 0)}s</p>;
}

function App() {
  const [index, setIndex] = useState(0);
  const [selected, setSelected] = useState(null);
  const [score, setScore] = useState(0);
  const finished = index >= QUESTIONS.length;

if (finished) {
    const pct = Math.round((score / QUESTIONS.length) * 100);
    return (
      <div style={{ fontFamily: "sans-serif" }}>
        <h2>Done! {pct}%</h2>
        <ProgressBar value={score} max={QUESTIONS.length} />
        <p>You scored {score} out of {QUESTIONS.length}.</p>
        <button onClick={() => { setIndex(0); setSelected(null); setScore(0); }}>Play again</button>
      </div>
    );
  }

const question = QUESTIONS[index];
  const answered = selected !== null;

return (
    <div style={{ maxWidth: 420, fontFamily: "sans-serif" }}>
      <ProgressBar value={index} max={QUESTIONS.length} />
      <p>Question {index + 1} of {QUESTIONS.length} · Score {score}</p>
      <Countdown seconds={10} resetKey={index} onExpire={() => { if (!answered) setSelected(-1); }} />
      <h2>{question.q}</h2>
      <div role="group" aria-label="Answers">
        {question.options.map((o, i) => {
          let style = box;
          if (answered && i === question.answer) style = { ...box, borderColor: "#1b7f4c", background: "#e3f6ec" };
          else if (answered && i === selected) style = { ...box, borderColor: "#c62828", background: "#fdeaea" };
          return (
            <button key={o} style={style} disabled={answered} onClick={() => { setSelected(i); if (i === question.answer) setScore(score + 1); }}>
              {i + 1}. {o}
            </button>
          );
        })}
      </div>
      {answered && <button onClick={() => { setIndex(index + 1); setSelected(null); }}>Next</button>}
    </div>
  );
}

Open in editor »

Wait without answering and watch the question lock when the time reaches zero. Try removing the return () => clearInterval(id) line to see the countdown speed up as intervals stack: that bug is why cleanup functions exist.

Your turn: write the code

Write formatTime(seconds) that returns minutes and seconds as m:ss, so formatTime(75) is 1:15 and formatTime(5) is 0:05. Print formatTime(75), formatTime(5) and formatTime(600).

Quick check

What does the function returned from useEffect do?

Cleans up (for example stops the timer) before the next run or on removalRenders the componentUpdates state

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.