Skip to content

Commit 8fc85dd

Browse files
acdliterickhanlonii
authored andcommitted
Resume immediately pinged fiber without unwinding (#25074)
* Yield to main thread if continuation is returned Instead of using an imperative method `requestYield` to ask Scheduler to yield to the main thread, we can assume that any time a Scheduler task returns a continuation callback, it's because it wants to yield to the main thread. We can assume the task already checked some condition that caused it to return a continuation, so we don't need to do any additional checks — we can immediately yield and schedule a new task for the continuation. The replaces the `requestYield` API that I added in ca990e9. * Move unwind after error into main work loop I need to be able to yield to the main thread in between when an error is thrown and when the stack is unwound. (This is the motivation behind the refactor, but it isn't implemented in this commit.) Currently the unwind is inlined directly into `handleError`. Instead, I've moved the unwind logic into the main work loop. At the very beginning of the function, we check to see if the work-in-progress is in a "suspended" state — that is, whether it needs to be unwound. If it is, we will enter the unwind phase instead of the begin phase. We only need to perform this check when we first enter the work loop: at the beginning of a Scheduler chunk, or after something throws. We don't need to perform it after every unit of work. * Yield to main thread whenever a fiber suspends When a fiber suspends, we should yield to the main thread in case the data is already cached, to unblock a potential ping event. By itself, this commit isn't useful because we don't do anything special in the case where to do receive an immediate ping event. I've split this out only to demonstrate that it doesn't break any existing behavior. See the next commit for full context and motivation. * Resume immediately pinged fiber without unwinding If a fiber suspends, and is pinged immediately in a microtask (or a regular task that fires before React resumes rendering), try rendering the same fiber again without unwinding the stack. This can be super helpful when working with promises and async-await, because even if the outermost promise hasn't been cached before, the underlying data may have been preloaded. In many cases, we can continue rendering immediately without having to show a fallback. This optimization should work during any concurrent (time-sliced) render. It doesn't work during discrete updates because those are semantically required to finish synchronously — those get the current behavior.
1 parent 8cae66c commit 8fc85dd

18 files changed

+539
-200
lines changed

packages/react-reconciler/src/ReactFiberThrow.new.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ function throwException(
357357
sourceFiber: Fiber,
358358
value: mixed,
359359
rootRenderLanes: Lanes,
360-
) {
360+
): Wakeable | null {
361361
// The source fiber did not complete.
362362
sourceFiber.flags |= Incomplete;
363363

@@ -459,7 +459,7 @@ function throwException(
459459
if (suspenseBoundary.mode & ConcurrentMode) {
460460
attachPingListener(root, wakeable, rootRenderLanes);
461461
}
462-
return;
462+
return wakeable;
463463
} else {
464464
// No boundary was found. Unless this is a sync update, this is OK.
465465
// We can suspend and wait for more data to arrive.
@@ -474,7 +474,7 @@ function throwException(
474474
// This case also applies to initial hydration.
475475
attachPingListener(root, wakeable, rootRenderLanes);
476476
renderDidSuspendDelayIfPossible();
477-
return;
477+
return wakeable;
478478
}
479479

480480
// This is a sync/discrete update. We treat this case like an error
@@ -517,7 +517,7 @@ function throwException(
517517
// Even though the user may not be affected by this error, we should
518518
// still log it so it can be fixed.
519519
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
520-
return;
520+
return null;
521521
}
522522
} else {
523523
// Otherwise, fall through to the error path.
@@ -540,7 +540,7 @@ function throwException(
540540
workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
541541
const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
542542
enqueueCapturedUpdate(workInProgress, update);
543-
return;
543+
return null;
544544
}
545545
case ClassComponent:
546546
// Capture and retry
@@ -564,14 +564,15 @@ function throwException(
564564
lane,
565565
);
566566
enqueueCapturedUpdate(workInProgress, update);
567-
return;
567+
return null;
568568
}
569569
break;
570570
default:
571571
break;
572572
}
573573
workInProgress = workInProgress.return;
574574
} while (workInProgress !== null);
575+
return null;
575576
}
576577

577578
export {throwException, createRootErrorUpdate, createClassErrorUpdate};

