Use a ref to ensure this only happens once

Even in strict mode, plus we don't have to disable the lint warning.
remix-run · Apr 26, 2023 · e92a512 · e92a512
1 parent 66cc556
commit e92a512
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/emotion/app/root.tsx b/emotion/app/root.tsx
@@ -10,7 +10,7 @@ import {
   ScrollRestoration,
   useCatch,
 } from "@remix-run/react";
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useRef } from "react";
 
 import ServerStyleContext from "./styles/server.context";
 import ClientStyleContext from "./styles/client.context";
@@ -35,11 +35,15 @@ const Document = withEmotionCache(
   ({ children, title }: DocumentProps, emotionCache) => {
     const serverStyleData = useContext(ServerStyleContext);
     const clientStyleData = useContext(ClientStyleContext);
+    const reinjectStylesRef = useRef(true);
 
     // Only executed on client
     // When a top level ErrorBoundary or CatchBoundary are rendered,
     // the document head gets removed, so we have to create the style tags
     useEffect(() => {
+      if (!reinjectStylesRef.current) {
+        return;
+      }
       // re-link sheet container
       emotionCache.sheet.container = document.head;
 
@@ -52,9 +56,9 @@ const Document = withEmotionCache(
 
       // reset cache to re-apply global styles
       clientStyleData.reset();
-      // We only want to do this on mount, not when styles change
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+      // ensure we only do this once per mount
+      reinjectStylesRef.current = false;
+    }, [clientStyleData, emotionCache.sheet]);
 
     return (
       <html lang="en">