Reduce RouterProvider re-renders when using View Transitions (#11803)

Author: brophdawg11

.changeset/fuzzy-worms-applaud.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Memoize some `RouterProvider` internals to reduce uneccesary re-renders

package.json

@@ -114,7 +114,7 @@
       "none": "17.3 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
-      "none": "17.2 kB"
+      "none": "17.3 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
       "none": "23.6 kB"

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -1,4 +1,4 @@
-import type { ErrorResponse, Fetcher } from "@remix-run/router";
+import type { ErrorResponse, Fetcher, RouterState } from "@remix-run/router";
 import "@testing-library/jest-dom";
 import {
   act,
@@ -37,7 +37,7 @@ import {
 } from "react-router-dom";
 
 import getHtml from "../../react-router/__tests__/utils/getHtml";
-import { createDeferred } from "../../router/__tests__/utils/utils";
+import { createDeferred, tick } from "../../router/__tests__/utils/utils";
 
 testDomRouter("<DataBrowserRouter>", createBrowserRouter, (url) =>
   getWindowImpl(url, false)
@@ -7465,6 +7465,81 @@ function testDomRouter(
         await waitFor(() => screen.getByText("D"));
         expect(spy).toHaveBeenCalledTimes(2);
       });
+
+      it("Does not cause extra re-renders due to ViewTransitionContext updates", async () => {
+        let testWindow = getWindow("/");
+        testWindow.document.startViewTransition = (cb) => {
+          cb();
+          return {
+            ready: Promise.resolve(),
+            finished: Promise.resolve(),
+            updateCallbackDone: Promise.resolve(),
+            skipTransition: () => {},
+          };
+        };
+
+        let renders: RouterState[] = [];
+        let router = createTestRouter(
+          [
+            {
+              path: "/",
+              Component() {
+                return (
+                  <>
+                    <Link to="/page" unstable_viewTransition>
+                      /page
+                    </Link>
+                    <Outlet />
+                  </>
+                );
+              },
+              children: [
+                {
+                  index: true,
+                  async loader() {
+                    await tick();
+                    return "INDEX";
+                  },
+                  Component() {
+                    renders.push(useLocation(), useNavigation());
+                    return <h1>{useLoaderData()}</h1>;
+                  },
+                },
+                {
+                  path: "page",
+                  async loader() {
+                    await tick();
+                    return "PAGE";
+                  },
+                  Component() {
+                    renders.push(useLocation(), useNavigation());
+                    return <h1>{useLoaderData()}</h1>;
+                  },
+                },
+              ],
+            },
+          ],
+          { window: testWindow }
+        );
+        render(<RouterProvider router={router} />);
+        await waitFor(() => screen.getByText("INDEX"));
+
+        renders = [];
+        fireEvent.click(screen.getByText("/page"));
+        await waitFor(() => screen.getByText("PAGE"));
+
+        expect(renders).toMatchObject([
+          // Re-render of current location with navigation.state = "loading"
+          { pathname: "/" },
+          {
+            state: "loading",
+            location: { pathname: "/page" },
+          },
+          // Render of new location with navigation.state = "idle"
+          { pathname: "/page" },
+          { state: "idle" },
+        ]);
+      });
     });
   });
 }

packages/react-router-dom/index.tsx

@@ -13,6 +13,7 @@ import type {
   Navigator,
   RelativeRoutingType,
   RouteObject,
+  RouterProps,
   RouterProviderProps,
   To,
   unstable_PatchRoutesOnMissFunction,
@@ -708,6 +709,13 @@ export function RouterProvider({
     [router, navigator, basename]
   );
 
+  let routerFuture = React.useMemo<RouterProps["future"]>(
+    () => ({
+      v7_relativeSplatPath: router.future.v7_relativeSplatPath,
+    }),
+    [router.future.v7_relativeSplatPath]
+  );
+
   // The fragment and {null} here are important!  We need them to keep React 18's
   // useId happy when we are server-rendering since we may have a <script> here
   // containing the hydrated server-side staticContext (from StaticRouterProvider).
@@ -725,12 +733,10 @@ export function RouterProvider({
                 location={state.location}
                 navigationType={state.historyAction}
                 navigator={navigator}
-                future={{
-                  v7_relativeSplatPath: router.future.v7_relativeSplatPath,
-                }}
+                future={routerFuture}
               >
                 {state.initialized || router.future.v7_partialHydration ? (
-                  <DataRoutes
+                  <MemoizedDataRoutes
                     routes={router.routes}
                     future={router.future}
                     state={state}
@@ -748,6 +754,9 @@ export function RouterProvider({
   );
 }
 
+// Memoize to avoid re-renders when updating `ViewTransitionContext`
+const MemoizedDataRoutes = React.memo(DataRoutes);
+
 function DataRoutes({
   routes,
   future,