Remove future.v7_partialHydration flag (#11725)

remix-run · Jun 25, 2024 · 5b02e7d · 5b02e7d
1 parent 618a5be
commit 5b02e7d
Show file tree

Hide file tree

Showing 17 changed files with 368 additions and 754 deletions.
diff --git a/.changeset/tasty-penguins-live.md b/.changeset/tasty-penguins-live.md
@@ -0,0 +1,11 @@
+---
+"react-router-dom": major
+"react-router": major
+---
+
+- Remove the `future.v7_partialHydration` flag
+  - This also removes the `<RouterProvider fallbackElement>` prop
+    - To migrate, move the `fallbackElement` to a `hydrateFallbackElement`/`HydrateFallback` on your root route
+  - Also worth nothing there is a related breaking changer with this future flag:
+    - Without `future.v7_partialHydration` (when using `fallbackElement`), `state.navigation` was populated during the initial load
+    - With `future.v7_partialHydration`, `state.navigation` remains in an `"idle"` state during the initial load
diff --git a/packages/react-router/__tests__/createRoutesFromChildren-test.tsx b/packages/react-router/__tests__/createRoutesFromChildren-test.tsx
@@ -19,12 +19,14 @@ describe("creating routes from JSX", () => {
         {
           "Component": undefined,
           "ErrorBoundary": undefined,
+          "HydrateFallback": undefined,
           "action": undefined,
           "caseSensitive": undefined,
           "children": [
             {
               "Component": undefined,
               "ErrorBoundary": undefined,
+              "HydrateFallback": undefined,
               "action": undefined,
               "caseSensitive": undefined,
               "element": <h1>
@@ -33,6 +35,7 @@ describe("creating routes from JSX", () => {
               "errorElement": undefined,
               "handle": undefined,
               "hasErrorBoundary": false,
+              "hydrateFallbackElement": undefined,
               "id": "0-0",
               "index": undefined,
               "lazy": undefined,
@@ -43,6 +46,7 @@ describe("creating routes from JSX", () => {
             {
               "Component": undefined,
               "ErrorBoundary": undefined,
+              "HydrateFallback": undefined,
               "action": undefined,
               "caseSensitive": undefined,
               "element": <h1>
@@ -51,6 +55,7 @@ describe("creating routes from JSX", () => {
               "errorElement": undefined,
               "handle": undefined,
               "hasErrorBoundary": false,
+              "hydrateFallbackElement": undefined,
               "id": "0-1",
               "index": undefined,
               "lazy": undefined,
@@ -61,12 +66,14 @@ describe("creating routes from JSX", () => {
             {
               "Component": undefined,
               "ErrorBoundary": undefined,
+              "HydrateFallback": undefined,
               "action": undefined,
               "caseSensitive": undefined,
               "children": [
                 {
                   "Component": undefined,
                   "ErrorBoundary": undefined,
+                  "HydrateFallback": undefined,
                   "action": undefined,
                   "caseSensitive": undefined,
                   "element": <h1>
@@ -75,6 +82,7 @@ describe("creating routes from JSX", () => {
                   "errorElement": undefined,
                   "handle": undefined,
                   "hasErrorBoundary": false,
+                  "hydrateFallbackElement": undefined,
                   "id": "0-2-0",
                   "index": true,
                   "lazy": undefined,
@@ -85,6 +93,7 @@ describe("creating routes from JSX", () => {
                 {
                   "Component": undefined,
                   "ErrorBoundary": undefined,
+                  "HydrateFallback": undefined,
                   "action": undefined,
                   "caseSensitive": undefined,
                   "element": <h1>
@@ -93,6 +102,7 @@ describe("creating routes from JSX", () => {
                   "errorElement": undefined,
                   "handle": undefined,
                   "hasErrorBoundary": false,
+                  "hydrateFallbackElement": undefined,
                   "id": "0-2-1",
                   "index": undefined,
                   "lazy": undefined,
@@ -105,6 +115,7 @@ describe("creating routes from JSX", () => {
               "errorElement": undefined,
               "handle": undefined,
               "hasErrorBoundary": false,
+              "hydrateFallbackElement": undefined,
               "id": "0-2",
               "index": undefined,
               "lazy": undefined,
@@ -117,6 +128,7 @@ describe("creating routes from JSX", () => {
           "errorElement": undefined,
           "handle": undefined,
           "hasErrorBoundary": false,
+          "hydrateFallbackElement": undefined,
           "id": "0",
           "index": undefined,
           "lazy": undefined,
@@ -153,12 +165,14 @@ describe("creating routes from JSX", () => {
         {
           "Component": undefined,
           "ErrorBoundary": undefined,
+          "HydrateFallback": undefined,
           "action": undefined,
           "caseSensitive": undefined,
           "children": [
             {
               "Component": undefined,
               "ErrorBoundary": undefined,
+              "HydrateFallback": undefined,
               "action": undefined,
               "caseSensitive": undefined,
               "element": <h1>
@@ -167,6 +181,7 @@ describe("creating routes from JSX", () => {
               "errorElement": undefined,
               "handle": undefined,
               "hasErrorBoundary": false,
+              "hydrateFallbackElement": undefined,
               "id": "0-0",
               "index": undefined,
               "lazy": undefined,
@@ -177,12 +192,14 @@ describe("creating routes from JSX", () => {
             {
               "Component": undefined,
               "ErrorBoundary": undefined,
+              "HydrateFallback": undefined,
               "action": undefined,
               "caseSensitive": undefined,
               "children": [
                 {
                   "Component": undefined,
                   "ErrorBoundary": undefined,
+                  "HydrateFallback": undefined,
                   "action": [Function],
                   "caseSensitive": undefined,
                   "element": <h1>
@@ -191,6 +208,7 @@ describe("creating routes from JSX", () => {
                   "errorElement": undefined,
                   "handle": undefined,
                   "hasErrorBoundary": false,
+                  "hydrateFallbackElement": undefined,
                   "id": "0-1-0",
                   "index": true,
                   "lazy": undefined,
@@ -203,6 +221,7 @@ describe("creating routes from JSX", () => {
               "errorElement": undefined,
               "handle": undefined,
               "hasErrorBoundary": false,
+              "hydrateFallbackElement": undefined,
               "id": "0-1",
               "index": undefined,
               "lazy": undefined,
@@ -217,6 +236,7 @@ describe("creating routes from JSX", () => {
           </h1>,
           "handle": undefined,
           "hasErrorBoundary": true,
+          "hydrateFallbackElement": undefined,
           "id": "0",
           "index": undefined,
           "lazy": undefined,

diff --git a/packages/react-router/__tests__/data-memory-router-test.tsx b/packages/react-router/__tests__/data-memory-router-test.tsx
@@ -313,11 +313,15 @@ describe("createMemoryRouter", () => {
     `);
   });
 
-  it("renders fallbackElement while first data fetch happens", async () => {
+  it("renders hydrateFallbackElement while first data fetch happens", async () => {
     let fooDefer = createDeferred();
     let router = createMemoryRouter(
       createRoutesFromElements(
-        <Route path="/" element={<Outlet />}>
+        <Route
+          path="/"
+          element={<Outlet />}
+          hydrateFallbackElement={<FallbackElement />}
+        >
           <Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
           <Route path="bar" element={<Bar />} />
         </Route>
@@ -326,9 +330,7 @@ describe("createMemoryRouter", () => {
         initialEntries: ["/foo"],
       }
     );
-    let { container } = render(
-      <RouterProvider router={router} fallbackElement={<FallbackElement />} />
-    );
+    let { container } = render(<RouterProvider router={router} />);
 
     function FallbackElement() {
       return <p>Loading...</p>;
@@ -363,7 +365,7 @@ describe("createMemoryRouter", () => {
     `);
   });
 
-  it("renders a null fallbackElement if none is provided", async () => {
+  it("renders a null fallback if none is provided", async () => {
     let fooDefer = createDeferred();
     let router = createMemoryRouter(
       createRoutesFromElements(
@@ -401,12 +403,16 @@ describe("createMemoryRouter", () => {
     `);
   });
 
-  it("does not render fallbackElement if no data fetch is required", async () => {
+  it("does not render hydrateFallbackElement if no data fetch is required", async () => {
     let fooDefer = createDeferred();
 
     let router = createMemoryRouter(
       createRoutesFromElements(
-        <Route path="/" element={<Outlet />}>
+        <Route
+          path="/"
+          element={<Outlet />}
+          hydrateFallbackElement={<FallbackElement />}
+        >
           <Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
           <Route path="bar" element={<Bar />} />
         </Route>
@@ -415,9 +421,7 @@ describe("createMemoryRouter", () => {
         initialEntries: ["/bar"],
       }
     );
-    let { container } = render(
-      <RouterProvider router={router} fallbackElement={<FallbackElement />} />
-    );
+    let { container } = render(<RouterProvider router={router} />);
 
     function FallbackElement() {
       return <p>Loading...</p>;
@@ -441,19 +445,21 @@ describe("createMemoryRouter", () => {
     `);
   });
 
-  it("renders fallbackElement within router contexts", async () => {
+  it("renders hydrateFallbackElement within router contexts", async () => {
     let fooDefer = createDeferred();
     let router = createMemoryRouter(
       createRoutesFromElements(
-        <Route path="/" element={<Outlet />}>
+        <Route
+          path="/"
+          element={<Outlet />}
+          hydrateFallbackElement={<FallbackElement />}
+        >
           <Route path="foo" loader={() => fooDefer.promise} element={<Foo />} />
         </Route>
       ),
       { initialEntries: ["/foo"] }
     );
-    let { container } = render(
-      <RouterProvider router={router} fallbackElement={<FallbackElement />} />
-    );
+    let { container } = render(<RouterProvider router={router} />);
 
     function FallbackElement() {
       let location = useLocation();

diff --git a/packages/react-router/__tests__/dom/data-browser-router-test.tsx b/packages/react-router/__tests__/dom/data-browser-router-test.tsx
@@ -371,11 +371,15 @@ function testDomRouter(
       `);
     });
 
-    it("renders fallbackElement while first data fetch happens", async () => {
+    it("renders hydrateFallbackElement while first data fetch happens", async () => {
       let fooDefer = createDeferred();
       let router = createTestRouter(
         createRoutesFromElements(
-          <Route path="/" element={<Outlet />}>
+          <Route
+            path="/"
+            element={<Outlet />}
+            hydrateFallbackElement={<FallbackElement />}
+          >
             <Route
               path="foo"
               loader={() => fooDefer.promise}
@@ -388,9 +392,7 @@ function testDomRouter(
           window: getWindow("/foo"),
         }
       );
-      let { container } = render(
-        <RouterProvider router={router} fallbackElement={<FallbackElement />} />
-      );
+      let { container } = render(<RouterProvider router={router} />);
 
       function FallbackElement() {
         return <p>Loading...</p>;
@@ -425,11 +427,15 @@ function testDomRouter(
       `);
     });
 
-    it("renders fallbackElement while first data fetch and lazy route load happens", async () => {
+    it("renders hydrateFallbackElement while first data fetch and lazy route load happens", async () => {
       let fooDefer = createDeferred();
       let router = createTestRouter(
         createRoutesFromElements(
-          <Route path="/" element={<Outlet />}>
+          <Route
+            path="/"
+            element={<Outlet />}
+            hydrateFallbackElement={<FallbackElement />}
+          >
             <Route
               path="foo"
               lazy={async () => {
@@ -446,9 +452,7 @@ function testDomRouter(
           window: getWindow("/foo"),
         }
       );
-      let { container } = render(
-        <RouterProvider router={router} fallbackElement={<FallbackElement />} />
-      );
+      let { container } = render(<RouterProvider router={router} />);
 
       function FallbackElement() {
         return <p>Loading...</p>;
@@ -526,11 +530,15 @@ function testDomRouter(
       `);
     });
 
-    it("renders fallbackElement within router contexts", async () => {
+    it("renders hydrateFallbackElement within router contexts", async () => {
       let fooDefer = createDeferred();
       let router = createTestRouter(
         createRoutesFromElements(
-          <Route path="/" element={<Outlet />}>
+          <Route
+            path="/"
+            element={<Outlet />}
+            hydrateFallbackElement={<FallbackElement />}
+          >
             <Route
               path="foo"
               loader={() => fooDefer.promise}
@@ -540,9 +548,7 @@ function testDomRouter(
         ),
         { window: getWindow("/foo") }
       );
-      let { container } = render(
-        <RouterProvider router={router} fallbackElement={<FallbackElement />} />
-      );
+      let { container } = render(<RouterProvider router={router} />);
 
       function FallbackElement() {
         let location = useLocation();