Preserve hydrate property on client loaders during instrumentation (#14674)

Author: brophdawg11

.changeset/young-geese-pay.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Preserve `clientLoader.hydrate=true` when using `<HydratedRouter unstable_instrumentations>`

packages/react-router/__tests__/router/instrumentation-test.ts

@@ -1,6 +1,7 @@
 import { createMemoryRouter } from "../../lib/components";
+import { createMemoryHistory } from "../../lib/router/history";
 import type { StaticHandlerContext } from "../../lib/router/router";
-import { createStaticHandler } from "../../lib/router/router";
+import { createRouter, createStaticHandler } from "../../lib/router/router";
 import {
   ErrorResponseImpl,
   data,
@@ -112,6 +113,56 @@ describe("instrumentation", () => {
       });
     });
 
+    it("preserves hydrate=true on client side loaders", async () => {
+      let dfd = createDeferred();
+      let spy = jest.fn();
+      function loader() {
+        dfd.resolve();
+        return "INDEX*";
+      }
+      loader.hydrate = true;
+      let router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          {
+            id: "index",
+            index: true,
+            loader,
+          },
+        ],
+        hydrationData: {
+          loaderData: {
+            index: "INDEX",
+          },
+        },
+        unstable_instrumentations: [
+          {
+            route(route) {
+              route.instrument({
+                async loader(loader) {
+                  spy("start");
+                  await loader();
+                  spy("end");
+                },
+              });
+            },
+          },
+        ],
+      });
+
+      expect(router.state.initialized).toBe(false);
+      expect(router.state.loaderData).toEqual({ index: "INDEX" });
+
+      router.initialize();
+      await dfd.promise;
+      await tick();
+
+      expect(router.state.initialized).toBe(true);
+      expect(router.state.loaderData).toEqual({ index: "INDEX*" });
+      expect(spy).toHaveBeenCalledWith("start");
+      expect(spy).toHaveBeenCalledWith("end");
+    });
+
     it("allows instrumentation of actions", async () => {
       let spy = jest.fn();
       let t = setup({

packages/react-router/lib/router/instrumentation.ts

@@ -9,6 +9,7 @@ import type {
   FormEncType,
   HTMLFormMethod,
   LazyRouteObject,
+  LoaderFunction,
   LoaderFunctionArgs,
   MaybePromise,
   MiddlewareFunction,
@@ -218,6 +219,9 @@ export function getRouteInstrumentationUpdates(
         getHandlerInfo(args[0] as LoaderFunctionArgs | ActionFunctionArgs),
       );
       if (instrumented) {
+        if (key === "loader" && original.hydrate === true) {
+          (instrumented as LoaderFunction).hydrate = true;
+        }
         // @ts-expect-error
         instrumented[UninstrumentedSymbol] = original;
         updates[key] = instrumented;