@samitouri / QOS-React-2 / commits / 44c4e6f4dd

Force unwind work loop during selective hydration (#25695)

When an update flows into a dehydrated boundary, React cannot apply the update until the boundary has finished hydrating. The way this currently works is by scheduling a slightly higher priority task on the boundary, using a special lane that's reserved only for this purpose. Because the task is slightly higher priority, on the next turn of the work loop, the Scheduler will force the work loop to yield (i.e. shouldYield starts returning `true` because there's a higher priority task). The downside of this approach is that it only works when time slicing is enabled. It doesn't work for synchronous updates, because the synchronous work loop does not consult the Scheduler on each iteration. We plan to add support for selective hydration during synchronous updates, too, so we need to model this some other way. I've added a special internal exception that can be thrown to force the work loop to interrupt the work-in-progress tree. Because it's thrown from a React-only execution stack, throwing isn't strictly necessary — we could instead modify some internal work loop state. But using an exception means we don't need to check for this case on every iteration of the work loop. So doing it this way moves the check out of the fast path. The ideal implementation wouldn't need to unwind the stack at all — we should be able to hydrate the subtree and then apply the update all within a single render phase. This is how we intend to implement it in the future, but this requires a refactor to how we handle "stack" variables, which are currently pushed to a per-render array. We need to make this stack resumable, like how context works in Flight and Fizz.

