Update useScript implementation

Author: tylermcginnis

index.js

@@ -1081,52 +1081,36 @@ export function useRenderInfo(name = "Unknown") {
 }
 
 export function useScript(src, options = {}) {
-  const [status, setStatus] = React.useState(() => {
-    if (!src) {
-      return "idle";
-    }
-
-    return "loading";
-  });
-
-  const cachedScriptStatuses = React.useRef({});
+  const [status, setStatus] = React.useState("loading");
+  const optionsRef = React.useRef(options);
 
   React.useEffect(() => {
-    if (!src) return;
-
-    const cachedScriptStatus = cachedScriptStatuses.current[src];
-    if (cachedScriptStatus === "ready" || cachedScriptStatus === "error") {
-      setStatus(cachedScriptStatus);
-      return;
-    }
-
     let script = document.querySelector(`script[src="${src}"]`);
 
-    if (!script) {
+    if (script === null) {
       script = document.createElement("script");
       script.src = src;
       script.async = true;
       document.body.appendChild(script);
     }
 
-    const handleScriptStatus = (event) => {
-      const newStatus = event.type === "load" ? "ready" : "error";
-      setStatus(newStatus);
-      cachedScriptStatuses.current[src] = newStatus;
-    };
+    const handleScriptLoad = () => setStatus("ready");
+    const handleScriptError = () => setStatus("error");
+
+    script.addEventListener("load", handleScriptLoad);
+    script.addEventListener("error", handleScriptError);
 
-    script.addEventListener("load", handleScriptStatus);
-    script.addEventListener("error", handleScriptStatus);
+    const removeOnUnmount = optionsRef.current.removeOnUnmount;
 
     return () => {
-      script.removeEventListener("load", handleScriptStatus);
-      script.removeEventListener("error", handleScriptStatus);
+      script.removeEventListener("load", handleScriptLoad);
+      script.removeEventListener("error", handleScriptError);
 
-      if (options.removeOnUnmount === true) {
+      if (removeOnUnmount === true) {
         script.remove();
       }
     };
-  }, [src, options.removeOnUnmount]);
+  }, [src]);
 
   return status;
 }

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

@@ -38,7 +38,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: `idle`, `loading`, `ready`, and `error`. |
+  | status | string | This represents the status of the script load. Possible values are: `loading`, `ready`, and `error`. |
   </div>
 </div>