fix: retain transition through form submission to allow useOptimistic to play correctly with pending states (#13964)

Author: jacob-ebey

.changeset/fuzzy-bottles-itch.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+retain transition through form submission to allow useOptimistic to play correctly with pending states

packages/react-router/lib/rsc/browser.tsx

@@ -114,53 +114,59 @@ export function createCallServer({
     }
 
     if (payload.rerender) {
-      (async () => {
-        const rerender = await payload.rerender;
-        if (!rerender) return;
-
-        if (landedActionId < actionId && window.__routerActionID <= actionId) {
-          landedActionId = actionId;
-
-          if (rerender.type === "redirect") {
-            if (rerender.reload) {
-              window.location.href = rerender.location;
+      React.startTransition(
+        // @ts-expect-error - We have old react types that don't know this can be async
+        async () => {
+          const rerender = await payload.rerender;
+          if (!rerender) return;
+
+          if (
+            landedActionId < actionId &&
+            window.__routerActionID <= actionId
+          ) {
+            landedActionId = actionId;
+
+            if (rerender.type === "redirect") {
+              if (rerender.reload) {
+                window.location.href = rerender.location;
+                return;
+              }
+              window.__router.navigate(rerender.location, {
+                replace: rerender.replace,
+              });
               return;
             }
-            window.__router.navigate(rerender.location, {
-              replace: rerender.replace,
-            });
-            return;
-          }
 
-          let lastMatch: RSCRouteManifest | undefined;
-          for (const match of rerender.matches) {
-            window.__router.patchRoutes(
-              lastMatch?.id ?? null,
-              [createRouteFromServerManifest(match)],
-              true
-            );
-            lastMatch = match;
-          }
-          window.__router._internalSetStateDoNotUseOrYouWillBreakYourApp({});
-
-          React.startTransition(() => {
-            window.__router._internalSetStateDoNotUseOrYouWillBreakYourApp({
-              loaderData: Object.assign(
-                {},
-                window.__router.state.loaderData,
-                rerender.loaderData
-              ),
-              errors: rerender.errors
-                ? Object.assign(
-                    {},
-                    window.__router.state.errors,
-                    rerender.errors
-                  )
-                : null,
+            let lastMatch: RSCRouteManifest | undefined;
+            for (const match of rerender.matches) {
+              window.__router.patchRoutes(
+                lastMatch?.id ?? null,
+                [createRouteFromServerManifest(match)],
+                true
+              );
+              lastMatch = match;
+            }
+            window.__router._internalSetStateDoNotUseOrYouWillBreakYourApp({});
+
+            React.startTransition(() => {
+              window.__router._internalSetStateDoNotUseOrYouWillBreakYourApp({
+                loaderData: Object.assign(
+                  {},
+                  window.__router.state.loaderData,
+                  rerender.loaderData
+                ),
+                errors: rerender.errors
+                  ? Object.assign(
+                      {},
+                      window.__router.state.errors,
+                      rerender.errors
+                    )
+                  : null,
+              });
             });
-          });
+          }
         }
-      })();
+      );
     }
 
     return payload.actionResult;