{"body":"The stack of PRs in #16743 was reverted. This adds them back.","parents":["d6f6b951e12e25b67f681094714a337356d2a310"],"commit":{"revision":"137ea783b1073f7b94a0bf252b6344174c65754b","authoredAt":"2019-09-13T09:33:46-07:00","authorEmail":"git@andrewclark.io","subject":"Re-enable risky work loop changes (#16771)","shortRevision":"137ea783b1","authorName":"Andrew Clark"},"patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex eb4234d4ae..f86a7baaff 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -177,6 +177,7 @@ import {\n retryDehydratedSuspenseBoundary,\n scheduleWork,\n renderDidSuspendDelayIfPossible,\n+ markUnprocessedUpdateTime,\n } from '.\/ReactFiberWorkLoop';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n@@ -2709,6 +2710,11 @@ function bailoutOnAlreadyFinishedWork(\n stopProfilerTimerIfRunning(workInProgress);\n }\n \n+ const updateExpirationTime = workInProgress.expirationTime;\n+ if (updateExpirationTime !== NoWork) {\n+ markUnprocessedUpdateTime(updateExpirationTime);\n+ }\n+\n \/\/ Check if the children have any pending work.\n const childExpirationTime = workInProgress.childExpirationTime;\n if (childExpirationTime < renderExpirationTime) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberExpirationTime.js b\/packages\/react-reconciler\/src\/ReactFiberExpirationTime.js\nindex 652ca93aed..e61ed56079 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberExpirationTime.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberExpirationTime.js\n@@ -21,7 +21,10 @@ import {\n export type ExpirationTime = number;\n \n export const NoWork = 0;\n+\/\/ TODO: Think of a better name for Never.\n export const Never = 1;\n+\/\/ TODO: Use the Idle expiration time for idle state updates\n+export const Idle = 2;\n export const Sync = MAX_SIGNED_31_BIT_INT;\n export const Batched = Sync - 1;\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\nindex 9834ac842c..3f0552ba30 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n@@ -43,6 +43,7 @@ import {\n warnIfNotCurrentlyActingUpdatesInDev,\n warnIfNotScopedWithMatchingAct,\n markRenderEventTimeAndConfig,\n+ markUnprocessedUpdateTime,\n } from '.\/ReactFiberWorkLoop';\n \n import invariant from 'shared\/invariant';\n@@ -531,6 +532,7 @@ export function resetHooks(): void {\n \/\/ This is used to reset the state of this module when a component throws.\n \/\/ It's also called inside mountIndeterminateComponent if we determine the\n \/\/ component is a module-style component.\n+\n renderExpirationTime = NoWork;\n currentlyRenderingFiber = null;\n \n@@ -755,6 +757,7 @@ function updateReducer(\n \/\/ Update the remaining priority in the queue.\n if (updateExpirationTime > remainingExpirationTime) {\n remainingExpirationTime = updateExpirationTime;\n+ markUnprocessedUpdateTime(remainingExpirationTime);\n }\n } else {\n \/\/ This update does have sufficient priority.\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\nindex 7ef9373903..72dba87355 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n@@ -14,6 +14,7 @@ import type {TimeoutHandle, NoTimeout} from '.\/ReactFiberHostConfig';\n import type {Thenable} from '.\/ReactFiberWorkLoop';\n import type {Interaction} from 'scheduler\/src\/Tracing';\n import type {SuspenseHydrationCallbacks} from '.\/ReactFiberSuspenseComponent';\n+import type {ReactPriorityLevel} from '.\/SchedulerWithReactIntegration';\n \n import {noTimeout} from '.\/ReactFiberHostConfig';\n import {createHostRootFiber} from '.\/ReactFiber';\n@@ -23,6 +24,7 @@ import {\n enableSuspenseCallback,\n } from 'shared\/ReactFeatureFlags';\n import {unstable_getThreadID} from 'scheduler\/tracing';\n+import {NoPriority} from '.\/SchedulerWithReactIntegration';\n \n \/\/ TODO: This should be lifted into the renderer.\n export type Batch = {\n@@ -69,12 +71,20 @@ type BaseFiberRootProperties = {|\n callbackNode: *,\n \/\/ Expiration of the callback associated with this root\n callbackExpirationTime: ExpirationTime,\n+ \/\/ Priority of the callback associated with this root\n+ callbackPriority: ReactPriorityLevel,\n \/\/ The earliest pending expiration time that exists in the tree\n firstPendingTime: ExpirationTime,\n- \/\/ The latest pending expiration time that exists in the tree\n- lastPendingTime: ExpirationTime,\n- \/\/ The time at which a suspended component pinged the root to render again\n- pingTime: ExpirationTime,\n+ \/\/ The earliest suspended expiration time that exists in the tree\n+ firstSuspendedTime: ExpirationTime,\n+ \/\/ The latest suspended expiration time that exists in the tree\n+ lastSuspendedTime: ExpirationTime,\n+ \/\/ The next known expiration time after the suspended range\n+ nextKnownPendingLevel: ExpirationTime,\n+ \/\/ The latest time at which a suspended component pinged the root to\n+ \/\/ render again\n+ lastPingedTime: ExpirationTime,\n+ lastExpiredTime: ExpirationTime,\n |};\n \n \/\/ The following attributes are only used by interaction tracing builds.\n@@ -117,10 +127,13 @@ function FiberRootNode(containerInfo, tag, hydrate) {\n this.hydrate = hydrate;\n this.firstBatch = null;\n this.callbackNode = null;\n- this.callbackExpirationTime = NoWork;\n+ this.callbackPriority = NoPriority;\n this.firstPendingTime = NoWork;\n- this.lastPendingTime = NoWork;\n- this.pingTime = NoWork;\n+ this.firstSuspendedTime = NoWork;\n+ this.lastSuspendedTime = NoWork;\n+ this.nextKnownPendingLevel = NoWork;\n+ this.lastPingedTime = NoWork;\n+ this.lastExpiredTime = NoWork;\n \n if (enableSchedulerTracing) {\n this.interactionThreadID = unstable_getThreadID();\n@@ -151,3 +164,108 @@ export function createFiberRoot(\n \n return root;\n }\n+\n+export function isRootSuspendedAtTime(\n+ root: FiberRoot,\n+ expirationTime: ExpirationTime,\n+): boolean {\n+ const firstSuspendedTime = root.firstSuspendedTime;\n+ const lastSuspendedTime = root.lastSuspendedTime;\n+ return (\n+ firstSuspendedTime !== NoWork &&\n+ (firstSuspendedTime >= expirationTime &&\n+ lastSuspendedTime <= expirationTime)\n+ );\n+}\n+\n+export function markRootSuspendedAtTime(\n+ root: FiberRoot,\n+ expirationTime: ExpirationTime,\n+): void {\n+ const firstSuspendedTime = root.firstSuspendedTime;\n+ const lastSuspendedTime = root.lastSuspendedTime;\n+ if (firstSuspendedTime < expirationTime) {\n+ root.firstSuspendedTime = expirationTime;\n+ }\n+ if (lastSuspendedTime > expirationTime || firstSuspendedTime === NoWork) {\n+ root.lastSuspendedTime = expirationTime;\n+ }\n+\n+ if (expirationTime <= root.lastPingedTime) {\n+ root.lastPingedTime = NoWork;\n+ }\n+\n+ if (expirationTime <= root.lastExpiredTime) {\n+ root.lastExpiredTime = NoWork;\n+ }\n+}\n+\n+export function markRootUpdatedAtTime(\n+ root: FiberRoot,\n+ expirationTime: ExpirationTime,\n+): void {\n+ \/\/ Update the range of pending times\n+ const firstPendingTime = root.firstPendingTime;\n+ if (expirationTime > firstPendingTime) {\n+ root.firstPendingTime = expirationTime;\n+ }\n+\n+ \/\/ Update the range of suspended times. Treat everything lower priority or\n+ \/\/ equal to this update as unsuspended.\n+ const firstSuspendedTime = root.firstSuspendedTime;\n+ if (firstSuspendedTime !== NoWork) {\n+ if (expirationTime >= firstSuspendedTime) {\n+ \/\/ The entire suspended range is now unsuspended.\n+ root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;\n+ } else if (expirationTime >= root.lastSuspendedTime) {\n+ root.lastSuspendedTime = expirationTime + 1;\n+ }\n+\n+ \/\/ This is a pending level. Check if it's higher priority than the next\n+ \/\/ known pending level.\n+ if (expirationTime > root.nextKnownPendingLevel) {\n+ root.nextKnownPendingLevel = expirationTime;\n+ }\n+ }\n+}\n+\n+export function markRootFinishedAtTime(\n+ root: FiberRoot,\n+ finishedExpirationTime: ExpirationTime,\n+ remainingExpirationTime: ExpirationTime,\n+): void {\n+ \/\/ Update the range of pending times\n+ root.firstPendingTime = remainingExpirationTime;\n+\n+ \/\/ Update the range of suspended times. Treat everything higher priority or\n+ \/\/ equal to this update as unsuspended.\n+ if (finishedExpirationTime <= root.lastSuspendedTime) {\n+ \/\/ The entire suspended range is now unsuspended.\n+ root.firstSuspendedTime = root.lastSuspendedTime = root.nextKnownPendingLevel = NoWork;\n+ } else if (finishedExpirationTime <= root.firstSuspendedTime) {\n+ \/\/ Part of the suspended range is now unsuspended. Narrow the range to\n+ \/\/ include everything between the unsuspended time (non-inclusive) and the\n+ \/\/ last suspended time.\n+ root.firstSuspendedTime = finishedExpirationTime - 1;\n+ }\n+\n+ if (finishedExpirationTime <= root.lastPingedTime) {\n+ \/\/ Clear the pinged time\n+ root.lastPingedTime = NoWork;\n+ }\n+\n+ if (finishedExpirationTime <= root.lastExpiredTime) {\n+ \/\/ Clear the expired time\n+ root.lastExpiredTime = NoWork;\n+ }\n+}\n+\n+export function markRootExpiredAtTime(\n+ root: FiberRoot,\n+ expirationTime: ExpirationTime,\n+): void {\n+ const lastExpiredTime = root.lastExpiredTime;\n+ if (lastExpiredTime === NoWork || lastExpiredTime > expirationTime) {\n+ root.lastExpiredTime = expirationTime;\n+ }\n+}\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\nindex 2542dcc107..2e81624de3 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n@@ -10,10 +10,7 @@\n import type {Fiber} from '.\/ReactFiber';\n import type {FiberRoot} from '.\/ReactFiberRoot';\n import type {ExpirationTime} from '.\/ReactFiberExpirationTime';\n-import type {\n- ReactPriorityLevel,\n- SchedulerCallback,\n-} from '.\/SchedulerWithReactIntegration';\n+import type {ReactPriorityLevel} from '.\/SchedulerWithReactIntegration';\n import type {Interaction} from 'scheduler\/src\/Tracing';\n import type {SuspenseConfig} from '.\/ReactFiberSuspenseConfig';\n import type {SuspenseState} from '.\/ReactFiberSuspenseComponent';\n@@ -66,6 +63,13 @@ import {\n } from '.\/ReactFiberHostConfig';\n \n import {createWorkInProgress, assignFiberPropertiesInDEV} from '.\/ReactFiber';\n+import {\n+ isRootSuspendedAtTime,\n+ markRootSuspendedAtTime,\n+ markRootFinishedAtTime,\n+ markRootUpdatedAtTime,\n+ markRootExpiredAtTime,\n+} from '.\/ReactFiberRoot';\n import {\n NoMode,\n StrictMode,\n@@ -112,6 +116,7 @@ import {\n inferPriorityFromExpirationTime,\n LOW_PRIORITY_EXPIRATION,\n Batched,\n+ Idle,\n } from '.\/ReactFiberExpirationTime';\n import {beginWork as originalBeginWork} from '.\/ReactFiberBeginWork';\n import {completeWork} from '.\/ReactFiberCompleteWork';\n@@ -195,12 +200,13 @@ const LegacyUnbatchedContext = \/* *\/ 0b001000;\n const RenderContext = \/* *\/ 0b010000;\n const CommitContext = \/* *\/ 0b100000;\n \n-type RootExitStatus = 0 | 1 | 2 | 3 | 4;\n+type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;\n const RootIncomplete = 0;\n const RootErrored = 1;\n const RootSuspended = 2;\n const RootSuspendedWithDelay = 3;\n const RootCompleted = 4;\n+const RootLocked = 5;\n \n export type Thenable = {\n then(resolve: () => mixed, reject?: () => mixed): Thenable | void,\n@@ -226,6 +232,10 @@ let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;\n let workInProgressRootLatestProcessedExpirationTime: ExpirationTime = Sync;\n let workInProgressRootLatestSuspenseTimeout: ExpirationTime = Sync;\n let workInProgressRootCanSuspendUsingConfig: null | SuspenseConfig = null;\n+\/\/ The work left over by components that were visited during this render. Only\n+\/\/ includes unprocessed updates, not work in bailed out children.\n+let workInProgressRootNextUnprocessedUpdateTime: ExpirationTime = NoWork;\n+\n \/\/ If we're pinged while rendering we don't always restart immediately.\n \/\/ This flag determines if it might be worthwhile to restart if an opportunity\n \/\/ happens latere.\n@@ -381,8 +391,6 @@ export function scheduleUpdateOnFiber(\n return;\n }\n \n- root.pingTime = NoWork;\n-\n checkForInterruption(fiber, expirationTime);\n recordScheduleUpdate();\n \n@@ -403,12 +411,10 @@ export function scheduleUpdateOnFiber(\n \/\/ This is a legacy edge case. The initial mount of a ReactDOM.render-ed\n \/\/ root inside of batchedUpdates should be synchronous, but layout updates\n \/\/ should be deferred until the end of the batch.\n- let callback = renderRoot(root, Sync, true);\n- while (callback !== null) {\n- callback = callback(true);\n- }\n+ performSyncWorkOnRoot(root);\n } else {\n- scheduleCallbackForRoot(root, ImmediatePriority, Sync);\n+ ensureRootIsScheduled(root);\n+ schedulePendingInteractions(root, expirationTime);\n if (executionContext === NoContext) {\n \/\/ Flush the synchronous work now, unless we're already working or inside\n \/\/ a batch. This is intentionally inside scheduleUpdateOnFiber instead of\n@@ -419,7 +425,8 @@ export function scheduleUpdateOnFiber(\n }\n }\n } else {\n- scheduleCallbackForRoot(root, priorityLevel, expirationTime);\n+ ensureRootIsScheduled(root);\n+ schedulePendingInteractions(root, expirationTime);\n }\n \n if (\n@@ -487,97 +494,511 @@ function markUpdateTimeFromFiberToRoot(fiber, expirationTime) {\n }\n \n if (root !== null) {\n- \/\/ Update the first and last pending expiration times in this root\n- const firstPendingTime = root.firstPendingTime;\n- if (expirationTime > firstPendingTime) {\n- root.firstPendingTime = expirationTime;\n- }\n- const lastPendingTime = root.lastPendingTime;\n- if (lastPendingTime === NoWork || expirationTime < lastPendingTime) {\n- root.lastPendingTime = expirationTime;\n+ if (workInProgressRoot === root) {\n+ \/\/ Received an update to a tree that's in the middle of rendering. Mark\n+ \/\/ that's unprocessed work on this root.\n+ markUnprocessedUpdateTime(expirationTime);\n+\n+ if (workInProgressRootExitStatus === RootSuspendedWithDelay) {\n+ \/\/ The root already suspended with a delay, which means this render\n+ \/\/ definitely won't finish. Since we have a new update, let's mark it as\n+ \/\/ suspended now, right before marking the incoming update. This has the\n+ \/\/ effect of interrupting the current render and switching to the update.\n+ \/\/ TODO: This happens to work when receiving an update during the render\n+ \/\/ phase, because of the trick inside computeExpirationForFiber to\n+ \/\/ subtract 1 from `renderExpirationTime` to move it into a\n+ \/\/ separate bucket. But we should probably model it with an exception,\n+ \/\/ using the same mechanism we use to force hydration of a subtree.\n+ \/\/ TODO: This does not account for low pri updates that were already\n+ \/\/ scheduled before the root started rendering. Need to track the next\n+ \/\/ pending expiration time (perhaps by backtracking the return path) and\n+ \/\/ then trigger a restart in the `renderDidSuspendDelayIfPossible` path.\n+ markRootSuspendedAtTime(root, renderExpirationTime);\n+ }\n }\n+ \/\/ Mark that the root has a pending update.\n+ markRootUpdatedAtTime(root, expirationTime);\n }\n \n return root;\n }\n \n-\/\/ Use this function, along with runRootCallback, to ensure that only a single\n-\/\/ callback per root is scheduled. It's still possible to call renderRoot\n-\/\/ directly, but scheduling via this function helps avoid excessive callbacks.\n-\/\/ It works by storing the callback node and expiration time on the root. When a\n-\/\/ new callback comes in, it compares the expiration time to determine if it\n-\/\/ should cancel the previous one. It also relies on commitRoot scheduling a\n-\/\/ callback to render the next level, because that means we don't need a\n-\/\/ separate callback per expiration time.\n-function scheduleCallbackForRoot(\n- root: FiberRoot,\n- priorityLevel: ReactPriorityLevel,\n- expirationTime: ExpirationTime,\n-) {\n- const existingCallbackExpirationTime = root.callbackExpirationTime;\n- if (existingCallbackExpirationTime < expirationTime) {\n- \/\/ New callback has higher priority than the existing one.\n- const existingCallbackNode = root.callbackNode;\n+function getNextRootExpirationTimeToWorkOn(root: FiberRoot): ExpirationTime {\n+ \/\/ Determines the next expiration time that the root should render, taking\n+ \/\/ into account levels that may be suspended, or levels that may have\n+ \/\/ received a ping.\n+\n+ const lastExpiredTime = root.lastExpiredTime;\n+ if (lastExpiredTime !== NoWork) {\n+ return lastExpiredTime;\n+ }\n+\n+ \/\/ \"Pending\" refers to any update that hasn't committed yet, including if it\n+ \/\/ suspended. The \"suspended\" range is therefore a subset.\n+ const firstPendingTime = root.firstPendingTime;\n+ if (!isRootSuspendedAtTime(root, firstPendingTime)) {\n+ \/\/ The highest priority pending time is not suspended. Let's work on that.\n+ return firstPendingTime;\n+ }\n+\n+ \/\/ If the first pending time is suspended, check if there's a lower priority\n+ \/\/ pending level that we know about. Or check if we received a ping. Work\n+ \/\/ on whichever is higher priority.\n+ const lastPingedTime = root.lastPingedTime;\n+ const nextKnownPendingLevel = root.nextKnownPendingLevel;\n+ return lastPingedTime > nextKnownPendingLevel\n+ ? lastPingedTime\n+ : nextKnownPendingLevel;\n+}\n+\n+\/\/ Use this function to schedule a task for a root. There's only one task per\n+\/\/ root; if a task was already scheduled, we'll check to make sure the\n+\/\/ expiration time of the existing task is the same as the expiration time of\n+\/\/ the next level that the root has work on. This function is called on every\n+\/\/ update, and right before exiting a task.\n+function ensureRootIsScheduled(root: FiberRoot) {\n+ const lastExpiredTime = root.lastExpiredTime;\n+ if (lastExpiredTime !== NoWork) {\n+ \/\/ Special case: Expired work should flush synchronously.\n+ root.callbackExpirationTime = Sync;\n+ root.callbackPriority = ImmediatePriority;\n+ root.callbackNode = scheduleSyncCallback(\n+ performSyncWorkOnRoot.bind(null, root),\n+ );\n+ return;\n+ }\n+\n+ const expirationTime = getNextRootExpirationTimeToWorkOn(root);\n+ const existingCallbackNode = root.callbackNode;\n+ if (expirationTime === NoWork) {\n+ \/\/ There's nothing to work on.\n if (existingCallbackNode !== null) {\n- cancelCallback(existingCallbackNode);\n+ root.callbackNode = null;\n+ root.callbackExpirationTime = NoWork;\n+ root.callbackPriority = NoPriority;\n }\n- root.callbackExpirationTime = expirationTime;\n+ return;\n+ }\n \n- if (expirationTime === Sync) {\n- \/\/ Sync React callbacks are scheduled on a special internal queue\n- root.callbackNode = scheduleSyncCallback(\n- runRootCallback.bind(\n- null,\n- root,\n- renderRoot.bind(null, root, expirationTime),\n- ),\n- );\n- } else {\n- let options = null;\n- if (\n- !disableSchedulerTimeoutBasedOnReactExpirationTime &&\n- expirationTime !== Never\n- ) {\n- let timeout = expirationTimeToMs(expirationTime) - now();\n- options = {timeout};\n- }\n+ \/\/ TODO: If this is an update, we already read the current time. Pass the\n+ \/\/ time as an argument.\n+ const currentTime = requestCurrentTime();\n+ const priorityLevel = inferPriorityFromExpirationTime(\n+ currentTime,\n+ expirationTime,\n+ );\n \n- root.callbackNode = scheduleCallback(\n- priorityLevel,\n- runRootCallback.bind(\n- null,\n- root,\n- renderRoot.bind(null, root, expirationTime),\n- ),\n- options,\n- );\n+ \/\/ If there's an existing render task, confirm it has the correct priority and\n+ \/\/ expiration time. Otherwise, we'll cancel it and schedule a new one.\n+ if (existingCallbackNode !== null) {\n+ const existingCallbackPriority = root.callbackPriority;\n+ const existingCallbackExpirationTime = root.callbackExpirationTime;\n+ if (\n+ \/\/ Callback must have the exact same expiration time.\n+ existingCallbackExpirationTime === expirationTime &&\n+ \/\/ Callback must have greater or equal priority.\n+ existingCallbackPriority >= priorityLevel\n+ ) {\n+ \/\/ Existing callback is sufficient.\n+ return;\n }\n+ \/\/ Need to schedule a new task.\n+ \/\/ TODO: Instead of scheduling a new task, we should be able to change the\n+ \/\/ priority of the existing one.\n+ cancelCallback(existingCallbackNode);\n+ }\n+\n+ root.callbackExpirationTime = expirationTime;\n+ root.callbackPriority = priorityLevel;\n+\n+ let callbackNode;\n+ if (expirationTime === Sync) {\n+ \/\/ Sync React callbacks are scheduled on a special internal queue\n+ callbackNode = scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));\n+ } else if (disableSchedulerTimeoutBasedOnReactExpirationTime) {\n+ callbackNode = scheduleCallback(\n+ priorityLevel,\n+ performConcurrentWorkOnRoot.bind(null, root),\n+ );\n+ } else {\n+ callbackNode = scheduleCallback(\n+ priorityLevel,\n+ performConcurrentWorkOnRoot.bind(null, root),\n+ \/\/ Compute a task timeout based on the expiration time. This also affects\n+ \/\/ ordering because tasks are processed in timeout order.\n+ {timeout: expirationTimeToMs(expirationTime) - now()},\n+ );\n }\n \n- \/\/ Associate the current interactions with this new root+priority.\n- schedulePendingInteractions(root, expirationTime);\n+ root.callbackNode = callbackNode;\n }\n \n-function runRootCallback(root, callback, isSync) {\n- const prevCallbackNode = root.callbackNode;\n- let continuation = null;\n+\/\/ This is the entry point for every concurrent task, i.e. anything that\n+\/\/ goes through Scheduler.\n+function performConcurrentWorkOnRoot(root, didTimeout) {\n+ \/\/ Since we know we're in a React event, we can clear the current\n+ \/\/ event time. The next update will compute a new event time.\n+ currentEventTime = NoWork;\n+\n+ if (didTimeout) {\n+ \/\/ The render task took too long to complete. Mark the current time as\n+ \/\/ expired to synchronously render all expired work in a single batch.\n+ const currentTime = requestCurrentTime();\n+ markRootExpiredAtTime(root, currentTime);\n+ \/\/ This will schedule a synchronous callback.\n+ ensureRootIsScheduled(root);\n+ return null;\n+ }\n+\n+ \/\/ Determine the next expiration time to work on, using the fields stored\n+ \/\/ on the root.\n+ const expirationTime = getNextRootExpirationTimeToWorkOn(root);\n+ if (expirationTime !== NoWork) {\n+ const originalCallbackNode = root.callbackNode;\n+ try {\n+ renderRoot(root, expirationTime, false);\n+ if (workInProgress !== null) {\n+ \/\/ There's still work left over. Exit without committing.\n+ stopInterruptedWorkLoopTimer();\n+ } else {\n+ \/\/ We now have a consistent tree. The next step is either to commit it,\n+ \/\/ or, if something suspended, wait to commit it after a timeout.\n+ stopFinishedWorkLoopTimer();\n+\n+ const finishedWork: Fiber = ((root.finishedWork =\n+ root.current.alternate): any);\n+ root.finishedExpirationTime = expirationTime;\n+\n+ resolveLocksOnRoot(root, expirationTime);\n+\n+ \/\/ Set this to null to indicate there's no in-progress render.\n+ workInProgressRoot = null;\n+\n+ switch (workInProgressRootExitStatus) {\n+ case RootIncomplete: {\n+ invariant(false, 'Should have a work-in-progress.');\n+ }\n+ \/\/ Flow knows about invariant, so it complains if I add a break\n+ \/\/ statement, but eslint doesn't know about invariant, so it complains\n+ \/\/ if I do. eslint-disable-next-line no-fallthrough\n+ case RootErrored: {\n+ if (expirationTime !== Idle) {\n+ \/\/ If this was an async render, the error may have happened due to\n+ \/\/ a mutation in a concurrent event. Try rendering one more time,\n+ \/\/ synchronously, to see if the error goes away. If there are\n+ \/\/ lower priority updates, let's include those, too, in case they\n+ \/\/ fix the inconsistency. Render at Idle to include all updates.\n+ markRootExpiredAtTime(root, Idle);\n+ break;\n+ }\n+ \/\/ Commit the root in its errored state.\n+ commitRoot(root);\n+ break;\n+ }\n+ case RootSuspended: {\n+ markRootSuspendedAtTime(root, expirationTime);\n+ const lastSuspendedTime = root.lastSuspendedTime;\n+ if (expirationTime === lastSuspendedTime) {\n+ root.nextKnownPendingLevel = getRemainingExpirationTime(\n+ finishedWork,\n+ );\n+ }\n+ flushSuspensePriorityWarningInDEV();\n+\n+ \/\/ We have an acceptable loading state. We need to figure out if we\n+ \/\/ should immediately commit it or wait a bit.\n+\n+ \/\/ If we have processed new updates during this render, we may now\n+ \/\/ have a new loading state ready. We want to ensure that we commit\n+ \/\/ that as soon as possible.\n+ const hasNotProcessedNewUpdates =\n+ workInProgressRootLatestProcessedExpirationTime === Sync;\n+ if (\n+ hasNotProcessedNewUpdates &&\n+ \/\/ do not delay if we're inside an act() scope\n+ !(\n+ __DEV__ &&\n+ flushSuspenseFallbacksInTests &&\n+ IsThisRendererActing.current\n+ )\n+ ) {\n+ \/\/ If we have not processed any new updates during this pass, then\n+ \/\/ this is either a retry of an existing fallback state or a\n+ \/\/ hidden tree. Hidden trees shouldn't be batched with other work\n+ \/\/ and after that's fixed it can only be a retry. We're going to\n+ \/\/ throttle committing retries so that we don't show too many\n+ \/\/ loading states too quickly.\n+ let msUntilTimeout =\n+ globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();\n+ \/\/ Don't bother with a very short suspense time.\n+ if (msUntilTimeout > 10) {\n+ if (workInProgressRootHasPendingPing) {\n+ const lastPingedTime = root.lastPingedTime;\n+ if (\n+ lastPingedTime === NoWork ||\n+ lastPingedTime >= expirationTime\n+ ) {\n+ \/\/ This render was pinged but we didn't get to restart\n+ \/\/ earlier so try restarting now instead.\n+ root.lastPingedTime = expirationTime;\n+ prepareFreshStack(root, expirationTime);\n+ break;\n+ }\n+ }\n+\n+ const nextTime = getNextRootExpirationTimeToWorkOn(root);\n+ if (nextTime !== NoWork && nextTime !== expirationTime) {\n+ \/\/ There's additional work on this root.\n+ break;\n+ }\n+ if (\n+ lastSuspendedTime !== NoWork &&\n+ lastSuspendedTime !== expirationTime\n+ ) {\n+ \/\/ We should prefer to render the fallback of at the last\n+ \/\/ suspended level. Ping the last suspended level to try\n+ \/\/ rendering it again.\n+ root.lastPingedTime = lastSuspendedTime;\n+ break;\n+ }\n+\n+ \/\/ The render is suspended, it hasn't timed out, and there's no\n+ \/\/ lower priority work to do. Instead of committing the fallback\n+ \/\/ immediately, wait for more data to arrive.\n+ root.timeoutHandle = scheduleTimeout(\n+ commitRoot.bind(null, root),\n+ msUntilTimeout,\n+ );\n+ break;\n+ }\n+ }\n+ \/\/ The work expired. Commit immediately.\n+ commitRoot(root);\n+ break;\n+ }\n+ case RootSuspendedWithDelay: {\n+ markRootSuspendedAtTime(root, expirationTime);\n+ const lastSuspendedTime = root.lastSuspendedTime;\n+ if (expirationTime === lastSuspendedTime) {\n+ root.nextKnownPendingLevel = getRemainingExpirationTime(\n+ finishedWork,\n+ );\n+ }\n+ flushSuspensePriorityWarningInDEV();\n+\n+ if (\n+ \/\/ do not delay if we're inside an act() scope\n+ !(\n+ __DEV__ &&\n+ flushSuspenseFallbacksInTests &&\n+ IsThisRendererActing.current\n+ )\n+ ) {\n+ \/\/ We're suspended in a state that should be avoided. We'll try to\n+ \/\/ avoid committing it for as long as the timeouts let us.\n+ if (workInProgressRootHasPendingPing) {\n+ const lastPingedTime = root.lastPingedTime;\n+ if (\n+ lastPingedTime === NoWork ||\n+ lastPingedTime >= expirationTime\n+ ) {\n+ \/\/ This render was pinged but we didn't get to restart earlier\n+ \/\/ so try restarting now instead.\n+ root.lastPingedTime = expirationTime;\n+ prepareFreshStack(root, expirationTime);\n+ break;\n+ }\n+ }\n+\n+ const nextTime = getNextRootExpirationTimeToWorkOn(root);\n+ if (nextTime !== NoWork && nextTime !== expirationTime) {\n+ \/\/ There's additional work on this root.\n+ break;\n+ }\n+ if (\n+ lastSuspendedTime !== NoWork &&\n+ lastSuspendedTime !== expirationTime\n+ ) {\n+ \/\/ We should prefer to render the fallback of at the last\n+ \/\/ suspended level. Ping the last suspended level to try\n+ \/\/ rendering it again.\n+ root.lastPingedTime = lastSuspendedTime;\n+ break;\n+ }\n+\n+ let msUntilTimeout;\n+ if (workInProgressRootLatestSuspenseTimeout !== Sync) {\n+ \/\/ We have processed a suspense config whose expiration time we\n+ \/\/ can use as the timeout.\n+ msUntilTimeout =\n+ expirationTimeToMs(workInProgressRootLatestSuspenseTimeout) -\n+ now();\n+ } else if (\n+ workInProgressRootLatestProcessedExpirationTime === Sync\n+ ) {\n+ \/\/ This should never normally happen because only new updates\n+ \/\/ cause delayed states, so we should have processed something.\n+ \/\/ However, this could also happen in an offscreen tree.\n+ msUntilTimeout = 0;\n+ } else {\n+ \/\/ If we don't have a suspense config, we're going to use a\n+ \/\/ heuristic to determine how long we can suspend.\n+ const eventTimeMs: number = inferTimeFromExpirationTime(\n+ workInProgressRootLatestProcessedExpirationTime,\n+ );\n+ const currentTimeMs = now();\n+ const timeUntilExpirationMs =\n+ expirationTimeToMs(expirationTime) - currentTimeMs;\n+ let timeElapsed = currentTimeMs - eventTimeMs;\n+ if (timeElapsed < 0) {\n+ \/\/ We get this wrong some time since we estimate the time.\n+ timeElapsed = 0;\n+ }\n+\n+ msUntilTimeout = jnd(timeElapsed) - timeElapsed;\n+\n+ \/\/ Clamp the timeout to the expiration time. TODO: Once the\n+ \/\/ event time is exact instead of inferred from expiration time\n+ \/\/ we don't need this.\n+ if (timeUntilExpirationMs < msUntilTimeout) {\n+ msUntilTimeout = timeUntilExpirationMs;\n+ }\n+ }\n+\n+ \/\/ Don't bother with a very short suspense time.\n+ if (msUntilTimeout > 10) {\n+ \/\/ The render is suspended, it hasn't timed out, and there's no\n+ \/\/ lower priority work to do. Instead of committing the fallback\n+ \/\/ immediately, wait for more data to arrive.\n+ root.timeoutHandle = scheduleTimeout(\n+ commitRoot.bind(null, root),\n+ msUntilTimeout,\n+ );\n+ break;\n+ }\n+ }\n+ \/\/ The work expired. Commit immediately.\n+ commitRoot(root);\n+ break;\n+ }\n+ case RootCompleted: {\n+ \/\/ The work completed. Ready to commit.\n+ if (\n+ \/\/ do not delay if we're inside an act() scope\n+ !(\n+ __DEV__ &&\n+ flushSuspenseFallbacksInTests &&\n+ IsThisRendererActing.current\n+ ) &&\n+ workInProgressRootLatestProcessedExpirationTime !== Sync &&\n+ workInProgressRootCanSuspendUsingConfig !== null\n+ ) {\n+ \/\/ If we have exceeded the minimum loading delay, which probably\n+ \/\/ means we have shown a spinner already, we might have to suspend\n+ \/\/ a bit longer to ensure that the spinner is shown for\n+ \/\/ enough time.\n+ const msUntilTimeout = computeMsUntilSuspenseLoadingDelay(\n+ workInProgressRootLatestProcessedExpirationTime,\n+ expirationTime,\n+ workInProgressRootCanSuspendUsingConfig,\n+ );\n+ if (msUntilTimeout > 10) {\n+ markRootSuspendedAtTime(root, expirationTime);\n+ root.timeoutHandle = scheduleTimeout(\n+ commitRoot.bind(null, root),\n+ msUntilTimeout,\n+ );\n+ break;\n+ }\n+ }\n+ commitRoot(root);\n+ break;\n+ }\n+ case RootLocked: {\n+ \/\/ This root has a lock that prevents it from committing. Exit. If\n+ \/\/ we begin work on the root again, without any intervening updates,\n+ \/\/ it will finish without doing additional work.\n+ markRootSuspendedAtTime(root, expirationTime);\n+ break;\n+ }\n+ default: {\n+ invariant(false, 'Unknown root exit status.');\n+ }\n+ }\n+ }\n+ \/\/ Before exiting, make sure there's a callback scheduled for the\n+ \/\/ pending level. This is intentionally duplicated in the `catch` block,\n+ \/\/ instead of using `finally`, because it needs to happen before we\n+ \/\/ possibly return a continuation, and we can't return in the `finally`\n+ \/\/ block without suppressing a potential error.\n+ ensureRootIsScheduled(root);\n+ if (root.callbackNode === originalCallbackNode) {\n+ \/\/ The task node scheduled for this root is the same one that's\n+ \/\/ currently executed. Need to return a continuation.\n+ return performConcurrentWorkOnRoot.bind(null, root);\n+ }\n+ } catch (error) {\n+ ensureRootIsScheduled(root);\n+ throw error;\n+ }\n+ }\n+ return null;\n+}\n+\n+\/\/ This is the entry point for synchronous tasks that don't go\n+\/\/ through Scheduler\n+function performSyncWorkOnRoot(root) {\n+ \/\/ Check if there's expired work on this root. Otherwise, render at Sync.\n+ const lastExpiredTime = root.lastExpiredTime;\n+ const expirationTime = lastExpiredTime !== NoWork ? lastExpiredTime : Sync;\n try {\n- continuation = callback(isSync);\n- if (continuation !== null) {\n- return runRootCallback.bind(null, root, continuation);\n+ if (root.finishedExpirationTime === expirationTime) {\n+ \/\/ There's already a pending commit at this expiration time.\n+ \/\/ TODO: This is poorly factored. This case only exists for the\n+ \/\/ batch.commit() API.\n+ commitRoot(root);\n } else {\n- return null;\n+ renderRoot(root, expirationTime, true);\n+ invariant(\n+ workInProgressRootExitStatus !== RootIncomplete,\n+ 'Cannot commit an incomplete root. This error is likely caused by a ' +\n+ 'bug in React. Please file an issue.',\n+ );\n+\n+ \/\/ We now have a consistent tree. The next step is either to commit it,\n+ \/\/ or, if something suspended, wait to commit it after a timeout.\n+ stopFinishedWorkLoopTimer();\n+\n+ root.finishedWork = ((root.current.alternate: any): Fiber);\n+ root.finishedExpirationTime = expirationTime;\n+\n+ resolveLocksOnRoot(root, expirationTime);\n+ if (workInProgressRootExitStatus === RootLocked) {\n+ \/\/ This root has a lock that prevents it from committing. Exit. If we\n+ \/\/ begin work on the root again, without any intervening updates, it\n+ \/\/ will finish without doing additional work.\n+ markRootSuspendedAtTime(root, expirationTime);\n+ } else {\n+ \/\/ Set this to null to indicate there's no in-progress render.\n+ workInProgressRoot = null;\n+\n+ if (__DEV__) {\n+ if (\n+ workInProgressRootExitStatus === RootSuspended ||\n+ workInProgressRootExitStatus === RootSuspendedWithDelay\n+ ) {\n+ flushSuspensePriorityWarningInDEV();\n+ }\n+ }\n+ commitRoot(root);\n+ }\n }\n } finally {\n- \/\/ If the callback exits without returning a continuation, remove the\n- \/\/ corresponding callback node from the root. Unless the callback node\n- \/\/ has changed, which implies that it was already cancelled by a high\n- \/\/ priority update.\n- if (continuation === null && prevCallbackNode === root.callbackNode) {\n- root.callbackNode = null;\n- root.callbackExpirationTime = NoWork;\n- }\n+ \/\/ Before exiting, make sure there's a callback scheduled for the\n+ \/\/ pending level.\n+ ensureRootIsScheduled(root);\n }\n+ return null;\n }\n \n export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {\n@@ -588,7 +1009,8 @@ export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {\n 'means you attempted to commit from inside a lifecycle method.',\n );\n }\n- scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));\n+ markRootExpiredAtTime(root, expirationTime);\n+ ensureRootIsScheduled(root);\n flushSyncCallbackQueue();\n }\n \n@@ -630,9 +1052,7 @@ function resolveLocksOnRoot(root: FiberRoot, expirationTime: ExpirationTime) {\n firstBatch._onComplete();\n return null;\n });\n- return true;\n- } else {\n- return false;\n+ workInProgressRootExitStatus = RootLocked;\n }\n }\n \n@@ -657,7 +1077,8 @@ function flushPendingDiscreteUpdates() {\n const roots = rootsWithPendingDiscreteUpdates;\n rootsWithPendingDiscreteUpdates = null;\n roots.forEach((expirationTime, root) => {\n- scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));\n+ markRootExpiredAtTime(root, expirationTime);\n+ ensureRootIsScheduled(root);\n });\n \/\/ Now flush the immediate queue.\n flushSyncCallbackQueue();\n@@ -789,6 +1210,7 @@ function prepareFreshStack(root, expirationTime) {\n workInProgressRootLatestProcessedExpirationTime = Sync;\n workInProgressRootLatestSuspenseTimeout = Sync;\n workInProgressRootCanSuspendUsingConfig = null;\n+ workInProgressRootNextUnprocessedUpdateTime = NoWork;\n workInProgressRootHasPendingPing = false;\n \n if (enableSchedulerTracing) {\n@@ -801,30 +1223,18 @@ function prepareFreshStack(root, expirationTime) {\n }\n }\n \n+\/\/ renderRoot should only be called from inside either\n+\/\/ `performConcurrentWorkOnRoot` or `performSyncWorkOnRoot`.\n function renderRoot(\n root: FiberRoot,\n expirationTime: ExpirationTime,\n isSync: boolean,\n-): SchedulerCallback | null {\n+): void {\n invariant(\n (executionContext & (RenderContext | CommitContext)) === NoContext,\n 'Should not already be working.',\n );\n \n- if (root.firstPendingTime < expirationTime) {\n- \/\/ If there's no work left at this expiration time, exit immediately. This\n- \/\/ happens when multiple callbacks are scheduled for a single root, but an\n- \/\/ earlier callback flushes the work of a later one.\n- return null;\n- }\n-\n- if (isSync && root.finishedExpirationTime === expirationTime) {\n- \/\/ There's already a pending commit at this expiration time.\n- \/\/ TODO: This is poorly factored. This case only exists for the\n- \/\/ batch.commit() API.\n- return commitRoot.bind(null, root);\n- }\n-\n flushPassiveEffects();\n \n \/\/ If the root or expiration time have changed, throw out the existing stack\n@@ -832,26 +1242,6 @@ function renderRoot(\n if (root !== workInProgressRoot || expirationTime !== renderExpirationTime) {\n prepareFreshStack(root, expirationTime);\n startWorkOnPendingInteractions(root, expirationTime);\n- } else if (workInProgressRootExitStatus === RootSuspendedWithDelay) {\n- \/\/ We could've received an update at a lower priority while we yielded.\n- \/\/ We're suspended in a delayed state. Once we complete this render we're\n- \/\/ just going to try to recover at the last pending time anyway so we might\n- \/\/ as well start doing that eagerly.\n- \/\/ Ideally we should be able to do this even for retries but we don't yet\n- \/\/ know if we're going to process an update which wants to commit earlier,\n- \/\/ and this path happens very early so it would happen too often. Instead,\n- \/\/ for that case, we'll wait until we complete.\n- if (workInProgressRootHasPendingPing) {\n- \/\/ We have a ping at this expiration. Let's restart to see if we get unblocked.\n- prepareFreshStack(root, expirationTime);\n- } else {\n- const lastPendingTime = root.lastPendingTime;\n- if (lastPendingTime < expirationTime) {\n- \/\/ There's lower priority work. It might be unsuspended. Try rendering\n- \/\/ at that level immediately, while preserving the position in the queue.\n- return renderRoot.bind(null, root, lastPendingTime);\n- }\n- }\n }\n \n \/\/ If we have a work-in-progress fiber, it means there's still work to do\n@@ -875,34 +1265,10 @@ function renderRoot(\n \n startWorkLoopTimer(workInProgress);\n \n- \/\/ TODO: Fork renderRoot into renderRootSync and renderRootAsync\n- if (isSync) {\n- if (expirationTime !== Sync) {\n- \/\/ An async update expired. There may be other expired updates on\n- \/\/ this root. We should render all the expired work in a\n- \/\/ single batch.\n- const currentTime = requestCurrentTime();\n- if (currentTime < expirationTime) {\n- \/\/ Restart at the current time.\n- executionContext = prevExecutionContext;\n- resetContextDependencies();\n- ReactCurrentDispatcher.current = prevDispatcher;\n- if (enableSchedulerTracing) {\n- __interactionsRef.current = ((prevInteractions: any): Set<\n- Interaction,\n- >);\n- }\n- return renderRoot.bind(null, root, currentTime);\n- }\n- }\n- } else {\n- \/\/ Since we know we're in a React event, we can clear the current\n- \/\/ event time. The next update will compute a new event time.\n- currentEventTime = NoWork;\n- }\n-\n do {\n try {\n+ \/\/ TODO: This is now the only place that `isSync` is used. Consider\n+ \/\/ outlining the contents of `renderRoot`.\n if (isSync) {\n workLoopSync();\n } else {\n@@ -922,6 +1288,7 @@ function renderRoot(\n \/\/ boundary.\n prepareFreshStack(root, expirationTime);\n executionContext = prevExecutionContext;\n+ markRootSuspendedAtTime(root, expirationTime);\n throw thrownValue;\n }\n \n@@ -940,6 +1307,8 @@ function renderRoot(\n thrownValue,\n renderExpirationTime,\n );\n+ \/\/ TODO: This is not wrapped in a try-catch, so if the complete phase\n+ \/\/ throws, we won't capture it.\n workInProgress = completeUnitOfWork(sourceFiber);\n }\n } while (true);\n@@ -950,229 +1319,6 @@ function renderRoot(\n if (enableSchedulerTracing) {\n __interactionsRef.current = ((prevInteractions: any): Set);\n }\n-\n- if (workInProgress !== null) {\n- \/\/ There's still work left over. Return a continuation.\n- stopInterruptedWorkLoopTimer();\n- return renderRoot.bind(null, root, expirationTime);\n- }\n- }\n-\n- \/\/ We now have a consistent tree. The next step is either to commit it, or, if\n- \/\/ something suspended, wait to commit it after a timeout.\n- stopFinishedWorkLoopTimer();\n-\n- root.finishedWork = root.current.alternate;\n- root.finishedExpirationTime = expirationTime;\n-\n- const isLocked = resolveLocksOnRoot(root, expirationTime);\n- if (isLocked) {\n- \/\/ This root has a lock that prevents it from committing. Exit. If we begin\n- \/\/ work on the root again, without any intervening updates, it will finish\n- \/\/ without doing additional work.\n- return null;\n- }\n-\n- \/\/ Set this to null to indicate there's no in-progress render.\n- workInProgressRoot = null;\n-\n- switch (workInProgressRootExitStatus) {\n- case RootIncomplete: {\n- invariant(false, 'Should have a work-in-progress.');\n- }\n- \/\/ Flow knows about invariant, so it complains if I add a break statement,\n- \/\/ but eslint doesn't know about invariant, so it complains if I do.\n- \/\/ eslint-disable-next-line no-fallthrough\n- case RootErrored: {\n- \/\/ An error was thrown. First check if there is lower priority work\n- \/\/ scheduled on this root.\n- const lastPendingTime = root.lastPendingTime;\n- if (lastPendingTime < expirationTime) {\n- \/\/ There's lower priority work. Before raising the error, try rendering\n- \/\/ at the lower priority to see if it fixes it. Use a continuation to\n- \/\/ maintain the existing priority and position in the queue.\n- return renderRoot.bind(null, root, lastPendingTime);\n- }\n- if (!isSync) {\n- \/\/ If we're rendering asynchronously, it's possible the error was\n- \/\/ caused by tearing due to a mutation during an event. Try rendering\n- \/\/ one more time without yiedling to events.\n- prepareFreshStack(root, expirationTime);\n- scheduleSyncCallback(renderRoot.bind(null, root, expirationTime));\n- return null;\n- }\n- \/\/ If we're already rendering synchronously, commit the root in its\n- \/\/ errored state.\n- return commitRoot.bind(null, root);\n- }\n- case RootSuspended: {\n- flushSuspensePriorityWarningInDEV();\n-\n- \/\/ We have an acceptable loading state. We need to figure out if we should\n- \/\/ immediately commit it or wait a bit.\n-\n- \/\/ If we have processed new updates during this render, we may now have a\n- \/\/ new loading state ready. We want to ensure that we commit that as soon as\n- \/\/ possible.\n- const hasNotProcessedNewUpdates =\n- workInProgressRootLatestProcessedExpirationTime === Sync;\n- if (\n- hasNotProcessedNewUpdates &&\n- !isSync &&\n- \/\/ do not delay if we're inside an act() scope\n- !(\n- __DEV__ &&\n- flushSuspenseFallbacksInTests &&\n- IsThisRendererActing.current\n- )\n- ) {\n- \/\/ If we have not processed any new updates during this pass, then this is\n- \/\/ either a retry of an existing fallback state or a hidden tree.\n- \/\/ Hidden trees shouldn't be batched with other work and after that's\n- \/\/ fixed it can only be a retry.\n- \/\/ We're going to throttle committing retries so that we don't show too\n- \/\/ many loading states too quickly.\n- let msUntilTimeout =\n- globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();\n- \/\/ Don't bother with a very short suspense time.\n- if (msUntilTimeout > 10) {\n- if (workInProgressRootHasPendingPing) {\n- \/\/ This render was pinged but we didn't get to restart earlier so try\n- \/\/ restarting now instead.\n- prepareFreshStack(root, expirationTime);\n- return renderRoot.bind(null, root, expirationTime);\n- }\n- const lastPendingTime = root.lastPendingTime;\n- if (lastPendingTime < expirationTime) {\n- \/\/ There's lower priority work. It might be unsuspended. Try rendering\n- \/\/ at that level.\n- return renderRoot.bind(null, root, lastPendingTime);\n- }\n- \/\/ The render is suspended, it hasn't timed out, and there's no lower\n- \/\/ priority work to do. Instead of committing the fallback\n- \/\/ immediately, wait for more data to arrive.\n- root.timeoutHandle = scheduleTimeout(\n- commitRoot.bind(null, root),\n- msUntilTimeout,\n- );\n- return null;\n- }\n- }\n- \/\/ The work expired. Commit immediately.\n- return commitRoot.bind(null, root);\n- }\n- case RootSuspendedWithDelay: {\n- flushSuspensePriorityWarningInDEV();\n-\n- if (\n- !isSync &&\n- \/\/ do not delay if we're inside an act() scope\n- !(\n- __DEV__ &&\n- flushSuspenseFallbacksInTests &&\n- IsThisRendererActing.current\n- )\n- ) {\n- \/\/ We're suspended in a state that should be avoided. We'll try to avoid committing\n- \/\/ it for as long as the timeouts let us.\n- if (workInProgressRootHasPendingPing) {\n- \/\/ This render was pinged but we didn't get to restart earlier so try\n- \/\/ restarting now instead.\n- prepareFreshStack(root, expirationTime);\n- return renderRoot.bind(null, root, expirationTime);\n- }\n- const lastPendingTime = root.lastPendingTime;\n- if (lastPendingTime < expirationTime) {\n- \/\/ There's lower priority work. It might be unsuspended. Try rendering\n- \/\/ at that level immediately.\n- return renderRoot.bind(null, root, lastPendingTime);\n- }\n-\n- let msUntilTimeout;\n- if (workInProgressRootLatestSuspenseTimeout !== Sync) {\n- \/\/ We have processed a suspense config whose expiration time we can use as\n- \/\/ the timeout.\n- msUntilTimeout =\n- expirationTimeToMs(workInProgressRootLatestSuspenseTimeout) - now();\n- } else if (workInProgressRootLatestProcessedExpirationTime === Sync) {\n- \/\/ This should never normally happen because only new updates cause\n- \/\/ delayed states, so we should have processed something. However,\n- \/\/ this could also happen in an offscreen tree.\n- msUntilTimeout = 0;\n- } else {\n- \/\/ If we don't have a suspense config, we're going to use a heuristic to\n- \/\/ determine how long we can suspend.\n- const eventTimeMs: number = inferTimeFromExpirationTime(\n- workInProgressRootLatestProcessedExpirationTime,\n- );\n- const currentTimeMs = now();\n- const timeUntilExpirationMs =\n- expirationTimeToMs(expirationTime) - currentTimeMs;\n- let timeElapsed = currentTimeMs - eventTimeMs;\n- if (timeElapsed < 0) {\n- \/\/ We get this wrong some time since we estimate the time.\n- timeElapsed = 0;\n- }\n-\n- msUntilTimeout = jnd(timeElapsed) - timeElapsed;\n-\n- \/\/ Clamp the timeout to the expiration time.\n- \/\/ TODO: Once the event time is exact instead of inferred from expiration time\n- \/\/ we don't need this.\n- if (timeUntilExpirationMs < msUntilTimeout) {\n- msUntilTimeout = timeUntilExpirationMs;\n- }\n- }\n-\n- \/\/ Don't bother with a very short suspense time.\n- if (msUntilTimeout > 10) {\n- \/\/ The render is suspended, it hasn't timed out, and there's no lower\n- \/\/ priority work to do. Instead of committing the fallback\n- \/\/ immediately, wait for more data to arrive.\n- root.timeoutHandle = scheduleTimeout(\n- commitRoot.bind(null, root),\n- msUntilTimeout,\n- );\n- return null;\n- }\n- }\n- \/\/ The work expired. Commit immediately.\n- return commitRoot.bind(null, root);\n- }\n- case RootCompleted: {\n- \/\/ The work completed. Ready to commit.\n- if (\n- !isSync &&\n- \/\/ do not delay if we're inside an act() scope\n- !(\n- __DEV__ &&\n- flushSuspenseFallbacksInTests &&\n- IsThisRendererActing.current\n- ) &&\n- workInProgressRootLatestProcessedExpirationTime !== Sync &&\n- workInProgressRootCanSuspendUsingConfig !== null\n- ) {\n- \/\/ If we have exceeded the minimum loading delay, which probably\n- \/\/ means we have shown a spinner already, we might have to suspend\n- \/\/ a bit longer to ensure that the spinner is shown for enough time.\n- const msUntilTimeout = computeMsUntilSuspenseLoadingDelay(\n- workInProgressRootLatestProcessedExpirationTime,\n- expirationTime,\n- workInProgressRootCanSuspendUsingConfig,\n- );\n- if (msUntilTimeout > 10) {\n- root.timeoutHandle = scheduleTimeout(\n- commitRoot.bind(null, root),\n- msUntilTimeout,\n- );\n- return null;\n- }\n- }\n- return commitRoot.bind(null, root);\n- }\n- default: {\n- invariant(false, 'Unknown root exit status.');\n- }\n }\n }\n \n@@ -1202,6 +1348,14 @@ export function markRenderEventTimeAndConfig(\n }\n }\n \n+export function markUnprocessedUpdateTime(\n+ expirationTime: ExpirationTime,\n+): void {\n+ if (expirationTime > workInProgressRootNextUnprocessedUpdateTime) {\n+ workInProgressRootNextUnprocessedUpdateTime = expirationTime;\n+ }\n+}\n+\n export function renderDidSuspend(): void {\n if (workInProgressRootExitStatus === RootIncomplete) {\n workInProgressRootExitStatus = RootSuspended;\n@@ -1215,6 +1369,22 @@ export function renderDidSuspendDelayIfPossible(): void {\n ) {\n workInProgressRootExitStatus = RootSuspendedWithDelay;\n }\n+\n+ \/\/ Check if there's a lower priority update somewhere else in the tree.\n+ if (\n+ workInProgressRootNextUnprocessedUpdateTime !== NoWork &&\n+ workInProgressRoot !== null\n+ ) {\n+ \/\/ Mark the current render as suspended, and then mark that there's a\n+ \/\/ pending update.\n+ \/\/ TODO: This should immediately interrupt the current render, instead\n+ \/\/ of waiting until the next time we yield.\n+ markRootSuspendedAtTime(workInProgressRoot, renderExpirationTime);\n+ markRootUpdatedAtTime(\n+ workInProgressRoot,\n+ workInProgressRootNextUnprocessedUpdateTime,\n+ );\n+ }\n }\n \n export function renderDidError() {\n@@ -1429,6 +1599,14 @@ function completeUnitOfWork(unitOfWork: Fiber): Fiber | null {\n return null;\n }\n \n+function getRemainingExpirationTime(fiber: Fiber) {\n+ const updateExpirationTime = fiber.expirationTime;\n+ const childExpirationTime = fiber.childExpirationTime;\n+ return updateExpirationTime > childExpirationTime\n+ ? updateExpirationTime\n+ : childExpirationTime;\n+}\n+\n function resetChildExpirationTime(completedWork: Fiber) {\n if (\n renderExpirationTime !== Never &&\n@@ -1531,23 +1709,21 @@ function commitRootImpl(root, renderPriorityLevel) {\n \/\/ So we can clear these now to allow a new callback to be scheduled.\n root.callbackNode = null;\n root.callbackExpirationTime = NoWork;\n+ root.callbackPriority = NoPriority;\n+ root.nextKnownPendingLevel = NoWork;\n \n startCommitTimer();\n \n \/\/ Update the first and last pending times on this root. The new first\n \/\/ pending time is whatever is left on the root fiber.\n- const updateExpirationTimeBeforeCommit = finishedWork.expirationTime;\n- const childExpirationTimeBeforeCommit = finishedWork.childExpirationTime;\n- const firstPendingTimeBeforeCommit =\n- childExpirationTimeBeforeCommit > updateExpirationTimeBeforeCommit\n- ? childExpirationTimeBeforeCommit\n- : updateExpirationTimeBeforeCommit;\n- root.firstPendingTime = firstPendingTimeBeforeCommit;\n- if (firstPendingTimeBeforeCommit < root.lastPendingTime) {\n- \/\/ This usually means we've finished all the work, but it can also happen\n- \/\/ when something gets downprioritized during render, like a hidden tree.\n- root.lastPendingTime = firstPendingTimeBeforeCommit;\n- }\n+ const remainingExpirationTimeBeforeCommit = getRemainingExpirationTime(\n+ finishedWork,\n+ );\n+ markRootFinishedAtTime(\n+ root,\n+ expirationTime,\n+ remainingExpirationTimeBeforeCommit,\n+ );\n \n if (root === workInProgressRoot) {\n \/\/ We can reset these now that they are finished.\n@@ -1749,12 +1925,6 @@ function commitRootImpl(root, renderPriorityLevel) {\n \/\/ Check if there's remaining work on this root\n const remainingExpirationTime = root.firstPendingTime;\n if (remainingExpirationTime !== NoWork) {\n- const currentTime = requestCurrentTime();\n- const priorityLevel = inferPriorityFromExpirationTime(\n- currentTime,\n- remainingExpirationTime,\n- );\n-\n if (enableSchedulerTracing) {\n if (spawnedWorkDuringRender !== null) {\n const expirationTimes = spawnedWorkDuringRender;\n@@ -1767,9 +1937,8 @@ function commitRootImpl(root, renderPriorityLevel) {\n );\n }\n }\n+ schedulePendingInteractions(root, remainingExpirationTime);\n }\n-\n- scheduleCallbackForRoot(root, priorityLevel, remainingExpirationTime);\n } else {\n \/\/ If there's no remaining work, we can clear the set of already failed\n \/\/ error boundaries.\n@@ -1786,8 +1955,6 @@ function commitRootImpl(root, renderPriorityLevel) {\n }\n }\n \n- onCommitRoot(finishedWork.stateNode, expirationTime);\n-\n if (remainingExpirationTime === Sync) {\n \/\/ Count the number of times the root synchronously re-renders without\n \/\/ finishing. If there are too many, it indicates an infinite update loop.\n@@ -1801,6 +1968,12 @@ function commitRootImpl(root, renderPriorityLevel) {\n nestedUpdateCount = 0;\n }\n \n+ onCommitRoot(finishedWork.stateNode, expirationTime);\n+\n+ \/\/ Always call this before exiting `commitRoot`, to ensure that any\n+ \/\/ additional work on this root is scheduled.\n+ ensureRootIsScheduled(root);\n+\n if (hasUncaughtError) {\n hasUncaughtError = false;\n const error = firstUncaughtError;\n@@ -2065,7 +2238,8 @@ function captureCommitPhaseErrorOnRoot(\n enqueueUpdate(rootFiber, update);\n const root = markUpdateTimeFromFiberToRoot(rootFiber, Sync);\n if (root !== null) {\n- scheduleCallbackForRoot(root, ImmediatePriority, Sync);\n+ ensureRootIsScheduled(root);\n+ schedulePendingInteractions(root, Sync);\n }\n }\n \n@@ -2100,7 +2274,8 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {\n enqueueUpdate(fiber, update);\n const root = markUpdateTimeFromFiberToRoot(fiber, Sync);\n if (root !== null) {\n- scheduleCallbackForRoot(root, ImmediatePriority, Sync);\n+ ensureRootIsScheduled(root);\n+ schedulePendingInteractions(root, Sync);\n }\n return;\n }\n@@ -2152,20 +2327,19 @@ export function pingSuspendedRoot(\n return;\n }\n \n- const lastPendingTime = root.lastPendingTime;\n- if (lastPendingTime < suspendedTime) {\n+ if (!isRootSuspendedAtTime(root, suspendedTime)) {\n \/\/ The root is no longer suspended at this time.\n return;\n }\n \n- const pingTime = root.pingTime;\n- if (pingTime !== NoWork && pingTime < suspendedTime) {\n+ const lastPingedTime = root.lastPingedTime;\n+ if (lastPingedTime !== NoWork && lastPingedTime < suspendedTime) {\n \/\/ There's already a lower priority ping scheduled.\n return;\n }\n \n \/\/ Mark the time at which this ping was scheduled.\n- root.pingTime = suspendedTime;\n+ root.lastPingedTime = suspendedTime;\n \n if (root.finishedExpirationTime === suspendedTime) {\n \/\/ If there's a pending fallback waiting to commit, throw it away.\n@@ -2173,12 +2347,8 @@ export function pingSuspendedRoot(\n root.finishedWork = null;\n }\n \n- const currentTime = requestCurrentTime();\n- const priorityLevel = inferPriorityFromExpirationTime(\n- currentTime,\n- suspendedTime,\n- );\n- scheduleCallbackForRoot(root, priorityLevel, suspendedTime);\n+ ensureRootIsScheduled(root);\n+ schedulePendingInteractions(root, suspendedTime);\n }\n \n function retryTimedOutBoundary(\n@@ -2189,9 +2359,9 @@ function retryTimedOutBoundary(\n \/\/ previously was rendered in its fallback state. One of the promises that\n \/\/ suspended it has resolved, which means at least part of the tree was\n \/\/ likely unblocked. Try rendering again, at a new expiration time.\n- const currentTime = requestCurrentTime();\n if (retryTime === Never) {\n const suspenseConfig = null; \/\/ Retries don't carry over the already committed update.\n+ const currentTime = requestCurrentTime();\n retryTime = computeExpirationForFiber(\n currentTime,\n boundaryFiber,\n@@ -2199,10 +2369,10 @@ function retryTimedOutBoundary(\n );\n }\n \/\/ TODO: Special case idle priority?\n- const priorityLevel = inferPriorityFromExpirationTime(currentTime, retryTime);\n const root = markUpdateTimeFromFiberToRoot(boundaryFiber, retryTime);\n if (root !== null) {\n- scheduleCallbackForRoot(root, priorityLevel, retryTime);\n+ ensureRootIsScheduled(root);\n+ schedulePendingInteractions(root, retryTime);\n }\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactUpdateQueue.js b\/packages\/react-reconciler\/src\/ReactUpdateQueue.js\nindex 4356d445c1..bd3b73c5e9 100644\n--- a\/packages\/react-reconciler\/src\/ReactUpdateQueue.js\n+++ b\/packages\/react-reconciler\/src\/ReactUpdateQueue.js\n@@ -103,7 +103,10 @@ import {\n } from 'shared\/ReactFeatureFlags';\n \n import {StrictMode} from '.\/ReactTypeOfMode';\n-import {markRenderEventTimeAndConfig} from '.\/ReactFiberWorkLoop';\n+import {\n+ markRenderEventTimeAndConfig,\n+ markUnprocessedUpdateTime,\n+} from '.\/ReactFiberWorkLoop';\n \n import invariant from 'shared\/invariant';\n import warningWithoutStack from 'shared\/warningWithoutStack';\n@@ -580,6 +583,7 @@ export function processUpdateQueue(\n \/\/ dealt with the props. Context in components that specify\n \/\/ shouldComponentUpdate is tricky; but we'll have to account for\n \/\/ that regardless.\n+ markUnprocessedUpdateTime(newExpirationTime);\n workInProgress.expirationTime = newExpirationTime;\n workInProgress.memoizedState = resultState;\n \ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\nindex 9020e3d739..094758594d 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js\n@@ -243,11 +243,20 @@ describe('ReactIncrementalErrorHandling', () => {\n \/\/ This update is in a separate batch\n ReactNoop.render(, onCommit);\n \n- expect(Scheduler).toFlushAndYield([\n+ expect(Scheduler).toFlushAndYieldThrough([\n \/\/ The first render fails. But because there's a lower priority pending\n \/\/ update, it doesn't throw.\n 'error',\n- \/\/ Now we retry at the lower priority. This time it succeeds.\n+ ]);\n+\n+ \/\/ React will try to recover by rendering all the pending updates in a\n+ \/\/ single batch, synchronously. This time it succeeds.\n+ \/\/\n+ \/\/ This tells Scheduler to render a single unit of work. Because the render\n+ \/\/ to recover from the error is synchronous, this should be enough to\n+ \/\/ finish the rest of the work.\n+ Scheduler.unstable_flushNumberOfYields(1);\n+ expect(Scheduler).toHaveYielded([\n 'success',\n \/\/ Nothing commits until the second update completes.\n 'commit',\n@@ -256,54 +265,80 @@ describe('ReactIncrementalErrorHandling', () => {\n expect(ReactNoop.getChildren()).toEqual([span('Everything is fine.')]);\n });\n \n- it('on error, retries at a lower priority using the expiration of higher priority', () => {\n- class Parent extends React.Component {\n- state = {hideChild: false};\n- componentDidUpdate() {\n- Scheduler.unstable_yieldValue('commit: ' + this.state.hideChild);\n- }\n- render() {\n- if (this.state.hideChild) {\n- Scheduler.unstable_yieldValue('(empty)');\n- return ;\n- }\n- return ;\n+ it('does not include offscreen work when retrying after an error', () => {\n+ function App(props) {\n+ if (props.isBroken) {\n+ Scheduler.unstable_yieldValue('error');\n+ throw new Error('Oops!');\n }\n+ Scheduler.unstable_yieldValue('success');\n+ return (\n+ <>\n+ Everything is fine\n+

\n+

Offscreen content<\/div>\n+ <\/div>\n+ <\/>\n+ );\n }\n \n- function Child(props) {\n- if (props.isBroken) {\n- Scheduler.unstable_yieldValue('Error!');\n- throw new Error('Error!');\n- }\n- Scheduler.unstable_yieldValue('Child');\n- return ;\n+ function onCommit() {\n+ Scheduler.unstable_yieldValue('commit');\n+ }\n+\n+ function interrupt() {\n+ ReactNoop.flushSync(() => {\n+ ReactNoop.renderToRootWithID(null, 'other-root');\n+ });\n }\n \n- \/\/ Initial mount\n- const parent = React.createRef(null);\n- ReactNoop.render();\n- expect(Scheduler).toFlushAndYield(['Child']);\n- expect(ReactNoop.getChildren()).toEqual([span('Child')]);\n+ ReactNoop.render(, onCommit);\n+ Scheduler.unstable_advanceTime(1000);\n+ expect(Scheduler).toFlushAndYieldThrough(['error']);\n+ interrupt();\n \n- \/\/ Schedule a low priority update to hide the child\n- parent.current.setState({hideChild: true});\n+ expect(ReactNoop).toMatchRenderedOutput(null);\n \n- \/\/ Before the low priority update is flushed, synchronously trigger an\n- \/\/ error in the child.\n- ReactNoop.flushSync(() => {\n- ReactNoop.render();\n- });\n+ \/\/ This update is in a separate batch\n+ ReactNoop.render(, onCommit);\n+\n+ expect(Scheduler).toFlushAndYieldThrough([\n+ \/\/ The first render fails. But because there's a lower priority pending\n+ \/\/ update, it doesn't throw.\n+ 'error',\n+ ]);\n+\n+ \/\/ React will try to recover by rendering all the pending updates in a\n+ \/\/ single batch, synchronously. This time it succeeds.\n+ \/\/\n+ \/\/ This tells Scheduler to render a single unit of work. Because the render\n+ \/\/ to recover from the error is synchronous, this should be enough to\n+ \/\/ finish the rest of the work.\n+ Scheduler.unstable_flushNumberOfYields(1);\n expect(Scheduler).toHaveYielded([\n- \/\/ First the sync update triggers an error\n- 'Error!',\n- \/\/ Because there's a pending low priority update, we restart at the\n- \/\/ lower priority. This hides the children, suppressing the error.\n- '(empty)',\n- \/\/ Now the tree can commit.\n- 'commit: true',\n+ 'success',\n+ \/\/ Nothing commits until the second update completes.\n+ 'commit',\n+ 'commit',\n ]);\n- expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);\n+ \/\/ This should not include the offscreen content\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+ Everything is fine\n+

\n+ <\/>,\n+ );\n+\n+ \/\/ The offscreen content finishes in a subsequent render\n+ expect(Scheduler).toFlushAndYield([]);\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+ Everything is fine\n+

\n+

Offscreen content<\/div>\n+ <\/div>\n+ <\/>,\n+ );\n });\n \n it('retries one more time before handling error', () => {\n@@ -346,10 +381,6 @@ describe('ReactIncrementalErrorHandling', () => {\n expect(ReactNoop.getChildren()).toEqual([]);\n });\n \n- \/\/ TODO: This is currently unobservable, but will be once we lift renderRoot\n- \/\/ and commitRoot into the renderer.\n- \/\/ it(\"does not retry synchronously if there's an update between complete and commit\");\n-\n it('calls componentDidCatch multiple times for multiple errors', () => {\n let id = 0;\n class BadMount extends React.Component {\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspense-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspense-test.internal.js\nindex 18a8f751b8..c3a7587b92 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspense-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspense-test.internal.js\n@@ -263,6 +263,274 @@ describe('ReactSuspense', () => {\n expect(root).toMatchRenderedOutput('AsyncAfter SuspenseSibling');\n });\n \n+ it(\n+ 'interrupts current render if something already suspended with a ' +\n+ \"delay, and then subsequently there's a lower priority update\",\n+ () => {\n+ const root = ReactTestRenderer.create(\n+ <>\n+ } \/>\n+ \n+ <\/>,\n+ {\n+ unstable_isConcurrent: true,\n+ },\n+ );\n+ expect(Scheduler).toFlushAndYield(['Initial']);\n+ expect(root).toMatchRenderedOutput('Initial');\n+\n+ \/\/ The update will suspend.\n+ root.update(\n+ <>\n+ }>\n+ \n+ <\/Suspense>\n+ \n+ \n+ <\/>,\n+ );\n+\n+ \/\/ Yield past the Suspense boundary but don't complete the last sibling.\n+ expect(Scheduler).toFlushAndYieldThrough([\n+ 'Suspend! [Async]',\n+ 'Loading...',\n+ 'After Suspense',\n+ ]);\n+\n+ \/\/ Receives a lower priority update before the current render phase\n+ \/\/ has completed.\n+ Scheduler.unstable_advanceTime(1000);\n+ root.update(\n+ <>\n+ } \/>\n+ \n+ <\/>,\n+ );\n+ expect(Scheduler).toHaveYielded([]);\n+ expect(root).toMatchRenderedOutput('Initial');\n+\n+ \/\/ Render the update, instead of continuing\n+ expect(Scheduler).toFlushAndYield(['Updated']);\n+ expect(root).toMatchRenderedOutput('Updated');\n+ },\n+ );\n+\n+ it(\n+ 'interrupts current render when something suspends with a ' +\n+ \"delay and we've already skipped over a lower priority update in \" +\n+ 'a parent',\n+ () => {\n+ function interrupt() {\n+ \/\/ React has a heuristic to batch all updates that occur within the same\n+ \/\/ event. This is a trick to circumvent that heuristic.\n+ ReactTestRenderer.create('whatever');\n+ }\n+\n+ function App({shouldSuspend, step}) {\n+ return (\n+ <>\n+ \n+ }>\n+ {shouldSuspend ? : null}\n+ <\/Suspense>\n+ \n+ \n+ <\/>\n+ );\n+ }\n+\n+ const root = ReactTestRenderer.create(null, {\n+ unstable_isConcurrent: true,\n+ });\n+\n+ root.update();\n+ expect(Scheduler).toFlushAndYield(['A0', 'B0', 'C0']);\n+ expect(root).toMatchRenderedOutput('A0B0C0');\n+\n+ \/\/ This update will suspend.\n+ root.update();\n+\n+ \/\/ Need to move into the next async bucket.\n+ Scheduler.unstable_advanceTime(1000);\n+ \/\/ Do a bit of work, then interrupt to trigger a restart.\n+ expect(Scheduler).toFlushAndYieldThrough(['A1']);\n+ interrupt();\n+\n+ \/\/ Schedule another update. This will have lower priority because of\n+ \/\/ the interrupt trick above.\n+ root.update();\n+\n+ expect(Scheduler).toFlushAndYieldThrough([\n+ \/\/ Should have restarted the first update, because of the interruption\n+ 'A1',\n+ 'Suspend! [Async]',\n+ 'Loading...',\n+ 'B1',\n+ ]);\n+\n+ \/\/ Should not have committed loading state\n+ expect(root).toMatchRenderedOutput('A0B0C0');\n+\n+ \/\/ After suspending, should abort the first update and switch to the\n+ \/\/ second update. So, C1 should not appear in the log.\n+ \/\/ TODO: This should work even if React does not yield to the main\n+ \/\/ thread. Should use same mechanism as selective hydration to interrupt\n+ \/\/ the render before the end of the current slice of work.\n+ expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);\n+\n+ expect(root).toMatchRenderedOutput('A2B2C2');\n+ },\n+ );\n+\n+ it(\n+ 'interrupts current render when something suspends with a ' +\n+ \"delay and we've already bailed out lower priority update in \" +\n+ 'a parent',\n+ async () => {\n+ \/\/ This is similar to the previous test case, except this covers when\n+ \/\/ React completely bails out on the parent component, without processing\n+ \/\/ the update queue.\n+\n+ const {useState} = React;\n+\n+ function interrupt() {\n+ \/\/ React has a heuristic to batch all updates that occur within the same\n+ \/\/ event. This is a trick to circumvent that heuristic.\n+ ReactTestRenderer.create('whatever');\n+ }\n+\n+ let setShouldSuspend;\n+ function Async() {\n+ const [shouldSuspend, _setShouldSuspend] = useState(false);\n+ setShouldSuspend = _setShouldSuspend;\n+ return (\n+ <>\n+ \n+ }>\n+ {shouldSuspend ? : null}\n+ <\/Suspense>\n+ \n+ \n+ <\/>\n+ );\n+ }\n+\n+ let setShouldHideInParent;\n+ function App() {\n+ const [shouldHideInParent, _setShouldHideInParent] = useState(false);\n+ setShouldHideInParent = _setShouldHideInParent;\n+ Scheduler.unstable_yieldValue(\n+ 'shouldHideInParent: ' + shouldHideInParent,\n+ );\n+ return shouldHideInParent ? : ;\n+ }\n+\n+ const root = ReactTestRenderer.create(null, {\n+ unstable_isConcurrent: true,\n+ });\n+\n+ await ReactTestRenderer.act(async () => {\n+ root.update();\n+ expect(Scheduler).toFlushAndYield([\n+ 'shouldHideInParent: false',\n+ 'A',\n+ 'B',\n+ 'C',\n+ ]);\n+ expect(root).toMatchRenderedOutput('ABC');\n+\n+ \/\/ This update will suspend.\n+ setShouldSuspend(true);\n+\n+ \/\/ Need to move into the next async bucket.\n+ Scheduler.unstable_advanceTime(1000);\n+ \/\/ Do a bit of work, then interrupt to trigger a restart.\n+ expect(Scheduler).toFlushAndYieldThrough(['A']);\n+ interrupt();\n+ \/\/ Should not have committed loading state\n+ expect(root).toMatchRenderedOutput('ABC');\n+\n+ \/\/ Schedule another update. This will have lower priority because of\n+ \/\/ the interrupt trick above.\n+ setShouldHideInParent(true);\n+\n+ expect(Scheduler).toFlushAndYieldThrough([\n+ \/\/ Should have restarted the first update, because of the interruption\n+ 'A',\n+ 'Suspend! [Async]',\n+ 'Loading...',\n+ 'B',\n+ ]);\n+\n+ \/\/ Should not have committed loading state\n+ expect(root).toMatchRenderedOutput('ABC');\n+\n+ \/\/ After suspending, should abort the first update and switch to the\n+ \/\/ second update.\n+ expect(Scheduler).toFlushAndYield([\n+ 'shouldHideInParent: true',\n+ '(empty)',\n+ ]);\n+\n+ expect(root).toMatchRenderedOutput('(empty)');\n+ });\n+ },\n+ );\n+\n+ it(\n+ 'interrupts current render when something suspends with a ' +\n+ 'delay, and a parent received an update after it completed',\n+ () => {\n+ function App({shouldSuspend, step}) {\n+ return (\n+ <>\n+ \n+ }>\n+ {shouldSuspend ? : null}\n+ <\/Suspense>\n+ \n+ \n+ <\/>\n+ );\n+ }\n+\n+ const root = ReactTestRenderer.create(null, {\n+ unstable_isConcurrent: true,\n+ });\n+\n+ root.update();\n+ expect(Scheduler).toFlushAndYield(['A0', 'B0', 'C0']);\n+ expect(root).toMatchRenderedOutput('A0B0C0');\n+\n+ \/\/ This update will suspend.\n+ root.update();\n+ \/\/ Flush past the root, but stop before the async component.\n+ expect(Scheduler).toFlushAndYieldThrough(['A1']);\n+\n+ \/\/ Schedule an update on the root, which already completed.\n+ root.update();\n+ \/\/ We'll keep working on the existing update.\n+ expect(Scheduler).toFlushAndYieldThrough([\n+ \/\/ Now the async component suspends\n+ 'Suspend! [Async]',\n+ 'Loading...',\n+ 'B1',\n+ ]);\n+\n+ \/\/ Should not have committed loading state\n+ expect(root).toMatchRenderedOutput('A0B0C0');\n+\n+ \/\/ After suspending, should abort the first update and switch to the\n+ \/\/ second update. So, C1 should not appear in the log.\n+ \/\/ TODO: This should work even if React does not yield to the main\n+ \/\/ thread. Should use same mechanism as selective hydration to interrupt\n+ \/\/ the render before the end of the current slice of work.\n+ expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);\n+\n+ expect(root).toMatchRenderedOutput('A2B2C2');\n+ },\n+ );\n+\n it('mounts a lazy class component in non-concurrent mode', async () => {\n class Class extends React.Component {\n componentDidMount() {\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\nindex 65e672d87d..97f0f480fb 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\n@@ -494,7 +494,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n return ;\n }\n return (\n- \n+ \n \n <\/Suspense>\n );\n@@ -518,6 +518,71 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);\n });\n \n+ it('tries each subsequent level after suspending', async () => {\n+ const root = ReactNoop.createRoot();\n+\n+ function App({step, shouldSuspend}) {\n+ return (\n+ \n+ \n+ {shouldSuspend ? (\n+ \n+ ) : (\n+ \n+ )}\n+ <\/Suspense>\n+ );\n+ }\n+\n+ function interrupt() {\n+ \/\/ React has a heuristic to batch all updates that occur within the same\n+ \/\/ event. This is a trick to circumvent that heuristic.\n+ ReactNoop.flushSync(() => {\n+ ReactNoop.renderToRootWithID(null, 'other-root');\n+ });\n+ }\n+\n+ \/\/ Mount the Suspense boundary without suspending, so that the subsequent\n+ \/\/ updates suspend with a delay.\n+ await ReactNoop.act(async () => {\n+ root.render();\n+ });\n+ await advanceTimers(1000);\n+ expect(Scheduler).toHaveYielded(['Sibling', 'Step 0']);\n+\n+ \/\/ Schedule an update at several distinct expiration times\n+ await ReactNoop.act(async () => {\n+ root.render();\n+ Scheduler.unstable_advanceTime(1000);\n+ expect(Scheduler).toFlushAndYieldThrough(['Sibling']);\n+ interrupt();\n+\n+ root.render();\n+ Scheduler.unstable_advanceTime(1000);\n+ expect(Scheduler).toFlushAndYieldThrough(['Sibling']);\n+ interrupt();\n+\n+ root.render();\n+ Scheduler.unstable_advanceTime(1000);\n+ expect(Scheduler).toFlushAndYieldThrough(['Sibling']);\n+ interrupt();\n+\n+ root.render();\n+ });\n+\n+ \/\/ Should suspend at each distinct level\n+ expect(Scheduler).toHaveYielded([\n+ 'Sibling',\n+ 'Suspend! [Step 1]',\n+ 'Sibling',\n+ 'Suspend! [Step 2]',\n+ 'Sibling',\n+ 'Suspend! [Step 3]',\n+ 'Sibling',\n+ 'Step 4',\n+ ]);\n+ });\n+\n it('forces an expiration after an update times out', async () => {\n ReactNoop.render(\n \ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/__snapshots__\/ReactIncrementalPerf-test.internal.js.snap b\/packages\/react-reconciler\/src\/__tests__\/__snapshots__\/ReactIncrementalPerf-test.internal.js.snap\nindex 8667688a0b..b438a6f7e6 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/__snapshots__\/ReactIncrementalPerf-test.internal.js.snap\n+++ b\/packages\/react-reconciler\/src\/__tests__\/__snapshots__\/ReactIncrementalPerf-test.internal.js.snap\n@@ -422,7 +422,10 @@ exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] =\n `;\n \n exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `\n-\"⚛ (Committing Changes)\n+\"⚛ (React Tree Reconciliation: Completed Root)\n+ ⚛ Foo [mount]\n+\n+⚛ (Committing Changes)\n ⚛ (Committing Snapshot Effects: 0 Total)\n ⚛ (Committing Host Effects: 1 Total)\n ⚛ (Calling Lifecycle Methods: 0 Total)\n","files":[{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberExpirationTime.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactUpdateQueue.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactIncrementalErrorHandling-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactSuspense-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/__snapshots__\/ReactIncrementalPerf-test.internal.js.snap"}]}

dillon1000/react

Files changed