Expose promises from underlying router operations for use in react 19

.changeset/expose-promises.md

@@ -0,0 +1,10 @@
+---
+"react-router": major
+---
+
+- Expose the underlying router promises from the following APIs for compsition in React 19 APIs:
+  - `useNavigate()`
+  - `useSubmit`
+  - `useFetcher().load`
+  - `useFetcher().submit`
+  - `useRevalidator.revalidate`

packages/react-router/__tests__/data-memory-router-test.tsx

@@ -29,11 +29,18 @@ import {
   useRouteLoaderData,
 } from "react-router";
 
-import type { ErrorResponse } from "../index";
+import {
+  useFetcher,
+  useNavigate,
+  useRevalidator,
+  useSubmit,
+  type ErrorResponse,
+} from "../index";
 import urlDataStrategy from "./router/utils/urlDataStrategy";
 import { createDeferred } from "./router/utils/utils";
 import MemoryNavigate from "./utils/MemoryNavigate";
 import getHtml from "./utils/getHtml";
+import { RouterProvider as DomRouterProvider } from "../lib/dom/lib";
 
 describe("createMemoryRouter", () => {
   let consoleWarn: jest.SpyInstance;
@@ -1002,6 +1009,272 @@ describe("createMemoryRouter", () => {
     `);
   });
 
+  it("exposes promise from useNavigate", async () => {
+    let sequence: string[] = [];
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component() {
+          let navigate = useNavigate();
+          return (
+            <>
+              <h1>Home</h1>
+              <button
+                onClick={async () => {
+                  sequence.push("call navigate");
+                  await navigate("/page");
+                  sequence.push("navigate resolved");
+                }}
+              >
+                Navigate
+              </button>
+            </>
+          );
+        },
+      },
+      {
+        path: "/page",
+        async loader() {
+          sequence.push("loader start");
+          await new Promise((r) => setTimeout(r, 100));
+          sequence.push("loader end");
+          return null;
+        },
+        Component: () => {
+          sequence.push("render");
+          return <h1>Page</h1>;
+        },
+      },
+    ]);
+    let { container } = render(<RouterProvider router={router} />);
+
+    expect(getHtml(container)).toContain("Home");
+    fireEvent.click(screen.getByText("Navigate"));
+    await waitFor(() => screen.getByText("Page"));
+
+    expect(sequence).toEqual([
+      "call navigate",
+      "loader start",
+      "loader end",
+      "navigate resolved",
+      "render",
+    ]);
+  });
+
+  it("exposes promise from useSubmit", async () => {
+    let sequence: string[] = [];
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        Component() {
+          let submit = useSubmit();
+          return (
+            <>
+              <h1>Home</h1>
+              <button
+                onClick={async () => {
+                  sequence.push("call submit");
+                  await submit({}, { action: "/page" });
+                  sequence.push("submit resolved");
+                }}
+              >
+                Submit
+              </button>
+            </>
+          );
+        },
+      },
+      {
+        path: "/page",
+        async loader() {
+          sequence.push("loader start");
+          await new Promise((r) => setTimeout(r, 100));
+          sequence.push("loader end");
+          return null;
+        },
+        Component: () => {
+          sequence.push("render");
+          return <h1>Page</h1>;
+        },
+      },
+    ]);
+    let { container } = render(<RouterProvider router={router} />);
+
+    expect(getHtml(container)).toContain("Home");
+    fireEvent.click(screen.getByText("Submit"));
+    await waitFor(() => screen.getByText("Page"));
+
+    expect(sequence).toEqual([
+      "call submit",
+      "loader start",
+      "loader end",
+      "submit resolved",
+      "render",
+    ]);
+  });
+
+  it("exposes promise from useRevalidator", async () => {
+    let sequence: string[] = [];
+    let count = 0;
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        async loader() {
+          sequence.push("loader start");
+          await new Promise((r) => setTimeout(r, 100));
+          sequence.push("loader end");
+          return ++count;
+        },
+        Component() {
+          let loaderCount = useLoaderData();
+          let revalidator = useRevalidator();
+          sequence.push(`render ${loaderCount}`);
+          return (
+            <button
+              onClick={async () => {
+                sequence.push("call revalidate");
+                await revalidator.revalidate();
+                sequence.push("revalidate resolved");
+              }}
+            >
+              Revalidate ({loaderCount})
+            </button>
+          );
+        },
+      },
+    ]);
+    render(<RouterProvider router={router} />);
+
+    await waitFor(() => screen.getByText("Revalidate (1)"));
+    fireEvent.click(screen.getByText("Revalidate (1)"));
+    await waitFor(() => screen.getByText("Revalidate (2)"));
+
+    expect(sequence).toEqual([
+      "loader start",
+      "loader end",
+      "render 1",
+      "call revalidate",
+      "loader start",
+      "render 1", // revalidator.state === 'loading'
+      "loader end",
+      "revalidate resolved",
+      "render 2",
+    ]);
+  });
+
+  it("exposes promise from useFetcher.load", async () => {
+    let sequence: string[] = [];
+    let count = 0;
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        async loader() {
+          sequence.push("loader start");
+          await new Promise((r) => setTimeout(r, 100));
+          sequence.push("loader end");
+          return ++count;
+        },
+        Component() {
+          let loaderCount = useLoaderData();
+          let fetcher = useFetcher();
+          sequence.push(`render ${loaderCount} ${fetcher.data || "empty"}`);
+          return (
+            <button
+              onClick={async () => {
+                sequence.push("call fetcher.load");
+                await fetcher.load("/");
+                sequence.push("fetcher.load resolved");
+              }}
+            >
+              Fetch ({`${loaderCount}, ${fetcher.data || "empty"}`})
+            </button>
+          );
+        },
+      },
+    ]);
+
+    // TODO: Fetchers only supported in DomRouterProvider at the moment, but
+    // that should be fixed once we align the two
+    render(<DomRouterProvider router={router} />);
+
+    await waitFor(() => screen.getByText("Fetch (1, empty)"));
+    fireEvent.click(screen.getByText("Fetch (1, empty)"));
+    await waitFor(() => screen.getByText("Fetch (1, 2)"));
+
+    expect(sequence).toEqual([
+      "loader start",
+      "loader end",
+      "render 1 empty",
+      "call fetcher.load",
+      "loader start",
+      "render 1 empty", // fetcher.state === 'loading'
+      "loader end",
+      "fetcher.load resolved",
+      "render 1 2",
+    ]);
+  });
+
+  it("exposes promise from useFetcher.submit", async () => {
+    let sequence: string[] = [];
+    let count = 0;
+    let router = createMemoryRouter([
+      {
+        path: "/",
+        async action() {
+          sequence.push("action start");
+          await new Promise((r) => setTimeout(r, 100));
+          sequence.push("action end");
+          return ++count;
+        },
+        async loader() {
+          sequence.push("loader start");
+          await new Promise((r) => setTimeout(r, 100));
+          sequence.push("loader end");
+          return ++count;
+        },
+        Component() {
+          let loaderCount = useLoaderData();
+          let fetcher = useFetcher();
+          sequence.push(`render ${loaderCount} ${fetcher.data || "empty"}`);
+          return (
+            <button
+              onClick={async () => {
+                sequence.push("call fetcher.submit");
+                await fetcher.submit({}, { method: "post", action: "/" });
+                sequence.push("fetcher.submit resolved");
+              }}
+            >
+              Fetch ({`${loaderCount}, ${fetcher.data || "empty"}`})
+            </button>
+          );
+        },
+      },
+    ]);
+
+    // TODO: Fetchers only supported in DomRouterProvider at the moment, but
+    // that should be fixed once we align the two
+    render(<DomRouterProvider router={router} />);
+
+    await waitFor(() => screen.getByText("Fetch (1, empty)"));
+    fireEvent.click(screen.getByText("Fetch (1, empty)"));
+    await waitFor(() => screen.getByText("Fetch (3, 2)"));
+
+    expect(sequence).toEqual([
+      "loader start",
+      "loader end",
+      "render 1 empty",
+      "call fetcher.submit",
+      "action start",
+      "render 1 empty", // fetcher.state === 'submitting'
+      "action end",
+      "loader start",
+      "render 1 2", // fetcher.state === 'loading'
+      "loader end",
+      "fetcher.submit resolved",
+      "render 3 2",
+    ]);
+  });
+
   describe("errors", () => {
     it("renders hydration errors on leaf elements using errorElement", async () => {
       let router = createMemoryRouter(

packages/react-router/__tests__/dom/special-characters-test.tsx

@@ -831,8 +831,9 @@ describe("special character tests", () => {
       it("does not encode characters in MemoryRouter (navigate)", () => {
         function Start() {
           let navigate = useNavigate();
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          React.useEffect(() => navigate("/with space"), []);
+          React.useEffect(() => {
+            navigate("/with space");
+          }, [navigate]);
           return null;
         }
         let ctx = render(
@@ -864,8 +865,9 @@ describe("special character tests", () => {
       it("does not encode characters in createMemoryRouter (navigate)", () => {
         function Start() {
           let navigate = useNavigate();
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          React.useEffect(() => navigate("/with space"), []);
+          React.useEffect(() => {
+            navigate("/with space");
+          }, [navigate]);
           return null;
         }
         let router = createMemoryRouter([
@@ -903,8 +905,9 @@ describe("special character tests", () => {
 
         function Start() {
           let navigate = useNavigate();
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          React.useEffect(() => navigate("/with space"), []);
+          React.useEffect(() => {
+            navigate("/with space");
+          }, [navigate]);
           return null;
         }
 
@@ -943,8 +946,9 @@ describe("special character tests", () => {
 
         function Start() {
           let navigate = useNavigate();
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          React.useEffect(() => navigate("/with space"), []);
+          React.useEffect(() => {
+            navigate("/with space");
+          }, [navigate]);
           return null;
         }
 
@@ -988,8 +992,9 @@ describe("special character tests", () => {
 
         function Start() {
           let navigate = useNavigate();
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          React.useEffect(() => navigate("/with space"), []);
+          React.useEffect(() => {
+            navigate("/with space");
+          }, [navigate]);
           return null;
         }
 
@@ -1030,8 +1035,9 @@ describe("special character tests", () => {
 
         function Start() {
           let navigate = useNavigate();
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          React.useEffect(() => navigate("/with space"), []);
+          React.useEffect(() => {
+            navigate("/with space");
+          }, [navigate]);
           return null;
         }
 

packages/react-router/__tests__/dom/trailing-slashes-test.tsx

@@ -634,7 +634,8 @@ function getWindowImpl(initialUrl: string, isHash = false): Window {
 
 function SingleNavigate({ to }: { to: To }) {
   let navigate = useNavigate();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  React.useEffect(() => navigate(to), [to]);
+  React.useEffect(() => {
+    navigate(to);
+  }, [navigate, to]);
   return null;
 }