title: Preventing page from refreshing/reloading-ReactJS
body: <p>I've built a countdown counter using React hooks, but while I was comparing its accuracy with its vanilla JS counterpart (I was displaying their current timer on the document title, i.e., I was active on a third tab), I noticed that the react timer stopped after awhile , and when I opened the tab, the page refreshed and the timer reset to its initial state, while this didn't/doesn't happen in the vanilla JS version. I would like to mention that I opened maybe 15 YouTube videos, because I want the timer to be working while doing heavy duty work on my machine. How can I prevent this from happening?</p>
  <p>Here is the code</p>
  <p>App.js</p>
  <pre><code>import React, { useState } from 'react';
  import convertTime from '../helper-functions/convertTime';
  import useInterval from '../hooks/useInterval';
  
  const Countdown = () =&gt; {
    const [count, setCount] = useState(82.5 * 60);
    const [delay, setDelay] = useState(1000);
    const [isPlaying, setIsPlaying] = useState(false);
    document.title = convertTime(count);
    useInterval(() =&gt; setCount(count - 1), isPlaying ? delay : null);
  
    const handlePlayClick = () =&gt; setIsPlaying(true);
    const handlePauseClick = () =&gt; setIsPlaying(false);
  
    const handleResetClick = () =&gt; {
      setCount(82.5 * 60);
      setDelay(1000);
      setIsPlaying(false);
    };
    return (
      &lt;div className='counter'&gt;
        &lt;div className='time'&gt;{convertTime(count)}&lt;/div&gt;
        &lt;div className='actions'&gt;
          &lt;button onClick={handlePlayClick}&gt;play&lt;/button&gt;
          &lt;button onClick={handlePauseClick}&gt;pause&lt;/button&gt;
          &lt;button onClick={handleResetClick}&gt;reset&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Countdown;
  
  </code></pre>
  <p>useInterval.js</p>
  <pre><code>import React, { useState, useEffect, useRef } from 'react';
  
  function useInterval(callback, delay) {
    const savedCallback = useRef();
  
    // Remember the latest callback.
    useEffect(() =&gt; {
      savedCallback.current = callback;
    }, [callback]);
  
    // Set up the interval.
    useEffect(() =&gt; {
      function tick() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () =&gt; clearInterval(id);
      }
    }, [delay]);
  }
  
  export default useInterval;
  
  </code></pre>