packages/components/hooks/useHasSuspendedCounter.ts

   1 import { useEffect, useState } from 'react';
   2
   3 interface Props {
   4     refreshInterval: number;
   5     tolerance: number;
   6 }
   7 const useHasSuspendedCounter = ({ refreshInterval, tolerance }: Props) => {
   8     const [counter, setCounter] = useState(0);
   9
  10     useEffect(() => {
  11         let previousTime = Date.now();
  12         let unmounted = false;
  13
  14         const intervalHandle = window.setInterval(() => {
  15             const currentTime = Date.now();
  16             const computedInterval = currentTime - previousTime;
  17             const isOutOfSync = Math.abs(computedInterval - refreshInterval) > tolerance;
  18             if (isOutOfSync && !unmounted) {
  19                 setCounter((counter) => counter + 1);
  20             }
  21             previousTime = currentTime;
  22         }, refreshInterval);
  23
  24         return () => {
  25             unmounted = true;
  26             clearInterval(intervalHandle);
  27         };
  28     }, [refreshInterval, tolerance]);
  29
  30     return counter;
  31 };
  32
  33 export default useHasSuspendedCounter;