Add changeset

Author: brophdawg11

.changeset/calm-crabs-bathe.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix a potential race condition that can occur when rendering a `HydrateFallback` and initial loaders land before the `router.subscribe` call happens in the `RouterProvider` layout effect

packages/react-router/__tests__/dom/data-browser-router-test.tsx

@@ -598,6 +598,49 @@ function testDomRouter(
       `);
     });
 
+    it.only("handles race conditions if router initialization completes prior to the layout effect router.subscribe() call", async () => {
+      let suspenseDfd = createDeferred();
+      let loaderDfd = createDeferred();
+      let router = createTestRouter([
+        {
+          path: "/",
+          loader: () =>
+            loaderDfd.promise.then((d) => {
+              console.log("returning from loader");
+              return d;
+            }),
+          Component: () => <p>Data:{useLoaderData()}</p>,
+          HydrateFallback: () => "Hydrate Fallback",
+        },
+      ]);
+      expect(router.state.initialized).toBe(false);
+
+      function DataLoader() {
+        console.log("rendering DataLoader");
+        React.use(suspenseDfd.promise);
+        console.log(
+          "DataLoader use() resolved, rendering RouterProvider",
+          router.state.initialized,
+        );
+        return <RouterProvider router={router} />;
+      }
+
+      let { container } = render(
+        <React.Suspense fallback="Suspense Fallback">
+          <DataLoader />
+        </React.Suspense>,
+        { reactStrictMode: false },
+      );
+      expect(screen.getByText("Suspense Fallback")).toBeDefined();
+      suspenseDfd.resolve("DATA");
+      console.log(getHtml(container));
+      await tick();
+      console.log(getHtml(container));
+      loaderDfd.resolve("LOADER");
+      console.log(getHtml(container));
+      await waitFor(() => screen.getByText("Data:LOADER"), { timeout: 3000 });
+    });
+
     it("handles link navigations", async () => {
       let router = createTestRouter(
         createRoutesFromElements(