feat: use interval instead of timeout (#796)

Author: DorianMaliszewski

packages/use-dataloader/src/__tests__/useDataLoader.test.tsx

@@ -251,7 +251,7 @@ describe('useDataLoader', () => {
     const pollingProps = {
       config: {
         needPolling: () => true,
-        pollingInterval: PROMISE_TIMEOUT,
+        pollingInterval: 1000,
       },
       key: 'test-6',
       method: jest.fn(
@@ -295,7 +295,7 @@ describe('useDataLoader', () => {
     rerender({
       ...pollingProps,
       config: {
-        pollingInterval: 300,
+        pollingInterval: 1000,
       },
       method: method2,
     })
@@ -314,7 +314,7 @@ describe('useDataLoader', () => {
     rerender({
       ...pollingProps,
       config: {
-        pollingInterval: PROMISE_TIMEOUT,
+        pollingInterval: 1000,
       },
       method: method2,
     })
@@ -363,7 +363,7 @@ describe('useDataLoader', () => {
     const pollingProps = {
       config: {
         needPolling: true,
-        pollingInterval: PROMISE_TIMEOUT,
+        pollingInterval: 1000,
       },
       key: 'test-needpolling-no-interval',
       method: jest.fn(

packages/use-dataloader/src/useDataLoader.ts

@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useDataLoaderContext } from './DataLoaderProvider'
 import { StatusEnum } from './constants'
 import DataLoader from './dataloader'
@@ -27,20 +21,12 @@ function useDataLoader<ResultType, ErrorType = Error>(
   const methodRef = useRef(method)
   const onSuccessRef = useRef(onSuccess)
   const onErrorRef = useRef(onError ?? onGlobalError)
-  const isMountedRef = useRef(false)
+  const needPollingRef = useRef(needPolling)
   const [, setCounter] = useState(0)
   const forceRerender = useCallback(() => {
     setCounter(current => current + 1)
   }, [])
 
-  useLayoutEffect(() => {
-    isMountedRef.current = true
-
-    return () => {
-      isMountedRef.current = false
-    }
-  })
-
   const request = getOrAddRequest(fetchKey, {
     enabled,
     method: methodRef.current,
@@ -77,6 +63,10 @@ function useDataLoader<ResultType, ErrorType = Error>(
     [request],
   )
 
+  useEffect(() => {
+    needPollingRef.current = needPolling
+  }, [needPolling])
+
   useEffect(() => {
     request.method = method
   }, [method, request])
@@ -102,33 +92,30 @@ function useDataLoader<ResultType, ErrorType = Error>(
   }, [enabled, request, keepPreviousData])
 
   useEffect(() => {
-    let timeout: NodeJS.Timeout
-
-    if (
-      isMountedRef.current &&
-      request &&
-      pollingInterval &&
-      needPolling &&
-      (request.status === StatusEnum.SUCCESS ||
-        request.status === StatusEnum.ERROR)
-    ) {
-      if (
-        (typeof needPolling === 'function' && needPolling(request.data)) ||
-        (typeof needPolling !== 'function' && needPolling)
-      ) {
-        timeout = setTimeout(() => {
+    let interval: NodeJS.Timer
+
+    if (pollingInterval) {
+      interval = setInterval(() => {
+        if (
+          (needPollingRef.current &&
+            typeof needPollingRef.current === 'function' &&
+            needPollingRef.current(request.data)) ||
+          (typeof needPollingRef.current !== 'function' &&
+            needPollingRef.current &&
+            !request.isCalled)
+        ) {
           request
             .load(true)
             .then(onSuccessRef.current)
             .catch(onErrorRef.current)
-        }, pollingInterval)
-      }
+        }
+      }, pollingInterval)
     }
 
     return () => {
-      if (timeout && !isMountedRef.current) clearTimeout(timeout)
+      if (interval) clearInterval(interval)
     }
-  }, [pollingInterval, needPolling, request, request.status, request.data])
+  }, [pollingInterval, request])
 
   return {
     data: !request.isFirstLoading ? request.data : initialData,