Refactor: don't poll data in background tabs

safe-global · Feb 15, 2024 · 00bcd0c · 00bcd0c
1 parent ffd511f
commit 00bcd0c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/hooks/__tests__/useIntervalCounter.test.ts b/src/hooks/__tests__/useIntervalCounter.test.ts
@@ -1,6 +1,8 @@
 import { act, renderHook } from '@testing-library/react'
 import useIntervalCounter from '../useIntervalCounter'
 
+global.requestAnimationFrame = (callback: any) => setTimeout(callback, 0)
+
 describe('useIntervalCounter', () => {
   beforeAll(() => {
     jest.useFakeTimers()
@@ -13,13 +15,13 @@ describe('useIntervalCounter', () => {
     expect(result.current[1]).toBeInstanceOf(Function)
 
     act(() => {
-      jest.advanceTimersByTime(100)
+      jest.advanceTimersByTime(200)
     })
 
     expect(result.current[0]).toBe(1)
 
     act(() => {
-      jest.advanceTimersByTime(100)
+      jest.advanceTimersByTime(200)
     })
 
     expect(result.current[0]).toBe(2)
@@ -29,7 +31,7 @@ describe('useIntervalCounter', () => {
     const { result } = renderHook(() => useIntervalCounter(100))
 
     act(() => {
-      jest.advanceTimersByTime(100)
+      jest.advanceTimersByTime(200)
     })
 
     expect(result.current[0]).toBe(1)

diff --git a/src/hooks/useIntervalCounter.ts b/src/hooks/useIntervalCounter.ts
@@ -8,8 +8,19 @@ const useIntervalCounter = (interval: number): [number, () => void] => {
   }, [setCounter])
 
   useEffect(() => {
-    const timerId = setTimeout(() => setCounter(counter + 1), interval)
-    return () => clearTimeout(timerId)
+    let reqFrameId: number
+    const timerId = setTimeout(() => {
+      // requestAnimationFrame prevents the timer from ticking in a background tab
+      reqFrameId = requestAnimationFrame(() => {
+        setCounter(counter + 1)
+      })
+    }, interval)
+    return () => {
+      clearTimeout(timerId)
+      if (reqFrameId) {
+        cancelAnimationFrame(reqFrameId)
+      }
+    }
   }, [counter, interval])
 
   return [counter, resetCounter]