Andrew Clark committed Nov 17, 2022 at 13:51 UTC 44c4e6f4ddbc9aacd17acba19eb95dba21a2cff2
6 files changed +151 -34
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+3 -5
@@ -1496,12 +1496,10 @@ describe('ReactDOMServerSelectiveHydration', () => {
1496 // Start rendering. This will force the first boundary to hydrate
1497 // by scheduling it at one higher pri than Idle.
1498 expect(Scheduler).toFlushAndYieldThrough([
1499 - // An update was scheduled to force hydrate the boundary, but React will
1500 - // continue rendering at Idle until the next time React yields. This is
1501 - // fine though because it will switch to the hydration level when it
1502 - // re-enters the work loop.
1499 'App',
1504 - 'AA',
1500 +
1501 + // Start hydrating A
1502 + 'A',
1503 ]);
1504
1505 // Hover over A which (could) schedule at one higher pri than Idle.
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+26 -6
@@ -280,6 +280,14 @@ import {
280
281 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
282
283 +// A special exception that's used to unwind the stack when an update flows
284 +// into a dehydrated boundary.
285 +export const SelectiveHydrationException: mixed = new Error(
286 + "This is not a real error. It's an implementation detail of React's " +
287 + "selective hydration feature. If this leaks into userspace, it's a bug in " +
288 + 'React. Please file an issue.',
289 +);
290 +
291 let didReceiveUpdate: boolean = false;
292
293 let didWarnAboutBadClass;
@@ -2810,6 +2818,16 @@ function updateDehydratedSuspenseComponent(
2818 attemptHydrationAtLane,
2819 eventTime,
2820 );
2821 +
2822 + // Throw a special object that signals to the work loop that it should
2823 + // interrupt the current render.
2824 + //
2825 + // Because we're inside a React-only execution stack, we don't
2826 + // strictly need to throw here — we could instead modify some internal
2827 + // work loop state. But using an exception means we don't need to
2828 + // check for this case on every iteration of the work loop. So doing
2829 + // it this way moves the check out of the fast path.
2830 + throw SelectiveHydrationException;
2831 } else {
2832 // We have already tried to ping at a higher priority than we're rendering with
2833 // so if we got here, we must have failed to hydrate at those levels. We must
@@ -2820,15 +2838,17 @@ function updateDehydratedSuspenseComponent(
2838 }
2839 }
2840
2823 - // If we have scheduled higher pri work above, this will just abort the render
2824 - // since we now have higher priority work. We'll try to infinitely suspend until
2825 - // we yield. TODO: We could probably just force yielding earlier instead.
2826 - renderDidSuspendDelayIfPossible();
2827 - // If we rendered synchronously, we won't yield so have to render something.
2828 - // This will cause us to delete any existing content.
2841 + // If we did not selectively hydrate, we'll continue rendering without
2842 + // hydrating. Mark this tree as suspended to prevent it from committing
2843 + // outside a transition.
2844 + //
2845 + // This path should only happen if the hydration lane already suspended.
2846 + // Currently, it also happens during sync updates because there is no
2847 + // hydration lane for sync updates.
2848 // TODO: We should ideally have a sync hydration lane that we can apply to do
2849 // a pass where we hydrate this subtree in place using the previous Context and then
2850 // reapply the update afterwards.
2851 + renderDidSuspendDelayIfPossible();
2852 return retrySuspenseComponentWithoutHydrating(
2853 current,
2854 workInProgress,
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+26 -6
@@ -280,6 +280,14 @@ import {
280
281 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
282
283 +// A special exception that's used to unwind the stack when an update flows
284 +// into a dehydrated boundary.
285 +export const SelectiveHydrationException: mixed = new Error(
286 + "This is not a real error. It's an implementation detail of React's " +
287 + "selective hydration feature. If this leaks into userspace, it's a bug in " +
288 + 'React. Please file an issue.',
289 +);
290 +
291 let didReceiveUpdate: boolean = false;
292
293 let didWarnAboutBadClass;
@@ -2810,6 +2818,16 @@ function updateDehydratedSuspenseComponent(
2818 attemptHydrationAtLane,
2819 eventTime,
2820 );
2821 +
2822 + // Throw a special object that signals to the work loop that it should
2823 + // interrupt the current render.
2824 + //
2825 + // Because we're inside a React-only execution stack, we don't
2826 + // strictly need to throw here — we could instead modify some internal
2827 + // work loop state. But using an exception means we don't need to
2828 + // check for this case on every iteration of the work loop. So doing
2829 + // it this way moves the check out of the fast path.
2830 + throw SelectiveHydrationException;
2831 } else {
2832 // We have already tried to ping at a higher priority than we're rendering with
2833 // so if we got here, we must have failed to hydrate at those levels. We must
@@ -2820,15 +2838,17 @@ function updateDehydratedSuspenseComponent(
2838 }
2839 }
2840
2823 - // If we have scheduled higher pri work above, this will just abort the render
2824 - // since we now have higher priority work. We'll try to infinitely suspend until
2825 - // we yield. TODO: We could probably just force yielding earlier instead.
2826 - renderDidSuspendDelayIfPossible();
2827 - // If we rendered synchronously, we won't yield so have to render something.
2828 - // This will cause us to delete any existing content.
2841 + // If we did not selectively hydrate, we'll continue rendering without
2842 + // hydrating. Mark this tree as suspended to prevent it from committing
2843 + // outside a transition.
2844 + //
2845 + // This path should only happen if the hydration lane already suspended.
2846 + // Currently, it also happens during sync updates because there is no
2847 + // hydration lane for sync updates.
2848 // TODO: We should ideally have a sync hydration lane that we can apply to do
2849 // a pass where we hydrate this subtree in place using the previous Context and then
2850 // reapply the update afterwards.
2851 + renderDidSuspendDelayIfPossible();
2852 return retrySuspenseComponentWithoutHydrating(
2853 current,
2854 workInProgress,
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+47 -8
@@ -178,7 +178,10 @@ import {
178 lanesToEventPriority,
179 } from './ReactEventPriorities.new';
180 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
181 -import {beginWork as originalBeginWork} from './ReactFiberBeginWork.new';
181 +import {
182 + SelectiveHydrationException,
183 + beginWork as originalBeginWork,
184 +} from './ReactFiberBeginWork.new';
185 import {completeWork} from './ReactFiberCompleteWork.new';
186 import {unwindWork, unwindInterruptedWork} from './ReactFiberUnwindWork.new';
187 import {
@@ -316,12 +319,13 @@ let workInProgress: Fiber | null = null;
319 // The lanes we're rendering
320 let workInProgressRootRenderLanes: Lanes = NoLanes;
321
319 -opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4;
322 +opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5;
323 const NotSuspended: SuspendedReason = 0;
324 const SuspendedOnError: SuspendedReason = 1;
325 const SuspendedOnData: SuspendedReason = 2;
326 const SuspendedOnImmediate: SuspendedReason = 3;
327 const SuspendedAndReadyToUnwind: SuspendedReason = 4;
328 +const SuspendedOnHydration: SuspendedReason = 5;
329
330 // When this is true, the work-in-progress fiber just suspended (or errored) and
331 // we've yet to unwind the stack. In some cases, we may yield to the main thread
@@ -1775,6 +1779,18 @@ function handleThrow(root, thrownValue): void {
1779 workInProgressSuspendedReason = shouldAttemptToSuspendUntilDataResolves()
1780 ? SuspendedOnData
1781 : SuspendedOnImmediate;
1782 + } else if (thrownValue === SelectiveHydrationException) {
1783 + // An update flowed into a dehydrated boundary. Before we can apply the
1784 + // update, we need to finish hydrating. Interrupt the work-in-progress
1785 + // render so we can restart at the hydration lane.
1786 + //
1787 + // The ideal implementation would be able to switch contexts without
1788 + // unwinding the current stack.
1789 + //
1790 + // We could name this something more general but as of now it's the only
1791 + // case where we think this should happen.
1792 + workInProgressSuspendedThenableState = null;
1793 + workInProgressSuspendedReason = SuspendedOnHydration;
1794 } else {
1795 // This is a regular error. If something earlier in the component already
1796 // suspended, we must clear the thenable state to unblock the work loop.
@@ -1965,6 +1981,9 @@ export function renderHasNotSuspendedYet(): boolean {
1981 return workInProgressRootExitStatus === RootInProgress;
1982 }
1983
1984 +// TODO: Over time, this function and renderRootConcurrent have become more
1985 +// and more similar. Not sure it makes sense to maintain forked paths. Consider
1986 +// unifying them again.
1987 function renderRootSync(root: FiberRoot, lanes: Lanes) {
1988 const prevExecutionContext = executionContext;
1989 executionContext |= RenderContext;
@@ -2004,7 +2023,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
2023 markRenderStarted(lanes);
2024 }
2025
2007 - do {
2026 + outer: do {
2027 try {
2028 if (
2029 workInProgressSuspendedReason !== NotSuspended &&
@@ -2020,11 +2039,23 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
2039 // function and fork the behavior some other way.
2040 const unitOfWork = workInProgress;
2041 const thrownValue = workInProgressThrownValue;
2023 - workInProgressSuspendedReason = NotSuspended;
2024 - workInProgressThrownValue = null;
2025 - unwindSuspendedUnitOfWork(unitOfWork, thrownValue);
2026 -
2027 - // Continue with the normal work loop.
2042 + switch (workInProgressSuspendedReason) {
2043 + case SuspendedOnHydration: {
2044 + // Selective hydration. An update flowed into a dehydrated tree.
2045 + // Interrupt the current render so the work loop can switch to the
2046 + // hydration lane.
2047 + workInProgress = null;
2048 + workInProgressRootExitStatus = RootDidNotComplete;
2049 + break outer;
2050 + }
2051 + default: {
2052 + // Continue with the normal work loop.
2053 + workInProgressSuspendedReason = NotSuspended;
2054 + workInProgressThrownValue = null;
2055 + unwindSuspendedUnitOfWork(unitOfWork, thrownValue);
2056 + break;
2057 + }
2058 + }
2059 }
2060 workLoopSync();
2061 break;
@@ -2160,6 +2191,14 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
2191 workInProgressSuspendedReason = SuspendedAndReadyToUnwind;
2192 break outer;
2193 }
2194 + case SuspendedOnHydration: {
2195 + // Selective hydration. An update flowed into a dehydrated tree.
2196 + // Interrupt the current render so the work loop can switch to the
2197 + // hydration lane.
2198 + workInProgress = null;
2199 + workInProgressRootExitStatus = RootDidNotComplete;
2200 + break outer;
2201 + }
2202 default: {
2203 workInProgressSuspendedReason = NotSuspended;
2204 workInProgressThrownValue = null;
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+47 -8
@@ -178,7 +178,10 @@ import {
178 lanesToEventPriority,
179 } from './ReactEventPriorities.old';
180 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
181 -import {beginWork as originalBeginWork} from './ReactFiberBeginWork.old';
181 +import {
182 + SelectiveHydrationException,
183 + beginWork as originalBeginWork,
184 +} from './ReactFiberBeginWork.old';
185 import {completeWork} from './ReactFiberCompleteWork.old';
186 import {unwindWork, unwindInterruptedWork} from './ReactFiberUnwindWork.old';
187 import {
@@ -316,12 +319,13 @@ let workInProgress: Fiber | null = null;
319 // The lanes we're rendering
320 let workInProgressRootRenderLanes: Lanes = NoLanes;
321
319 -opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4;
322 +opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5;
323 const NotSuspended: SuspendedReason = 0;
324 const SuspendedOnError: SuspendedReason = 1;
325 const SuspendedOnData: SuspendedReason = 2;
326 const SuspendedOnImmediate: SuspendedReason = 3;
327 const SuspendedAndReadyToUnwind: SuspendedReason = 4;
328 +const SuspendedOnHydration: SuspendedReason = 5;
329
330 // When this is true, the work-in-progress fiber just suspended (or errored) and
331 // we've yet to unwind the stack. In some cases, we may yield to the main thread
@@ -1775,6 +1779,18 @@ function handleThrow(root, thrownValue): void {
1779 workInProgressSuspendedReason = shouldAttemptToSuspendUntilDataResolves()
1780 ? SuspendedOnData
1781 : SuspendedOnImmediate;
1782 + } else if (thrownValue === SelectiveHydrationException) {
1783 + // An update flowed into a dehydrated boundary. Before we can apply the
1784 + // update, we need to finish hydrating. Interrupt the work-in-progress
1785 + // render so we can restart at the hydration lane.
1786 + //
1787 + // The ideal implementation would be able to switch contexts without
1788 + // unwinding the current stack.
1789 + //
1790 + // We could name this something more general but as of now it's the only
1791 + // case where we think this should happen.
1792 + workInProgressSuspendedThenableState = null;
1793 + workInProgressSuspendedReason = SuspendedOnHydration;
1794 } else {
1795 // This is a regular error. If something earlier in the component already
1796 // suspended, we must clear the thenable state to unblock the work loop.
@@ -1965,6 +1981,9 @@ export function renderHasNotSuspendedYet(): boolean {
1981 return workInProgressRootExitStatus === RootInProgress;
1982 }
1983
1984 +// TODO: Over time, this function and renderRootConcurrent have become more
1985 +// and more similar. Not sure it makes sense to maintain forked paths. Consider
1986 +// unifying them again.
1987 function renderRootSync(root: FiberRoot, lanes: Lanes) {
1988 const prevExecutionContext = executionContext;
1989 executionContext |= RenderContext;
@@ -2004,7 +2023,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
2023 markRenderStarted(lanes);
2024 }
2025
2007 - do {
2026 + outer: do {
2027 try {
2028 if (
2029 workInProgressSuspendedReason !== NotSuspended &&
@@ -2020,11 +2039,23 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
2039 // function and fork the behavior some other way.
2040 const unitOfWork = workInProgress;
2041 const thrownValue = workInProgressThrownValue;
2023 - workInProgressSuspendedReason = NotSuspended;
2024 - workInProgressThrownValue = null;
2025 - unwindSuspendedUnitOfWork(unitOfWork, thrownValue);
2026 -
2027 - // Continue with the normal work loop.
2042 + switch (workInProgressSuspendedReason) {
2043 + case SuspendedOnHydration: {
2044 + // Selective hydration. An update flowed into a dehydrated tree.
2045 + // Interrupt the current render so the work loop can switch to the
2046 + // hydration lane.
2047 + workInProgress = null;
2048 + workInProgressRootExitStatus = RootDidNotComplete;
2049 + break outer;
2050 + }
2051 + default: {
2052 + // Continue with the normal work loop.
2053 + workInProgressSuspendedReason = NotSuspended;
2054 + workInProgressThrownValue = null;
2055 + unwindSuspendedUnitOfWork(unitOfWork, thrownValue);
2056 + break;
2057 + }
2058 + }
2059 }
2060 workLoopSync();
2061 break;
@@ -2160,6 +2191,14 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
2191 workInProgressSuspendedReason = SuspendedAndReadyToUnwind;
2192 break outer;
2193 }
2194 + case SuspendedOnHydration: {
2195 + // Selective hydration. An update flowed into a dehydrated tree.
2196 + // Interrupt the current render so the work loop can switch to the
2197 + // hydration lane.
2198 + workInProgress = null;
2199 + workInProgressRootExitStatus = RootDidNotComplete;
2200 + break outer;
2201 + }
2202 default: {
2203 workInProgressSuspendedReason = NotSuspended;
2204 workInProgressThrownValue = null;
scripts/error-codes/codes.json
+2 -1
@@ -445,5 +445,6 @@
445 "457": "acquireHeadResource encountered a resource type it did not expect: \"%s\". This is a bug in React.",
446 "458": "Currently React only supports one RSC renderer at a time.",
447 "459": "Expected a suspended thenable. This is a bug in React. Please file an issue.",
448 - "460": "Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render. You must either rethrow it immediately, or move the `use` call outside of the `try/catch` block. Capturing without rethrowing will lead to unexpected behavior.\n\nTo handle async errors, wrap your component in an error boundary, or call the promise's `.catch` method and pass the result to `use`"
448 + "460": "Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render. You must either rethrow it immediately, or move the `use` call outside of the `try/catch` block. Capturing without rethrowing will lead to unexpected behavior.\n\nTo handle async errors, wrap your component in an error boundary, or call the promise's `.catch` method and pass the result to `use`",
449 + "461": "This is not a real error. It's an implementation detail of React's selective hydration feature. If this leaks into userspace, it's a bug in React. Please file an issue."
450 }