// src/App.jsx
import { useRef, useState } from "react";

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);

  function handleStart() {
    intervalRef.current = setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
    </div>
  );
}

function App() {
  return <Stopwatch />;
}

export default App;

/*
  Notes:
  - intervalRef holds the id returned by setInterval, set inside
    handleStart and read back inside handleStop — two completely
    separate function calls, sharing the same ref between them.
  - A plain variable couldn't do this: it would be recreated fresh
    each time the component re-renders, losing the id handleStop
    needs to actually stop the right interval.
*/