Lift auto-transition to Link/Form

Author: brophdawg11

packages/react-router/lib/dom/lib.tsx

@@ -1381,7 +1381,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     },
     forwardedRef,
   ) {
-    let { basename } = React.useContext(NavigationContext);
+    let { basename, unstable_transitions } =
+      React.useContext(NavigationContext);
     let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
 
     // Rendered into <a href> for absolute URLs
@@ -1432,6 +1433,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       preventScrollReset,
       relative,
       viewTransition,
+      unstable_transitions,
     });
     function handleClick(
       event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
@@ -1975,6 +1977,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
     },
     forwardedRef,
   ) => {
+    let { unstable_transitions } = React.useContext(NavigationContext);
     let submit = useSubmit();
     let formAction = useFormAction(action, { relative });
     let formMethod: HTMLFormMethod =
@@ -1994,16 +1997,24 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
         (submitter?.getAttribute("formmethod") as HTMLFormMethod | undefined) ||
         method;
 
-      submit(submitter || event.currentTarget, {
-        fetcherKey,
-        method: submitMethod,
-        navigate,
-        replace,
-        state,
-        relative,
-        preventScrollReset,
-        viewTransition,
-      });
+      let doSubmit = () =>
+        submit(submitter || event.currentTarget, {
+          fetcherKey,
+          method: submitMethod,
+          navigate,
+          replace,
+          state,
+          relative,
+          preventScrollReset,
+          viewTransition,
+        });
+
+      if (unstable_transitions && navigate === true) {
+        // @ts-expect-error Needs React 19 types
+        React.startTransition(() => doSubmit());
+      } else {
+        doSubmit();
+      }
     };
 
     return (
@@ -2218,6 +2229,9 @@ function useDataRouterState(hookName: DataRouterStateHook) {
  * @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
  * for this navigation. To apply specific styles during the transition, see
  * {@link useViewTransitionState}. Defaults to `false`.
+ * @param options.unstable_transitions Wraps the navigation in
+ * [`React.startTransition`](https://react.dev/reference/react/startTransition)
+ * for concurrent rendering. Defaults to `false`.
  * @returns A click handler function that can be used in a custom {@link Link} component.
  */
 export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
@@ -2229,13 +2243,15 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     preventScrollReset,
     relative,
     viewTransition,
+    unstable_transitions,
   }: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
     viewTransition?: boolean;
+    unstable_transitions?: boolean;
   } = {},
 ): (event: React.MouseEvent<E, MouseEvent>) => void {
   let navigate = useNavigate();
@@ -2254,13 +2270,21 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
             ? replaceProp
             : createPath(location) === createPath(path);
 
-        navigate(to, {
-          replace,
-          state,
-          preventScrollReset,
-          relative,
-          viewTransition,
-        });
+        let doNavigate = () =>
+          navigate(to, {
+            replace,
+            state,
+            preventScrollReset,
+            relative,
+            viewTransition,
+          });
+
+        if (unstable_transitions) {
+          // @ts-expect-error Needs React 19 types
+          React.startTransition(() => doNavigate());
+        } else {
+          doNavigate();
+        }
       }
     },
     [
@@ -2274,6 +2298,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
       preventScrollReset,
       relative,
       viewTransition,
+      unstable_transitions,
     ],
   );
 }