packages/react-reconciler/src/ReactFiberThrow.old.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ function throwException(
357357
sourceFiber: Fiber,
358358
value: mixed,
359359
rootRenderLanes: Lanes,
360-
) {
360+
): Wakeable | null {
361361
// The source fiber did not complete.
362362
sourceFiber.flags |= Incomplete;
363363

@@ -459,7 +459,7 @@ function throwException(
459459
if (suspenseBoundary.mode & ConcurrentMode) {
460460
attachPingListener(root, wakeable, rootRenderLanes);
461461
}
462-
return;
462+
return wakeable;
463463
} else {
464464
// No boundary was found. Unless this is a sync update, this is OK.
465465
// We can suspend and wait for more data to arrive.
@@ -474,7 +474,7 @@ function throwException(
474474
// This case also applies to initial hydration.
475475
attachPingListener(root, wakeable, rootRenderLanes);
476476
renderDidSuspendDelayIfPossible();
477-
return;
477+
return wakeable;
478478
}
479479

480480
// This is a sync/discrete update. We treat this case like an error
@@ -517,7 +517,7 @@ function throwException(
517517
// Even though the user may not be affected by this error, we should
518518
// still log it so it can be fixed.
519519
queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
520-
return;
520+
return null;
521521
}
522522
} else {
523523
// Otherwise, fall through to the error path.
@@ -540,7 +540,7 @@ function throwException(
540540
workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
541541
const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
542542
enqueueCapturedUpdate(workInProgress, update);
543-
return;
543+
return null;
544544
}
545545
case ClassComponent:
546546
// Capture and retry
@@ -564,14 +564,15 @@ function throwException(
564564
lane,
565565
);
566566
enqueueCapturedUpdate(workInProgress, update);
567-
return;
567+
return null;
568568
}
569569
break;
570570
default:
571571
break;
572572
}
573573
workInProgress = workInProgress.return;
574574
} while (workInProgress !== null);
575+
return null;
575576
}
576577

577578
export {throwException, createRootErrorUpdate, createClassErrorUpdate};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
*/
9+
10+
import type {Wakeable} from 'shared/ReactTypes';
11+
12+
let suspendedWakeable: Wakeable | null = null;
13+
let wasPinged = false;
14+
let adHocSuspendCount: number = 0;
15+
16+
const MAX_AD_HOC_SUSPEND_COUNT = 50;
17+
18+
export function suspendedWakeableWasPinged() {
19+
return wasPinged;
20+
}
21+
22+
export function trackSuspendedWakeable(wakeable: Wakeable) {
23+
adHocSuspendCount++;
24+
suspendedWakeable = wakeable;
25+
}
26+
27+
export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
28+
if (wakeable === suspendedWakeable) {
29+
// This ping is from the wakeable that just suspended. Mark it as pinged.
30+
// When the work loop resumes, we'll immediately try rendering the fiber
31+
// again instead of unwinding the stack.
32+
wasPinged = true;
33+
return true;
34+
}
35+
return false;
36+
}
37+
38+
export function resetWakeableState() {
39+
suspendedWakeable = null;
40+
wasPinged = false;
41+
adHocSuspendCount = 0;
42+
}
43+
44+
export function throwIfInfinitePingLoopDetected() {
45+
if (adHocSuspendCount > MAX_AD_HOC_SUSPEND_COUNT) {
46+
// TODO: Guard against an infinite loop by throwing an error if the same
47+
// component suspends too many times in a row. This should be thrown from
48+
// the render phase so that it gets the component stack.
49+
}
50+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
*/
9+
10+
import type {Wakeable} from 'shared/ReactTypes';
11+
12+
let suspendedWakeable: Wakeable | null = null;
13+
let wasPinged = false;
14+
let adHocSuspendCount: number = 0;
15+
16+
const MAX_AD_HOC_SUSPEND_COUNT = 50;
17+
18+
export function suspendedWakeableWasPinged() {
19+
return wasPinged;
20+
}
21+
22+
export function trackSuspendedWakeable(wakeable: Wakeable) {
23+
adHocSuspendCount++;
24+
suspendedWakeable = wakeable;
25+
}
26+
27+
export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
28+
if (wakeable === suspendedWakeable) {
29+
// This ping is from the wakeable that just suspended. Mark it as pinged.
30+
// When the work loop resumes, we'll immediately try rendering the fiber
31+
// again instead of unwinding the stack.
32+
wasPinged = true;
33+
return true;
34+
}
35+
return false;
36+
}
37+
38+
export function resetWakeableState() {
39+
suspendedWakeable = null;
40+
wasPinged = false;
41+
adHocSuspendCount = 0;
42+
}
43+
44+
export function throwIfInfinitePingLoopDetected() {
45+
if (adHocSuspendCount > MAX_AD_HOC_SUSPEND_COUNT) {
46+
// TODO: Guard against an infinite loop by throwing an error if the same
47+
// component suspends too many times in a row. This should be thrown from
48+
// the render phase so that it gets the component stack.
49+
}
50+
}

0 commit comments

Comments
 (0)