title: How can I implement this countdown timer in React with hooks?
body: <p>I have been unsuccessfully trying to convert this vanilla JS countdown timer into React with React hooks.</p>
  <p>This is my code in vanilla JS</p>
  <pre><code>const playBtn = document.querySelector('#play');
  const pauseBtn = document.querySelector('#pause');
  
  let counter = 82.5 * 60;
  let timePassedElem = document.getElementById('time-passed');
  
  const convertTime = (count) =&gt; {
    let hours = Math.floor(count / 3600);
    let minutes = Math.floor(count / 60) - hours * 60;
    let seconds = parseFloat(count % 60).toFixed(0);
    if (hours &lt; 10) hours = `0${hours}`;
    if (minutes &lt; 10) minutes = `0${minutes}`;
    if (seconds &lt; 10) seconds = `0${seconds}`;
    return `${hours}:${minutes}:${seconds}`;
  };
  let intervalId;
  
  playBtn.addEventListener('click', () =&gt; {
    let startTime = new Date();
    intervalId = setInterval(() =&gt; {
      document.title = convertTime(
        counter + Math.floor((startTime.getTime() - new Date().getTime()) / 1000)
      );
      timePassedElem.innerText = convertTime(
        counter + Math.floor((startTime.getTime() - new Date().getTime()) / 1000)
      );
    }, 200);
  });
  
  pauseBtn.addEventListener('click', () =&gt; {
    clearInterval(intervalId);
  });
  
  </code></pre>
  <p>and this is my try in React hooks but it doesn't work</p>
  <pre><code>import React, { useState, useEffect, useRef } from 'react';
  import './App.css';
  
  function App() {
    const [clockTime, setClockTime] = useState(82.5 * 60);
    const [isPlaying, setIsPlaying] = useState(false);
    const startTime = useRef();
    const prevDiff = useRef();
  
    useEffect(() =&gt; {
      startTime.current = new Date().getTime();
      prevDiff.current = 0;
    }, []);
    useEffect(() =&gt; {
      document.title = convertTime(clockTime);
      let intervalId;
      if (isPlaying) {
        intervalId = setInterval(() =&gt; {
          const currentTime = new Date().getTime();
          const delay = Math.floor((currentTime - startTime.current) / 1000);
          console.log(delay);
          setClockTime(clockTime - delay + prevDiff.current);
          prevDiff.current = delay;
        }, 200);
      }
      return () =&gt; {
        clearInterval(intervalId);
      };
    }, [isPlaying, clockTime]);
  
    const handlePlayClick = () =&gt; {
      setIsPlaying(true);
    };
  
    const handlePauseClick = () =&gt; [setIsPlaying(false)];
  
    const convertTime = (count) =&gt; {
      let hours = Math.floor(count / 3600);
      let minutes = Math.floor(count / 60) - hours * 60;
      let seconds = parseFloat(count % 60).toFixed(0);
      if (hours &lt; 10) hours = `0${hours}`;
      if (minutes &lt; 10) minutes = `0${minutes}`;
      if (seconds &lt; 10) seconds = `0${seconds}`;
      return `${hours}:${minutes}:${seconds}`;
    };
    return (
      &lt;div className='App'&gt;
        &lt;span&gt;{convertTime(clockTime)}&lt;/span&gt;
        &lt;span&gt;Session&lt;/span&gt;
        {isPlaying ? (
          &lt;button onClick={handlePauseClick}&gt;Pause&lt;/button&gt;
        ) : (
          &lt;button onClick={handlePlayClick}&gt;Play&lt;/button&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>For one, the timer jumps few seconds at the beginning. Second when I press Pause, the timer doesn't resume from where it was left off. Third, the timer is inaccurate, and drifts over time compared to the JS code.</p>
  <p>How can I convert my JS code into a working React code with React hooks?</p>