feat(react-router): stabilize useRevalidator's revalidate

.changeset/healthy-readers-kick.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Stabilize `useRevalidator`'s `revalidate` function

packages/react-router/__tests__/use-revalidator-test.tsx

@@ -283,4 +283,48 @@ describe("useRevalidator", () => {
 
     expect(count).toBe(1);
   });
+
+  it("is stable across revalidation changes", async () => {
+    let uiCount = 0;
+    let stableCount = 0;
+    let unstableCount = 0;
+    let router = createMemoryRouter(
+      [
+        {
+          id: "root",
+          path: "/",
+          loader: () => ++uiCount,
+          Component() {
+            let { revalidate, state } = useRevalidator();
+
+            React.useEffect(() => void stableCount++, [revalidate]);
+            React.useEffect(() => void unstableCount++, [state]);
+
+            return (
+              <button onClick={() => revalidate()}>
+                Revalidate: {useLoaderData()}
+              </button>
+            );
+          },
+        },
+      ],
+      {
+        hydrationData: {
+          loaderData: { root: 0 },
+        },
+      }
+    );
+
+    render(<RouterProvider router={router} />);
+
+    fireEvent.click(screen.getByText("Revalidate: 0"));
+    await waitFor(() => screen.getByText("Revalidate: 1"));
+
+    fireEvent.click(screen.getByText("Revalidate: 1"));
+    await waitFor(() => screen.getByText("Revalidate: 2"));
+
+    // idle -> loading -> idle -> loading -> idle
+    expect(unstableCount).toBe(5);
+    expect(stableCount).toBe(1);
+  });
 });

packages/react-router/lib/hooks.tsx

@@ -1043,17 +1043,19 @@ export function useNavigation() {
 
   @category Hooks
  */
-export function useRevalidator() {
+export function useRevalidator(): {
+  revalidate: () => Promise<void>;
+  state: DataRouter["state"]["revalidation"];
+} {
   let dataRouterContext = useDataRouterContext(DataRouterHook.UseRevalidator);
   let state = useDataRouterState(DataRouterStateHook.UseRevalidator);
+  let revalidate = React.useCallback(async () => {
+    await dataRouterContext.router.revalidate();
+  }, [dataRouterContext.router]);
+
   return React.useMemo(
-    () => ({
-      async revalidate() {
-        await dataRouterContext.router.revalidate();
-      },
-      state: state.revalidation,
-    }),
-    [dataRouterContext.router, state.revalidation]
+    () => ({ revalidate, state: state.revalidation }),
+    [revalidate, state.revalidation]
   );
 }