Fix: useTransition after use gets stuck in pending state (#29670)

When a component suspends with `use`, we switch to the "re-render"
dispatcher during the subsequent render attempt, so that we can reuse
the work from the initial attempt. However, once we run out of hooks
from the previous attempt, we should switch back to the regular "update"
dispatcher.

This is conceptually the same fix as the one introduced in
#26232. That fix only accounted
for initial mount, but the useTransition regression test added in
f829733 illustrates that we need to
handle updates, too.

The issue affects more than just useTransition but because most of the
behavior between the "re-render" and "update" dispatchers is the same
it's hard to contrive other scenarios in a test, which is probably why
it took so long for someone to notice.

Closes #28923 and #29209

---------

Co-authored-by: eps1lon <sebastian.silbermann@vercel.com>

DiffTrain build for [adbec0c](adbec0c)

Author: acdlite

compiled/facebook-www/REVISION

@@ -1 +1 @@
-c69211a9dfa683038b1a758aba2ca09c7862a6d3
+adbec0c25aff07f04b0678679554505ba2813168

compiled/facebook-www/REVISION_TRANSFORMS

@@ -1 +1 @@
-c69211a9dfa683038b1a758aba2ca09c7862a6d3
+adbec0c25aff07f04b0678679554505ba2813168

compiled/facebook-www/React-dev.classic.js

@@ -22,7 +22,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-var ReactVersion = '19.0.0-www-classic-c69211a9df-20240531';
+var ReactVersion = '19.0.0-www-classic-adbec0c25a-20240531';
 
 // Re-export dynamic flags from the www version.
 var dynamicFeatureFlags = require('ReactFeatureFlags');

compiled/facebook-www/React-dev.modern.js

@@ -22,7 +22,7 @@ if (
 ) {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
-var ReactVersion = '19.0.0-www-modern-c69211a9df-20240531';
+var ReactVersion = '19.0.0-www-modern-adbec0c25a-20240531';
 
 // Re-export dynamic flags from the www version.
 var dynamicFeatureFlags = require('ReactFeatureFlags');

compiled/facebook-www/React-prod.classic.js

@@ -684,4 +684,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-c69211a9df-20240531";
+exports.version = "19.0.0-www-classic-adbec0c25a-20240531";

compiled/facebook-www/React-prod.modern.js

@@ -684,4 +684,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-c69211a9df-20240531";
+exports.version = "19.0.0-www-modern-adbec0c25a-20240531";

compiled/facebook-www/React-profiling.classic.js

@@ -688,7 +688,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-c69211a9df-20240531";
+exports.version = "19.0.0-www-classic-adbec0c25a-20240531";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-profiling.modern.js

@@ -688,7 +688,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-c69211a9df-20240531";
+exports.version = "19.0.0-www-modern-adbec0c25a-20240531";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.classic.js

@@ -60,7 +60,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = '19.0.0-www-classic-c69211a9df-20240531';
+var ReactVersion = '19.0.0-www-classic-adbec0c25a-20240531';
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -8503,15 +8503,39 @@ function useThenable(thenable) {
     thenableState = createThenableState();
   }
 
-  var result = trackUsedThenable(thenableState, thenable, index);
+  var result = trackUsedThenable(thenableState, thenable, index); // When something suspends with `use`, we replay the component with the
+  // "re-render" dispatcher instead of the "mount" or "update" dispatcher.
+  //
+  // But if there are additional hooks that occur after the `use` invocation
+  // that suspended, they wouldn't have been processed during the previous
+  // attempt. So after we invoke `use` again, we may need to switch from the
+  // "re-render" dispatcher back to the "mount" or "update" dispatcher. That's
+  // what the following logic accounts for.
+  //
+  // TODO: Theoretically this logic only needs to go into the rerender
+  // dispatcher. Could optimize, but probably not be worth it.
+  // This is the same logic as in updateWorkInProgressHook.
+
+  var workInProgressFiber = currentlyRenderingFiber$1;
+  var nextWorkInProgressHook = workInProgressHook === null ? // We're at the beginning of the list, so read from the first hook from
+  // the fiber.
+  workInProgressFiber.memoizedState : workInProgressHook.next;
+
+  if (nextWorkInProgressHook !== null) ; else {
+    // There are no remaining hooks from the previous attempt. We're no longer
+    // in "re-render" mode. Switch to the normal mount or update dispatcher.
+    //
+    // This is the same as the logic in renderWithHooks, except we don't bother
+    // to track the hook types debug information in this case (sufficient to
+    // only do that when nothing suspends).
+    var currentFiber = workInProgressFiber.alternate;
 
-  if (currentlyRenderingFiber$1.alternate === null && (workInProgressHook === null ? currentlyRenderingFiber$1.memoizedState === null : workInProgressHook.next === null)) {
-    // Initial render, and either this is the first time the component is
-    // called, or there were no Hooks called after this use() the previous
-    // time (perhaps because it threw). Subsequent Hook calls should use the
-    // mount dispatcher.
     {
-      ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+      if (currentFiber !== null && currentFiber.memoizedState !== null) {
+        ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV;
+      } else {
+        ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+      }
     }
   }
 

compiled/facebook-www/ReactART-dev.modern.js

@@ -60,7 +60,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = '19.0.0-www-modern-c69211a9df-20240531';
+var ReactVersion = '19.0.0-www-modern-adbec0c25a-20240531';
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -8292,15 +8292,39 @@ function useThenable(thenable) {
     thenableState = createThenableState();
   }
 
-  var result = trackUsedThenable(thenableState, thenable, index);
+  var result = trackUsedThenable(thenableState, thenable, index); // When something suspends with `use`, we replay the component with the
+  // "re-render" dispatcher instead of the "mount" or "update" dispatcher.
+  //
+  // But if there are additional hooks that occur after the `use` invocation
+  // that suspended, they wouldn't have been processed during the previous
+  // attempt. So after we invoke `use` again, we may need to switch from the
+  // "re-render" dispatcher back to the "mount" or "update" dispatcher. That's
+  // what the following logic accounts for.
+  //
+  // TODO: Theoretically this logic only needs to go into the rerender
+  // dispatcher. Could optimize, but probably not be worth it.
+  // This is the same logic as in updateWorkInProgressHook.
+
+  var workInProgressFiber = currentlyRenderingFiber$1;
+  var nextWorkInProgressHook = workInProgressHook === null ? // We're at the beginning of the list, so read from the first hook from
+  // the fiber.
+  workInProgressFiber.memoizedState : workInProgressHook.next;
+
+  if (nextWorkInProgressHook !== null) ; else {
+    // There are no remaining hooks from the previous attempt. We're no longer
+    // in "re-render" mode. Switch to the normal mount or update dispatcher.
+    //
+    // This is the same as the logic in renderWithHooks, except we don't bother
+    // to track the hook types debug information in this case (sufficient to
+    // only do that when nothing suspends).
+    var currentFiber = workInProgressFiber.alternate;
 
-  if (currentlyRenderingFiber$1.alternate === null && (workInProgressHook === null ? currentlyRenderingFiber$1.memoizedState === null : workInProgressHook.next === null)) {
-    // Initial render, and either this is the first time the component is
-    // called, or there were no Hooks called after this use() the previous
-    // time (perhaps because it threw). Subsequent Hook calls should use the
-    // mount dispatcher.
     {
-      ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+      if (currentFiber !== null && currentFiber.memoizedState !== null) {
+        ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV;
+      } else {
+        ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
+      }
     }
   }