Merge pull request #195 from atomic-state/enhancemennts/caching

enh(caching):

Author: danybeltran

package.json

@@ -1,6 +1,6 @@
 {
   "name": "http-react",
-  "version": "3.6.6",
+  "version": "3.6.7",
   "description": "React hooks for data fetching",
   "main": "dist/index.js",
   "scripts": {

src/hooks/use-fetch.ts

@@ -1333,14 +1333,22 @@ export function useFetch<FetchDataType = any, BodyType = any>(
   }
 
   useIsomorphicLayoutEffect(() => {
-    if (url !== '') {
-      if (!jsonCompare(previousProps.get(resolvedKey), optionsConfig)) {
-        abortControllers.get(resolvedKey)?.abort()
-        if (inDeps('data')) {
-          queue(initializeRevalidation)
+    const fn = () => {
+      if (url !== '') {
+        if (!jsonCompare(previousProps.get(resolvedKey), optionsConfig)) {
+          abortControllers.get(resolvedKey)?.abort()
+          if (inDeps('data')) {
+            queue(initializeRevalidation)
+          }
         }
       }
     }
+    if (debounce) {
+      const tm = setTimeout(fn, debounce)
+      return () => clearTimeout(tm)
+    }
+    fn()
+    return () => {}
   }, [serialize(optionsConfig), thisDeps, fetchState])
 
   if (suspense) {
@@ -1365,26 +1373,36 @@ export function useFetch<FetchDataType = any, BodyType = any>(
   }
 
   useIsomorphicLayoutEffect(() => {
-    if (!runningRequests.get(resolvedKey) && isExpired) {
-      if (windowExists) {
-        if (canRevalidate && url !== '') {
-          if (
-            !jsonCompare(
-              JSON.parse(previousConfig.get(resolvedKey) || '{}'),
-              optionsConfig
-            )
-          ) {
-            if (!isPending(resolvedKey)) {
-              if (inDeps('data')) {
-                initializeRevalidation()
+    const fn = () => {
+      if (!runningRequests.get(resolvedKey) && canRevalidate) {
+        if (windowExists) {
+          if (canRevalidate && url !== '') {
+            if (
+              !jsonCompare(
+                JSON.parse(previousConfig.get(resolvedKey) || '{}'),
+                optionsConfig
+              )
+            ) {
+              if (!isPending(resolvedKey)) {
+                if (inDeps('data')) {
+                  initializeRevalidation()
+                }
+              } else {
+                setLoading(true)
               }
-            } else {
-              setLoading(true)
             }
           }
         }
       }
     }
+
+    if (debounce) {
+      const tm = setTimeout(fn, debounce)
+      return () => clearTimeout(tm)
+    }
+    fn()
+
+    return () => {}
   }, [resolvedKey, serialize(optionsConfig), canRevalidate, thisDeps])
 
   useIsomorphicLayoutEffect(() => {
@@ -1403,16 +1421,26 @@ export function useFetch<FetchDataType = any, BodyType = any>(
       }
     }
 
-    if (revalidateAfterUnmount) {
-      if (suspense) {
-        if (suspenseInitialized.get(resolvedKey)) {
+    const fn = () => {
+      if (revalidateAfterUnmount) {
+        if (suspense) {
+          if (suspenseInitialized.get(resolvedKey)) {
+            revalidate()
+          }
+        } else {
           revalidate()
         }
-      } else {
-        revalidate()
       }
     }
 
+    if (debounce) {
+      const tm = setTimeout(fn, debounce)
+      return () => clearTimeout(tm)
+    }
+    fn()
+
+    return () => {}
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [serialize(optionsConfig), thisDeps])
 

src/types/index.ts

@@ -330,7 +330,6 @@ export type FetchConfigType<FetchDataType = any, BodyType = any> = Omit<
   formatBody?: boolean | ((b: BodyType) => any)
   /**
    * The time to wait before revalidation after props change
-   * @deprecated Use the `useDebounceFetch` hook instead
    */
   debounce?: TimeSpan
   /**