🚀 Mastering React’s useState and useRef: A Stopwatch Example

React’s useState and useRef hooks are a dynamic duo for building interactive UIs. useState manages reactive state, triggering re-renders to update the UI when values change. useRef, on the other hand, holds mutable values that persist across renders without causing re-renders—perfect for storing data like timers or DOM references. Together, they enable clean, efficient solutions for features like counters or timers.

Below, I’ve shared a stopwatch app that combines useState and useRef to track elapsed time with start, stop, and reset functionality. Let’s break down how it works!

import { useState, useRef } from 'react';
import './App.css';

function App() {
  // State to store the start time of the current timer session
  const [startTime, setStartTime] = useState(null);
  // State to store the current time, updated every 10ms for real-time display
  const [now, setNow] = useState(null);

  // Ref to store the interval ID for cleanup
  const intervalRef = useRef(null);
  // Ref to store cumulative elapsed time across start/stop cycles
  const leapTimeRef = useRef(0);

  // Starts the stopwatch
  const handleStart = () => {
    const currentTime = Date.now(); // Get current timestamp
    setStartTime(currentTime); // Set start time
    setNow(currentTime); // Initialize current time for display
    clearInterval(intervalRef.current); // Clear any existing interval
    // Start interval to update 'now' every 10ms
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  };

  // Stops the stopwatch and accumulates elapsed time
  const handleStop = () => {
    clearInterval(intervalRef.current); // Stop the interval
    if (startTime != null && now != null) {
      // Add elapsed time of current session to leapTimeRef
      leapTimeRef.current += (now - startTime) / 1000;
    }
    setStartTime(null); // Reset startTime to prevent miscalculations
  };

  // Resets the stopwatch to initial state
  const handleReset = () => {
    clearInterval(intervalRef.current); // Stop the interval
    leapTimeRef.current = 0; // Reset cumulative time
    setStartTime(null); // Clear start time
    setNow(null); // Clear current time
  };

  // Calculate total elapsed time (persistent + current session)
  let secondsPassed = leapTimeRef.current;
  if (startTime != null && now != null) {
    secondsPassed += (now - startTime) / 1000; // Add current session time
  }

  // Render the stopwatch UI
  return (
    <div className="App">
      <p>{secondsPassed.toFixed(2)}</p> {/* Display time with 2 decimal places */}
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

export default App;

How It Works:

1) State Management with useState:

• startTime stores the timestamp when the stopwatch starts (set via setStartTime).
• now updates every 10ms with the current timestamp (via setNow), triggering re-renders to display real-time elapsed time.
• These reactive states ensure the UI reflects the timer’s current state.

2) Persistent Data with useRef:

• intervalRef holds the ID of the setInterval timer, allowing us to clear it when stopping or resetting without affecting renders.
• leapTimeRef tracks the cumulative elapsed time (in seconds) across multiple start/stop cycles, persisting without triggering re-renders.

3) Function Breakdown:

• handleStart: Sets startTime and now to the current timestamp, clears any existing interval, and starts a new interval to update now every 10ms.
• handleStop: Stops the interval, calculates the elapsed time since startTime, adds it to leapTimeRef.current, and resets startTime to prevent miscalculations.
• handleReset: Clears the interval, resets leapTimeRef to 0, and clears startTime and now for a fresh start.

4) Displaying Time:

• secondsPassed combines leapTimeRef.current (past time) with the current session’s time (now - startTime) if running.
• Displayed with .toFixed(2) for two decimal places (e.g., 12.34 seconds).

Why This Combo Shines:

• useState drives real-time UI updates for a responsive experience.
• useRef ensures leapTimeRef and intervalRef persist efficiently, avoiding unnecessary re-renders.
• Together, they create a smooth, accurate stopwatch.

💡 Pro Tip:
Use useState for UI-driving data and useRef for persistent, non-rendering data. This pattern is key for performant React apps!