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

.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,