Re-implement useScript

Author: tylermcginnis

index.d.ts

@@ -229,7 +229,7 @@ declare module "@uidotdev/usehooks" {
     options?: {
       removeOnUnmount?: boolean;
     }
-  ): "idle" | "loading" | "ready" | "error";
+  ): "unknown" | "loading" | "ready" | "error";
 
   export function useSessionStorage<T>(
     key: string,

index.js

@@ -1101,29 +1101,50 @@ export function useScript(src, options = {}) {
   React.useEffect(() => {
     let script = document.querySelector(`script[src="${src}"]`);
 
+    const domStatus = script?.getAttribute("data-status");
+    if (domStatus) {
+      setStatus(domStatus);
+      return;
+    }
+
     if (script === null) {
       script = document.createElement("script");
       script.src = src;
       script.async = true;
+      script.setAttribute("data-status", "loading");
       document.body.appendChild(script);
-    }
 
-    const handleScriptLoad = () => setStatus("ready");
-    const handleScriptError = () => setStatus("error");
+      const handleScriptLoad = () => {
+        script.setAttribute("data-status", "ready");
+        setStatus("ready");
+        removeEventListeners();
+      };
 
-    script.addEventListener("load", handleScriptLoad);
-    script.addEventListener("error", handleScriptError);
+      const handleScriptError = () => {
+        script.setAttribute("data-status", "error");
+        setStatus("error");
+        removeEventListeners();
+      };
 
-    const removeOnUnmount = optionsRef.current.removeOnUnmount;
+      const removeEventListeners = () => {
+        script.removeEventListener("load", handleScriptLoad);
+        script.removeEventListener("error", handleScriptError);
+      };
 
-    return () => {
-      script.removeEventListener("load", handleScriptLoad);
-      script.removeEventListener("error", handleScriptError);
+      script.addEventListener("load", handleScriptLoad);
+      script.addEventListener("error", handleScriptError);
 
-      if (removeOnUnmount === true) {
-        script.remove();
-      }
-    };
+      const removeOnUnmount = optionsRef.current.removeOnUnmount;
+
+      return () => {
+        if (removeOnUnmount === true) {
+          script.remove();
+          removeEventListeners();
+        }
+      };
+    } else {
+      setStatus("unknown");
+    }
   }, [src]);
 
   return status;

usehooks.com/src/content/hooks/useScript.mdx

@@ -17,8 +17,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   scripts into a React component. It manages the loading and status of the
   script, allowing you to conditionally render components or perform actions
   based on whether the script has been successfully loaded or encountered an
-  error. The hook keeps track of the script’s status, such as "loading,"
-  "ready," or "error," and provides this status as a return value. Additionally,
+  error. The hook keeps track of the script’s status and provides this status as a return value. Additionally,
   it offers options to remove the script when the component is unmounted,
   ensuring proper cleanup.
 </HookDescription>
@@ -38,7 +37,7 @@ import StaticCodeContainer from "../../components/StaticCodeContainer.astro";
   <div class="table-container">
   | Name   | Type   | Description |
   | ------ | ------ | ----------- |
-  | status | string | This represents the status of the script load. Possible values are: `loading`, `ready`, and `error`. |
+  | status | string | This represents the status of the script load, `loading`, `ready`, `error`, or `unknown`. An `unknown` script is one that previously exists in the document, but was not added via `useScript`.  |
   </div>
 </div>