Skip to content

Commit 09f46e4

Browse files
committed
Fix: Wrong dispatcher when replaying after suspend
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 facebook#26232. That fix only accounted for initial mount, but the useTransition regression test added in the previous commit 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.
1 parent c13ea86 commit 09f46e4

File tree

2 files changed

+41
-14
lines changed

2 files changed

+41
-14
lines changed

packages/react-reconciler/src/ReactFiberHooks.js

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,20 +1083,49 @@ function useThenable<T>(thenable: Thenable<T>): T {
10831083
thenableState = createThenableState();
10841084
}
10851085
const result = trackUsedThenable(thenableState, thenable, index);
1086-
if (
1087-
currentlyRenderingFiber.alternate === null &&
1088-
(workInProgressHook === null
1089-
? currentlyRenderingFiber.memoizedState === null
1090-
: workInProgressHook.next === null)
1091-
) {
1092-
// Initial render, and either this is the first time the component is
1093-
// called, or there were no Hooks called after this use() the previous
1094-
// time (perhaps because it threw). Subsequent Hook calls should use the
1095-
// mount dispatcher.
1086+
1087+
// When something suspends with `use`, we replay the component with the
1088+
// "re-render" dispatcher instead of the "mount" or "update" dispatcher.
1089+
//
1090+
// But if there are additional hooks that occur after the `use` invocation
1091+
// that suspended, they wouldn't have been processed during the previous
1092+
// attempt. So after we invoke `use` again, we may need to switch from the
1093+
// "re-render" dispatcher back to the "mount" or "update" dispatcher. That's
1094+
// what the following logic accounts for.
1095+
//
1096+
// TODO: Theoretically this logic only needs to go into the rerender
1097+
// dispatcher. Could optimize, but probably not be worth it.
1098+
1099+
// This is the same logic as in updateWorkInProgressHook.
1100+
const workInProgressFiber = currentlyRenderingFiber;
1101+
const nextWorkInProgressHook =
1102+
workInProgressHook === null
1103+
? // We're at the beginning of the list, so read from the first hook from
1104+
// the fiber.
1105+
workInProgressFiber.memoizedState
1106+
: workInProgressHook.next;
1107+
1108+
if (nextWorkInProgressHook !== null) {
1109+
// There are still hooks remaining from the previous attempt.
1110+
} else {
1111+
// There are no remaining hooks from the previous attempt. We're no longer
1112+
// in "re-render" mode. Switch to the normal mount or update dispatcher.
1113+
//
1114+
// This is the same as the logic in renderWithHooks, except we don't bother
1115+
// to track the hook types debug information in this case (sufficient to
1116+
// only do that when nothing suspends).
1117+
const currentFiber = workInProgressFiber.alternate;
10961118
if (__DEV__) {
1097-
ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
1119+
if (currentFiber !== null && currentFiber.memoizedState !== null) {
1120+
ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV;
1121+
} else {
1122+
ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
1123+
}
10981124
} else {
1099-
ReactSharedInternals.H = HooksDispatcherOnMount;
1125+
ReactSharedInternals.H =
1126+
currentFiber === null || currentFiber.memoizedState === null
1127+
? HooksDispatcherOnMount
1128+
: HooksDispatcherOnUpdate;
11001129
}
11011130
}
11021131
return result;

packages/react-reconciler/src/__tests__/ReactUse-test.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ let useState;
1919
let useTransition;
2020
let useMemo;
2121
let useEffect;
22-
let useOptimistic;
2322
let Suspense;
2423
let startTransition;
2524
let pendingTextRequests;
@@ -43,7 +42,6 @@ describe('ReactUse', () => {
4342
useTransition = React.useTransition;
4443
useMemo = React.useMemo;
4544
useEffect = React.useEffect;
46-
useOptimistic = React.useOptimistic;
4745
Suspense = React.Suspense;
4846
startTransition = React.startTransition;
4947

0 commit comments

Comments
 (0)