Merge pull request #23 from cloudflare/move-document-usage-into-effect

Move reference to document into effect
cloudflare · Mar 22, 2021 · 0a003d5 · 0a003d5
2 parents a2400d8 + 4744aa4
commit 0a003d5
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/src/Stream.tsx b/src/Stream.tsx
@@ -9,10 +9,6 @@ import React, {
 const scriptLocation =
   "https://embed.videodelivery.net/embed/r4xu.fla9.latest.js";
 
-let streamScript = document.querySelector<HTMLScriptElement>(
-  `script[src="${scriptLocation}"]`
-);
-
 function useStreamElement(
   containerRef: RefObject<HTMLDivElement>,
   streamRef: MutableRefObject<HTMLStreamElement | null>
@@ -53,8 +49,11 @@ declare global {
  */
 function useStreamScript(ref: RefObject<HTMLStreamElement>) {
   useEffect(() => {
-    if (streamScript === null) {
-      streamScript = document.createElement("script");
+    const existingScript = document.querySelector<HTMLScriptElement>(
+      `script[src="${scriptLocation}"]`
+    );
+    if (existingScript === null) {
+      const streamScript = document.createElement("script");
       streamScript.setAttribute("data-cfasync", "false");
       streamScript.setAttribute("defer", "true");
       streamScript.setAttribute("type", "text/javascript");