fix(rsc): support react unstable_ViewTransition

jacob-ebey · jacob-ebey · commit 4da796a914db · 2025-09-22T13:57:04.000-07:00
diff --git a/.changeset/tidy-beans-brake.md b/.changeset/tidy-beans-brake.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+fix(rsc): support react unstable_ViewTransition
diff --git a/packages/react-router/lib/rsc/browser.tsx b/packages/react-router/lib/rsc/browser.tsx
@@ -703,18 +703,6 @@ export function RSCHydratedRouter({
     }
   }, []);
 
-  let [location, setLocation] = React.useState(router.state.location);
-
-  React.useLayoutEffect(
-    () =>
-      router.subscribe((newState) => {
-        if (newState.location !== location) {
-          setLocation(newState.location);
-        }
-      }),
-    [router, location],
-  );
-
   React.useEffect(() => {
     if (
       routeDiscovery === "lazy" ||
@@ -813,7 +801,7 @@ export function RSCHydratedRouter({
 
   return (
     <RSCRouterContext.Provider value={true}>
-      <RSCRouterGlobalErrorBoundary location={location}>
+      <RSCRouterGlobalErrorBoundary location={router.state.location}>
         <FrameworkContext.Provider value={frameworkContext}>
           <RouterProvider router={router} flushSync={ReactDOM.flushSync} />
         </FrameworkContext.Provider>
diff --git a/playground/rsc-vite-framework/app/root.tsx b/playground/rsc-vite-framework/app/root.tsx
@@ -1,12 +1,23 @@
 import type { Route } from "./+types/root";
 
-import { Meta, Link, Outlet, isRouteErrorResponse } from "react-router";
+import {
+  Meta,
+  Link,
+  Outlet,
+  isRouteErrorResponse,
+  useNavigation,
+  useRevalidator,
+} from "react-router";
 import "./root.css";
 
 export const meta = () => [{ title: "React Router Vite" }];
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  console.log("Layout");
+  const navigation = useNavigation();
+  const revalidator = useRevalidator();
+
+  console.log({ navigation: navigation.state, revalidator: revalidator.state });
+
   return (
     <html lang="en">
       <head>
@@ -17,13 +28,19 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <body>
         <header>
           <h1 className="root__header">React Router Vite</h1>
+          <p>Navigation: {navigation.state}</p>
+          <p>Revalidation: {revalidator.state}</p>
           <nav>
             <ul>
               <li>
-                <Link to="/">Home</Link>
+                <Link to="/" viewTransition={true}>
+                  Home
+                </Link>
               </li>
               <li>
-                <Link to="/server-loader">Server loader</Link>
+                <Link to="/server-loader" viewTransition={true}>
+                  Server loader
+                </Link>
               </li>
               <li>
                 <Link to="/client-loader">Client loader</Link>
@@ -51,8 +68,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function ServerComponent() {
-  console.log("Root");
+export default function Root() {
   return (
     <>
       <Outlet />
diff --git a/playground/rsc-vite-framework/app/routes/_index/actions.ts b/playground/rsc-vite-framework/app/routes/_index/actions.ts
@@ -1,5 +1,6 @@
 "use server";
 
 export async function log() {
+  await new Promise((resolve) => setTimeout(resolve, 500));
   console.log("hello from server");
 }
diff --git a/playground/rsc-vite-framework/app/routes/_index/client.tsx b/playground/rsc-vite-framework/app/routes/_index/client.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+// @ts-expect-error - needs React 19 types
+import { useFormStatus } from "react-dom";
+
+export function SubmitButton() {
+  const { pending } = useFormStatus();
+  return <button type="submit">Submit{pending && "ing..."}</button>;
+}
diff --git a/playground/rsc-vite-framework/app/routes/_index/route.tsx b/playground/rsc-vite-framework/app/routes/_index/route.tsx
@@ -1,21 +1,41 @@
+import { unstable_ViewTransition as ViewTransition } from "react";
 import type { Route } from "./+types/route";
 import { log } from "./actions";
+import { SubmitButton } from "./client";
 import "./styles.css";
 
 export function loader({}: Route.LoaderArgs) {
   return "hello, world";
 }
 
-export function ServerComponent({ loaderData }: Route.ComponentProps) {
+const items = ["blue", "green", "red", "yellow", "purple"];
+
+export async function ServerComponent({ loaderData }: Route.ComponentProps) {
+  await new Promise((resolve) => setTimeout(resolve, 500));
   return (
     <main>
       <h1 className="home__heading">Home</h1>
       <p>This is the home page.</p>
       <p>loaderData: {loaderData}</p>
       {/* @ts-expect-error React types for the repo are set to v18 */}
       <form action={log}>
-        <button type="submit">Submit</button>
+        <SubmitButton />
       </form>
+      <ul>
+        {items
+          .sort(() => Math.random() - 0.5)
+          .map((item) => (
+            <ViewTransition key={item} name={item}>
+              <div
+                style={{
+                  backgroundColor: item,
+                  width: "100px",
+                  height: "100px",
+                }}
+              />
+            </ViewTransition>
+          ))}
+      </ul>
     </main>
   );
 }
diff --git a/playground/rsc-vite-framework/app/routes/server-loader/route.tsx b/playground/rsc-vite-framework/app/routes/server-loader/route.tsx
@@ -1,3 +1,4 @@
+import { unstable_ViewTransition as ViewTransition } from "react";
 import type { Route } from "./+types/route";
 import styles from "./styles.module.css";
 
@@ -12,6 +13,11 @@ export default function ServerLoaderRoute({
     <main>
       <h1 className={styles.heading}>Server loader</h1>
       <p>Loader data: {loaderData}</p>
+      <ViewTransition name="blue">
+        <div
+          style={{ backgroundColor: "blue", width: "100px", height: "100px" }}
+        />
+      </ViewTransition>
     </main>
   );
 }
diff --git a/playground/rsc-vite-framework/package.json b/playground/rsc-vite-framework/package.json
@@ -31,8 +31,8 @@
     "@mjackson/node-fetch-server": "0.6.1",
     "compression": "^1.8.0",
     "express": "^4.21.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "experimental",
+    "react-dom": "experimental",
     "react-router": "workspace:*",
     "remix-utils": "^8.7.0"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +fix(rsc): support react unstable_ViewTransition
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`"use server";`
`2`	`2`
`3`	`3`	`export async function log() {`
	`4`	`+ await new Promise((resolve) => setTimeout(resolve, 500));`
`4`	`5`	`console.log("hello from server");`
`5`	`6`	`}`