remix-run · brophdawg11 · Jul 17, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git a/.changeset/fuzzy-worms-applaud.md b/.changeset/fuzzy-worms-applaud.md
@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Memoize some `RouterProvider` internals to reduce uneccesary re-renders
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,168 +13,170 @@ We manage release notes in this file instead of the paginated Github Releases Pa
   <summary>Table of Contents</summary>
 
 - [React Router Releases](#react-router-releases)
+  - [v6.25.1](#v6251)
+    - [Patch Changes](#patch-changes)
   - [v6.25.0](#v6250)
     - [What's Changed](#whats-changed)
       - [Stabilized `v7_skipActionErrorRevalidation`](#stabilized-v7_skipactionerrorrevalidation)
     - [Minor Changes](#minor-changes)
-    - [Patch Changes](#patch-changes)
-  - [v6.24.1](#v6241)
     - [Patch Changes](#patch-changes-1)
+  - [v6.24.1](#v6241)
+    - [Patch Changes](#patch-changes-2)
   - [v6.24.0](#v6240)
     - [What's Changed](#whats-changed-1)
       - [Lazy Route Discovery (a.k.a. "Fog of War")](#lazy-route-discovery-aka-fog-of-war)
     - [Minor Changes](#minor-changes-1)
-    - [Patch Changes](#patch-changes-2)
-  - [v6.23.1](#v6231)
     - [Patch Changes](#patch-changes-3)
+  - [v6.23.1](#v6231)
+    - [Patch Changes](#patch-changes-4)
   - [v6.23.0](#v6230)
     - [What's Changed](#whats-changed-2)
       - [Data Strategy (unstable)](#data-strategy-unstable)
       - [Skip Action Error Revalidation (unstable)](#skip-action-error-revalidation-unstable)
     - [Minor Changes](#minor-changes-2)
   - [v6.22.3](#v6223)
-    - [Patch Changes](#patch-changes-4)
-  - [v6.22.2](#v6222)
     - [Patch Changes](#patch-changes-5)
-  - [v6.22.1](#v6221)
+  - [v6.22.2](#v6222)
     - [Patch Changes](#patch-changes-6)
+  - [v6.22.1](#v6221)
+    - [Patch Changes](#patch-changes-7)
   - [v6.22.0](#v6220)
     - [What's Changed](#whats-changed-3)
       - [Core Web Vitals Technology Report Flag](#core-web-vitals-technology-report-flag)
     - [Minor Changes](#minor-changes-3)
-    - [Patch Changes](#patch-changes-7)
-  - [v6.21.3](#v6213)
     - [Patch Changes](#patch-changes-8)
-  - [v6.21.2](#v6212)
+  - [v6.21.3](#v6213)
     - [Patch Changes](#patch-changes-9)
-  - [v6.21.1](#v6211)
+  - [v6.21.2](#v6212)
     - [Patch Changes](#patch-changes-10)
+  - [v6.21.1](#v6211)
+    - [Patch Changes](#patch-changes-11)
   - [v6.21.0](#v6210)
     - [What's Changed](#whats-changed-4)
       - [`future.v7_relativeSplatPath`](#futurev7_relativesplatpath)
       - [Partial Hydration](#partial-hydration)
     - [Minor Changes](#minor-changes-4)
-    - [Patch Changes](#patch-changes-11)
-  - [v6.20.1](#v6201)
     - [Patch Changes](#patch-changes-12)
+  - [v6.20.1](#v6201)
+    - [Patch Changes](#patch-changes-13)
   - [v6.20.0](#v6200)
     - [Minor Changes](#minor-changes-5)
-    - [Patch Changes](#patch-changes-13)
+    - [Patch Changes](#patch-changes-14)
   - [v6.19.0](#v6190)
     - [What's Changed](#whats-changed-5)
       - [`unstable_flushSync` API](#unstable_flushsync-api)
     - [Minor Changes](#minor-changes-6)
-    - [Patch Changes](#patch-changes-14)
+    - [Patch Changes](#patch-changes-15)
   - [v6.18.0](#v6180)
     - [What's Changed](#whats-changed-6)
       - [New Fetcher APIs](#new-fetcher-apis)
       - [Persistence Future Flag (`future.v7_fetcherPersist`)](#persistence-future-flag-futurev7_fetcherpersist)
     - [Minor Changes](#minor-changes-7)
-    - [Patch Changes](#patch-changes-15)
+    - [Patch Changes](#patch-changes-16)
   - [v6.17.0](#v6170)
     - [What's Changed](#whats-changed-7)
       - [View Transitions 🚀](#view-transitions-)
     - [Minor Changes](#minor-changes-8)
-    - [Patch Changes](#patch-changes-16)
+    - [Patch Changes](#patch-changes-17)
   - [v6.16.0](#v6160)
     - [Minor Changes](#minor-changes-9)
-    - [Patch Changes](#patch-changes-17)
+    - [Patch Changes](#patch-changes-18)
   - [v6.15.0](#v6150)
     - [Minor Changes](#minor-changes-10)
-    - [Patch Changes](#patch-changes-18)
-  - [v6.14.2](#v6142)
     - [Patch Changes](#patch-changes-19)
-  - [v6.14.1](#v6141)
+  - [v6.14.2](#v6142)
     - [Patch Changes](#patch-changes-20)
+  - [v6.14.1](#v6141)
+    - [Patch Changes](#patch-changes-21)
   - [v6.14.0](#v6140)
     - [What's Changed](#whats-changed-8)
       - [JSON/Text Submissions](#jsontext-submissions)
     - [Minor Changes](#minor-changes-11)
-    - [Patch Changes](#patch-changes-21)
+    - [Patch Changes](#patch-changes-22)
   - [v6.13.0](#v6130)
     - [What's Changed](#whats-changed-9)
       - [`future.v7_startTransition`](#futurev7_starttransition)
     - [Minor Changes](#minor-changes-12)
-    - [Patch Changes](#patch-changes-22)
-  - [v6.12.1](#v6121)
     - [Patch Changes](#patch-changes-23)
+  - [v6.12.1](#v6121)
+    - [Patch Changes](#patch-changes-24)
   - [v6.12.0](#v6120)
     - [What's Changed](#whats-changed-10)
       - [`React.startTransition` support](#reactstarttransition-support)
     - [Minor Changes](#minor-changes-13)
-    - [Patch Changes](#patch-changes-24)
-  - [v6.11.2](#v6112)
     - [Patch Changes](#patch-changes-25)
-  - [v6.11.1](#v6111)
+  - [v6.11.2](#v6112)
     - [Patch Changes](#patch-changes-26)
+  - [v6.11.1](#v6111)
+    - [Patch Changes](#patch-changes-27)
   - [v6.11.0](#v6110)
     - [Minor Changes](#minor-changes-14)
-    - [Patch Changes](#patch-changes-27)
+    - [Patch Changes](#patch-changes-28)
   - [v6.10.0](#v6100)
     - [What's Changed](#whats-changed-11)
     - [Minor Changes](#minor-changes-15)
       - [`future.v7_normalizeFormMethod`](#futurev7_normalizeformmethod)
-    - [Patch Changes](#patch-changes-28)
+    - [Patch Changes](#patch-changes-29)
   - [v6.9.0](#v690)
     - [What's Changed](#whats-changed-12)
       - [`Component`/`ErrorBoundary` route properties](#componenterrorboundary-route-properties)
       - [Introducing Lazy Route Modules](#introducing-lazy-route-modules)
     - [Minor Changes](#minor-changes-16)
-    - [Patch Changes](#patch-changes-29)
-  - [v6.8.2](#v682)
     - [Patch Changes](#patch-changes-30)
-  - [v6.8.1](#v681)
+  - [v6.8.2](#v682)
     - [Patch Changes](#patch-changes-31)
+  - [v6.8.1](#v681)
+    - [Patch Changes](#patch-changes-32)
   - [v6.8.0](#v680)
     - [Minor Changes](#minor-changes-17)
-    - [Patch Changes](#patch-changes-32)
+    - [Patch Changes](#patch-changes-33)
   - [v6.7.0](#v670)
     - [Minor Changes](#minor-changes-18)
-    - [Patch Changes](#patch-changes-33)
-  - [v6.6.2](#v662)
     - [Patch Changes](#patch-changes-34)
-  - [v6.6.1](#v661)
+  - [v6.6.2](#v662)
     - [Patch Changes](#patch-changes-35)
+  - [v6.6.1](#v661)
+    - [Patch Changes](#patch-changes-36)
   - [v6.6.0](#v660)
     - [What's Changed](#whats-changed-13)
     - [Minor Changes](#minor-changes-19)
-    - [Patch Changes](#patch-changes-36)
+    - [Patch Changes](#patch-changes-37)
   - [v6.5.0](#v650)
     - [What's Changed](#whats-changed-14)
     - [Minor Changes](#minor-changes-20)
-    - [Patch Changes](#patch-changes-37)
-  - [v6.4.5](#v645)
     - [Patch Changes](#patch-changes-38)
-  - [v6.4.4](#v644)
+  - [v6.4.5](#v645)
     - [Patch Changes](#patch-changes-39)
-  - [v6.4.3](#v643)
+  - [v6.4.4](#v644)
     - [Patch Changes](#patch-changes-40)
-  - [v6.4.2](#v642)
+  - [v6.4.3](#v643)
     - [Patch Changes](#patch-changes-41)
-  - [v6.4.1](#v641)
+  - [v6.4.2](#v642)
     - [Patch Changes](#patch-changes-42)
+  - [v6.4.1](#v641)
+    - [Patch Changes](#patch-changes-43)
   - [v6.4.0](#v640)
     - [What's Changed](#whats-changed-15)
       - [Remix Data APIs](#remix-data-apis)
-    - [Patch Changes](#patch-changes-43)
+    - [Patch Changes](#patch-changes-44)
   - [v6.3.0](#v630)
     - [Minor Changes](#minor-changes-21)
   - [v6.2.2](#v622)
-    - [Patch Changes](#patch-changes-44)
-  - [v6.2.1](#v621)
     - [Patch Changes](#patch-changes-45)
+  - [v6.2.1](#v621)
+    - [Patch Changes](#patch-changes-46)
   - [v6.2.0](#v620)
     - [Minor Changes](#minor-changes-22)
-    - [Patch Changes](#patch-changes-46)
-  - [v6.1.1](#v611)
     - [Patch Changes](#patch-changes-47)
+  - [v6.1.1](#v611)
+    - [Patch Changes](#patch-changes-48)
   - [v6.1.0](#v610)
     - [Minor Changes](#minor-changes-23)
-    - [Patch Changes](#patch-changes-48)
-  - [v6.0.2](#v602)
     - [Patch Changes](#patch-changes-49)
-  - [v6.0.1](#v601)
+  - [v6.0.2](#v602)
     - [Patch Changes](#patch-changes-50)
+  - [v6.0.1](#v601)
+    - [Patch Changes](#patch-changes-51)
   - [v6.0.0](#v600)
 
 </details>
@@ -198,6 +200,16 @@ Date: YYYY-MM-DD
 **Full Changelog**: [`v6.X.Y...v6.X.Y`](https://github.com/remix-run/react-router/compare/react-router@6.X.Y...react-router@6.X.Y)
 -->
 
+## v6.25.1
+
+Date: 2024-07-17
+
+### Patch Changes
+
+- Memoize some `RouterProvider` internals to reduce unnecessary re-renders ([#11803](https://github.com/remix-run/react-router/pull/11803))
+
+**Full Changelog**: [`v6.25.0...v6.25.1`](https://github.com/remix-run/react-router/compare/react-router@6.25.0...react-router@6.25.1)
+
 ## v6.25.0
 
 Date: 2024-07-16

diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
@@ -1,5 +1,11 @@
 # `react-router`
 
+## 6.25.1
+
+### Patch Changes
+
+- Memoize some `RouterProvider` internals to reduce unnecessary re-renders ([#11803](https://github.com/remix-run/react-router/pull/11803))
+
 ## 6.25.0
 
 ### Minor Changes

diff --git a/packages/react-router/__tests__/dom/data-browser-router-test.tsx b/packages/react-router/__tests__/dom/data-browser-router-test.tsx
@@ -1,4 +1,4 @@
-import type { ErrorResponse, Fetcher } from "react-router";
+import type { ErrorResponse, Fetcher, RouterState } from "react-router";
 import "@testing-library/jest-dom";
 import {
   act,
@@ -38,7 +38,7 @@ import {
 } from "../../index";
 
 import getHtml from "../utils/getHtml";
-import { createDeferred } from "../router/utils/utils";
+import { createDeferred, tick } from "../router/utils/utils";
 
 testDomRouter("<DataBrowserRouter>", createBrowserRouter, (url) =>
   getWindowImpl(url, false)
@@ -7440,6 +7440,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" },
+        ]);
+      });
     });
   });
 }

diff --git a/packages/react-router/lib/dom/lib.tsx b/packages/react-router/lib/dom/lib.tsx
@@ -530,7 +530,7 @@ export function RouterProvider({
                 navigationType={state.historyAction}
                 navigator={navigator}
               >
-                <DataRoutes
+                <MemoizedDataRoutes
                   routes={router.routes}
                   future={router.future}
                   state={state}
@@ -545,6 +545,9 @@ export function RouterProvider({
   );
 }
 
+// Memoize to avoid re-renders when updating `ViewTransitionContext`
+const MemoizedDataRoutes = React.memo(DataRoutes);
+
 function DataRoutes({
   routes,
   future,