fix: clear critical css after initial render in HydratedRouter (remix-run#13872)

Co-authored-by: Mark Dalgleish <[email protected]>

Author: 2 people

.changeset/great-lobsters-raise.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+In Framework Mode, clear critical CSS in development after initial render

contributors.yml

@@ -113,6 +113,7 @@
 - FilipJirsak
 - focusotter
 - foxscotch
+- frodi-karlsson
 - frontsideair
 - fucancode
 - fyzhu

packages/react-router-dev/vite/static/refresh-utils.cjs

@@ -158,8 +158,6 @@ const routeUpdates = new Map();
 window.__reactRouterRouteModuleUpdates = new Map();
 
 import.meta.hot.on("react-router:hmr", async ({ route }) => {
-  window.__reactRouterClearCriticalCss();
-
   if (route) {
     routeUpdates.set(route.id, route);
   }

packages/react-router/lib/dom-export/hydrated-router.tsx

@@ -229,19 +229,19 @@ export function HydratedRouter(props: HydratedRouterProps) {
     });
   }
 
-  // Critical CSS can become stale after code changes, e.g. styles might be
-  // removed from a component, but the styles will still be present in the
-  // server HTML. This allows our HMR logic to clear the critical CSS state.
+  // We only want to show critical CSS in dev for the initial server render to
+  // avoid a flash of unstyled content. Once the client-side JS kicks in, we can
+  // clear it to avoid duplicate styles.
   let [criticalCss, setCriticalCss] = React.useState(
     process.env.NODE_ENV === "development"
       ? ssrInfo?.context.criticalCss
       : undefined
   );
-  if (process.env.NODE_ENV === "development") {
-    if (ssrInfo) {
-      window.__reactRouterClearCriticalCss = () => setCriticalCss(undefined);
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      setCriticalCss(undefined);
     }
-  }
+  }, []);
 
   let [location, setLocation] = React.useState(router.state.location);
 

packages/react-router/lib/dom/global.ts

@@ -29,7 +29,6 @@ declare global {
   var __reactRouterRouteModules: RouteModules | undefined;
   var __reactRouterDataRouter: DataRouter | undefined;
   var __reactRouterHdrActive: boolean;
-  var __reactRouterClearCriticalCss: (() => void) | undefined;
   var $RefreshRuntime$:
     | {
         performReactRefresh: () => void;