title: How to prevent a web timer to throttle on inactive tab(Chrome)?
body: <p>I'm building simple web timer to calculate time working on tasks. Say, I have a 5 min timer and when time is up, I receive a notification.</p>
  <p>I build it storing the time in state. But when the tab (Chrome) is inactive, because I'm actually working, the time throttle and gather some delay. (Chrome does that to conserve memory).</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect } from &quot;react&quot;;
  import { useFinishSession } from &quot;../../hooks/useFinishSession&quot;;
  
  const TimerIsActive = ({ setTimer, timerState, isActive }) =&gt; {
    const { seconds, minutes, initialSeconds, initialMinutes } = timerState;
    const { decreaseSeconds, decreaseMinutes, setSessionMinutes, setSessionSeconds } = setTimer;
    const { finishSession, loading, error } = useFinishSession();
    
  useEffect(() =&gt; {
      let interval: NodeJS.Timer;
  
      // reduce seconds and minutes by 1
      if (isActive) {
        interval = setInterval(() =&gt; {
          if (seconds &gt; 0) {
            decreaseSeconds();
          }
          // when timer is finised, restart
          if (seconds === 0 &amp;&amp; minutes === 0) {
            finishSession();
            setSessionMinutes(initialMinutes);
            setSessionSeconds(initialSeconds);
            clearInterval(interval);
          }
          if (seconds === 0) {
            decreaseMinutes();
          }
        }, 1000);
        return () =&gt; clearInterval(interval);
      }
    }, [isActive, seconds, minutes]);
  
    return null;
  };
  
  export default TimerIsActive;
  </code></pre>
  <p>How I go around that?</p>
  <p>Here'are the solutions I'm contemplating:</p>
  <ol>
  <li><p>Instead of storing the time in state, I will store the &quot;start time&quot; using a new Date() and calculate the difference every second to get an accurate time. (difference in seconds) --&gt; my main concern with this approach is that the time only &quot;correct&quot; when the tab regain &quot;focus&quot;. Hence, the notification won't fire &quot;in time&quot; when the timer is over.</p>
  </li>
  <li><p>Using service worker to calculate the time in the background.</p>
  </li>
  </ol>
  <p>What is the best options?</p>
  <p>Similar question:
  <a href="https://stackoverflow.com/questions/39807957/countdown-timer-delays-when-tab-is-inactive">Countdown timer &#39;delays&#39; when tab is inactive?</a></p>