FrontendInterviews.dev

Loading problem…

22. Stopwatch

Medium•
Acceptance: 51.00%
•
🔓3/3 Pro unlocks today

Build a Stopwatch component in React that allows users to start, pause, and reset a stopwatch.

Requirements

1. Stopwatch Display

  • Display time in MM:SS:MS format (minutes:seconds:milliseconds)
  • Start from 00:00:00
  • Update display every 10ms (or every 100ms for better performance)

2. Stopwatch Controls

  • "Start" button to begin the stopwatch
  • "Pause" button to pause the stopwatch
  • "Reset" button to reset to 00:00:00
  • Buttons should be disabled/enabled appropriately

3. Stopwatch Behavior

  • Start: Begin counting up from current time
  • Pause: Stop counting but preserve current time
  • Reset: Stop and reset to 00:00:00
  • Lap functionality (optional): Record lap times

Example Usage

// Component should handle:
// - Time tracking (milliseconds)
// - Start/Pause/Reset controls
// - Time formatting (MM:SS:MS)

Constraints

  • Stopwatch should update frequently (every 10-100ms)
  • Time should be displayed in MM:SS:MS format
  • Handle edge cases: rapid start/pause clicks
  • Clean up intervals on unmount