Untitled

import { useEffect, useState } from "react";

export const Timer = () => {
  const [timer, setTimer] = useState(0);
  const [run, setRun] = useState(false);

  const handleStart = () => {
    setRun(true);
  };

  const handleStop = () => {
    setRun(false);
  };
  const handleReset = () => {
    setRun(false);
    setTimer(0);
  };

  useEffect(() => {
    let i;
    if (run) {
      i = setInterval(() => {
        setTimer((prev) => prev + 1);
      }, 1000);
    }

    return () => {
      clearInterval(i);
    };
  }, [run]);

  return (
    <div>
      <h1>Timer</h1>
      <h4>Seconds: {timer} </h4>
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};