diff --git a/.changeset/great-lobsters-raise.md b/.changeset/great-lobsters-raise.md
new file mode 100644
index 0000000000..1e4b1afff3
--- /dev/null
+++ b/.changeset/great-lobsters-raise.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+In Framework Mode, clear critical CSS in development after initial render
diff --git a/contributors.yml b/contributors.yml
index f7cc03ee2c..2d109d5ee2 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -111,6 +111,7 @@
 - FilipJirsak
 - focusotter
 - foxscotch
+- frodi-karlsson
 - frontsideair
 - fucancode
 - fyzhu
diff --git a/packages/react-router-dev/vite/static/refresh-utils.cjs b/packages/react-router-dev/vite/static/refresh-utils.cjs
index 66243e8848..833a17a4d1 100644
--- a/packages/react-router-dev/vite/static/refresh-utils.cjs
+++ b/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);
   }
diff --git a/packages/react-router/lib/dom-export/hydrated-router.tsx b/packages/react-router/lib/dom-export/hydrated-router.tsx
index e4faad01b8..eb2ede42e7 100644
--- a/packages/react-router/lib/dom-export/hydrated-router.tsx
+++ b/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);
 
diff --git a/packages/react-router/lib/dom/global.ts b/packages/react-router/lib/dom/global.ts
index d781dce03d..d844a32289 100644
--- a/packages/react-router/lib/dom/global.ts
+++ b/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;