@@ -2579,7 +2604,7 @@ let getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
  */
 export function useSubmit(): SubmitFunction {
   let { router } = useDataRouterContext(DataRouterHook.UseSubmit);
-  let { basename, unstable_transitions } = React.useContext(NavigationContext);
+  let { basename } = React.useContext(NavigationContext);
   let currentRouteId = useRouteId();
 
   return React.useCallback<SubmitFunction>(
@@ -2599,29 +2624,6 @@ export function useSubmit(): SubmitFunction {
           formEncType: options.encType || (encType as FormEncType),
           flushSync: options.flushSync,
         });
-      } else if (unstable_transitions) {
-        await new Promise<void>((resolve, reject) => {
-          // @ts-expect-error Needs React 19 types
-          React.startTransition(async () => {
-            try {
-              await router.navigate(options.action || action, {
-                preventScrollReset: options.preventScrollReset,
-                formData,
-                body,
-                formMethod: options.method || (method as HTMLFormMethod),
-                formEncType: options.encType || (encType as FormEncType),
-                replace: options.replace,
-                state: options.state,
-                fromRouteId: currentRouteId,
-                flushSync: options.flushSync,
-                viewTransition: options.viewTransition,
-              });
-              resolve();
-            } catch (e) {
-              reject(e);
-            }
-          });
-        });
       } else {
         await router.navigate(options.action || action, {
           preventScrollReset: options.preventScrollReset,
@@ -2637,7 +2639,7 @@ export function useSubmit(): SubmitFunction {
         });
       }
     },
-    [router, basename, currentRouteId, unstable_transitions],
+    [router, basename, currentRouteId],
   );
 }
 

packages/react-router/lib/hooks.tsx

@@ -382,8 +382,7 @@ function useNavigateUnstable(): NavigateFunction {
   );
 
   let dataRouterContext = React.useContext(DataRouterContext);
-  let { basename, navigator, unstable_transitions } =
-    React.useContext(NavigationContext);
+  let { basename, navigator } = React.useContext(NavigationContext);
   let { matches } = React.useContext(RouteContext);
   let { pathname: locationPathname } = useLocation();
 
@@ -403,11 +402,7 @@ function useNavigateUnstable(): NavigateFunction {
       if (!activeRef.current) return;
 
       if (typeof to === "number") {
-        if (unstable_transitions && !options.flushSync) {
-          React.startTransition(() => navigator.go(to));
-        } else {
-          navigator.go(to);
-        }
+        navigator.go(to);
         return;
       }
 
@@ -431,29 +426,18 @@ function useNavigateUnstable(): NavigateFunction {
             : joinPaths([basename, path.pathname]);
       }
 
-      if (unstable_transitions && !options.flushSync) {
-        React.startTransition(() => {
-          if (options.replace === true) {
-            navigator.replace(path, options.state, options);
-          } else {
-            navigator.push(path, options.state, options);
-          }
-        });
-      } else {
-        if (options.replace === true) {
-          navigator.replace(path, options.state, options);
-        } else {
-          navigator.push(path, options.state, options);
-        }
-      }
+      (!!options.replace ? navigator.replace : navigator.push)(
+        path,
+        options.state,
+        options,
+      );
     },
     [
       basename,
       navigator,
       routePathnamesJson,
       locationPathname,
       dataRouterContext,
-      unstable_transitions,
     ],
   );
 
