⏰ Machine Coding Challenge: Countdown Timer Component

Create a production-ready countdown timer that demonstrates advanced React patterns, state management, and real-world timer functionality.

Problem Statement

Design and implement a Countdown Timer component with the following requirements:

🧠 The Big Picture - What Are We Actually Building?

Imagine you're taking an online quiz. Each question has a timer that counts down from 10 seconds. If you don't answer in time, it automatically moves to the next question. That's exactly what we're building!

But here's the thing - timers in React are tricky. Unlike a regular JavaScript timer, React components can re-render many times, and we need our timer to work smoothly without breaking.

Core Concepts You Need to Understand

1. What is State in React?

Think of state like your phone's battery percentage - it changes over time, and when it changes, your phone's display updates to show the new percentage.

In our quiz:

• currentQuestion is like "which page of the quiz am I on?"
• score is like "how many points do I have?"
• timeLeft is like "how much time is left on this question?"
• showResult is like "should I show the final score page?"

2. Why Do We Need useEffect for Timers?

This is the most confusing part for beginners! Let me explain:

The Problem: If you just write setInterval or setTimeout directly in your component, it will create a new timer every time React re-renders (which happens a lot!). Soon you'll have 100 timers running at once!

The Solution: useEffect lets us say "Hey React, only create this timer when specific things change, and clean up the old timer first."

3. The Timer Logic - Step by Step

Let's think through what happens every second:

1. Check: Is the quiz finished? If yes, don't run the timer.
2. Count Down: If time is left (like 5 seconds), make it 4 seconds.
3. Time's Up: If time reaches 0, what should happen?
   • If there are more questions → Go to next question, reset timer to 10
   • If this was the last question → Show the final results

🔄 The Flow - How Everything Connects

Let me walk you through what happens when a user plays our quiz:

Step 1: Quiz Starts

• User sees Question 1
• Timer starts at 10 seconds
• Score is 0

Step 2: Every Second (This is the useEffect magic!)

• Timer checks: "Am I still counting down?"
• If yes: 10 becomes 9, then 8, then 7...
• If time reaches 0: "Oops, time's up! Move to next question"

Step 3: User Clicks an Answer

• Check if answer is correct → add to score if yes
• Move to next question OR show results if finished
• Reset timer back to 10 seconds

Step 4: Quiz Ends

• Show final score
• Offer retry button

The Tricky Parts Explained

Why the Cleanup Function?

return () => clearTimeout(timer);

Imagine you start a stopwatch, then start another stopwatch, then another... soon you have 50 stopwatches running! The cleanup function is like stopping the old stopwatch before starting a new one.

Why These Dependencies?

useEffect(() => {
  // timer logic
}, [timeLeft, currentQuestion, questions, showResult]);

This tells React: "Run this timer code again when any of these things change."

• timeLeft changes → run timer again
• currentQuestion changes → run timer again
• etc.

Why Check if (showResult) return;?

Once the quiz is over, we don't want the timer running in the background. This stops it immediately.

Real-World Example - Let's Trace Through It

Let's say I'm playing your quiz:

• Second 0: Quiz starts, I see "What is the capital of France?", timer shows 10
• Second 1: Timer shows 9 (useEffect ran, decreased timeLeft by 1)
• Second 2: Timer shows 8
• Second 5: I click "Paris" (correct!)
  • Score becomes 1
  • Question changes to "What is the largest planet?"
  • Timer resets to 10
• Second 6: Now on question 2, timer shows 10 again
• Seconds 7-16: Timer counts down: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0
• Second 17: Time's up! Automatically moves to question 3, timer resets to 10

This continues until all questions are done or answered.

Code

import { useState, useEffect } from 'react';

function QuizApp() {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(10);
  const [showResult, setShowResult] = useState(false);

  const questions = [
    'What is the capital of France?',
    'What is the largest planet in our solar system?',
    'What is the smallest country in the world by land area?',
  ];

  const answers = [
    ['Paris', 'Berlin', 'Rome', 'Madrid'],
    ['Jupiter', 'Saturn', 'Mars', 'Neptune'],
    ['Vatican City', 'Monaco', 'Nauru', 'San Marino'],
  ];

  const handleAnswer = (answer) => {
    if (answer === answers[currentQuestion][0]) {
      setScore(score + 1);
    }
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
      setTimeLeft(10);
    } else {
      setShowResult(true);
    }
  };

  const handleRetry = () => {
    setCurrentQuestion(0);
    setScore(0);
    setTimeLeft(10);
    setShowResult(false);
  };

  useEffect(() => {
    if (showResult) return;

    const countdown = setTimeout(() => {
      if (timeLeft > 0) {
        setTimeLeft(timeLeft - 1);
      } else {
        if (currentQuestion < questions.length - 1) {
          setCurrentQuestion(currentQuestion + 1);
          setTimeLeft(10);
        } else {
          setShowResult(true);
        }
      }
    }, 1000);

    // Cleanup to clear the timer when component unmounts or updates
    return () => clearTimeout(countdown);
  }, [timeLeft, currentQuestion, questions, showResult]);

  if (showResult) {
    return (
      <div>
        <h1>Quiz Result</h1>
        <p>Your score is {score} / {questions.length}</p>
        <button onClick={handleRetry}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      <h1>Quiz App</h1>
      <p>
        Question {currentQuestion + 1}: {questions[currentQuestion]}
      </p>
      {answers[currentQuestion].map((answer) => (
        <button key={answer} onClick={() => handleAnswer(answer)}>
          {answer}
        </button>
      ))}
      <p>Time left: {timeLeft} seconds</p>
      <p>Score: {score} / {questions.length}</p>
    </div>
  );
}

export default QuizApp;

Why This Approach Works

• Predictable: Every second, exactly one thing happens
• Clean: No memory leaks from multiple timers
• Flexible: Easy to change timer duration or add features
• React-friendly: Works with React's re-rendering system

🚨 Common Mistakes Students Make

• Forgetting cleanup: Creates multiple timers, app becomes slow
• Wrong dependencies: Timer doesn't update when it should
• Not checking showResult: Timer keeps running after quiz ends
• Direct timer creation: Creating timers outside useEffect

Now that you understand the WHY and HOW, the code becomes much easier to understand and modify! The logic is more important than memorizing syntax.

🔗 Related Challenges

• Quiz App with Timer: Integrate countdown timer into quiz application
• Pomodoro Timer: Build a complete productivity timer
• Stopwatch Component: Create a stopwatch with lap functionality
• Timer with Notifications: Add browser notifications and sound alerts

Ready to build your countdown timer? Start with the basic implementation and gradually add advanced features. Remember to focus on clean code, proper cleanup, and excellent user experience!