@samitouri / QOS-React-2 / commits / ab4951fc03

Re-arrange slightly to prevent refactor hazard (#16743)

* Track "pending" and "suspended" ranges A FiberRoot can have pending work at many distinct priorities. (Note: we refer to these levels as "expiration times" to distinguish the concept from Scheduler's notion of priority levels, which represent broad categories of work. React expiration times are more granualar. They're more like a concurrent thread ID, which also happens to correspond to a moment on a timeline. It's an overloaded concept and I'm handwaving over some of the details.) Given a root, there's no convenient way to read all the pending levels in the entire tree, i.e. there's no single queue-like structure that tracks all the levels, because that granularity of information is not needed by our algorithms. Instead we track the subset of information that we actually need — most importantly, the highest priority level that exists in the entire tree. Aside from that, the other information we track includes the range of pending levels that are known to be suspended, and therefore should not be worked on. This is a refactor of how that information is tracked, and what each field represents: - A *pending* level is work that is unfinished, or not yet committed. This includes work that is suspended from committing. `firstPendingTime` and `lastPendingTime` represent the range of pending work. (Previously, "pending" was the same as "not suspended.") - A *suspended* level is work that did not complete because data was missing. `firstSuspendedTime` and `lastSuspendedTime` represent the range of suspended work. It is a subset of the pending range. (These fields are new to this commit.) - `nextAfterSuspendedTime` represents the next known level that comes after the suspended range. This commit doesn't change much in terms of observable behavior. The one change is that, when a level is suspended, React will continue working on the next known level instead of jumping straight to the last pending level. Subsequent commits will use this new structure for a more substantial refactor for how tasks are scheduled per root. * Get next expiration time from FiberRoot Given a FiberRoot, we should be able to determine the next expiration time that needs to be worked on, taking into account the levels that are pending, suspended, pinged, and so on. This removes the `expirationTime` argument from `scheduleCallbackForRoot`, and renames it to `ensureRootIsScheduled` to reflect the new signature. The expiration time is instead read from the root using a new function, `getNextExpirationTimeToWorkOn`. The next step will be to remove the `expirationTime` argument from `renderRoot`, too. * Don't bind expiration time to render callback This is a fragile pattern because there's only meant to be a single task per root, running at a single expiration time. Instead of binding the expiration time to the render task, or closing over it, we should determine the correct expiration time to work on using fields we store on the root object itself. This removes the "return a continuation" pattern from the `renderRoot` function. Continuation handling is now handled by the wrapper function, which I've renamed from `runRootCallback` to `performWorkOnRoot`. That function is merely an entry point to `renderRoot`, so I've also removed the callback argument. So to sum up, at at the beginning of each task, `performWorkOnRoot` determines which expiration time to work on, then calls `renderRoot`. And before exiting, it checks if it needs to schedule another task. * Update error recovery test to match new semantics * Remove `lastPendingTime` field It's no longer used anywhere * Restart on update to already suspended root If the work-in-progress root already suspended with a delay, then the current render definitely won't finish. We should interrupt the render and switch to the incoming update. * Restart on suspend if return path has an update Similar to the previous commit, if we suspend with a delay, and something in the return path has a pending update, we should abort the current render and switch to the update instead. * Track the next unprocessed level globally Instead of backtracking the return path. The main advantage over the backtracking approach is that we don't have to backtrack from the source fiber. (The main disadvantages are that it requires another module-level variable, and that it could include updates from unrelated sibling paths.) * Re-arrange slightly to prevent refactor hazard It should not be possible to perform any work on a root without calling `ensureRootIsScheduled` before exiting. Otherwise, we could fail to schedule a callback for pending work and the app could freeze. To help prevent a future refactor from introducing such a bug, this change makes it so that `renderRoot` is always wrapped in try-finally, and the `finally` block calls `ensureRootIsScheduled`. * Remove recursive calls to `renderRoot`. There are a few leftover cases where `renderRoot` is called recursively. All of them are related to synchronously flushing work before its expiration time. We can remove these calls by tracking the last expired level on the root, similar to what we do for other types of pending work, like pings. * Remove argument from performSyncWorkOnRoot Read the expiration time from the root, like we do in performConcurrentWorkOnRoot.

Andrew Clark committed Sep 10, 2019 at 20:07 UTC ab4951fc03750a726e412b90126e0737fbd04014

10 files changed +900 -282

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -177,6 +177,7 @@ import {

177 retryDehydratedSuspenseBoundary,

178 scheduleWork,

179 renderDidSuspendDelayIfPossible,

180 + markUnprocessedUpdateTime,

181 } from './ReactFiberWorkLoop';

182

183 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;

@@ -2709,6 +2710,11 @@ function bailoutOnAlreadyFinishedWork(

2710 stopProfilerTimerIfRunning(workInProgress);

2711 }

2712

2713 + const updateExpirationTime = workInProgress.expirationTime;

2714 + if (updateExpirationTime !== NoWork) {

2715 + markUnprocessedUpdateTime(updateExpirationTime);

2716 + }

2717 +

2718 // Check if the children have any pending work.

2719 const childExpirationTime = workInProgress.childExpirationTime;

2720 if (childExpirationTime < renderExpirationTime) {

packages/react-reconciler/src/ReactFiberExpirationTime.js

@@ -21,7 +21,10 @@ import {

21 export type ExpirationTime = number;

23 export const NoWork = 0;

24 +// TODO: Think of a better name for Never.

25 export const Never = 1;

26 +// TODO: Use the Idle expiration time for idle state updates

27 +export const Idle = 2;

28 export const Sync = MAX_SIGNED_31_BIT_INT;

29 export const Batched = Sync - 1;

packages/react-reconciler/src/ReactFiberHooks.js

@@ -43,6 +43,7 @@ import {

43 warnIfNotCurrentlyActingUpdatesInDev,

44 warnIfNotScopedWithMatchingAct,

45 markRenderEventTimeAndConfig,

46 + markUnprocessedUpdateTime,

47 } from './ReactFiberWorkLoop';

49 import invariant from 'shared/invariant';

@@ -531,6 +532,7 @@ export function resetHooks(): void {

532 // This is used to reset the state of this module when a component throws.

533 // It's also called inside mountIndeterminateComponent if we determine the

534 // component is a module-style component.

535 +

536 renderExpirationTime = NoWork;

537 currentlyRenderingFiber = null;

538

@@ -755,6 +757,7 @@ function updateReducer<S, I, A>(

757 // Update the remaining priority in the queue.

758 if (updateExpirationTime > remainingExpirationTime) {

759 remainingExpirationTime = updateExpirationTime;

760 + markUnprocessedUpdateTime(remainingExpirationTime);

761 }

762 } else {

763 // This update does have sufficient priority.

packages/react-reconciler/src/ReactFiberRoot.js

+125 -7

@@ -14,6 +14,7 @@ import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';

14 import type {Thenable} from './ReactFiberWorkLoop';

15 import type {Interaction} from 'scheduler/src/Tracing';

16 import type {SuspenseHydrationCallbacks} from './ReactFiberSuspenseComponent';

17 +import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';

19 import {noTimeout} from './ReactFiberHostConfig';

20 import {createHostRootFiber} from './ReactFiber';

@@ -23,6 +24,7 @@ import {

24 enableSuspenseCallback,

25 } from 'shared/ReactFeatureFlags';

26 import {unstable_getThreadID} from 'scheduler/tracing';

27 +import {NoPriority} from './SchedulerWithReactIntegration';

29 // TODO: This should be lifted into the renderer.

30 export type Batch = {

@@ -69,12 +71,20 @@ type BaseFiberRootProperties = {|

71 callbackNode: *,

72 // Expiration of the callback associated with this root

73 callbackExpirationTime: ExpirationTime,

74 + // Priority of the callback associated with this root

75 + callbackPriority: ReactPriorityLevel,

76 // The earliest pending expiration time that exists in the tree

77 firstPendingTime: ExpirationTime,

74 - // The latest pending expiration time that exists in the tree

75 - lastPendingTime: ExpirationTime,

76 - // The time at which a suspended component pinged the root to render again

77 - pingTime: ExpirationTime,

78 + // The earliest suspended expiration time that exists in the tree

79 + firstSuspendedTime: ExpirationTime,

80 + // The latest suspended expiration time that exists in the tree

81 + lastSuspendedTime: ExpirationTime,

82 + // The next known expiration time after the suspended range

83 + nextKnownPendingLevel: ExpirationTime,

84 + // The latest time at which a suspended component pinged the root to

85 + // render again

86 + lastPingedTime: ExpirationTime,

87 + lastExpiredTime: ExpirationTime,

88 |};

90 // The following attributes are only used by interaction tracing builds.

@@ -117,10 +127,13 @@ function FiberRootNode(containerInfo, tag, hydrate) {

127 this.hydrate = hydrate;

128 this.firstBatch = null;

129 this.callbackNode = null;

120 - this.callbackExpirationTime = NoWork;

130 + this.callbackPriority = NoPriority;

131 this.firstPendingTime = NoWork;

122 - this.lastPendingTime = NoWork;

123 - this.pingTime = NoWork;

132 + this.firstSuspendedTime = NoWork;

133 + this.lastSuspendedTime = NoWork;

134 + this.nextKnownPendingLevel = NoWork;

135 + this.lastPingedTime = NoWork;

136 + this.lastExpiredTime = NoWork;

137

138 if (enableSchedulerTracing) {

139 this.interactionThreadID = unstable_getThreadID();

@@ -151,3 +164,108 @@ export function createFiberRoot(

164

165 return root;

166 }

167 +

168 +export function isRootSuspendedAtTime(

169 + root: FiberRoot,

170 + expirationTime: ExpirationTime,

171 +): boolean {

172 + const firstSuspendedTime = root.firstSuspendedTime;

173 + const lastSuspendedTime = root.lastSuspendedTime;

174 + return (

175 + firstSuspendedTime !== NoWork &&

176 + (firstSuspendedTime >= expirationTime &&

177 + lastSuspendedTime <= expirationTime)

178 + );

179 +}

180 +

181 +export function markRootSuspendedAtTime(

182 + root: FiberRoot,

183 + expirationTime: ExpirationTime,

184 +): void {

185 + const firstSuspendedTime = root.firstSuspendedTime;

186 + const lastSuspendedTime = root.lastSuspendedTime;

187 + if (firstSuspendedTime < expirationTime) {

188 + root.firstSuspendedTime = expirationTime;

189 + }

190 + if (lastSuspendedTime > expirationTime || firstSuspendedTime === NoWork) {

191 + root.lastSuspendedTime = expirationTime;

192 + }

193 +

194 + if (expirationTime <= root.lastPingedTime) {

195 + root.lastPingedTime = NoWork;

196 + }

197 +

198 + if (expirationTime <= root.lastExpiredTime) {

199 + root.lastExpiredTime = NoWork;

200 + }

201 +}

202 +

203 +export function markRootUpdatedAtTime(

204 + root: FiberRoot,

205 + expirationTime: ExpirationTime,

206 +): void {

207 + // Update the range of pending times

208 + const firstPendingTime = root.firstPendingTime;

209 + if (expirationTime > firstPendingTime) {

210 + root.firstPendingTime = expirationTime;

211 + }

212 +

213 + // Update the range of suspended times. Treat everything lower priority or

214 + // equal to this update as unsuspended.

215 + const firstSuspendedTime = root.firstSuspendedTime;

216 + if (firstSuspendedTime !== NoWork) {

217 + if (expirationTime >= firstSuspendedTime) {

218 + // The entire suspended range is now unsuspended.

219 + root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;

220 + } else if (expirationTime >= root.lastSuspendedTime) {

221 + root.lastSuspendedTime = expirationTime + 1;

222 + }

223 +

224 + // This is a pending level. Check if it's higher priority than the next

225 + // known pending level.

226 + if (expirationTime > root.nextKnownPendingLevel) {

227 + root.nextKnownPendingLevel = expirationTime;

228 + }

229 + }

230 +}

231 +

232 +export function markRootFinishedAtTime(

233 + root: FiberRoot,

234 + finishedExpirationTime: ExpirationTime,

235 + remainingExpirationTime: ExpirationTime,

236 +): void {

237 + // Update the range of pending times

238 + root.firstPendingTime = remainingExpirationTime;

239 +

240 + // Update the range of suspended times. Treat everything higher priority or

241 + // equal to this update as unsuspended.

242 + if (finishedExpirationTime <= root.lastSuspendedTime) {

243 + // The entire suspended range is now unsuspended.

244 + root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;

245 + } else if (finishedExpirationTime <= root.firstSuspendedTime) {

246 + // Part of the suspended range is now unsuspended. Narrow the range to

247 + // include everything between the unsuspended time (non-inclusive) and the

248 + // last suspended time.

249 + root.firstSuspendedTime = finishedExpirationTime - 1;

250 + }

251 +

252 + if (finishedExpirationTime <= root.lastPingedTime) {

253 + // Clear the pinged time

254 + root.lastPingedTime = NoWork;

255 + }

256 +

257 + if (finishedExpirationTime <= root.lastExpiredTime) {

258 + // Clear the expired time

259 + root.lastExpiredTime = NoWork;

260 + }

261 +}

262 +

263 +export function markRootExpiredAtTime(

264 + root: FiberRoot,

265 + expirationTime: ExpirationTime,

266 +): void {

267 + const lastExpiredTime = root.lastExpiredTime;

268 + if (lastExpiredTime === NoWork || lastExpiredTime > expirationTime) {

269 + root.lastExpiredTime = expirationTime;

270 + }

271 +}

packages/react-reconciler/src/ReactFiberWorkLoop.js

+344 -227

@@ -10,10 +10,7 @@

10 import type {Fiber} from './ReactFiber';

11 import type {FiberRoot} from './ReactFiberRoot';

12 import type {ExpirationTime} from './ReactFiberExpirationTime';

13 -import type {

14 - ReactPriorityLevel,

15 - SchedulerCallback,

16 -} from './SchedulerWithReactIntegration';

13 +import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';

14 import type {Interaction} from 'scheduler/src/Tracing';

15 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';

16 import type {SuspenseState} from './ReactFiberSuspenseComponent';

@@ -66,6 +63,13 @@ import {

63 } from './ReactFiberHostConfig';

65 import {createWorkInProgress, assignFiberPropertiesInDEV} from './ReactFiber';

66 +import {

67 + isRootSuspendedAtTime,

68 + markRootSuspendedAtTime,

69 + markRootFinishedAtTime,

70 + markRootUpdatedAtTime,

71 + markRootExpiredAtTime,

72 +} from './ReactFiberRoot';

73 import {

74 NoMode,

75 StrictMode,

@@ -112,6 +116,7 @@ import {

116 inferPriorityFromExpirationTime,

117 LOW_PRIORITY_EXPIRATION,

118 Batched,

119 + Idle,

120 } from './ReactFiberExpirationTime';

121 import {beginWork as originalBeginWork} from './ReactFiberBeginWork';

122 import {completeWork} from './ReactFiberCompleteWork';

@@ -223,6 +228,10 @@ let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;

228 let workInProgressRootLatestProcessedExpirationTime: ExpirationTime = Sync;

229 let workInProgressRootLatestSuspenseTimeout: ExpirationTime = Sync;

230 let workInProgressRootCanSuspendUsingConfig: null | SuspenseConfig = null;

231 +// The work left over by components that were visited during this render. Only

232 +// includes unprocessed updates, not work in bailed out children.

233 +let workInProgressRootNextUnprocessedUpdateTime: ExpirationTime = NoWork;

234 +

235 // If we're pinged while rendering we don't always restart immediately.

236 // This flag determines if it might be worthwhile to restart if an opportunity

237 // happens latere.

@@ -378,8 +387,6 @@ export function scheduleUpdateOnFiber(

387 return;

388 }

389

381 - root.pingTime = NoWork;

382 -

390 checkForInterruption(fiber, expirationTime);

391 recordScheduleUpdate();

392

@@ -400,12 +407,10 @@ export function scheduleUpdateOnFiber(

407 // This is a legacy edge case. The initial mount of a ReactDOM.render-ed

408 // root inside of batchedUpdates should be synchronous, but layout updates

409 // should be deferred until the end of the batch.

403 - let callback = renderRoot(root, Sync, true);

404 - while (callback !== null) {

405 - callback = callback(true);

406 - }

410 + performSyncWorkOnRoot(root);

411 } else {

408 - scheduleCallbackForRoot(root, ImmediatePriority, Sync);

412 + ensureRootIsScheduled(root);

413 + schedulePendingInteractions(root, expirationTime);

414 if (executionContext === NoContext) {

415 // Flush the synchronous work now, unless we're already working or inside

416 // a batch. This is intentionally inside scheduleUpdateOnFiber instead of

@@ -416,7 +421,8 @@ export function scheduleUpdateOnFiber(

421 }

422 }

423 } else {

419 - scheduleCallbackForRoot(root, priorityLevel, expirationTime);

424 + ensureRootIsScheduled(root);

425 + schedulePendingInteractions(root, expirationTime);

426 }

427

428 if (

@@ -484,97 +490,193 @@ function markUpdateTimeFromFiberToRoot(fiber, expirationTime) {

490 }

491

492 if (root !== null) {

487 - // Update the first and last pending expiration times in this root

488 - const firstPendingTime = root.firstPendingTime;

489 - if (expirationTime > firstPendingTime) {

490 - root.firstPendingTime = expirationTime;

491 - }

492 - const lastPendingTime = root.lastPendingTime;

493 - if (lastPendingTime === NoWork || expirationTime < lastPendingTime) {

494 - root.lastPendingTime = expirationTime;

493 + if (workInProgressRoot === root) {

494 + // Received an update to a tree that's in the middle of rendering. Mark

495 + // that's unprocessed work on this root.

496 + markUnprocessedUpdateTime(expirationTime);

497 +

498 + if (workInProgressRootExitStatus === RootSuspendedWithDelay) {

499 + // The root already suspended with a delay, which means this render

500 + // definitely won't finish. Since we have a new update, let's mark it as

501 + // suspended now, right before marking the incoming update. This has the

502 + // effect of interrupting the current render and switching to the update.

503 + // TODO: This happens to work when receiving an update during the render

504 + // phase, because of the trick inside computeExpirationForFiber to

505 + // subtract 1 from `renderExpirationTime` to move it into a

506 + // separate bucket. But we should probably model it with an exception,

507 + // using the same mechanism we use to force hydration of a subtree.

508 + // TODO: This does not account for low pri updates that were already

509 + // scheduled before the root started rendering. Need to track the next

510 + // pending expiration time (perhaps by backtracking the return path) and

511 + // then trigger a restart in the `renderDidSuspendDelayIfPossible` path.

512 + markRootSuspendedAtTime(root, renderExpirationTime);

513 + }

514 }

515 + // Mark that the root has a pending update.

516 + markRootUpdatedAtTime(root, expirationTime);

517 }

518

519 return root;

520 }

521

501 -// Use this function, along with runRootCallback, to ensure that only a single

502 -// callback per root is scheduled. It's still possible to call renderRoot

503 -// directly, but scheduling via this function helps avoid excessive callbacks.

504 -// It works by storing the callback node and expiration time on the root. When a

505 -// new callback comes in, it compares the expiration time to determine if it

506 -// should cancel the previous one. It also relies on commitRoot scheduling a

507 -// callback to render the next level, because that means we don't need a

508 -// separate callback per expiration time.

509 -function scheduleCallbackForRoot(

510 - root: FiberRoot,

511 - priorityLevel: ReactPriorityLevel,

512 - expirationTime: ExpirationTime,

513 -) {

514 - const existingCallbackExpirationTime = root.callbackExpirationTime;

515 - if (existingCallbackExpirationTime < expirationTime) {

516 - // New callback has higher priority than the existing one.

517 - const existingCallbackNode = root.callbackNode;

522 +function getNextRootExpirationTimeToWorkOn(root: FiberRoot): ExpirationTime {

523 + // Determines the next expiration time that the root should render, taking

524 + // into account levels that may be suspended, or levels that may have

525 + // received a ping.

526 +

527 + const lastExpiredTime = root.lastExpiredTime;

528 + if (lastExpiredTime !== NoWork) {

529 + return lastExpiredTime;

530 + }

531 +

532 + // "Pending" refers to any update that hasn't committed yet, including if it

533 + // suspended. The "suspended" range is therefore a subset.

534 + const firstPendingTime = root.firstPendingTime;

535 + if (!isRootSuspendedAtTime(root, firstPendingTime)) {

536 + // The highest priority pending time is not suspended. Let's work on that.

537 + return firstPendingTime;

538 + }

539 +

540 + // If the first pending time is suspended, check if there's a lower priority

541 + // pending level that we know about. Or check if we received a ping. Work

542 + // on whichever is higher priority.

543 + const lastPingedTime = root.lastPingedTime;

544 + const nextKnownPendingLevel = root.nextKnownPendingLevel;

545 + return lastPingedTime > nextKnownPendingLevel

546 + ? lastPingedTime

547 + : nextKnownPendingLevel;

548 +}

549 +

550 +// Use this function to schedule a task for a root. There's only one task per

551 +// root; if a task was already scheduled, we'll check to make sure the

552 +// expiration time of the existing task is the same as the expiration time of

553 +// the next level that the root has work on. This function is called on every

554 +// update, and right before exiting a task.

555 +function ensureRootIsScheduled(root: FiberRoot) {

556 + const lastExpiredTime = root.lastExpiredTime;

557 + if (lastExpiredTime !== NoWork) {

558 + // Special case: Expired work should flush synchronously.

559 + root.callbackExpirationTime = Sync;

560 + root.callbackPriority = ImmediatePriority;

561 + root.callbackNode = scheduleSyncCallback(

562 + performSyncWorkOnRoot.bind(null, root),

563 + );

564 + return;

565 + }

566 +

567 + const expirationTime = getNextRootExpirationTimeToWorkOn(root);

568 + const existingCallbackNode = root.callbackNode;

569 + if (expirationTime === NoWork) {

570 + // There's nothing to work on.

571 if (existingCallbackNode !== null) {

519 - cancelCallback(existingCallbackNode);

572 + root.callbackNode = null;

573 + root.callbackExpirationTime = NoWork;

574 + root.callbackPriority = NoPriority;

575 }

521 - root.callbackExpirationTime = expirationTime;

576 + return;

577 + }

578

523 - if (expirationTime === Sync) {

524 - // Sync React callbacks are scheduled on a special internal queue

525 - root.callbackNode = scheduleSyncCallback(

526 - runRootCallback.bind(

527 - null,

528 - root,

529 - renderRoot.bind(null, root, expirationTime),

530 - ),

531 - );

532 - } else {

533 - let options = null;

534 - if (

535 - !disableSchedulerTimeoutBasedOnReactExpirationTime &&

536 - expirationTime !== Never

537 - ) {

538 - let timeout = expirationTimeToMs(expirationTime) - now();

539 - options = {timeout};

540 - }

579 + // TODO: If this is an update, we already read the current time. Pass the

580 + // time as an argument.

581 + const currentTime = requestCurrentTime();

582 + const priorityLevel = inferPriorityFromExpirationTime(

583 + currentTime,

584 + expirationTime,

585 + );

586

542 - root.callbackNode = scheduleCallback(

543 - priorityLevel,

544 - runRootCallback.bind(

545 - null,

546 - root,

547 - renderRoot.bind(null, root, expirationTime),

548 - ),

549 - options,

550 - );

587 + // If there's an existing render task, confirm it has the correct priority and

588 + // expiration time. Otherwise, we'll cancel it and schedule a new one.

589 + if (existingCallbackNode !== null) {

590 + const existingCallbackPriority = root.callbackPriority;

591 + const existingCallbackExpirationTime = root.callbackExpirationTime;

592 + if (

593 + // Callback must have the exact same expiration time.

594 + existingCallbackExpirationTime === expirationTime &&

595 + // Callback must have greater or equal priority.

596 + existingCallbackPriority >= priorityLevel

597 + ) {

598 + // Existing callback is sufficient.

599 + return;

600 }

601 + // Need to schedule a new task.

602 + // TODO: Instead of scheduling a new task, we should be able to change the

603 + // priority of the existing one.

604 + cancelCallback(existingCallbackNode);

605 + }

606 +

607 + root.callbackExpirationTime = expirationTime;

608 + root.callbackPriority = priorityLevel;

609 +

610 + let callbackNode;

611 + if (expirationTime === Sync) {

612 + // Sync React callbacks are scheduled on a special internal queue

613 + callbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));

614 + } else if (disableSchedulerTimeoutBasedOnReactExpirationTime) {

615 + callbackNode = scheduleCallback(

616 + priorityLevel,

617 + performConcurrentWorkOnRoot.bind(null, root),

618 + );

619 + } else {

620 + callbackNode = scheduleCallback(

621 + priorityLevel,

622 + performConcurrentWorkOnRoot.bind(null, root),

623 + // Compute a task timeout based on the expiration time. This also affects

624 + // ordering because tasks are processed in timeout order.

625 + {timeout: expirationTimeToMs(expirationTime) - now()},

626 + );

627 }

628

554 - // Associate the current interactions with this new root+priority.

555 - schedulePendingInteractions(root, expirationTime);

629 + root.callbackNode = callbackNode;

630 }

631

558 -function runRootCallback(root, callback, isSync) {

559 - const prevCallbackNode = root.callbackNode;

560 - let continuation = null;

561 - try {

562 - continuation = callback(isSync);

563 - if (continuation !== null) {

564 - return runRootCallback.bind(null, root, continuation);

565 - } else {

566 - return null;

632 +// This is the entry point for every concurrent task, i.e. anything that

633 +// goes through Scheduler.

634 +function performConcurrentWorkOnRoot(root, didTimeout) {

635 + // Since we know we're in a React event, we can clear the current

636 + // event time. The next update will compute a new event time.

637 + currentEventTime = NoWork;

638 +

639 + if (didTimeout) {

640 + // An async update expired.

641 + const currentTime = requestCurrentTime();

642 + markRootExpiredAtTime(root, currentTime);

643 + }

644 +

645 + // Determine the next expiration time to work on, using the fields stored

646 + // on the root.

647 + const expirationTime = getNextRootExpirationTimeToWorkOn(root);

648 + if (expirationTime !== NoWork) {

649 + const originalCallbackNode = root.callbackNode;

650 + try {

651 + renderRoot(root, expirationTime, didTimeout);

652 + if (root.callbackNode === originalCallbackNode) {

653 + // The task node scheduled for this root is the same one that's

654 + // currently executed. Need to return a continuation.

655 + return performConcurrentWorkOnRoot.bind(null, root);

656 + }

657 + } finally {

658 + // Before exiting, make sure there's a callback scheduled for the

659 + // pending level.

660 + ensureRootIsScheduled(root);

661 }

662 + }

663 + return null;

664 +}

665 +

666 +// This is the entry point for synchronous tasks that don't go

667 +// through Scheduler

668 +function performSyncWorkOnRoot(root) {

669 + // Check if there's expired work on this root. Otherwise, render at Sync.

670 + const lastExpiredTime = root.lastExpiredTime;

671 + const expirationTime = lastExpiredTime !== NoWork ? lastExpiredTime : Sync;

672 + try {

673 + renderRoot(root, expirationTime, true);

674 } finally {

569 - // If the callback exits without returning a continuation, remove the

570 - // corresponding callback node from the root. Unless the callback node

571 - // has changed, which implies that it was already cancelled by a high

572 - // priority update.

573 - if (continuation === null && prevCallbackNode === root.callbackNode) {

574 - root.callbackNode = null;

575 - root.callbackExpirationTime = NoWork;

576 - }

675 + // Before exiting, make sure there's a callback scheduled for the

676 + // pending level.

677 + ensureRootIsScheduled(root);

678 }

679 + return null;

680 }

681

682 export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {

@@ -585,7 +687,8 @@ export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {

687 'means you attempted to commit from inside a lifecycle method.',

688 );

689 }

588 - scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));

690 + markRootExpiredAtTime(root, expirationTime);

691 + ensureRootIsScheduled(root);

692 flushSyncCallbackQueue();

693 }

694

@@ -654,7 +757,8 @@ function flushPendingDiscreteUpdates() {

757 const roots = rootsWithPendingDiscreteUpdates;

758 rootsWithPendingDiscreteUpdates = null;

759 roots.forEach((expirationTime, root) => {

657 - scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));

760 + markRootExpiredAtTime(root, expirationTime);

761 + ensureRootIsScheduled(root);

762 });

763 // Now flush the immediate queue.

764 flushSyncCallbackQueue();

@@ -786,6 +890,7 @@ function prepareFreshStack(root, expirationTime) {

890 workInProgressRootLatestProcessedExpirationTime = Sync;

891 workInProgressRootLatestSuspenseTimeout = Sync;

892 workInProgressRootCanSuspendUsingConfig = null;

893 + workInProgressRootNextUnprocessedUpdateTime = NoWork;

894 workInProgressRootHasPendingPing = false;

895

896 if (enableSchedulerTracing) {

@@ -798,28 +903,24 @@ function prepareFreshStack(root, expirationTime) {

903 }

904 }

905

906 +// renderRoot should only be called from inside either

907 +// `performConcurrentWorkOnRoot` or `performSyncWorkOnRoot`.

908 function renderRoot(

909 root: FiberRoot,

910 expirationTime: ExpirationTime,

911 isSync: boolean,

805 -): SchedulerCallback | null {

912 +): void {

913 invariant(

914 (executionContext & (RenderContext | CommitContext)) === NoContext,

915 'Should not already be working.',

916 );

917

811 - if (root.firstPendingTime < expirationTime) {

812 - // If there's no work left at this expiration time, exit immediately. This

813 - // happens when multiple callbacks are scheduled for a single root, but an

814 - // earlier callback flushes the work of a later one.

815 - return null;

816 - }

817 -

918 if (isSync && root.finishedExpirationTime === expirationTime) {

919 // There's already a pending commit at this expiration time.

920 // TODO: This is poorly factored. This case only exists for the

921 // batch.commit() API.

822 - return commitRoot.bind(null, root);

922 + commitRoot(root);

923 + return;

924 }

925

926 flushPassiveEffects();

@@ -829,26 +930,6 @@ function renderRoot(

930 if (root !== workInProgressRoot || expirationTime !== renderExpirationTime) {

931 prepareFreshStack(root, expirationTime);

932 startWorkOnPendingInteractions(root, expirationTime);

832 - } else if (workInProgressRootExitStatus === RootSuspendedWithDelay) {

833 - // We could've received an update at a lower priority while we yielded.

834 - // We're suspended in a delayed state. Once we complete this render we're

835 - // just going to try to recover at the last pending time anyway so we might

836 - // as well start doing that eagerly.

837 - // Ideally we should be able to do this even for retries but we don't yet

838 - // know if we're going to process an update which wants to commit earlier,

839 - // and this path happens very early so it would happen too often. Instead,

840 - // for that case, we'll wait until we complete.

841 - if (workInProgressRootHasPendingPing) {

842 - // We have a ping at this expiration. Let's restart to see if we get unblocked.

843 - prepareFreshStack(root, expirationTime);

844 - } else {

845 - const lastPendingTime = root.lastPendingTime;

846 - if (lastPendingTime < expirationTime) {

847 - // There's lower priority work. It might be unsuspended. Try rendering

848 - // at that level immediately, while preserving the position in the queue.

849 - return renderRoot.bind(null, root, lastPendingTime);

850 - }

851 - }

933 }

934

935 // If we have a work-in-progress fiber, it means there's still work to do

@@ -872,32 +953,6 @@ function renderRoot(

953

954 startWorkLoopTimer(workInProgress);

955

875 - // TODO: Fork renderRoot into renderRootSync and renderRootAsync

876 - if (isSync) {

877 - if (expirationTime !== Sync) {

878 - // An async update expired. There may be other expired updates on

879 - // this root. We should render all the expired work in a

880 - // single batch.

881 - const currentTime = requestCurrentTime();

882 - if (currentTime < expirationTime) {

883 - // Restart at the current time.

884 - executionContext = prevExecutionContext;

885 - resetContextDependencies();

886 - ReactCurrentDispatcher.current = prevDispatcher;

887 - if (enableSchedulerTracing) {

888 - __interactionsRef.current = ((prevInteractions: any): Set<

889 - Interaction,

890 - >);

891 - }

892 - return renderRoot.bind(null, root, currentTime);

893 - }

894 - }

895 - } else {

896 - // Since we know we're in a React event, we can clear the current

897 - // event time. The next update will compute a new event time.

898 - currentEventTime = NoWork;

899 - }

900 -

956 do {

957 try {

958 if (isSync) {

@@ -919,6 +974,7 @@ function renderRoot(

974 // boundary.

975 prepareFreshStack(root, expirationTime);

976 executionContext = prevExecutionContext;

977 + markRootSuspendedAtTime(root, expirationTime);

978 throw thrownValue;

979 }

980

@@ -937,6 +993,8 @@ function renderRoot(

993 thrownValue,

994 renderExpirationTime,

995 );

996 + // TODO: This is not wrapped in a try-catch, so if the complete phase

997 + // throws, we won't capture it.

998 workInProgress = completeUnitOfWork(sourceFiber);

999 }

1000 } while (true);

@@ -949,9 +1007,9 @@ function renderRoot(

1007 }

1008

1009 if (workInProgress !== null) {

952 - // There's still work left over. Return a continuation.

1010 + // There's still work left over. Exit without committing.

1011 stopInterruptedWorkLoopTimer();

954 - return renderRoot.bind(null, root, expirationTime);

1012 + return;

1013 }

1014 }

1015

@@ -959,7 +1017,8 @@ function renderRoot(

1017 // something suspended, wait to commit it after a timeout.

1018 stopFinishedWorkLoopTimer();

1019

962 - root.finishedWork = root.current.alternate;

1020 + const finishedWork: Fiber = ((root.finishedWork =

1021 + root.current.alternate): any);

1022 root.finishedExpirationTime = expirationTime;

1023

1024 const isLocked = resolveLocksOnRoot(root, expirationTime);

@@ -967,7 +1026,8 @@ function renderRoot(

1026 // This root has a lock that prevents it from committing. Exit. If we begin

1027 // work on the root again, without any intervening updates, it will finish

1028 // without doing additional work.

970 - return null;

1029 + markRootSuspendedAtTime(root, expirationTime);

1030 + return;

1031 }

1032

1033 // Set this to null to indicate there's no in-progress render.

@@ -981,28 +1041,25 @@ function renderRoot(

1041 // but eslint doesn't know about invariant, so it complains if I do.

1042 // eslint-disable-next-line no-fallthrough

1043 case RootErrored: {

984 - // An error was thrown. First check if there is lower priority work

985 - // scheduled on this root.

986 - const lastPendingTime = root.lastPendingTime;

987 - if (lastPendingTime < expirationTime) {

988 - // There's lower priority work. Before raising the error, try rendering

989 - // at the lower priority to see if it fixes it. Use a continuation to

990 - // maintain the existing priority and position in the queue.

991 - return renderRoot.bind(null, root, lastPendingTime);

992 - }

993 - if (!isSync) {

994 - // If we're rendering asynchronously, it's possible the error was

995 - // caused by tearing due to a mutation during an event. Try rendering

996 - // one more time without yiedling to events.

997 - prepareFreshStack(root, expirationTime);

998 - scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));

999 - return null;

1044 + if (!isSync && expirationTime !== Idle) {

1045 + // If this was an async render, the error may have happened due to

1046 + // a mutation in a concurrent event. Try rendering one more time,

1047 + // synchronously, to see if the error goes away. If there are lower

1048 + // priority updates, let's include those, too, in case they fix the

1049 + // inconsistency. Render at Idle to include all updates.

1050 + markRootExpiredAtTime(root, Idle);

1051 + return;

1052 }

1001 - // If we're already rendering synchronously, commit the root in its

1002 - // errored state.

1003 - return commitRoot.bind(null, root);

1053 + // Commit the root in its errored state.

1054 + commitRoot(root);

1055 + return;

1056 }

1057 case RootSuspended: {

1058 + markRootSuspendedAtTime(root, expirationTime);

1059 + const lastSuspendedTime = root.lastSuspendedTime;

1060 + if (expirationTime === lastSuspendedTime) {

1061 + root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);

1062 + }

1063 flushSuspensePriorityWarningInDEV();

1064

1065 // We have an acceptable loading state. We need to figure out if we should

@@ -1034,17 +1091,31 @@ function renderRoot(

1091 // Don't bother with a very short suspense time.

1092 if (msUntilTimeout > 10) {

1093 if (workInProgressRootHasPendingPing) {

1037 - // This render was pinged but we didn't get to restart earlier so try

1038 - // restarting now instead.

1039 - prepareFreshStack(root, expirationTime);

1040 - return renderRoot.bind(null, root, expirationTime);

1094 + const lastPingedTime = root.lastPingedTime;

1095 + if (lastPingedTime === NoWork || lastPingedTime >= expirationTime) {

1096 + // This render was pinged but we didn't get to restart earlier so

1097 + // try restarting now instead.

1098 + root.lastPingedTime = expirationTime;

1099 + prepareFreshStack(root, expirationTime);

1100 + return;

1101 + }

1102 }

1042 - const lastPendingTime = root.lastPendingTime;

1043 - if (lastPendingTime < expirationTime) {

1044 - // There's lower priority work. It might be unsuspended. Try rendering

1045 - // at that level.

1046 - return renderRoot.bind(null, root, lastPendingTime);

1103 +

1104 + const nextTime = getNextRootExpirationTimeToWorkOn(root);

1105 + if (nextTime !== NoWork && nextTime !== expirationTime) {

1106 + // There's additional work on this root.

1107 + return;

1108 }

1109 + if (

1110 + lastSuspendedTime !== NoWork &&

1111 + lastSuspendedTime !== expirationTime

1112 + ) {

1113 + // We should prefer to render the fallback of at the last suspended

1114 + // level. Ping the last suspended level to try rendering it again.

1115 + root.lastPingedTime = lastSuspendedTime;

1116 + return;

1117 + }

1118 +

1119 // The render is suspended, it hasn't timed out, and there's no lower

1120 // priority work to do. Instead of committing the fallback

1121 // immediately, wait for more data to arrive.

@@ -1052,13 +1123,19 @@ function renderRoot(

1123 commitRoot.bind(null, root),

1124 msUntilTimeout,

1125 );

1055 - return null;

1126 + return;

1127 }

1128 }

1129 // The work expired. Commit immediately.

1059 - return commitRoot.bind(null, root);

1130 + commitRoot(root);

1131 + return;

1132 }

1133 case RootSuspendedWithDelay: {

1134 + markRootSuspendedAtTime(root, expirationTime);

1135 + const lastSuspendedTime = root.lastSuspendedTime;

1136 + if (expirationTime === lastSuspendedTime) {

1137 + root.nextKnownPendingLevel = getRemainingExpirationTime(finishedWork);

1138 + }

1139 flushSuspensePriorityWarningInDEV();

1140

1141 if (

@@ -1073,16 +1150,29 @@ function renderRoot(

1150 // We're suspended in a state that should be avoided. We'll try to avoid committing

1151 // it for as long as the timeouts let us.

1152 if (workInProgressRootHasPendingPing) {

1076 - // This render was pinged but we didn't get to restart earlier so try

1077 - // restarting now instead.

1078 - prepareFreshStack(root, expirationTime);

1079 - return renderRoot.bind(null, root, expirationTime);

1153 + const lastPingedTime = root.lastPingedTime;

1154 + if (lastPingedTime === NoWork || lastPingedTime >= expirationTime) {

1155 + // This render was pinged but we didn't get to restart earlier so

1156 + // try restarting now instead.

1157 + root.lastPingedTime = expirationTime;

1158 + prepareFreshStack(root, expirationTime);

1159 + return;

1160 + }

1161 + }

1162 +

1163 + const nextTime = getNextRootExpirationTimeToWorkOn(root);

1164 + if (nextTime !== NoWork && nextTime !== expirationTime) {

1165 + // There's additional work on this root.

1166 + return;

1167 }

1081 - const lastPendingTime = root.lastPendingTime;

1082 - if (lastPendingTime < expirationTime) {

1083 - // There's lower priority work. It might be unsuspended. Try rendering

1084 - // at that level immediately.

1085 - return renderRoot.bind(null, root, lastPendingTime);

1168 + if (

1169 + lastSuspendedTime !== NoWork &&

1170 + lastSuspendedTime !== expirationTime

1171 + ) {

1172 + // We should prefer to render the fallback of at the last suspended

1173 + // level. Ping the last suspended level to try rendering it again.

1174 + root.lastPingedTime = lastSuspendedTime;

1175 + return;

1176 }

1177

1178 let msUntilTimeout;

@@ -1130,11 +1220,12 @@ function renderRoot(

1220 commitRoot.bind(null, root),

1221 msUntilTimeout,

1222 );

1133 - return null;

1223 + return;

1224 }

1225 }

1226 // The work expired. Commit immediately.

1137 - return commitRoot.bind(null, root);

1227 + commitRoot(root);

1228 + return;

1229 }

1230 case RootCompleted: {

1231 // The work completed. Ready to commit.

@@ -1158,14 +1249,16 @@ function renderRoot(

1249 workInProgressRootCanSuspendUsingConfig,

1250 );

1251 if (msUntilTimeout > 10) {

1252 + markRootSuspendedAtTime(root, expirationTime);

1253 root.timeoutHandle = scheduleTimeout(

1254 commitRoot.bind(null, root),

1255 msUntilTimeout,

1256 );

1165 - return null;

1257 + return;

1258 }

1259 }

1168 - return commitRoot.bind(null, root);

1260 + commitRoot(root);

1261 + return;

1262 }

1263 default: {

1264 invariant(false, 'Unknown root exit status.');

@@ -1199,6 +1292,14 @@ export function markRenderEventTimeAndConfig(

1292 }

1293 }

1294

1295 +export function markUnprocessedUpdateTime(

1296 + expirationTime: ExpirationTime,

1297 +): void {

1298 + if (expirationTime > workInProgressRootNextUnprocessedUpdateTime) {

1299 + workInProgressRootNextUnprocessedUpdateTime = expirationTime;

1300 + }

1301 +}

1302 +

1303 export function renderDidSuspend(): void {

1304 if (workInProgressRootExitStatus === RootIncomplete) {

1305 workInProgressRootExitStatus = RootSuspended;

@@ -1212,6 +1313,22 @@ export function renderDidSuspendDelayIfPossible(): void {

1313 ) {

1314 workInProgressRootExitStatus = RootSuspendedWithDelay;

1315 }

1316 +

1317 + // Check if there's a lower priority update somewhere else in the tree.

1318 + if (

1319 + workInProgressRootNextUnprocessedUpdateTime !== NoWork &&

1320 + workInProgressRoot !== null

1321 + ) {

1322 + // Mark the current render as suspended, and then mark that there's a

1323 + // pending update.

1324 + // TODO: This should immediately interrupt the current render, instead

1325 + // of waiting until the next time we yield.

1326 + markRootSuspendedAtTime(workInProgressRoot, renderExpirationTime);

1327 + markRootUpdatedAtTime(

1328 + workInProgressRoot,

1329 + workInProgressRootNextUnprocessedUpdateTime,

1330 + );

1331 + }

1332 }

1333

1334 export function renderDidError() {

@@ -1426,6 +1543,14 @@ function completeUnitOfWork(unitOfWork: Fiber): Fiber | null {

1543 return null;

1544 }

1545

1546 +function getRemainingExpirationTime(fiber: Fiber) {

1547 + const updateExpirationTime = fiber.expirationTime;

1548 + const childExpirationTime = fiber.childExpirationTime;

1549 + return updateExpirationTime > childExpirationTime

1550 + ? updateExpirationTime

1551 + : childExpirationTime;

1552 +}

1553 +

1554 function resetChildExpirationTime(completedWork: Fiber) {

1555 if (

1556 renderExpirationTime !== Never &&

@@ -1528,23 +1653,21 @@ function commitRootImpl(root, renderPriorityLevel) {

1653 // So we can clear these now to allow a new callback to be scheduled.

1654 root.callbackNode = null;

1655 root.callbackExpirationTime = NoWork;

1656 + root.callbackPriority = NoPriority;

1657 + root.nextKnownPendingLevel = NoWork;

1658

1659 startCommitTimer();

1660

1661 // Update the first and last pending times on this root. The new first

1662 // pending time is whatever is left on the root fiber.

1536 - const updateExpirationTimeBeforeCommit = finishedWork.expirationTime;

1537 - const childExpirationTimeBeforeCommit = finishedWork.childExpirationTime;

1538 - const firstPendingTimeBeforeCommit =

1539 - childExpirationTimeBeforeCommit > updateExpirationTimeBeforeCommit

1540 - ? childExpirationTimeBeforeCommit

1541 - : updateExpirationTimeBeforeCommit;

1542 - root.firstPendingTime = firstPendingTimeBeforeCommit;

1543 - if (firstPendingTimeBeforeCommit < root.lastPendingTime) {

1544 - // This usually means we've finished all the work, but it can also happen

1545 - // when something gets downprioritized during render, like a hidden tree.

1546 - root.lastPendingTime = firstPendingTimeBeforeCommit;

1547 - }

1663 + const remainingExpirationTimeBeforeCommit = getRemainingExpirationTime(

1664 + finishedWork,

1665 + );

1666 + markRootFinishedAtTime(

1667 + root,

1668 + expirationTime,

1669 + remainingExpirationTimeBeforeCommit,

1670 + );

1671

1672 if (root === workInProgressRoot) {

1673 // We can reset these now that they are finished.

@@ -1746,12 +1869,6 @@ function commitRootImpl(root, renderPriorityLevel) {

1869 // Check if there's remaining work on this root

1870 const remainingExpirationTime = root.firstPendingTime;

1871 if (remainingExpirationTime !== NoWork) {

1749 - const currentTime = requestCurrentTime();

1750 - const priorityLevel = inferPriorityFromExpirationTime(

1751 - currentTime,

1752 - remainingExpirationTime,

1753 - );

1754 -

1872 if (enableSchedulerTracing) {

1873 if (spawnedWorkDuringRender !== null) {

1874 const expirationTimes = spawnedWorkDuringRender;

@@ -1764,9 +1881,8 @@ function commitRootImpl(root, renderPriorityLevel) {

1881 );

1882 }

1883 }

1884 + schedulePendingInteractions(root, remainingExpirationTime);

1885 }

1768 -

1769 - scheduleCallbackForRoot(root, priorityLevel, remainingExpirationTime);

1886 } else {

1887 // If there's no remaining work, we can clear the set of already failed

1888 // error boundaries.

@@ -1783,8 +1899,6 @@ function commitRootImpl(root, renderPriorityLevel) {

1899 }

1900 }

1901

1786 - onCommitRoot(finishedWork.stateNode, expirationTime);

1787 -

1902 if (remainingExpirationTime === Sync) {

1903 // Count the number of times the root synchronously re-renders without

1904 // finishing. If there are too many, it indicates an infinite update loop.

@@ -1798,6 +1912,12 @@ function commitRootImpl(root, renderPriorityLevel) {

1912 nestedUpdateCount = 0;

1913 }

1914

1915 + onCommitRoot(finishedWork.stateNode, expirationTime);

1916 +

1917 + // Always call this before exiting `commitRoot`, to ensure that any

1918 + // additional work on this root is scheduled.

1919 + ensureRootIsScheduled(root);

1920 +

1921 if (hasUncaughtError) {

1922 hasUncaughtError = false;

1923 const error = firstUncaughtError;

@@ -2062,7 +2182,8 @@ function captureCommitPhaseErrorOnRoot(

2182 enqueueUpdate(rootFiber, update);

2183 const root = markUpdateTimeFromFiberToRoot(rootFiber, Sync);

2184 if (root !== null) {

2065 - scheduleCallbackForRoot(root, ImmediatePriority, Sync);

2185 + ensureRootIsScheduled(root);

2186 + schedulePendingInteractions(root, Sync);

2187 }

2188 }

2189

@@ -2097,7 +2218,8 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {

2218 enqueueUpdate(fiber, update);

2219 const root = markUpdateTimeFromFiberToRoot(fiber, Sync);

2220 if (root !== null) {

2100 - scheduleCallbackForRoot(root, ImmediatePriority, Sync);

2221 + ensureRootIsScheduled(root);

2222 + schedulePendingInteractions(root, Sync);

2223 }

2224 return;

2225 }

@@ -2149,20 +2271,19 @@ export function pingSuspendedRoot(

2271 return;

2272 }

2273

2152 - const lastPendingTime = root.lastPendingTime;

2153 - if (lastPendingTime < suspendedTime) {

2274 + if (!isRootSuspendedAtTime(root, suspendedTime)) {

2275 // The root is no longer suspended at this time.

2276 return;

2277 }

2278

2158 - const pingTime = root.pingTime;

2159 - if (pingTime !== NoWork && pingTime < suspendedTime) {

2279 + const lastPingedTime = root.lastPingedTime;

2280 + if (lastPingedTime !== NoWork && lastPingedTime < suspendedTime) {

2281 // There's already a lower priority ping scheduled.

2282 return;

2283 }

2284

2285 // Mark the time at which this ping was scheduled.

2165 - root.pingTime = suspendedTime;

2286 + root.lastPingedTime = suspendedTime;

2287

2288 if (root.finishedExpirationTime === suspendedTime) {

2289 // If there's a pending fallback waiting to commit, throw it away.

@@ -2170,12 +2291,8 @@ export function pingSuspendedRoot(

2291 root.finishedWork = null;

2292 }

2293

2173 - const currentTime = requestCurrentTime();

2174 - const priorityLevel = inferPriorityFromExpirationTime(

2175 - currentTime,

2176 - suspendedTime,

2177 - );

2178 - scheduleCallbackForRoot(root, priorityLevel, suspendedTime);

2294 + ensureRootIsScheduled(root);

2295 + schedulePendingInteractions(root, suspendedTime);

2296 }

2297

2298 function retryTimedOutBoundary(

@@ -2186,9 +2303,9 @@ function retryTimedOutBoundary(

2303 // previously was rendered in its fallback state. One of the promises that

2304 // suspended it has resolved, which means at least part of the tree was

2305 // likely unblocked. Try rendering again, at a new expiration time.

2189 - const currentTime = requestCurrentTime();

2306 if (retryTime === Never) {

2307 const suspenseConfig = null; // Retries don't carry over the already committed update.

2308 + const currentTime = requestCurrentTime();

2309 retryTime = computeExpirationForFiber(

2310 currentTime,

2311 boundaryFiber,

@@ -2196,10 +2313,10 @@ function retryTimedOutBoundary(

2313 );

2314 }

2315 // TODO: Special case idle priority?

2199 - const priorityLevel = inferPriorityFromExpirationTime(currentTime, retryTime);

2316 const root = markUpdateTimeFromFiberToRoot(boundaryFiber, retryTime);

2317 if (root !== null) {

2202 - scheduleCallbackForRoot(root, priorityLevel, retryTime);

2318 + ensureRootIsScheduled(root);

2319 + schedulePendingInteractions(root, retryTime);

2320 }

2321 }

2322

packages/react-reconciler/src/ReactUpdateQueue.js

+5 -1

@@ -103,7 +103,10 @@ import {

103 } from 'shared/ReactFeatureFlags';

104

105 import {StrictMode} from './ReactTypeOfMode';

106 -import {markRenderEventTimeAndConfig} from './ReactFiberWorkLoop';

106 +import {

107 + markRenderEventTimeAndConfig,

108 + markUnprocessedUpdateTime,

109 +} from './ReactFiberWorkLoop';

110

111 import invariant from 'shared/invariant';

112 import warningWithoutStack from 'shared/warningWithoutStack';

@@ -580,6 +583,7 @@ export function processUpdateQueue<State>(

583 // dealt with the props. Context in components that specify

584 // shouldComponentUpdate is tricky; but we'll have to account for

585 // that regardless.

586 + markUnprocessedUpdateTime(newExpirationTime);

587 workInProgress.expirationTime = newExpirationTime;

588 workInProgress.memoizedState = resultState;

589

packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js

+76 -45

@@ -243,11 +243,20 @@ describe('ReactIncrementalErrorHandling', () => {

243 // This update is in a separate batch

244 ReactNoop.render(<App isBroken={false} />, onCommit);

245

246 - expect(Scheduler).toFlushAndYield([

246 + expect(Scheduler).toFlushAndYieldThrough([

247 // The first render fails. But because there's a lower priority pending

248 // update, it doesn't throw.

249 'error',

250 - // Now we retry at the lower priority. This time it succeeds.

250 + ]);

251 +

252 + // React will try to recover by rendering all the pending updates in a

253 + // single batch, synchronously. This time it succeeds.

254 + //

255 + // This tells Scheduler to render a single unit of work. Because the render

256 + // to recover from the error is synchronous, this should be enough to

257 + // finish the rest of the work.

258 + Scheduler.unstable_flushNumberOfYields(1);

259 + expect(Scheduler).toHaveYielded([

260 'success',

261 // Nothing commits until the second update completes.

262 'commit',

@@ -256,54 +265,80 @@ describe('ReactIncrementalErrorHandling', () => {

265 expect(ReactNoop.getChildren()).toEqual([span('Everything is fine.')]);

266 });

267

259 - it('on error, retries at a lower priority using the expiration of higher priority', () => {

260 - class Parent extends React.Component {

261 - state = {hideChild: false};

262 - componentDidUpdate() {

263 - Scheduler.unstable_yieldValue('commit: ' + this.state.hideChild);

264 - }

265 - render() {

266 - if (this.state.hideChild) {

267 - Scheduler.unstable_yieldValue('(empty)');

268 - return <span prop="(empty)" />;

269 - }

270 - return <Child isBroken={this.props.childIsBroken} />;

268 + it('does not include offscreen work when retrying after an error', () => {

269 + function App(props) {

270 + if (props.isBroken) {

271 + Scheduler.unstable_yieldValue('error');

272 + throw new Error('Oops!');

273 }

274 + Scheduler.unstable_yieldValue('success');

275 + return (

276 + <>

277 + Everything is fine

278 + <div hidden={true}>

279 + <div>Offscreen content</div>

280 + </div>

281 + </>

282 + );

283 }

284

274 - function Child(props) {

275 - if (props.isBroken) {

276 - Scheduler.unstable_yieldValue('Error!');

277 - throw new Error('Error!');

278 - }

279 - Scheduler.unstable_yieldValue('Child');

280 - return <span prop="Child" />;

285 + function onCommit() {

286 + Scheduler.unstable_yieldValue('commit');

287 + }

288 +

289 + function interrupt() {

290 + ReactNoop.flushSync(() => {

291 + ReactNoop.renderToRootWithID(null, 'other-root');

292 + });

293 }

294

283 - // Initial mount

284 - const parent = React.createRef(null);

285 - ReactNoop.render(<Parent ref={parent} childIsBroken={false} />);

286 - expect(Scheduler).toFlushAndYield(['Child']);

287 - expect(ReactNoop.getChildren()).toEqual([span('Child')]);

295 + ReactNoop.render(<App isBroken={true} />, onCommit);

296 + Scheduler.unstable_advanceTime(1000);

297 + expect(Scheduler).toFlushAndYieldThrough(['error']);

298 + interrupt();

299

289 - // Schedule a low priority update to hide the child

290 - parent.current.setState({hideChild: true});

300 + expect(ReactNoop).toMatchRenderedOutput(null);

301

292 - // Before the low priority update is flushed, synchronously trigger an

293 - // error in the child.

294 - ReactNoop.flushSync(() => {

295 - ReactNoop.render(<Parent ref={parent} childIsBroken={true} />);

296 - });

302 + // This update is in a separate batch

303 + ReactNoop.render(<App isBroken={false} />, onCommit);

304 +

305 + expect(Scheduler).toFlushAndYieldThrough([

306 + // The first render fails. But because there's a lower priority pending

307 + // update, it doesn't throw.

308 + 'error',

309 + ]);

310 +

311 + // React will try to recover by rendering all the pending updates in a

312 + // single batch, synchronously. This time it succeeds.

313 + //

314 + // This tells Scheduler to render a single unit of work. Because the render

315 + // to recover from the error is synchronous, this should be enough to

316 + // finish the rest of the work.

317 + Scheduler.unstable_flushNumberOfYields(1);

318 expect(Scheduler).toHaveYielded([

298 - // First the sync update triggers an error

299 - 'Error!',

300 - // Because there's a pending low priority update, we restart at the

301 - // lower priority. This hides the children, suppressing the error.

302 - '(empty)',

303 - // Now the tree can commit.

304 - 'commit: true',

319 + 'success',

320 + // Nothing commits until the second update completes.

321 + 'commit',

322 + 'commit',

323 ]);

306 - expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);

324 + // This should not include the offscreen content

325 + expect(ReactNoop).toMatchRenderedOutput(

326 + <>

327 + Everything is fine

328 + <div hidden={true} />

329 + </>,

330 + );

331 +

332 + // The offscreen content finishes in a subsequent render

333 + expect(Scheduler).toFlushAndYield([]);

334 + expect(ReactNoop).toMatchRenderedOutput(

335 + <>

336 + Everything is fine

337 + <div hidden={true}>

338 + <div>Offscreen content</div>

339 + </div>

340 + </>,

341 + );

342 });

343

344 it('retries one more time before handling error', () => {

@@ -346,10 +381,6 @@ describe('ReactIncrementalErrorHandling', () => {

381 expect(ReactNoop.getChildren()).toEqual([]);

382 });

383

349 - // TODO: This is currently unobservable, but will be once we lift renderRoot

350 - // and commitRoot into the renderer.

351 - // it("does not retry synchronously if there's an update between complete and commit");

352 -

384 it('calls componentDidCatch multiple times for multiple errors', () => {

385 let id = 0;

386 class BadMount extends React.Component {

packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js

+268

@@ -263,6 +263,274 @@ describe('ReactSuspense', () => {

263 expect(root).toMatchRenderedOutput('AsyncAfter SuspenseSibling');

264 });

265

266 + it(

267 + 'interrupts current render if something already suspended with a ' +

268 + "delay, and then subsequently there's a lower priority update",

269 + () => {

270 + const root = ReactTestRenderer.create(

271 + <>

272 + <Suspense fallback={<Text text="Loading..." />} />

273 + <Text text="Initial" />

274 + </>,

275 + {

276 + unstable_isConcurrent: true,

277 + },

278 + );

279 + expect(Scheduler).toFlushAndYield(['Initial']);

280 + expect(root).toMatchRenderedOutput('Initial');

281 +

282 + // The update will suspend.

283 + root.update(

284 + <>

285 + <Suspense fallback={<Text text="Loading..." />}>

286 + <AsyncText text="Async" ms={2000} />

287 + </Suspense>

288 + <Text text="After Suspense" />

289 + <Text text="Sibling" />

290 + </>,

291 + );

292 +

293 + // Yield past the Suspense boundary but don't complete the last sibling.

294 + expect(Scheduler).toFlushAndYieldThrough([

295 + 'Suspend! [Async]',

296 + 'Loading...',

297 + 'After Suspense',

298 + ]);

299 +

300 + // Receives a lower priority update before the current render phase

301 + // has completed.

302 + Scheduler.unstable_advanceTime(1000);

303 + root.update(

304 + <>

305 + <Suspense fallback={<Text text="Loading..." />} />

306 + <Text text="Updated" />

307 + </>,

308 + );

309 + expect(Scheduler).toHaveYielded([]);

310 + expect(root).toMatchRenderedOutput('Initial');

311 +

312 + // Render the update, instead of continuing

313 + expect(Scheduler).toFlushAndYield(['Updated']);

314 + expect(root).toMatchRenderedOutput('Updated');

315 + },

316 + );

317 +

318 + it(

319 + 'interrupts current render when something suspends with a ' +

320 + "delay and we've already skipped over a lower priority update in " +

321 + 'a parent',

322 + () => {

323 + function interrupt() {

324 + // React has a heuristic to batch all updates that occur within the same

325 + // event. This is a trick to circumvent that heuristic.

326 + ReactTestRenderer.create('whatever');

327 + }

328 +

329 + function App({shouldSuspend, step}) {

330 + return (

331 + <>

332 + <Text text={`A${step}`} />

333 + <Suspense fallback={<Text text="Loading..." />}>

334 + {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}

335 + </Suspense>

336 + <Text text={`B${step}`} />

337 + <Text text={`C${step}`} />

338 + </>

339 + );

340 + }

341 +

342 + const root = ReactTestRenderer.create(null, {

343 + unstable_isConcurrent: true,

344 + });

345 +

346 + root.update(<App shouldSuspend={false} step={0} />);

347 + expect(Scheduler).toFlushAndYield(['A0', 'B0', 'C0']);

348 + expect(root).toMatchRenderedOutput('A0B0C0');

349 +

350 + // This update will suspend.

351 + root.update(<App shouldSuspend={true} step={1} />);

352 +

353 + // Need to move into the next async bucket.

354 + Scheduler.unstable_advanceTime(1000);

355 + // Do a bit of work, then interrupt to trigger a restart.

356 + expect(Scheduler).toFlushAndYieldThrough(['A1']);

357 + interrupt();

358 +

359 + // Schedule another update. This will have lower priority because of

360 + // the interrupt trick above.

361 + root.update(<App shouldSuspend={false} step={2} />);

362 +

363 + expect(Scheduler).toFlushAndYieldThrough([

364 + // Should have restarted the first update, because of the interruption

365 + 'A1',

366 + 'Suspend! [Async]',

367 + 'Loading...',

368 + 'B1',

369 + ]);

370 +

371 + // Should not have committed loading state

372 + expect(root).toMatchRenderedOutput('A0B0C0');

373 +

374 + // After suspending, should abort the first update and switch to the

375 + // second update. So, C1 should not appear in the log.

376 + // TODO: This should work even if React does not yield to the main

377 + // thread. Should use same mechanism as selective hydration to interrupt

378 + // the render before the end of the current slice of work.

379 + expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);

380 +

381 + expect(root).toMatchRenderedOutput('A2B2C2');

382 + },

383 + );

384 +

385 + it(

386 + 'interrupts current render when something suspends with a ' +

387 + "delay and we've already bailed out lower priority update in " +

388 + 'a parent',

389 + async () => {

390 + // This is similar to the previous test case, except this covers when

391 + // React completely bails out on the parent component, without processing

392 + // the update queue.

393 +

394 + const {useState} = React;

395 +

396 + function interrupt() {

397 + // React has a heuristic to batch all updates that occur within the same

398 + // event. This is a trick to circumvent that heuristic.

399 + ReactTestRenderer.create('whatever');

400 + }

401 +

402 + let setShouldSuspend;

403 + function Async() {

404 + const [shouldSuspend, _setShouldSuspend] = useState(false);

405 + setShouldSuspend = _setShouldSuspend;

406 + return (

407 + <>

408 + <Text text="A" />

409 + <Suspense fallback={<Text text="Loading..." />}>

410 + {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}

411 + </Suspense>

412 + <Text text="B" />

413 + <Text text="C" />

414 + </>

415 + );

416 + }

417 +

418 + let setShouldHideInParent;

419 + function App() {

420 + const [shouldHideInParent, _setShouldHideInParent] = useState(false);

421 + setShouldHideInParent = _setShouldHideInParent;

422 + Scheduler.unstable_yieldValue(

423 + 'shouldHideInParent: ' + shouldHideInParent,

424 + );

425 + return shouldHideInParent ? <Text text="(empty)" /> : <Async />;

426 + }

427 +

428 + const root = ReactTestRenderer.create(null, {

429 + unstable_isConcurrent: true,

430 + });

431 +

432 + await ReactTestRenderer.act(async () => {

433 + root.update(<App />);

434 + expect(Scheduler).toFlushAndYield([

435 + 'shouldHideInParent: false',

436 + 'A',

437 + 'B',

438 + 'C',

439 + ]);

440 + expect(root).toMatchRenderedOutput('ABC');

441 +

442 + // This update will suspend.

443 + setShouldSuspend(true);

444 +

445 + // Need to move into the next async bucket.

446 + Scheduler.unstable_advanceTime(1000);

447 + // Do a bit of work, then interrupt to trigger a restart.

448 + expect(Scheduler).toFlushAndYieldThrough(['A']);

449 + interrupt();

450 + // Should not have committed loading state

451 + expect(root).toMatchRenderedOutput('ABC');

452 +

453 + // Schedule another update. This will have lower priority because of

454 + // the interrupt trick above.

455 + setShouldHideInParent(true);

456 +

457 + expect(Scheduler).toFlushAndYieldThrough([

458 + // Should have restarted the first update, because of the interruption

459 + 'A',

460 + 'Suspend! [Async]',

461 + 'Loading...',

462 + 'B',

463 + ]);

464 +

465 + // Should not have committed loading state

466 + expect(root).toMatchRenderedOutput('ABC');

467 +

468 + // After suspending, should abort the first update and switch to the

469 + // second update.

470 + expect(Scheduler).toFlushAndYield([

471 + 'shouldHideInParent: true',

472 + '(empty)',

473 + ]);

474 +

475 + expect(root).toMatchRenderedOutput('(empty)');

476 + });

477 + },

478 + );

479 +

480 + it(

481 + 'interrupts current render when something suspends with a ' +

482 + 'delay, and a parent received an update after it completed',

483 + () => {

484 + function App({shouldSuspend, step}) {

485 + return (

486 + <>

487 + <Text text={`A${step}`} />

488 + <Suspense fallback={<Text text="Loading..." />}>

489 + {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}

490 + </Suspense>

491 + <Text text={`B${step}`} />

492 + <Text text={`C${step}`} />

493 + </>

494 + );

495 + }

496 +

497 + const root = ReactTestRenderer.create(null, {

498 + unstable_isConcurrent: true,

499 + });

500 +

501 + root.update(<App shouldSuspend={false} step={0} />);

502 + expect(Scheduler).toFlushAndYield(['A0', 'B0', 'C0']);

503 + expect(root).toMatchRenderedOutput('A0B0C0');

504 +

505 + // This update will suspend.

506 + root.update(<App shouldSuspend={true} step={1} />);

507 + // Flush past the root, but stop before the async component.

508 + expect(Scheduler).toFlushAndYieldThrough(['A1']);

509 +

510 + // Schedule an update on the root, which already completed.

511 + root.update(<App shouldSuspend={false} step={2} />);

512 + // We'll keep working on the existing update.

513 + expect(Scheduler).toFlushAndYieldThrough([

514 + // Now the async component suspends

515 + 'Suspend! [Async]',

516 + 'Loading...',

517 + 'B1',

518 + ]);

519 +

520 + // Should not have committed loading state

521 + expect(root).toMatchRenderedOutput('A0B0C0');

522 +

523 + // After suspending, should abort the first update and switch to the

524 + // second update. So, C1 should not appear in the log.

525 + // TODO: This should work even if React does not yield to the main

526 + // thread. Should use same mechanism as selective hydration to interrupt

527 + // the render before the end of the current slice of work.

528 + expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);

529 +

530 + expect(root).toMatchRenderedOutput('A2B2C2');

531 + },

532 + );

533 +

534 it('mounts a lazy class component in non-concurrent mode', async () => {

535 class Class extends React.Component {

536 componentDidMount() {

packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js

+66 -1

@@ -494,7 +494,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

494 return <Text text="(empty)" />;

495 }

496 return (

497 - <Suspense>

497 + <Suspense fallback="Loading...">

498 <AsyncText ms={2000} text="Async" />

499 </Suspense>

500 );

@@ -518,6 +518,71 @@ describe('ReactSuspenseWithNoopRenderer', () => {

518 expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);

519 });

520

521 + it('tries each subsequent level after suspending', async () => {

522 + const root = ReactNoop.createRoot();

523 +

524 + function App({step, shouldSuspend}) {

525 + return (

526 + <Suspense fallback="Loading...">

527 + <Text text="Sibling" />

528 + {shouldSuspend ? (

529 + <AsyncText ms={10000} text={'Step ' + step} />

530 + ) : (

531 + <Text text={'Step ' + step} />

532 + )}

533 + </Suspense>

534 + );

535 + }

536 +

537 + function interrupt() {

538 + // React has a heuristic to batch all updates that occur within the same

539 + // event. This is a trick to circumvent that heuristic.

540 + ReactNoop.flushSync(() => {

541 + ReactNoop.renderToRootWithID(null, 'other-root');

542 + });

543 + }

544 +

545 + // Mount the Suspense boundary without suspending, so that the subsequent

546 + // updates suspend with a delay.

547 + await ReactNoop.act(async () => {

548 + root.render(<App step={0} shouldSuspend={false} />);

549 + });

550 + await advanceTimers(1000);

551 + expect(Scheduler).toHaveYielded(['Sibling', 'Step 0']);

552 +

553 + // Schedule an update at several distinct expiration times

554 + await ReactNoop.act(async () => {

555 + root.render(<App step={1} shouldSuspend={true} />);

556 + Scheduler.unstable_advanceTime(1000);

557 + expect(Scheduler).toFlushAndYieldThrough(['Sibling']);

558 + interrupt();

559 +

560 + root.render(<App step={2} shouldSuspend={true} />);

561 + Scheduler.unstable_advanceTime(1000);

562 + expect(Scheduler).toFlushAndYieldThrough(['Sibling']);

563 + interrupt();

564 +

565 + root.render(<App step={3} shouldSuspend={true} />);

566 + Scheduler.unstable_advanceTime(1000);

567 + expect(Scheduler).toFlushAndYieldThrough(['Sibling']);

568 + interrupt();

569 +

570 + root.render(<App step={4} shouldSuspend={false} />);

571 + });

572 +

573 + // Should suspend at each distinct level

574 + expect(Scheduler).toHaveYielded([

575 + 'Sibling',

576 + 'Suspend! [Step 1]',

577 + 'Sibling',

578 + 'Suspend! [Step 2]',

579 + 'Sibling',

580 + 'Suspend! [Step 3]',

581 + 'Sibling',

582 + 'Step 4',

583 + ]);

584 + });

585 +

586 it('forces an expiration after an update times out', async () => {

587 ReactNoop.render(

588 <Fragment>

packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap

+4 -1

@@ -422,7 +422,10 @@ exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] =

422 `;

423

424 exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `

425 -"⚛ (Committing Changes)

425 +"⚛ (React Tree Reconciliation: Completed Root)

426 + ⚛ Foo [mount]

427 +

428 +⚛ (Committing Changes)

429 ⚛ (Committing Snapshot Effects: 0 Total)

430 ⚛ (Committing Host Effects: 1 Total)

431 ⚛ (Calling Lifecycle Methods: 0 Total)