@@ -1836,7 +1820,6 @@ export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker {
 // a RouterProvider.
 function useNavigateStable(): NavigateFunction {
   let { router } = useDataRouterContext(DataRouterHook.UseNavigateStable);
-  let { unstable_transitions } = React.useContext(NavigationContext);
   let id = useCurrentRouteId(DataRouterStateHook.UseNavigateStable);
 
   let activeRef = React.useRef(false);
@@ -1852,32 +1835,13 @@ function useNavigateStable(): NavigateFunction {
       // is useless because we haven't wired up our router subscriber yet
       if (!activeRef.current) return;
 
-      if (unstable_transitions && !options.flushSync) {
-        await new Promise<void>((resolve, reject) => {
-          // @ts-expect-error Needs React 19 types
-          React.startTransition(async () => {
-            try {
-              if (typeof to === "number") {
-                // TODO: I don't think go navigations are promise-aware currently
-                await router.navigate(to);
-              } else {
-                await router.navigate(to, { fromRouteId: id, ...options });
-              }
-              resolve();
-            } catch (e) {
-              reject(e);
-            }
-          });
-        });
+      if (typeof to === "number") {
+        router.navigate(to);
       } else {
-        if (typeof to === "number") {
-          router.navigate(to);
-        } else {
-          await router.navigate(to, { fromRouteId: id, ...options });
-        }
+        await router.navigate(to, { fromRouteId: id, ...options });
       }
     },
-    [router, id, unstable_transitions],
+    [router, id],
   );
 
   return navigate;

playground/react-transitions/app/routes/transitions.tsx

@@ -75,81 +75,63 @@ export default function Transitions() {
 
           <ul style={{ maxWidth: "600px" }}>
             <li>
-              <button onClick={() => navigate("/transitions/slow")}>
-                <code>navigate("/transitions/slow")</code>
-              </button>
+              <Link to="/transitions/slow">
+                &lt;Link to="/transitions/slow" /&gt;
+              </Link>
               <ul>
                 <li>
-                  In the current state, <code>useNavigate</code> doesn't wrap
-                  the navigation in <code>startTransition</code>, so they don't
-                  play nice with other transition-aware state updates (try
-                  updating the transition-aware counter mid-navigation)
+                  In the current state, <code>&lt;Link&gt;</code> navigations
+                  are not wrapped in <code>startTransition</code>, so they don't
+                  play nice with other transition-aware state updates
+                </li>
+                <li>
+                  Navigate and increment the transition-enabled counter during
+                  the navigation. We should not see the counter updates
+                  reflected until the navigation ends in a "suspense enabled"
+                  router
                 </li>
                 <li>
                   With the new flag, they are wrapped in{" "}
-                  <code>startTransition</code>
+                  <code>startTransition</code> and the count syncs up properly
                 </li>
               </ul>
             </li>
 
             <li>
-              <button
-                onClick={() =>
-                  // @ts-expect-error Needs React 19 types
-                  startTransition(() => navigate("/transitions/slow"))
-                }
-              >
-                <code>
-                  startTransition(() =&gt; navigate("/transitions/slow")
-                </code>
+              <button onClick={() => navigate("/transitions/slow")}>
+                <code>navigate("/transitions/slow")</code>
               </button>
               <ul>
                 <li>
-                  If you wrap them in <code>startTransition</code> manually,
-                  they play nicely with those updates but they prevent our
-                  internal mid-navigation state updates from surfacing
-                </li>
-                <li>
-                  That can be fixed by enabling <code>useOptimistic</code>{" "}
-                  inside <code>&lt;RouterProvider&gt;</code>
+                  <code>useNavigate</code> is is not wrapped in startTransitoion
+                  with or without the enw flag, so it should never sync with the
+                  transition-enabled counter
                 </li>
               </ul>
             </li>
 
             <li>
               <button
                 onClick={() =>
-                  navigate("/transitions/slow", { flushSync: true })
+                  // @ts-expect-error Needs React 19 types
+                  startTransition(() => navigate("/transitions/slow"))
                 }
               >
                 <code>
-                  navigate("/transitions/slow", {"{"} flushSync: true {"}"})
+                  startTransition(() =&gt; navigate("/transitions/slow")
                 </code>
               </button>
               <ul>
                 <li>
-                  Once <code>useNavigate</code> is wrapped automatically,
-                  passing the
-                  <code>flushSync</code> option will opt out of{" "}
-                  <code>startTransition</code> and apply
-                  <code>React.flushSync</code> to the underlying state update
-                </li>
-              </ul>
-            </li>
-
-            <li>
-              <Link to="/transitions/slow">
-                &lt;Link to="/transitions/slow" /&gt;
-              </Link>
-              <ul>
-                <li>
-                  In the current state, <code>&lt;Link&gt;</code> navigations
-                  are not wrapped in <code>startTransition</code>, so they don't
-                  play nice with other transition-aware state updates
+                  If you wrap <code>useNavigate</code> in{" "}
+                  <code>startTransition</code> manually, then it syncs with the
+                  counter.
                 </li>
                 <li>
-                  With the new flag, they are wrapped in{" "}
-                  <code>startTransition</code>
+                  Without the flag, our router state updates don't surface
+                  during the navigation. Enabling the flag wraps out internal
+                  updates with <code>useOptimistic</code> to allow them to
+                  surface
                 </li>
               </ul>
             </li>