Implementing a stopwatch using React - Frontend Machine Coding Question

Stopwatch implementation is one of the most commonly asked Frontend Machine Coding Question, and this machine coding question helps to evaluate the understanding of useEffect hook as part of react application. In this post, we will going to understand the implementation of a stopwatch using React that tracks elapsed time in hours, minutes, and seconds.

Component States & Hooks

It uses the useState hook to manage 2 component states to track time and status. [ millisecond, setMillisecond] state is used to track the time in milliseconds and [isActive, setIsActive] is used to track the active status of the watch.

The useEffect hook handles the timer functionality, starting an interval that increments the time every second when isActive is true and clearing the interval when paused.

Formatting Functions

A formatting function formatTime converts the elapsed time into a readable HH:MM:SS format. The component displays the time in a styled black-and-white layout and provides three buttons—Start, Pause, and Reset—to control the stopwatch.

Overall, this component demonstrates efficient state management, side effects handling with useEffect, and UI updates in real time, making it a great frontend machine coding question of how to build an interactive timer in React. 🚀

StopWatch React Component

React Component

import { useEffect, useState } from "react";
import "./styles.css";

function StopWatch() {
  const [millisecond, setMillisecond] = useState(0);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    let interval = null;
    if (isActive) {
      interval = setInterval(() => {
        setMillisecond((prevTime) => prevTime + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isActive]);

  const formatTime = (seconds) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor(seconds / 60) % 60;
    const sec = Math.floor(seconds % 60);
    return {
      hours: String(hours).padStart(2, "0"),
      minutes: String(minutes).padStart(2, "0"),
      sec: String(sec).padStart(2, "0"),
    };
  };

  const { hours, minutes, sec } = formatTime(millisecond);
  const handleStart = () => {
    setIsActive(true);
  };
  const handlePause = () => {
    setIsActive(false);
  };
  const handleReset = () => {
    setIsActive(false);
    setMillisecond(0);
  };

  return (
    <div className="container">
      <div>
        <h1>Stop Watch</h1>
        <div className="d-flex timeGroup">
          <div className="time">{hours}</div>
          <div className="time">{minutes}</div>
          <div className="time">{sec}</div>
        </div>
        <div className="d-flex buttonGroup">
          <div className="div">
            <button onClick={handleStart}>Start</button>
          </div>
          <div className="div">
            <button onClick={handlePause}>Pause</button>
          </div>
          <div className="div">
            <button onClick={handleReset}>Reset</button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default StopWatch;

Component Styles

// styles.css

.container {
  display: flex;
  justify-content: center;
}

.time {
  width: 33%;
  padding: 0.5rem;
  color: white;
  background-color: skyblue;
  border: 1px solid #eee;
}

.buttonGroup {
  display: flex;
  justify-content: space-between;
  width: 200px;
  margin-top: 1rem;
}

.timeGroup {
  display: flex;
  width: 200px;
}