async-fetch 0.3.4 → 0.3.5

package/README.md

@@ -4,8 +4,8 @@ Use async fetch hook for requests within React components.
 
 ## Installation
 
-```
-$ npm i async-fetch
+```console
+npm i async-fetch
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "async-fetch",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Use async fetch hook for requests within React components.",
   "main": "useAsyncFetch.js",
   "type": "module",

package/useAsyncFetch.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useCallback, useEffect } from "react";
 import useInterval from "./useInterval.js";
 
 function useAsyncFetch(stringUrl, props = {}) {
@@ -9,11 +9,11 @@ function useAsyncFetch(stringUrl, props = {}) {
     deps = [],
     poll,
     timeout = 30000, // 30 seconds.
-    ignoreCleanup,
     ignoreRequest,
+    ignoreCleanup,
     query,
     params,
-    data: data2,
+    data: body,
     parser = "json",
     onStart,
     onSuccess,
@@ -24,7 +24,7 @@ function useAsyncFetch(stringUrl, props = {}) {
 
   const [pending, setPending] = useState(initialPending);
 
-  const [pending2, setPending2] = useState();
+  const [pending2, setPending2] = useState(initialPending);
 
   const [data, setData] = useState(initialData);
 
@@ -32,126 +32,111 @@ function useAsyncFetch(stringUrl, props = {}) {
 
   const [cancelSource, setCancelSource] = useState();
 
-  const [unmounted, setUnmounted] = useState(false);
-
-  useEffect(() => {
-    return cleanupRequest;
-  }, []);
-
-  useEffect(() => {
-    sendRequest();
-  }, [stringUrl, ...deps]);
-
-  useInterval(() => {
-    sendRequest();
-  }, poll);
-
-  function cancelRequest() {
+  const cancelRequest = useCallback(() => {
     if (cancelSource?.abort) cancelSource.abort();
-  }
-
-  function cleanupRequest() {
-    if (ignoreCleanup !== true) {
-      setUnmounted(true);
-      cancelRequest();
-    }
-  }
+  }, [cancelSource]);
 
-  async function sendRequest() {
-    if (!stringUrl) {
-      throw new Error("URL is required.");
-    }
-
-    if (typeof stringUrl !== "string") {
-      throw new Error("URL must be of type string.");
-    }
+  const sendRequest = useCallback(async () => {
+    if (ignoreRequest === true) return;
 
     const url = new URL(stringUrl, window.location.origin);
 
-    if (ignoreRequest !== true) {
-      const controller = new AbortController();
+    if (query || params) url.search = new URLSearchParams(query || params);
 
-      fetchProps.signal = controller.signal;
+    const contentType =
+      fetchProps.headers?.["Content-Type"] ||
+      fetchProps.headers?.["content-type"];
 
-      const requestTimeout = setTimeout(() => {
-        controller.abort();
-      }, timeout);
-
-      try {
-        if (query || params) url.search = new URLSearchParams(query || params);
+    if (contentType === "application/x-www-form-urlencoded") {
+      fetchProps.body = new URLSearchParams(body || {});
+    } else if (body) {
+      fetchProps.body = JSON.stringify(body);
+    }
 
-        const contentType =
-          fetchProps.headers?.["Content-Type"] ||
-          fetchProps.headers?.["content-type"];
+    const controller = new AbortController();
 
-        if (contentType === "application/x-www-form-urlencoded") {
-          fetchProps.body = new URLSearchParams(data2 || {});
-        } else if (data2) {
-          fetchProps.body = JSON.stringify(data2);
-        }
+    const requestTimeout = setTimeout(() => controller.abort(), timeout);
 
-        if (!unmounted) {
-          if (pending) setPending2(true);
+    fetchProps.signal = controller.signal;
 
-          if (!pending) setPending(true);
+    if (pending) setPending2(true);
 
-          setError();
+    if (!pending) setPending(true);
 
-          cancelRequest();
+    setError();
 
-          setCancelSource(controller);
+    cancelRequest();
 
-          if (onStart) onStart();
-        }
+    setCancelSource(controller);
 
-        const response = await fetch(url, fetchProps);
+    if (onStart) onStart();
 
-        if (!response.ok) {
-          throw new Error(
-            JSON.stringify({
-              code: response.status,
-              text: response.statusText,
-              response: await response.text(),
-            }),
-          );
-        }
+    try {
+      const response = await fetch(url, fetchProps);
 
+      if (!response.ok) {
+        throw new Error(
+          JSON.stringify({
+            code: response.status,
+            text: response.statusText,
+            response: await response.text(),
+          }),
+        );
+      } else {
         const parsedResponse = await response[parser]();
 
-        if (!unmounted) {
-          setData(parsedResponse);
+        setData(parsedResponse);
 
-          if (onSuccess) onSuccess(parsedResponse);
+        if (onSuccess) onSuccess(parsedResponse);
+      }
+    } catch (e) {
+      if (e.name !== "AbortError") {
+        let error;
+        try {
+          error = JSON.parse(e.toString().replace("Error:", "").trim());
+        } catch {
+          error = { response: e.toString(), text: e.toString() };
         }
-      } catch (e) {
-        if (!unmounted && e.name !== "AbortError") {
-          let error;
-
-          try {
-            error = JSON.parse(e.toString().replace("Error:", "").trim());
-          } catch {
-            error = { response: e.toString(), text: e.toString() };
-          }
-
-          setError(error);
+        setError(error);
+        if (onFail) onFail(error);
+      }
+    } finally {
+      clearTimeout(requestTimeout);
+      if (pending) {
+        setPending2();
+      } else {
+        setPending();
+      }
+      if (onFinish) onFinish();
+    }
+  }, [
+    ignoreRequest,
+    stringUrl,
+    query,
+    params,
+    fetchProps,
+    body,
+    timeout,
+    parser,
+    onStart,
+    onSuccess,
+    onFail,
+    onFinish,
+  ]);
 
-          if (onFail) onFail(error);
-        }
-      } finally {
-        clearTimeout(requestTimeout);
+  useEffect(() => {
+    sendRequest();
+  }, deps);
 
-        if (!unmounted) {
-          if (pending) {
-            setPending2();
-          } else {
-            setPending();
-          }
+  useInterval(() => {
+    sendRequest();
+  }, poll);
 
-          if (onFinish) onFinish();
-        }
-      }
-    }
-  }
+  useEffect(() => {
+    return () => {
+      if (ignoreCleanup !== true) cancelRequest();
+    };
+  }, []);
 
   return {
     pending: pending || pending2,

package/useInterval.js

@@ -4,17 +4,15 @@ function useInterval(callback, poll) {
   const callbackRef = useRef(() => {}); // noop
 
   useEffect(() => {
-    callbackRef.current = callback;
-  });
+    if (typeof callback === "function") callbackRef.current = callback;
+  }, [callback]);
 
   useEffect(() => {
-    if (typeof poll !== "number" || poll < 1000) return;
+    if (typeof poll !== "number" || poll < 100) return;
 
     const interval = setInterval(() => callbackRef.current(), poll);
 
-    return () => {
-      clearInterval(interval);
-    };
+    return () => clearInterval(interval);
   }, [poll]);
 }