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

[Experiment] Lazily propagate context changes (#20890)

* Move context comparison to consumer In the lazy context implementation, not all context changes are propagated from the provider, so we can't rely on the propagation alone to mark the consumer as dirty. The consumer needs to compare to the previous value, like we do for state and context. I added a `memoizedValue` field to the context dependency type. Then in the consumer, we iterate over the current dependencies to see if something changed. We only do this iteration after props and state has already bailed out, so it's a relatively uncommon path, except at the root of a changed subtree. Alternatively, we could move these comparisons into `readContext`, but that's a much hotter path, so I think this is an appropriate trade off. * [Experiment] Lazily propagate context changes When a context provider changes, we scan the tree for matching consumers and mark them as dirty so that we know they have pending work. This prevents us from bailing out if, say, an intermediate wrapper is memoized. Currently, we propagate these changes eagerly, at the provider. However, in many cases, we would have ended up visiting the consumer nodes anyway, as part of the normal render traversal, because there's no memoized node in between that bails out. We can save CPU cycles by propagating changes only when we hit a memoized component — so, instead of propagating eagerly at the provider, we propagate lazily if or when something bails out. Most of our bailout logic is centralized in `bailoutOnAlreadyFinishedWork`, so this ended up being not that difficult to implement correctly. There are some exceptions: Suspense and Offscreen. Those are special because they sometimes defer the rendering of their children to a completely separate render cycle. In those cases, we must take extra care to propagate *all* the context changes, not just the first one. I'm pleasantly surprised at how little I needed to change in this initial implementation. I was worried I'd have to use the reconciler fork, but I ended up being able to wrap all my changes in a regular feature flag. So, we could run an experiment in parallel to our other ones. I do consider this a risky rollout overall because of the potential for subtle semantic deviations. However, the model is simple enough that I don't expect us to have trouble fixing regressions if or when they arise during internal dogfooding. --- This is largely based on [RFC#118](https://github.com/reactjs/rfcs/pull/118), by @gnoff. I did deviate in some of the implementation details, though. The main one is how I chose to track context changes. Instead of storing a dirty flag on the stack, I added a `memoizedValue` field to the context dependency object. Then, to check if something has changed, the consumer compares the new context value to the old (memoized) one. This is necessary because of Suspense and Offscreen — those components defer work from one render into a later one. When the subtree continues rendering, the stack from the previous render is no longer available. But the memoized values on the dependencies list are. This requires a bit more work when a consumer bails out, but nothing considerable, and there are ways we could optimize it even further. Conceptually, this model is really appealing, since it matches how our other features "reactively" detect changes — `useMemo`, `useEffect`, `getDerivedStateFromProps`, the built-in cache, and so on. I also intentionally dropped support for `unstable_calculateChangedBits`. We're planning to remove this API anyway before the next major release, in favor of context selectors. It's an unstable feature that we never advertised; I don't think it's seen much adoption. Co-Authored-By: Josh Story <jcs.gnoff@gmail.com> * Propagate all contexts in single pass Instead of propagating the tree once per changed context, we can check all the contexts in a single propagation. This inverts the two loops so that the faster loop (O(numberOfContexts)) is inside the more expensive loop (O(numberOfFibers * avgContextDepsPerFiber)). This adds a bit of overhead to the case where only a single context changes because you have to unwrap the context from the array. I'm also unsure if this will hurt cache locality. Co-Authored-By: Josh Story <jcs.gnoff@gmail.com> * Stop propagating at nearest dependency match Because we now propagate all context providers in a single traversal, we can defer context propagation to a subtree without losing information about which context providers we're deferring — it's all of them. Theoretically, this is a big optimization because it means we'll never propagate to any tree that has work scheduled on it, nor will we ever propagate the same tree twice. There's an awkward case related to bailing out of the siblings of a context consumer. Because those siblings don't bail out until after they've already entered the begin phase, we have to do extra work to make sure they don't unecessarily propagate context again. We could avoid this by adding an earlier bailout for sibling nodes, something we've discussed in the past. We should consider this during the next refactor of the fiber tree structure. Co-Authored-By: Josh Story <jcs.gnoff@gmail.com> * Mark trees that need propagation in readContext Instead of storing matched context consumers in a Set, we can mark when a consumer receives an update inside `readContext`. I hesistated to put anything in this function because it's such a hot path, but so are bail outs. Fortunately, we only need to set this flag once, the first time a context is read. So I think it's a reasonable trade off. In exchange, propagation is faster because we no longer need to accumulate a Set of matched consumers, and fiber bailouts are faster because we don't need to consult that Set. And the code is simpler. Co-authored-by: Josh Story <jcs.gnoff@gmail.com>

Andrew Clark committed Mar 7, 2021 at 00:56 UTC c7b4497988e81606f1c7686434f55a49342c9efc
10 files changed +1621 -151
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+107 -23
@@ -81,6 +81,7 @@ import {
81 warnAboutDefaultPropsOnFunctionComponents,
82 enableScopeAPI,
83 enableCache,
84 + enableLazyContextPropagation,
85 } from 'shared/ReactFeatureFlags';
86 import invariant from 'shared/invariant';
87 import shallowEqual from 'shared/shallowEqual';
@@ -154,6 +155,9 @@ import {findFirstSuspended} from './ReactFiberSuspenseComponent.new';
155 import {
156 pushProvider,
157 propagateContextChange,
158 + lazilyPropagateParentContextChanges,
159 + propagateParentContextChangesToDeferredTree,
160 + checkIfContextChanged,
161 readContext,
162 prepareToReadContext,
163 calculateChangedBits,
@@ -646,6 +650,18 @@ function updateOffscreenComponent(
650 // We're about to bail out, but we need to push this to the stack anyway
651 // to avoid a push/pop misalignment.
652 pushRenderLanes(workInProgress, nextBaseLanes);
653 +
654 + if (enableLazyContextPropagation && current !== null) {
655 + // Since this tree will resume rendering in a separate render, we need
656 + // to propagate parent contexts now so we don't lose track of which
657 + // ones changed.
658 + propagateParentContextChangesToDeferredTree(
659 + current,
660 + workInProgress,
661 + renderLanes,
662 + );
663 + }
664 +
665 return null;
666 } else {
667 // This is the second render. The surrounding visible content has already
@@ -2445,6 +2461,19 @@ function updateDehydratedSuspenseComponent(
2461 renderLanes,
2462 );
2463 }
2464 +
2465 + if (
2466 + enableLazyContextPropagation &&
2467 + // TODO: Factoring is a little weird, since we check this right below, too.
2468 + // But don't want to re-arrange the if-else chain until/unless this
2469 + // feature lands.
2470 + !didReceiveUpdate
2471 + ) {
2472 + // We need to check if any children have context before we decide to bail
2473 + // out, so propagate the changes now.
2474 + lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
2475 + }
2476 +
2477 // We use lanes to indicate that a child might depend on context, so if
2478 // any context has changed, we need to treat is as if the input might have changed.
2479 const hasContextChanged = includesSomeLane(renderLanes, current.childLanes);
@@ -2970,25 +2999,37 @@ function updateContextProvider(
2999
3000 pushProvider(workInProgress, context, newValue);
3001
2973 - if (oldProps !== null) {
2974 - const oldValue = oldProps.value;
2975 - const changedBits = calculateChangedBits(context, newValue, oldValue);
2976 - if (changedBits === 0) {
2977 - // No change. Bailout early if children are the same.
2978 - if (
2979 - oldProps.children === newProps.children &&
2980 - !hasLegacyContextChanged()
2981 - ) {
2982 - return bailoutOnAlreadyFinishedWork(
2983 - current,
3002 + if (enableLazyContextPropagation) {
3003 + // In the lazy propagation implementation, we don't scan for matching
3004 + // consumers until something bails out, because until something bails out
3005 + // we're going to visit those nodes, anyway. The trade-off is that it shifts
3006 + // responsibility to the consumer to track whether something has changed.
3007 + } else {
3008 + if (oldProps !== null) {
3009 + const oldValue = oldProps.value;
3010 + const changedBits = calculateChangedBits(context, newValue, oldValue);
3011 + if (changedBits === 0) {
3012 + // No change. Bailout early if children are the same.
3013 + if (
3014 + oldProps.children === newProps.children &&
3015 + !hasLegacyContextChanged()
3016 + ) {
3017 + return bailoutOnAlreadyFinishedWork(
3018 + current,
3019 + workInProgress,
3020 + renderLanes,
3021 + );
3022 + }
3023 + } else {
3024 + // The context value changed. Search for matching consumers and schedule
3025 + // them to update.
3026 + propagateContextChange(
3027 workInProgress,
3028 + context,
3029 + changedBits,
3030 renderLanes,
3031 );
3032 }
2988 - } else {
2989 - // The context value changed. Search for matching consumers and schedule
2990 - // them to update.
2991 - propagateContextChange(workInProgress, context, changedBits, renderLanes);
3033 }
3034 }
3035
@@ -3100,13 +3141,23 @@ function bailoutOnAlreadyFinishedWork(
3141 // The children don't have any work either. We can skip them.
3142 // TODO: Once we add back resuming, we should check if the children are
3143 // a work-in-progress set. If so, we need to transfer their effects.
3103 - return null;
3104 - } else {
3105 - // This fiber doesn't have work, but its subtree does. Clone the child
3106 - // fibers and continue.
3107 - cloneChildFibers(current, workInProgress);
3108 - return workInProgress.child;
3144 +
3145 + if (enableLazyContextPropagation && current !== null) {
3146 + // Before bailing out, check if there are any context changes in
3147 + // the children.
3148 + lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
3149 + if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
3150 + return null;
3151 + }
3152 + } else {
3153 + return null;
3154 + }
3155 }
3156 +
3157 + // This fiber doesn't have work, but its subtree does. Clone the child
3158 + // fibers and continue.
3159 + cloneChildFibers(current, workInProgress);
3160 + return workInProgress.child;
3161 }
3162
3163 function remountFiber(
@@ -3175,7 +3226,7 @@ function beginWork(
3226 workInProgress: Fiber,
3227 renderLanes: Lanes,
3228 ): Fiber | null {
3178 - const updateLanes = workInProgress.lanes;
3229 + let updateLanes = workInProgress.lanes;
3230
3231 if (__DEV__) {
3232 if (workInProgress._debugNeedsRemount && current !== null) {
@@ -3196,6 +3247,17 @@ function beginWork(
3247 }
3248
3249 if (current !== null) {
3250 + // TODO: The factoring of this block is weird.
3251 + if (
3252 + enableLazyContextPropagation &&
3253 + !includesSomeLane(renderLanes, updateLanes)
3254 + ) {
3255 + const dependencies = current.dependencies;
3256 + if (dependencies !== null && checkIfContextChanged(dependencies)) {
3257 + updateLanes = mergeLanes(updateLanes, renderLanes);
3258 + }
3259 + }
3260 +
3261 const oldProps = current.memoizedProps;
3262 const newProps = workInProgress.pendingProps;
3263
@@ -3316,6 +3378,9 @@ function beginWork(
3378 // primary children and work on the fallback.
3379 return child.sibling;
3380 } else {
3381 + // Note: We can return `null` here because we already checked
3382 + // whether there were nested context consumers, via the call to
3383 + // `bailoutOnAlreadyFinishedWork` above.
3384 return null;
3385 }
3386 }
@@ -3330,11 +3395,30 @@ function beginWork(
3395 case SuspenseListComponent: {
3396 const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
3397
3333 - const hasChildWork = includesSomeLane(
3398 + let hasChildWork = includesSomeLane(
3399 renderLanes,
3400 workInProgress.childLanes,
3401 );
3402
3403 + if (enableLazyContextPropagation && !hasChildWork) {
3404 + // Context changes may not have been propagated yet. We need to do
3405 + // that now, before we can decide whether to bail out.
3406 + // TODO: We use `childLanes` as a heuristic for whether there is
3407 + // remaining work in a few places, including
3408 + // `bailoutOnAlreadyFinishedWork` and
3409 + // `updateDehydratedSuspenseComponent`. We should maybe extract this
3410 + // into a dedicated function.
3411 + lazilyPropagateParentContextChanges(
3412 + current,
3413 + workInProgress,
3414 + renderLanes,
3415 + );
3416 + hasChildWork = includesSomeLane(
3417 + renderLanes,
3418 + workInProgress.childLanes,
3419 + );
3420 + }
3421 +
3422 if (didSuspendBefore) {
3423 if (hasChildWork) {
3424 // If something was in fallback state last time, and we have all the
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+107 -23
@@ -81,6 +81,7 @@ import {
81 warnAboutDefaultPropsOnFunctionComponents,
82 enableScopeAPI,
83 enableCache,
84 + enableLazyContextPropagation,
85 } from 'shared/ReactFeatureFlags';
86 import invariant from 'shared/invariant';
87 import shallowEqual from 'shared/shallowEqual';
@@ -154,6 +155,9 @@ import {findFirstSuspended} from './ReactFiberSuspenseComponent.old';
155 import {
156 pushProvider,
157 propagateContextChange,
158 + lazilyPropagateParentContextChanges,
159 + propagateParentContextChangesToDeferredTree,
160 + checkIfContextChanged,
161 readContext,
162 prepareToReadContext,
163 calculateChangedBits,
@@ -646,6 +650,18 @@ function updateOffscreenComponent(
650 // We're about to bail out, but we need to push this to the stack anyway
651 // to avoid a push/pop misalignment.
652 pushRenderLanes(workInProgress, nextBaseLanes);
653 +
654 + if (enableLazyContextPropagation && current !== null) {
655 + // Since this tree will resume rendering in a separate render, we need
656 + // to propagate parent contexts now so we don't lose track of which
657 + // ones changed.
658 + propagateParentContextChangesToDeferredTree(
659 + current,
660 + workInProgress,
661 + renderLanes,
662 + );
663 + }
664 +
665 return null;
666 } else {
667 // This is the second render. The surrounding visible content has already
@@ -2445,6 +2461,19 @@ function updateDehydratedSuspenseComponent(
2461 renderLanes,
2462 );
2463 }
2464 +
2465 + if (
2466 + enableLazyContextPropagation &&
2467 + // TODO: Factoring is a little weird, since we check this right below, too.
2468 + // But don't want to re-arrange the if-else chain until/unless this
2469 + // feature lands.
2470 + !didReceiveUpdate
2471 + ) {
2472 + // We need to check if any children have context before we decide to bail
2473 + // out, so propagate the changes now.
2474 + lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
2475 + }
2476 +
2477 // We use lanes to indicate that a child might depend on context, so if
2478 // any context has changed, we need to treat is as if the input might have changed.
2479 const hasContextChanged = includesSomeLane(renderLanes, current.childLanes);
@@ -2970,25 +2999,37 @@ function updateContextProvider(
2999
3000 pushProvider(workInProgress, context, newValue);
3001
2973 - if (oldProps !== null) {
2974 - const oldValue = oldProps.value;
2975 - const changedBits = calculateChangedBits(context, newValue, oldValue);
2976 - if (changedBits === 0) {
2977 - // No change. Bailout early if children are the same.
2978 - if (
2979 - oldProps.children === newProps.children &&
2980 - !hasLegacyContextChanged()
2981 - ) {
2982 - return bailoutOnAlreadyFinishedWork(
2983 - current,
3002 + if (enableLazyContextPropagation) {
3003 + // In the lazy propagation implementation, we don't scan for matching
3004 + // consumers until something bails out, because until something bails out
3005 + // we're going to visit those nodes, anyway. The trade-off is that it shifts
3006 + // responsibility to the consumer to track whether something has changed.
3007 + } else {
3008 + if (oldProps !== null) {
3009 + const oldValue = oldProps.value;
3010 + const changedBits = calculateChangedBits(context, newValue, oldValue);
3011 + if (changedBits === 0) {
3012 + // No change. Bailout early if children are the same.
3013 + if (
3014 + oldProps.children === newProps.children &&
3015 + !hasLegacyContextChanged()
3016 + ) {
3017 + return bailoutOnAlreadyFinishedWork(
3018 + current,
3019 + workInProgress,
3020 + renderLanes,
3021 + );
3022 + }
3023 + } else {
3024 + // The context value changed. Search for matching consumers and schedule
3025 + // them to update.
3026 + propagateContextChange(
3027 workInProgress,
3028 + context,
3029 + changedBits,
3030 renderLanes,
3031 );
3032 }
2988 - } else {
2989 - // The context value changed. Search for matching consumers and schedule
2990 - // them to update.
2991 - propagateContextChange(workInProgress, context, changedBits, renderLanes);
3033 }
3034 }
3035
@@ -3100,13 +3141,23 @@ function bailoutOnAlreadyFinishedWork(
3141 // The children don't have any work either. We can skip them.
3142 // TODO: Once we add back resuming, we should check if the children are
3143 // a work-in-progress set. If so, we need to transfer their effects.
3103 - return null;
3104 - } else {
3105 - // This fiber doesn't have work, but its subtree does. Clone the child
3106 - // fibers and continue.
3107 - cloneChildFibers(current, workInProgress);
3108 - return workInProgress.child;
3144 +
3145 + if (enableLazyContextPropagation && current !== null) {
3146 + // Before bailing out, check if there are any context changes in
3147 + // the children.
3148 + lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
3149 + if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
3150 + return null;
3151 + }
3152 + } else {
3153 + return null;
3154 + }
3155 }
3156 +
3157 + // This fiber doesn't have work, but its subtree does. Clone the child
3158 + // fibers and continue.
3159 + cloneChildFibers(current, workInProgress);
3160 + return workInProgress.child;
3161 }
3162
3163 function remountFiber(
@@ -3175,7 +3226,7 @@ function beginWork(
3226 workInProgress: Fiber,
3227 renderLanes: Lanes,
3228 ): Fiber | null {
3178 - const updateLanes = workInProgress.lanes;
3229 + let updateLanes = workInProgress.lanes;
3230
3231 if (__DEV__) {
3232 if (workInProgress._debugNeedsRemount && current !== null) {
@@ -3196,6 +3247,17 @@ function beginWork(
3247 }
3248
3249 if (current !== null) {
3250 + // TODO: The factoring of this block is weird.
3251 + if (
3252 + enableLazyContextPropagation &&
3253 + !includesSomeLane(renderLanes, updateLanes)
3254 + ) {
3255 + const dependencies = current.dependencies;
3256 + if (dependencies !== null && checkIfContextChanged(dependencies)) {
3257 + updateLanes = mergeLanes(updateLanes, renderLanes);
3258 + }
3259 + }
3260 +
3261 const oldProps = current.memoizedProps;
3262 const newProps = workInProgress.pendingProps;
3263
@@ -3316,6 +3378,9 @@ function beginWork(
3378 // primary children and work on the fallback.
3379 return child.sibling;
3380 } else {
3381 + // Note: We can return `null` here because we already checked
3382 + // whether there were nested context consumers, via the call to
3383 + // `bailoutOnAlreadyFinishedWork` above.
3384 return null;
3385 }
3386 }
@@ -3330,11 +3395,30 @@ function beginWork(
3395 case SuspenseListComponent: {
3396 const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
3397
3333 - const hasChildWork = includesSomeLane(
3398 + let hasChildWork = includesSomeLane(
3399 renderLanes,
3400 workInProgress.childLanes,
3401 );
3402
3403 + if (enableLazyContextPropagation && !hasChildWork) {
3404 + // Context changes may not have been propagated yet. We need to do
3405 + // that now, before we can decide whether to bail out.
3406 + // TODO: We use `childLanes` as a heuristic for whether there is
3407 + // remaining work in a few places, including
3408 + // `bailoutOnAlreadyFinishedWork` and
3409 + // `updateDehydratedSuspenseComponent`. We should maybe extract this
3410 + // into a dedicated function.
3411 + lazilyPropagateParentContextChanges(
3412 + current,
3413 + workInProgress,
3414 + renderLanes,
3415 + );
3416 + hasChildWork = includesSomeLane(
3417 + renderLanes,
3418 + workInProgress.childLanes,
3419 + );
3420 + }
3421 +
3422 if (didSuspendBefore) {
3423 if (hasChildWork) {
3424 // If something was in fallback state last time, and we have all the
packages/react-reconciler/src/ReactFiberFlags.js
+24 -22
@@ -12,49 +12,51 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
12 export type Flags = number;
13
14 // Don't change these two values. They're used by React Dev Tools.
15 -export const NoFlags = /* */ 0b00000000000000000000;
16 -export const PerformedWork = /* */ 0b00000000000000000001;
15 +export const NoFlags = /* */ 0b0000000000000000000000;
16 +export const PerformedWork = /* */ 0b0000000000000000000001;
17
18 // You can change the rest (and add more).
19 -export const Placement = /* */ 0b00000000000000000010;
20 -export const Update = /* */ 0b00000000000000000100;
19 +export const Placement = /* */ 0b0000000000000000000010;
20 +export const Update = /* */ 0b0000000000000000000100;
21 export const PlacementAndUpdate = /* */ Placement | Update;
22 -export const Deletion = /* */ 0b00000000000000001000;
23 -export const ChildDeletion = /* */ 0b00000000000000010000;
24 -export const ContentReset = /* */ 0b00000000000000100000;
25 -export const Callback = /* */ 0b00000000000001000000;
26 -export const DidCapture = /* */ 0b00000000000010000000;
27 -export const Ref = /* */ 0b00000000000100000000;
28 -export const Snapshot = /* */ 0b00000000001000000000;
29 -export const Passive = /* */ 0b00000000010000000000;
30 -export const Hydrating = /* */ 0b00000000100000000000;
22 +export const Deletion = /* */ 0b0000000000000000001000;
23 +export const ChildDeletion = /* */ 0b0000000000000000010000;
24 +export const ContentReset = /* */ 0b0000000000000000100000;
25 +export const Callback = /* */ 0b0000000000000001000000;
26 +export const DidCapture = /* */ 0b0000000000000010000000;
27 +export const Ref = /* */ 0b0000000000000100000000;
28 +export const Snapshot = /* */ 0b0000000000001000000000;
29 +export const Passive = /* */ 0b0000000000010000000000;
30 +export const Hydrating = /* */ 0b0000000000100000000000;
31 export const HydratingAndUpdate = /* */ Hydrating | Update;
32 -export const Visibility = /* */ 0b00000001000000000000;
32 +export const Visibility = /* */ 0b0000000001000000000000;
33
34 export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
35
36 // Union of all commit flags (flags with the lifetime of a particular commit)
37 -export const HostEffectMask = /* */ 0b00000001111111111111;
37 +export const HostEffectMask = /* */ 0b0000000001111111111111;
38
39 // These are not really side effects, but we still reuse this field.
40 -export const Incomplete = /* */ 0b00000010000000000000;
41 -export const ShouldCapture = /* */ 0b00000100000000000000;
40 +export const Incomplete = /* */ 0b0000000010000000000000;
41 +export const ShouldCapture = /* */ 0b0000000100000000000000;
42 // TODO (effects) Remove this bit once the new reconciler is synced to the old.
43 -export const PassiveUnmountPendingDev = /* */ 0b00001000000000000000;
44 -export const ForceUpdateForLegacySuspense = /* */ 0b00010000000000000000;
43 +export const PassiveUnmountPendingDev = /* */ 0b0000001000000000000000;
44 +export const ForceUpdateForLegacySuspense = /* */ 0b0000010000000000000000;
45 +export const DidPropagateContext = /* */ 0b0000100000000000000000;
46 +export const NeedsPropagation = /* */ 0b0001000000000000000000;
47
48 // Static tags describe aspects of a fiber that are not specific to a render,
49 // e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
50 // This enables us to defer more work in the unmount case,
51 // since we can defer traversing the tree during layout to look for Passive effects,
52 // and instead rely on the static flag as a signal that there may be cleanup work.
51 -export const PassiveStatic = /* */ 0b00100000000000000000;
53 +export const PassiveStatic = /* */ 0b0010000000000000000000;
54
55 // These flags allow us to traverse to fibers that have effects on mount
56 // without traversing the entire tree after every commit for
57 // double invoking
56 -export const MountLayoutDev = /* */ 0b01000000000000000000;
57 -export const MountPassiveDev = /* */ 0b10000000000000000000;
58 +export const MountLayoutDev = /* */ 0b0100000000000000000000;
59 +export const MountPassiveDev = /* */ 0b1000000000000000000000;
60
61 // Groups of flags that are used in the commit phase to skip over trees that
62 // don't contain effects, by checking subtreeFlags.
packages/react-reconciler/src/ReactFiberNewContext.new.js
+307 -37
@@ -7,7 +7,7 @@
7 * @flow
8 */
9
10 -import type {ReactContext} from 'shared/ReactTypes';
10 +import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
11 import type {
12 Fiber,
13 ContextDependency,
@@ -33,6 +33,11 @@ import {
33 mergeLanes,
34 pickArbitraryLane,
35 } from './ReactFiberLane.new';
36 +import {
37 + NoFlags,
38 + DidPropagateContext,
39 + NeedsPropagation,
40 +} from './ReactFiberFlags';
41
42 import invariant from 'shared/invariant';
43 import is from 'shared/objectIs';
@@ -195,6 +200,37 @@ export function propagateContextChange<T>(
200 changedBits: number,
201 renderLanes: Lanes,
202 ): void {
203 + if (enableLazyContextPropagation) {
204 + // TODO: This path is only used by Cache components. Update
205 + // lazilyPropagateParentContextChanges to look for Cache components so they
206 + // can take advantage of lazy propagation.
207 + const forcePropagateEntireTree = true;
208 + propagateContextChanges(
209 + workInProgress,
210 + [context, changedBits],
211 + renderLanes,
212 + forcePropagateEntireTree,
213 + );
214 + } else {
215 + propagateContextChange_eager(
216 + workInProgress,
217 + context,
218 + changedBits,
219 + renderLanes,
220 + );
221 + }
222 +}
223 +
224 +function propagateContextChange_eager<T>(
225 + workInProgress: Fiber,
226 + context: ReactContext<T>,
227 + changedBits: number,
228 + renderLanes: Lanes,
229 +): void {
230 + // Only used by eager implemenation
231 + if (enableLazyContextPropagation) {
232 + return;
233 + }
234 let fiber = workInProgress.child;
235 if (fiber !== null) {
236 // Set the return pointer of the child to the work-in-progress fiber.
@@ -216,45 +252,32 @@ export function propagateContextChange<T>(
252 (dependency.observedBits & changedBits) !== 0
253 ) {
254 // Match! Schedule an update on this fiber.
219 -
220 - if (enableLazyContextPropagation) {
221 - // In the lazy implemenation, don't mark a dirty flag on the
222 - // dependency itself. Not all changes are propagated, so we can't
223 - // rely on the propagation function alone to determine whether
224 - // something has changed; the consumer will check. In the future,
225 - // we could add back a dirty flag as an optimization to avoid
226 - // double checking, but until we have selectors it's not really
227 - // worth the trouble.
228 - } else {
229 - if (fiber.tag === ClassComponent) {
230 - // Schedule a force update on the work-in-progress.
231 - const lane = pickArbitraryLane(renderLanes);
232 - const update = createUpdate(NoTimestamp, lane);
233 - update.tag = ForceUpdate;
234 - // TODO: Because we don't have a work-in-progress, this will add the
235 - // update to the current fiber, too, which means it will persist even if
236 - // this render is thrown away. Since it's a race condition, not sure it's
237 - // worth fixing.
238 -
239 - // Inlined `enqueueUpdate` to remove interleaved update check
240 - const updateQueue = fiber.updateQueue;
241 - if (updateQueue === null) {
242 - // Only occurs if the fiber has been unmounted.
255 + if (fiber.tag === ClassComponent) {
256 + // Schedule a force update on the work-in-progress.
257 + const lane = pickArbitraryLane(renderLanes);
258 + const update = createUpdate(NoTimestamp, lane);
259 + update.tag = ForceUpdate;
260 + // TODO: Because we don't have a work-in-progress, this will add the
261 + // update to the current fiber, too, which means it will persist even if
262 + // this render is thrown away. Since it's a race condition, not sure it's
263 + // worth fixing.
264 +
265 + // Inlined `enqueueUpdate` to remove interleaved update check
266 + const updateQueue = fiber.updateQueue;
267 + if (updateQueue === null) {
268 + // Only occurs if the fiber has been unmounted.
269 + } else {
270 + const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
271 + const pending = sharedQueue.pending;
272 + if (pending === null) {
273 + // This is the first update. Create a circular list.
274 + update.next = update;
275 } else {
244 - const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
245 - const pending = sharedQueue.pending;
246 - if (pending === null) {
247 - // This is the first update. Create a circular list.
248 - update.next = update;
249 - } else {
250 - update.next = pending.next;
251 - pending.next = update;
252 - }
253 - sharedQueue.pending = update;
276 + update.next = pending.next;
277 + pending.next = update;
278 }
279 + sharedQueue.pending = update;
280 }
256 - // Mark the updated lanes on the list, too.
257 - list.lanes = mergeLanes(list.lanes, renderLanes);
281 }
282
283 fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
@@ -264,6 +287,9 @@ export function propagateContextChange<T>(
287 }
288 scheduleWorkOnParentPath(fiber.return, renderLanes);
289
290 + // Mark the updated lanes on the list, too.
291 + list.lanes = mergeLanes(list.lanes, renderLanes);
292 +
293 // Since we already found a match, we can stop traversing the
294 // dependency list.
295 break;
@@ -328,6 +354,247 @@ export function propagateContextChange<T>(
354 }
355 }
356
357 +function propagateContextChanges<T>(
358 + workInProgress: Fiber,
359 + contexts: Array<any>,
360 + renderLanes: Lanes,
361 + forcePropagateEntireTree: boolean,
362 +): void {
363 + // Only used by lazy implemenation
364 + if (!enableLazyContextPropagation) {
365 + return;
366 + }
367 + let fiber = workInProgress.child;
368 + if (fiber !== null) {
369 + // Set the return pointer of the child to the work-in-progress fiber.
370 + fiber.return = workInProgress;
371 + }
372 + while (fiber !== null) {
373 + let nextFiber;
374 +
375 + // Visit this fiber.
376 + const list = fiber.dependencies;
377 + if (list !== null) {
378 + nextFiber = fiber.child;
379 +
380 + let dep = list.firstContext;
381 + findChangedDep: while (dep !== null) {
382 + // Assigning these to constants to help Flow
383 + const dependency = dep;
384 + const consumer = fiber;
385 + findContext: for (let i = 0; i < contexts.length; i += 2) {
386 + const context: ReactContext<T> = contexts[i];
387 + const changedBits: number = contexts[i + 1];
388 + // Check if the context matches.
389 + // TODO: Compare selected values to bail out early.
390 + if (
391 + dependency.context === context &&
392 + (dependency.observedBits & changedBits) !== 0
393 + ) {
394 + // Match! Schedule an update on this fiber.
395 +
396 + // In the lazy implemenation, don't mark a dirty flag on the
397 + // dependency itself. Not all changes are propagated, so we can't
398 + // rely on the propagation function alone to determine whether
399 + // something has changed; the consumer will check. In the future, we
400 + // could add back a dirty flag as an optimization to avoid double
401 + // checking, but until we have selectors it's not really worth
402 + // the trouble.
403 + consumer.lanes = mergeLanes(consumer.lanes, renderLanes);
404 + const alternate = consumer.alternate;
405 + if (alternate !== null) {
406 + alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
407 + }
408 + scheduleWorkOnParentPath(consumer.return, renderLanes);
409 +
410 + if (!forcePropagateEntireTree) {
411 + // During lazy propagation, when we find a match, we can defer
412 + // propagating changes to the children, because we're going to
413 + // visit them during render. We should continue propagating the
414 + // siblings, though
415 + nextFiber = null;
416 + }
417 +
418 + // Since we already found a match, we can stop traversing the
419 + // dependency list.
420 + break findChangedDep;
421 + }
422 + }
423 + dep = dependency.next;
424 + }
425 + } else if (
426 + enableSuspenseServerRenderer &&
427 + fiber.tag === DehydratedFragment
428 + ) {
429 + // If a dehydrated suspense boundary is in this subtree, we don't know
430 + // if it will have any context consumers in it. The best we can do is
431 + // mark it as having updates.
432 + const parentSuspense = fiber.return;
433 + invariant(
434 + parentSuspense !== null,
435 + 'We just came from a parent so we must have had a parent. This is a bug in React.',
436 + );
437 + parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
438 + const alternate = parentSuspense.alternate;
439 + if (alternate !== null) {
440 + alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
441 + }
442 + // This is intentionally passing this fiber as the parent
443 + // because we want to schedule this fiber as having work
444 + // on its children. We'll use the childLanes on
445 + // this fiber to indicate that a context has changed.
446 + scheduleWorkOnParentPath(parentSuspense, renderLanes);
447 + nextFiber = null;
448 + } else {
449 + // Traverse down.
450 + nextFiber = fiber.child;
451 + }
452 +
453 + if (nextFiber !== null) {
454 + // Set the return pointer of the child to the work-in-progress fiber.
455 + nextFiber.return = fiber;
456 + } else {
457 + // No child. Traverse to next sibling.
458 + nextFiber = fiber;
459 + while (nextFiber !== null) {
460 + if (nextFiber === workInProgress) {
461 + // We're back to the root of this subtree. Exit.
462 + nextFiber = null;
463 + break;
464 + }
465 + const sibling = nextFiber.sibling;
466 + if (sibling !== null) {
467 + // Set the return pointer of the sibling to the work-in-progress fiber.
468 + sibling.return = nextFiber.return;
469 + nextFiber = sibling;
470 + break;
471 + }
472 + // No more siblings. Traverse up.
473 + nextFiber = nextFiber.return;
474 + }
475 + }
476 + fiber = nextFiber;
477 + }
478 +}
479 +
480 +export function lazilyPropagateParentContextChanges(
481 + current: Fiber,
482 + workInProgress: Fiber,
483 + renderLanes: Lanes,
484 +) {
485 + const forcePropagateEntireTree = false;
486 + propagateParentContextChanges(
487 + current,
488 + workInProgress,
489 + renderLanes,
490 + forcePropagateEntireTree,
491 + );
492 +}
493 +
494 +// Used for propagating a deferred tree (Suspense, Offscreen). We must propagate
495 +// to the entire subtree, because we won't revisit it until after the current
496 +// render has completed, at which point we'll have lost track of which providers
497 +// have changed.
498 +export function propagateParentContextChangesToDeferredTree(
499 + current: Fiber,
500 + workInProgress: Fiber,
501 + renderLanes: Lanes,
502 +) {
503 + const forcePropagateEntireTree = true;
504 + propagateParentContextChanges(
505 + current,
506 + workInProgress,
507 + renderLanes,
508 + forcePropagateEntireTree,
509 + );
510 +}
511 +
512 +function propagateParentContextChanges(
513 + current: Fiber,
514 + workInProgress: Fiber,
515 + renderLanes: Lanes,
516 + forcePropagateEntireTree: boolean,
517 +) {
518 + if (!enableLazyContextPropagation) {
519 + return;
520 + }
521 +
522 + // Collect all the parent providers that changed. Since this is usually small
523 + // number, we use an Array instead of Set.
524 + let contexts = null;
525 + let parent = workInProgress;
526 + let isInsidePropagationBailout = false;
527 + while (parent !== null) {
528 + if (!isInsidePropagationBailout) {
529 + if ((parent.flags & NeedsPropagation) !== NoFlags) {
530 + isInsidePropagationBailout = true;
531 + } else if ((parent.flags & DidPropagateContext) !== NoFlags) {
532 + break;
533 + }
534 + }
535 +
536 + if (parent.tag === ContextProvider) {
537 + const currentParent = parent.alternate;
538 + invariant(
539 + currentParent !== null,
540 + 'Should have a current fiber. This is a bug in React.',
541 + );
542 + const oldProps = currentParent.memoizedProps;
543 + if (oldProps !== null) {
544 + const providerType: ReactProviderType<any> = parent.type;
545 + const context: ReactContext<any> = providerType._context;
546 +
547 + const newProps = parent.pendingProps;
548 + const newValue = newProps.value;
549 +
550 + const oldValue = oldProps.value;
551 +
552 + const changedBits = calculateChangedBits(context, newValue, oldValue);
553 + if (changedBits !== 0) {
554 + if (contexts !== null) {
555 + contexts.push(context, changedBits);
556 + } else {
557 + contexts = [context, changedBits];
558 + }
559 + }
560 + }
561 + }
562 + parent = parent.return;
563 + }
564 +
565 + if (contexts !== null) {
566 + // If there were any changed providers, search through the children and
567 + // propagate their changes.
568 + propagateContextChanges(
569 + workInProgress,
570 + contexts,
571 + renderLanes,
572 + forcePropagateEntireTree,
573 + );
574 + }
575 +
576 + // This is an optimization so that we only propagate once per subtree. If a
577 + // deeply nested child bails out, and it calls this propagation function, it
578 + // uses this flag to know that the remaining ancestor providers have already
579 + // been propagated.
580 + //
581 + // NOTE: This optimization is only necessary because we sometimes enter the
582 + // begin phase of nodes that don't have any work scheduled on them —
583 + // specifically, the siblings of a node that _does_ have scheduled work. The
584 + // siblings will bail out and call this function again, even though we already
585 + // propagated content changes to it and its subtree. So we use this flag to
586 + // mark that the parent providers already propagated.
587 + //
588 + // Unfortunately, though, we need to ignore this flag when we're inside a
589 + // tree whose context propagation was deferred — that's what the
590 + // `NeedsPropagation` flag is for.
591 + //
592 + // If we could instead bail out before entering the siblings' begin phase,
593 + // then we could remove both `DidPropagateContext` and `NeedsPropagation`.
594 + // Consider this as part of the next refactor to the fiber tree structure.
595 + workInProgress.flags |= DidPropagateContext;
596 +}
597 +
598 export function checkIfContextChanged(currentDependencies: Dependencies) {
599 if (!enableLazyContextPropagation) {
600 return false;
@@ -442,6 +709,9 @@ export function readContext<T>(
709 // TODO: This is an old field. Delete it.
710 responders: null,
711 };
712 + if (enableLazyContextPropagation) {
713 + currentlyRenderingFiber.flags |= NeedsPropagation;
714 + }
715 } else {
716 // Append a new context item.
717 lastContextDependency = lastContextDependency.next = contextItem;
packages/react-reconciler/src/ReactFiberNewContext.old.js
+307 -37
@@ -7,7 +7,7 @@
7 * @flow
8 */
9
10 -import type {ReactContext} from 'shared/ReactTypes';
10 +import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
11 import type {
12 Fiber,
13 ContextDependency,
@@ -33,6 +33,11 @@ import {
33 mergeLanes,
34 pickArbitraryLane,
35 } from './ReactFiberLane.old';
36 +import {
37 + NoFlags,
38 + DidPropagateContext,
39 + NeedsPropagation,
40 +} from './ReactFiberFlags';
41
42 import invariant from 'shared/invariant';
43 import is from 'shared/objectIs';
@@ -195,6 +200,37 @@ export function propagateContextChange<T>(
200 changedBits: number,
201 renderLanes: Lanes,
202 ): void {
203 + if (enableLazyContextPropagation) {
204 + // TODO: This path is only used by Cache components. Update
205 + // lazilyPropagateParentContextChanges to look for Cache components so they
206 + // can take advantage of lazy propagation.
207 + const forcePropagateEntireTree = true;
208 + propagateContextChanges(
209 + workInProgress,
210 + [context, changedBits],
211 + renderLanes,
212 + forcePropagateEntireTree,
213 + );
214 + } else {
215 + propagateContextChange_eager(
216 + workInProgress,
217 + context,
218 + changedBits,
219 + renderLanes,
220 + );
221 + }
222 +}
223 +
224 +function propagateContextChange_eager<T>(
225 + workInProgress: Fiber,
226 + context: ReactContext<T>,
227 + changedBits: number,
228 + renderLanes: Lanes,
229 +): void {
230 + // Only used by eager implemenation
231 + if (enableLazyContextPropagation) {
232 + return;
233 + }
234 let fiber = workInProgress.child;
235 if (fiber !== null) {
236 // Set the return pointer of the child to the work-in-progress fiber.
@@ -216,45 +252,32 @@ export function propagateContextChange<T>(
252 (dependency.observedBits & changedBits) !== 0
253 ) {
254 // Match! Schedule an update on this fiber.
219 -
220 - if (enableLazyContextPropagation) {
221 - // In the lazy implemenation, don't mark a dirty flag on the
222 - // dependency itself. Not all changes are propagated, so we can't
223 - // rely on the propagation function alone to determine whether
224 - // something has changed; the consumer will check. In the future,
225 - // we could add back a dirty flag as an optimization to avoid
226 - // double checking, but until we have selectors it's not really
227 - // worth the trouble.
228 - } else {
229 - if (fiber.tag === ClassComponent) {
230 - // Schedule a force update on the work-in-progress.
231 - const lane = pickArbitraryLane(renderLanes);
232 - const update = createUpdate(NoTimestamp, lane);
233 - update.tag = ForceUpdate;
234 - // TODO: Because we don't have a work-in-progress, this will add the
235 - // update to the current fiber, too, which means it will persist even if
236 - // this render is thrown away. Since it's a race condition, not sure it's
237 - // worth fixing.
238 -
239 - // Inlined `enqueueUpdate` to remove interleaved update check
240 - const updateQueue = fiber.updateQueue;
241 - if (updateQueue === null) {
242 - // Only occurs if the fiber has been unmounted.
255 + if (fiber.tag === ClassComponent) {
256 + // Schedule a force update on the work-in-progress.
257 + const lane = pickArbitraryLane(renderLanes);
258 + const update = createUpdate(NoTimestamp, lane);
259 + update.tag = ForceUpdate;
260 + // TODO: Because we don't have a work-in-progress, this will add the
261 + // update to the current fiber, too, which means it will persist even if
262 + // this render is thrown away. Since it's a race condition, not sure it's
263 + // worth fixing.
264 +
265 + // Inlined `enqueueUpdate` to remove interleaved update check
266 + const updateQueue = fiber.updateQueue;
267 + if (updateQueue === null) {
268 + // Only occurs if the fiber has been unmounted.
269 + } else {
270 + const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
271 + const pending = sharedQueue.pending;
272 + if (pending === null) {
273 + // This is the first update. Create a circular list.
274 + update.next = update;
275 } else {
244 - const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
245 - const pending = sharedQueue.pending;
246 - if (pending === null) {
247 - // This is the first update. Create a circular list.
248 - update.next = update;
249 - } else {
250 - update.next = pending.next;
251 - pending.next = update;
252 - }
253 - sharedQueue.pending = update;
276 + update.next = pending.next;
277 + pending.next = update;
278 }
279 + sharedQueue.pending = update;
280 }
256 - // Mark the updated lanes on the list, too.
257 - list.lanes = mergeLanes(list.lanes, renderLanes);
281 }
282
283 fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
@@ -264,6 +287,9 @@ export function propagateContextChange<T>(
287 }
288 scheduleWorkOnParentPath(fiber.return, renderLanes);
289
290 + // Mark the updated lanes on the list, too.
291 + list.lanes = mergeLanes(list.lanes, renderLanes);
292 +
293 // Since we already found a match, we can stop traversing the
294 // dependency list.
295 break;
@@ -328,6 +354,247 @@ export function propagateContextChange<T>(
354 }
355 }
356
357 +function propagateContextChanges<T>(
358 + workInProgress: Fiber,
359 + contexts: Array<any>,
360 + renderLanes: Lanes,
361 + forcePropagateEntireTree: boolean,
362 +): void {
363 + // Only used by lazy implemenation
364 + if (!enableLazyContextPropagation) {
365 + return;
366 + }
367 + let fiber = workInProgress.child;
368 + if (fiber !== null) {
369 + // Set the return pointer of the child to the work-in-progress fiber.
370 + fiber.return = workInProgress;
371 + }
372 + while (fiber !== null) {
373 + let nextFiber;
374 +
375 + // Visit this fiber.
376 + const list = fiber.dependencies;
377 + if (list !== null) {
378 + nextFiber = fiber.child;
379 +
380 + let dep = list.firstContext;
381 + findChangedDep: while (dep !== null) {
382 + // Assigning these to constants to help Flow
383 + const dependency = dep;
384 + const consumer = fiber;
385 + findContext: for (let i = 0; i < contexts.length; i += 2) {
386 + const context: ReactContext<T> = contexts[i];
387 + const changedBits: number = contexts[i + 1];
388 + // Check if the context matches.
389 + // TODO: Compare selected values to bail out early.
390 + if (
391 + dependency.context === context &&
392 + (dependency.observedBits & changedBits) !== 0
393 + ) {
394 + // Match! Schedule an update on this fiber.
395 +
396 + // In the lazy implemenation, don't mark a dirty flag on the
397 + // dependency itself. Not all changes are propagated, so we can't
398 + // rely on the propagation function alone to determine whether
399 + // something has changed; the consumer will check. In the future, we
400 + // could add back a dirty flag as an optimization to avoid double
401 + // checking, but until we have selectors it's not really worth
402 + // the trouble.
403 + consumer.lanes = mergeLanes(consumer.lanes, renderLanes);
404 + const alternate = consumer.alternate;
405 + if (alternate !== null) {
406 + alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
407 + }
408 + scheduleWorkOnParentPath(consumer.return, renderLanes);
409 +
410 + if (!forcePropagateEntireTree) {
411 + // During lazy propagation, when we find a match, we can defer
412 + // propagating changes to the children, because we're going to
413 + // visit them during render. We should continue propagating the
414 + // siblings, though
415 + nextFiber = null;
416 + }
417 +
418 + // Since we already found a match, we can stop traversing the
419 + // dependency list.
420 + break findChangedDep;
421 + }
422 + }
423 + dep = dependency.next;
424 + }
425 + } else if (
426 + enableSuspenseServerRenderer &&
427 + fiber.tag === DehydratedFragment
428 + ) {
429 + // If a dehydrated suspense boundary is in this subtree, we don't know
430 + // if it will have any context consumers in it. The best we can do is
431 + // mark it as having updates.
432 + const parentSuspense = fiber.return;
433 + invariant(
434 + parentSuspense !== null,
435 + 'We just came from a parent so we must have had a parent. This is a bug in React.',
436 + );
437 + parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
438 + const alternate = parentSuspense.alternate;
439 + if (alternate !== null) {
440 + alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
441 + }
442 + // This is intentionally passing this fiber as the parent
443 + // because we want to schedule this fiber as having work
444 + // on its children. We'll use the childLanes on
445 + // this fiber to indicate that a context has changed.
446 + scheduleWorkOnParentPath(parentSuspense, renderLanes);
447 + nextFiber = null;
448 + } else {
449 + // Traverse down.
450 + nextFiber = fiber.child;
451 + }
452 +
453 + if (nextFiber !== null) {
454 + // Set the return pointer of the child to the work-in-progress fiber.
455 + nextFiber.return = fiber;
456 + } else {
457 + // No child. Traverse to next sibling.
458 + nextFiber = fiber;
459 + while (nextFiber !== null) {
460 + if (nextFiber === workInProgress) {
461 + // We're back to the root of this subtree. Exit.
462 + nextFiber = null;
463 + break;
464 + }
465 + const sibling = nextFiber.sibling;
466 + if (sibling !== null) {
467 + // Set the return pointer of the sibling to the work-in-progress fiber.
468 + sibling.return = nextFiber.return;
469 + nextFiber = sibling;
470 + break;
471 + }
472 + // No more siblings. Traverse up.
473 + nextFiber = nextFiber.return;
474 + }
475 + }
476 + fiber = nextFiber;
477 + }
478 +}
479 +
480 +export function lazilyPropagateParentContextChanges(
481 + current: Fiber,
482 + workInProgress: Fiber,
483 + renderLanes: Lanes,
484 +) {
485 + const forcePropagateEntireTree = false;
486 + propagateParentContextChanges(
487 + current,
488 + workInProgress,
489 + renderLanes,
490 + forcePropagateEntireTree,
491 + );
492 +}
493 +
494 +// Used for propagating a deferred tree (Suspense, Offscreen). We must propagate
495 +// to the entire subtree, because we won't revisit it until after the current
496 +// render has completed, at which point we'll have lost track of which providers
497 +// have changed.
498 +export function propagateParentContextChangesToDeferredTree(
499 + current: Fiber,
500 + workInProgress: Fiber,
501 + renderLanes: Lanes,
502 +) {
503 + const forcePropagateEntireTree = true;
504 + propagateParentContextChanges(
505 + current,
506 + workInProgress,
507 + renderLanes,
508 + forcePropagateEntireTree,
509 + );
510 +}
511 +
512 +function propagateParentContextChanges(
513 + current: Fiber,
514 + workInProgress: Fiber,
515 + renderLanes: Lanes,
516 + forcePropagateEntireTree: boolean,
517 +) {
518 + if (!enableLazyContextPropagation) {
519 + return;
520 + }
521 +
522 + // Collect all the parent providers that changed. Since this is usually small
523 + // number, we use an Array instead of Set.
524 + let contexts = null;
525 + let parent = workInProgress;
526 + let isInsidePropagationBailout = false;
527 + while (parent !== null) {
528 + if (!isInsidePropagationBailout) {
529 + if ((parent.flags & NeedsPropagation) !== NoFlags) {
530 + isInsidePropagationBailout = true;
531 + } else if ((parent.flags & DidPropagateContext) !== NoFlags) {
532 + break;
533 + }
534 + }
535 +
536 + if (parent.tag === ContextProvider) {
537 + const currentParent = parent.alternate;
538 + invariant(
539 + currentParent !== null,
540 + 'Should have a current fiber. This is a bug in React.',
541 + );
542 + const oldProps = currentParent.memoizedProps;
543 + if (oldProps !== null) {
544 + const providerType: ReactProviderType<any> = parent.type;
545 + const context: ReactContext<any> = providerType._context;
546 +
547 + const newProps = parent.pendingProps;
548 + const newValue = newProps.value;
549 +
550 + const oldValue = oldProps.value;
551 +
552 + const changedBits = calculateChangedBits(context, newValue, oldValue);
553 + if (changedBits !== 0) {
554 + if (contexts !== null) {
555 + contexts.push(context, changedBits);
556 + } else {
557 + contexts = [context, changedBits];
558 + }
559 + }
560 + }
561 + }
562 + parent = parent.return;
563 + }
564 +
565 + if (contexts !== null) {
566 + // If there were any changed providers, search through the children and
567 + // propagate their changes.
568 + propagateContextChanges(
569 + workInProgress,
570 + contexts,
571 + renderLanes,
572 + forcePropagateEntireTree,
573 + );
574 + }
575 +
576 + // This is an optimization so that we only propagate once per subtree. If a
577 + // deeply nested child bails out, and it calls this propagation function, it
578 + // uses this flag to know that the remaining ancestor providers have already
579 + // been propagated.
580 + //
581 + // NOTE: This optimization is only necessary because we sometimes enter the
582 + // begin phase of nodes that don't have any work scheduled on them —
583 + // specifically, the siblings of a node that _does_ have scheduled work. The
584 + // siblings will bail out and call this function again, even though we already
585 + // propagated content changes to it and its subtree. So we use this flag to
586 + // mark that the parent providers already propagated.
587 + //
588 + // Unfortunately, though, we need to ignore this flag when we're inside a
589 + // tree whose context propagation was deferred — that's what the
590 + // `NeedsPropagation` flag is for.
591 + //
592 + // If we could instead bail out before entering the siblings' begin phase,
593 + // then we could remove both `DidPropagateContext` and `NeedsPropagation`.
594 + // Consider this as part of the next refactor to the fiber tree structure.
595 + workInProgress.flags |= DidPropagateContext;
596 +}
597 +
598 export function checkIfContextChanged(currentDependencies: Dependencies) {
599 if (!enableLazyContextPropagation) {
600 return false;
@@ -442,6 +709,9 @@ export function readContext<T>(
709 // TODO: This is an old field. Delete it.
710 responders: null,
711 };
712 + if (enableLazyContextPropagation) {
713 + currentlyRenderingFiber.flags |= NeedsPropagation;
714 + }
715 } else {
716 // Append a new context item.
717 lastContextDependency = lastContextDependency.next = contextItem;
packages/react-reconciler/src/ReactFiberThrow.new.js
+19
@@ -38,6 +38,7 @@ import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
38 import {
39 enableDebugTracing,
40 enableSchedulingProfiler,
41 + enableLazyContextPropagation,
42 } from 'shared/ReactFeatureFlags';
43 import {createCapturedValue} from './ReactCapturedValue';
44 import {
@@ -60,6 +61,7 @@ import {
61 isAlreadyFailedLegacyErrorBoundary,
62 pingSuspendedRoot,
63 } from './ReactFiberWorkLoop.new';
64 +import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.new';
65 import {logCapturedError} from './ReactFiberErrorLogger';
66 import {logComponentSuspended} from './DebugTracing';
67 import {markComponentSuspended} from './SchedulingProfiler';
@@ -194,6 +196,23 @@ function throwException(
196 typeof value === 'object' &&
197 typeof value.then === 'function'
198 ) {
199 + if (enableLazyContextPropagation) {
200 + const currentSourceFiber = sourceFiber.alternate;
201 + if (currentSourceFiber !== null) {
202 + // Since we never visited the children of the suspended component, we
203 + // need to propagate the context change now, to ensure that we visit
204 + // them during the retry.
205 + //
206 + // We don't have to do this for errors because we retry errors without
207 + // committing in between. So this is specific to Suspense.
208 + propagateParentContextChangesToDeferredTree(
209 + currentSourceFiber,
210 + sourceFiber,
211 + rootRenderLanes,
212 + );
213 + }
214 + }
215 +
216 // This is a wakeable.
217 const wakeable: Wakeable = (value: any);
218
packages/react-reconciler/src/ReactFiberThrow.old.js
+19
@@ -38,6 +38,7 @@ import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
38 import {
39 enableDebugTracing,
40 enableSchedulingProfiler,
41 + enableLazyContextPropagation,
42 } from 'shared/ReactFeatureFlags';
43 import {createCapturedValue} from './ReactCapturedValue';
44 import {
@@ -60,6 +61,7 @@ import {
61 isAlreadyFailedLegacyErrorBoundary,
62 pingSuspendedRoot,
63 } from './ReactFiberWorkLoop.old';
64 +import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.old';
65 import {logCapturedError} from './ReactFiberErrorLogger';
66 import {logComponentSuspended} from './DebugTracing';
67 import {markComponentSuspended} from './SchedulingProfiler';
@@ -194,6 +196,23 @@ function throwException(
196 typeof value === 'object' &&
197 typeof value.then === 'function'
198 ) {
199 + if (enableLazyContextPropagation) {
200 + const currentSourceFiber = sourceFiber.alternate;
201 + if (currentSourceFiber !== null) {
202 + // Since we never visited the children of the suspended component, we
203 + // need to propagate the context change now, to ensure that we visit
204 + // them during the retry.
205 + //
206 + // We don't have to do this for errors because we retry errors without
207 + // committing in between. So this is specific to Suspense.
208 + propagateParentContextChangesToDeferredTree(
209 + currentSourceFiber,
210 + sourceFiber,
211 + rootRenderLanes,
212 + );
213 + }
214 + }
215 +
216 // This is a wakeable.
217 const wakeable: Wakeable = (value: any);
218
packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+720 -4
@@ -3,6 +3,11 @@ let ReactNoop;
3 let Scheduler;
4 let useState;
5 let useContext;
6 +let Suspense;
7 +let SuspenseList;
8 +let getCacheForType;
9 +let caches;
10 +let seededCache;
11
12 describe('ReactLazyContextPropagation', () => {
13 beforeEach(() => {
@@ -13,17 +18,148 @@ describe('ReactLazyContextPropagation', () => {
18 Scheduler = require('scheduler');
19 useState = React.useState;
20 useContext = React.useContext;
21 + Suspense = React.Suspense;
22 + SuspenseList = React.unstable_SuspenseList;
23 +
24 + getCacheForType = React.unstable_getCacheForType;
25 +
26 + caches = [];
27 + seededCache = null;
28 });
29
30 + // NOTE: These tests are not specific to the lazy propagation (as opposed to
31 + // eager propagation). The behavior should be the same in both
32 + // implementations. These are tests that are more relevant to the lazy
33 + // propagation implementation, though.
34 +
35 + function createTextCache() {
36 + if (seededCache !== null) {
37 + // Trick to seed a cache before it exists.
38 + // TODO: Need a built-in API to seed data before the initial render (i.e.
39 + // not a refresh because nothing has mounted yet).
40 + const cache = seededCache;
41 + seededCache = null;
42 + return cache;
43 + }
44 +
45 + const data = new Map();
46 + const version = caches.length + 1;
47 + const cache = {
48 + version,
49 + data,
50 + resolve(text) {
51 + const record = data.get(text);
52 + if (record === undefined) {
53 + const newRecord = {
54 + status: 'resolved',
55 + value: text,
56 + };
57 + data.set(text, newRecord);
58 + } else if (record.status === 'pending') {
59 + const thenable = record.value;
60 + record.status = 'resolved';
61 + record.value = text;
62 + thenable.pings.forEach(t => t());
63 + }
64 + },
65 + reject(text, error) {
66 + const record = data.get(text);
67 + if (record === undefined) {
68 + const newRecord = {
69 + status: 'rejected',
70 + value: error,
71 + };
72 + data.set(text, newRecord);
73 + } else if (record.status === 'pending') {
74 + const thenable = record.value;
75 + record.status = 'rejected';
76 + record.value = error;
77 + thenable.pings.forEach(t => t());
78 + }
79 + },
80 + };
81 + caches.push(cache);
82 + return cache;
83 + }
84 +
85 + function readText(text) {
86 + const textCache = getCacheForType(createTextCache);
87 + const record = textCache.data.get(text);
88 + if (record !== undefined) {
89 + switch (record.status) {
90 + case 'pending':
91 + Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
92 + throw record.value;
93 + case 'rejected':
94 + Scheduler.unstable_yieldValue(`Error! [${text}]`);
95 + throw record.value;
96 + case 'resolved':
97 + return textCache.version;
98 + }
99 + } else {
100 + Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
101 +
102 + const thenable = {
103 + pings: [],
104 + then(resolve) {
105 + if (newRecord.status === 'pending') {
106 + thenable.pings.push(resolve);
107 + } else {
108 + Promise.resolve().then(() => resolve(newRecord.value));
109 + }
110 + },
111 + };
112 +
113 + const newRecord = {
114 + status: 'pending',
115 + value: thenable,
116 + };
117 + textCache.data.set(text, newRecord);
118 +
119 + throw thenable;
120 + }
121 + }
122 +
123 function Text({text}) {
124 Scheduler.unstable_yieldValue(text);
125 return text;
126 }
127
23 - // NOTE: These tests are not specific to the lazy propagation (as opposed to
24 - // eager propagation). The behavior should be the same in both
25 - // implementations. These are tests that are more relevant to the lazy
26 - // propagation implementation, though.
128 + // function AsyncText({text, showVersion}) {
129 + // const version = readText(text);
130 + // const fullText = showVersion ? `${text} [v${version}]` : text;
131 + // Scheduler.unstable_yieldValue(fullText);
132 + // return text;
133 + // }
134 +
135 + function seedNextTextCache(text) {
136 + if (seededCache === null) {
137 + seededCache = createTextCache();
138 + }
139 + seededCache.resolve(text);
140 + }
141 +
142 + function resolveMostRecentTextCache(text) {
143 + if (caches.length === 0) {
144 + throw Error('Cache does not exist.');
145 + } else {
146 + // Resolve the most recently created cache. An older cache can by
147 + // resolved with `caches[index].resolve(text)`.
148 + caches[caches.length - 1].resolve(text);
149 + }
150 + }
151 +
152 + const resolveText = resolveMostRecentTextCache;
153 +
154 + // function rejectMostRecentTextCache(text, error) {
155 + // if (caches.length === 0) {
156 + // throw Error('Cache does not exist.');
157 + // } else {
158 + // // Resolve the most recently created cache. An older cache can by
159 + // // resolved with `caches[index].reject(text, error)`.
160 + // caches[caches.length - 1].reject(text, error);
161 + // }
162 + // }
163
164 test(
165 'context change should prevent bailout of memoized component (useMemo -> ' +
@@ -203,4 +339,584 @@ describe('ReactLazyContextPropagation', () => {
339 expect(Scheduler).toHaveYielded(['Consumer']);
340 expect(root).toMatchRenderedOutput('0');
341 });
342 +
343 + // @gate enableCache
344 + test('context is propagated across retries', async () => {
345 + const root = ReactNoop.createRoot();
346 +
347 + const Context = React.createContext('A');
348 +
349 + let setContext;
350 + function App() {
351 + const [value, setValue] = useState('A');
352 + setContext = setValue;
353 + return (
354 + <Context.Provider value={value}>
355 + <Suspense fallback={<Text text="Loading..." />}>
356 + <Async />
357 + </Suspense>
358 + <Text text={value} />
359 + </Context.Provider>
360 + );
361 + }
362 +
363 + function Async() {
364 + const value = useContext(Context);
365 + readText(value);
366 +
367 + // When `readText` suspends, we haven't yet visited Indirection and all
368 + // of its children. They won't get rendered until a later retry.
369 + return <Indirection />;
370 + }
371 +
372 + const Indirection = React.memo(() => {
373 + // This child must always be consistent with the sibling Text component.
374 + return <DeepChild />;
375 + });
376 +
377 + function DeepChild() {
378 + const value = useContext(Context);
379 + return <Text text={value} />;
380 + }
381 +
382 + await seedNextTextCache('A');
383 + await ReactNoop.act(async () => {
384 + root.render(<App />);
385 + });
386 + expect(Scheduler).toHaveYielded(['A', 'A']);
387 + expect(root).toMatchRenderedOutput('AA');
388 +
389 + await ReactNoop.act(async () => {
390 + // Intentionally not wrapping in startTransition, so that the fallback
391 + // the fallback displays despite this being a refresh.
392 + setContext('B');
393 + });
394 + expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
395 + expect(root).toMatchRenderedOutput('Loading...B');
396 +
397 + await ReactNoop.act(async () => {
398 + await resolveText('B');
399 + });
400 + expect(Scheduler).toHaveYielded(['B']);
401 + expect(root).toMatchRenderedOutput('BB');
402 + });
403 +
404 + // @gate enableCache
405 + test('multiple contexts are propagated across retries', async () => {
406 + // Same as previous test, but with multiple context providers
407 + const root = ReactNoop.createRoot();
408 +
409 + const Context1 = React.createContext('A');
410 + const Context2 = React.createContext('A');
411 +
412 + let setContext;
413 + function App() {
414 + const [value, setValue] = useState('A');
415 + setContext = setValue;
416 + return (
417 + <Context1.Provider value={value}>
418 + <Context2.Provider value={value}>
419 + <Suspense fallback={<Text text="Loading..." />}>
420 + <Async />
421 + </Suspense>
422 + <Text text={value} />
423 + </Context2.Provider>
424 + </Context1.Provider>
425 + );
426 + }
427 +
428 + function Async() {
429 + const value = useContext(Context1);
430 + readText(value);
431 +
432 + // When `readText` suspends, we haven't yet visited Indirection and all
433 + // of its children. They won't get rendered until a later retry.
434 + return (
435 + <>
436 + <Indirection1 />
437 + <Indirection2 />
438 + </>
439 + );
440 + }
441 +
442 + const Indirection1 = React.memo(() => {
443 + // This child must always be consistent with the sibling Text component.
444 + return <DeepChild1 />;
445 + });
446 +
447 + const Indirection2 = React.memo(() => {
448 + // This child must always be consistent with the sibling Text component.
449 + return <DeepChild2 />;
450 + });
451 +
452 + function DeepChild1() {
453 + const value = useContext(Context1);
454 + return <Text text={value} />;
455 + }
456 +
457 + function DeepChild2() {
458 + const value = useContext(Context2);
459 + return <Text text={value} />;
460 + }
461 +
462 + await seedNextTextCache('A');
463 + await ReactNoop.act(async () => {
464 + root.render(<App />);
465 + });
466 + expect(Scheduler).toHaveYielded(['A', 'A', 'A']);
467 + expect(root).toMatchRenderedOutput('AAA');
468 +
469 + await ReactNoop.act(async () => {
470 + // Intentionally not wrapping in startTransition, so that the fallback
471 + // the fallback displays despite this being a refresh.
472 + setContext('B');
473 + });
474 + expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
475 + expect(root).toMatchRenderedOutput('Loading...B');
476 +
477 + await ReactNoop.act(async () => {
478 + await resolveText('B');
479 + });
480 + expect(Scheduler).toHaveYielded(['B', 'B']);
481 + expect(root).toMatchRenderedOutput('BBB');
482 + });
483 +
484 + // @gate enableCache
485 + test('context is propagated across retries (legacy)', async () => {
486 + const root = ReactNoop.createLegacyRoot();
487 +
488 + const Context = React.createContext('A');
489 +
490 + let setContext;
491 + function App() {
492 + const [value, setValue] = useState('A');
493 + setContext = setValue;
494 + return (
495 + <Context.Provider value={value}>
496 + <Suspense fallback={<Text text="Loading..." />}>
497 + <Async />
498 + </Suspense>
499 + <Text text={value} />
500 + </Context.Provider>
501 + );
502 + }
503 +
504 + function Async() {
505 + const value = useContext(Context);
506 + readText(value);
507 +
508 + // When `readText` suspends, we haven't yet visited Indirection and all
509 + // of its children. They won't get rendered until a later retry.
510 + return <Indirection />;
511 + }
512 +
513 + const Indirection = React.memo(() => {
514 + // This child must always be consistent with the sibling Text component.
515 + return <DeepChild />;
516 + });
517 +
518 + function DeepChild() {
519 + const value = useContext(Context);
520 + return <Text text={value} />;
521 + }
522 +
523 + await seedNextTextCache('A');
524 + await ReactNoop.act(async () => {
525 + root.render(<App />);
526 + });
527 + expect(Scheduler).toHaveYielded(['A', 'A']);
528 + expect(root).toMatchRenderedOutput('AA');
529 +
530 + await ReactNoop.act(async () => {
531 + // Intentionally not wrapping in startTransition, so that the fallback
532 + // the fallback displays despite this being a refresh.
533 + setContext('B');
534 + });
535 + expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
536 + expect(root).toMatchRenderedOutput('Loading...B');
537 +
538 + await ReactNoop.act(async () => {
539 + await resolveText('B');
540 + });
541 + expect(Scheduler).toHaveYielded(['B']);
542 + expect(root).toMatchRenderedOutput('BB');
543 + });
544 +
545 + // @gate experimental
546 + test('context is propagated through offscreen trees', async () => {
547 + const LegacyHidden = React.unstable_LegacyHidden;
548 +
549 + const root = ReactNoop.createRoot();
550 +
551 + const Context = React.createContext('A');
552 +
553 + let setContext;
554 + function App() {
555 + const [value, setValue] = useState('A');
556 + setContext = setValue;
557 + return (
558 + <Context.Provider value={value}>
559 + <LegacyHidden mode="hidden">
560 + <Indirection />
561 + </LegacyHidden>
562 + <Text text={value} />
563 + </Context.Provider>
564 + );
565 + }
566 +
567 + const Indirection = React.memo(() => {
568 + // This child must always be consistent with the sibling Text component.
569 + return <DeepChild />;
570 + });
571 +
572 + function DeepChild() {
573 + const value = useContext(Context);
574 + return <Text text={value} />;
575 + }
576 +
577 + await seedNextTextCache('A');
578 + await ReactNoop.act(async () => {
579 + root.render(<App />);
580 + });
581 + expect(Scheduler).toHaveYielded(['A', 'A']);
582 + expect(root).toMatchRenderedOutput('AA');
583 +
584 + await ReactNoop.act(async () => {
585 + setContext('B');
586 + });
587 + expect(Scheduler).toHaveYielded(['B', 'B']);
588 + expect(root).toMatchRenderedOutput('BB');
589 + });
590 +
591 + // @gate experimental
592 + test('multiple contexts are propagated across through offscreen trees', async () => {
593 + // Same as previous test, but with multiple context providers
594 + const LegacyHidden = React.unstable_LegacyHidden;
595 +
596 + const root = ReactNoop.createRoot();
597 +
598 + const Context1 = React.createContext('A');
599 + const Context2 = React.createContext('A');
600 +
601 + let setContext;
602 + function App() {
603 + const [value, setValue] = useState('A');
604 + setContext = setValue;
605 + return (
606 + <Context1.Provider value={value}>
607 + <Context2.Provider value={value}>
608 + <LegacyHidden mode="hidden">
609 + <Indirection1 />
610 + <Indirection2 />
611 + </LegacyHidden>
612 + <Text text={value} />
613 + </Context2.Provider>
614 + </Context1.Provider>
615 + );
616 + }
617 +
618 + const Indirection1 = React.memo(() => {
619 + // This child must always be consistent with the sibling Text component.
620 + return <DeepChild1 />;
621 + });
622 +
623 + const Indirection2 = React.memo(() => {
624 + // This child must always be consistent with the sibling Text component.
625 + return <DeepChild2 />;
626 + });
627 +
628 + function DeepChild1() {
629 + const value = useContext(Context1);
630 + return <Text text={value} />;
631 + }
632 +
633 + function DeepChild2() {
634 + const value = useContext(Context2);
635 + return <Text text={value} />;
636 + }
637 +
638 + await seedNextTextCache('A');
639 + await ReactNoop.act(async () => {
640 + root.render(<App />);
641 + });
642 + expect(Scheduler).toHaveYielded(['A', 'A', 'A']);
643 + expect(root).toMatchRenderedOutput('AAA');
644 +
645 + await ReactNoop.act(async () => {
646 + setContext('B');
647 + });
648 + expect(Scheduler).toHaveYielded(['B', 'B', 'B']);
649 + expect(root).toMatchRenderedOutput('BBB');
650 + });
651 +
652 + // @gate enableCache
653 + // @gate experimental
654 + test('contexts are propagated through SuspenseList', async () => {
655 + // This kinda tests an implementation detail. SuspenseList has an early
656 + // bailout that doesn't use `bailoutOnAlreadyFinishedWork`. It probably
657 + // should just use that function, though.
658 + const Context = React.createContext('A');
659 +
660 + let setContext;
661 + function App() {
662 + const [value, setValue] = useState('A');
663 + setContext = setValue;
664 + const children = React.useMemo(
665 + () => (
666 + <SuspenseList revealOrder="forwards">
667 + <Child />
668 + <Child />
669 + </SuspenseList>
670 + ),
671 + [],
672 + );
673 + return <Context.Provider value={value}>{children}</Context.Provider>;
674 + }
675 +
676 + function Child() {
677 + const value = useContext(Context);
678 + return <Text text={value} />;
679 + }
680 +
681 + const root = ReactNoop.createRoot();
682 + await ReactNoop.act(async () => {
683 + root.render(<App />);
684 + });
685 + expect(Scheduler).toHaveYielded(['A', 'A']);
686 + expect(root).toMatchRenderedOutput('AA');
687 +
688 + await ReactNoop.act(async () => {
689 + setContext('B');
690 + });
691 + expect(Scheduler).toHaveYielded(['B', 'B']);
692 + expect(root).toMatchRenderedOutput('BB');
693 + });
694 +
695 + test('nested bailouts', async () => {
696 + // Lazy context propagation will stop propagating when it hits the first
697 + // match. If we bail out again inside that tree, we must resume propagating.
698 +
699 + const Context = React.createContext('A');
700 +
701 + let setContext;
702 + function App() {
703 + const [value, setValue] = useState('A');
704 + setContext = setValue;
705 + return (
706 + <Context.Provider value={value}>
707 + <ChildIndirection />
708 + </Context.Provider>
709 + );
710 + }
711 +
712 + const ChildIndirection = React.memo(() => {
713 + return <Child />;
714 + });
715 +
716 + function Child() {
717 + const value = useContext(Context);
718 + return (
719 + <>
720 + <Text text={value} />
721 + <DeepChildIndirection />
722 + </>
723 + );
724 + }
725 +
726 + const DeepChildIndirection = React.memo(() => {
727 + return <DeepChild />;
728 + });
729 +
730 + function DeepChild() {
731 + const value = useContext(Context);
732 + return <Text text={value} />;
733 + }
734 +
735 + const root = ReactNoop.createRoot();
736 + await ReactNoop.act(async () => {
737 + root.render(<App />);
738 + });
739 + expect(Scheduler).toHaveYielded(['A', 'A']);
740 + expect(root).toMatchRenderedOutput('AA');
741 +
742 + await ReactNoop.act(async () => {
743 + setContext('B');
744 + });
745 + expect(Scheduler).toHaveYielded(['B', 'B']);
746 + expect(root).toMatchRenderedOutput('BB');
747 + });
748 +
749 + // @gate experimental
750 + // @gate enableCache
751 + test('nested bailouts across retries', async () => {
752 + // Lazy context propagation will stop propagating when it hits the first
753 + // match. If we bail out again inside that tree, we must resume propagating.
754 +
755 + const Context = React.createContext('A');
756 +
757 + let setContext;
758 + function App() {
759 + const [value, setValue] = useState('A');
760 + setContext = setValue;
761 + return (
762 + <Context.Provider value={value}>
763 + <Suspense fallback={<Text text="Loading..." />}>
764 + <Async value={value} />
765 + </Suspense>
766 + </Context.Provider>
767 + );
768 + }
769 +
770 + function Async({value}) {
771 + // When this suspends, we won't be able to visit its children during the
772 + // current render. So we must take extra care to propagate the context
773 + // change in such a way that they're aren't lost when we retry in a
774 + // later render.
775 + readText(value);
776 + return <Child value={value} />;
777 + }
778 +
779 + function Child() {
780 + const value = useContext(Context);
781 + return (
782 + <>
783 + <Text text={value} />
784 + <DeepChildIndirection />
785 + </>
786 + );
787 + }
788 +
789 + const DeepChildIndirection = React.memo(() => {
790 + return <DeepChild />;
791 + });
792 +
793 + function DeepChild() {
794 + const value = useContext(Context);
795 + return <Text text={value} />;
796 + }
797 +
798 + const root = ReactNoop.createRoot();
799 + await seedNextTextCache('A');
800 + await ReactNoop.act(async () => {
801 + root.render(<App />);
802 + });
803 + expect(Scheduler).toHaveYielded(['A', 'A']);
804 + expect(root).toMatchRenderedOutput('AA');
805 +
806 + await ReactNoop.act(async () => {
807 + setContext('B');
808 + });
809 + expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...']);
810 + expect(root).toMatchRenderedOutput('Loading...');
811 +
812 + await ReactNoop.act(async () => {
813 + await resolveText('B');
814 + });
815 + expect(Scheduler).toHaveYielded(['B', 'B']);
816 + expect(root).toMatchRenderedOutput('BB');
817 + });
818 +
819 + // @gate experimental
820 + test('nested bailouts through offscreen trees', async () => {
821 + // Lazy context propagation will stop propagating when it hits the first
822 + // match. If we bail out again inside that tree, we must resume propagating.
823 +
824 + const LegacyHidden = React.unstable_LegacyHidden;
825 +
826 + const Context = React.createContext('A');
827 +
828 + let setContext;
829 + function App() {
830 + const [value, setValue] = useState('A');
831 + setContext = setValue;
832 + return (
833 + <Context.Provider value={value}>
834 + <LegacyHidden mode="hidden">
835 + <Child />
836 + </LegacyHidden>
837 + </Context.Provider>
838 + );
839 + }
840 +
841 + function Child() {
842 + const value = useContext(Context);
843 + return (
844 + <>
845 + <Text text={value} />
846 + <DeepChildIndirection />
847 + </>
848 + );
849 + }
850 +
851 + const DeepChildIndirection = React.memo(() => {
852 + return <DeepChild />;
853 + });
854 +
855 + function DeepChild() {
856 + const value = useContext(Context);
857 + return <Text text={value} />;
858 + }
859 +
860 + const root = ReactNoop.createRoot();
861 + await ReactNoop.act(async () => {
862 + root.render(<App />);
863 + });
864 + expect(Scheduler).toHaveYielded(['A', 'A']);
865 + expect(root).toMatchRenderedOutput('AA');
866 +
867 + await ReactNoop.act(async () => {
868 + setContext('B');
869 + });
870 + expect(Scheduler).toHaveYielded(['B', 'B']);
871 + expect(root).toMatchRenderedOutput('BB');
872 + });
873 +
874 + test('finds context consumers in multiple sibling branches', async () => {
875 + // This test confirms that when we find a matching context consumer during
876 + // propagation, we continue propagating to its sibling branches.
877 +
878 + const Context = React.createContext('A');
879 +
880 + let setContext;
881 + function App() {
882 + const [value, setValue] = useState('A');
883 + setContext = setValue;
884 + return (
885 + <Context.Provider value={value}>
886 + <Blah />
887 + </Context.Provider>
888 + );
889 + }
890 +
891 + const Blah = React.memo(() => {
892 + return (
893 + <>
894 + <Indirection />
895 + <Indirection />
896 + </>
897 + );
898 + });
899 +
900 + const Indirection = React.memo(() => {
901 + return <Child />;
902 + });
903 +
904 + function Child() {
905 + const value = useContext(Context);
906 + return <Text text={value} />;
907 + }
908 +
909 + const root = ReactNoop.createRoot();
910 + await ReactNoop.act(async () => {
911 + root.render(<App />);
912 + });
913 + expect(Scheduler).toHaveYielded(['A', 'A']);
914 + expect(root).toMatchRenderedOutput('AA');
915 +
916 + await ReactNoop.act(async () => {
917 + setContext('B');
918 + });
919 + expect(Scheduler).toHaveYielded(['B', 'B']);
920 + expect(root).toMatchRenderedOutput('BB');
921 + });
922 });
packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+8 -4
@@ -689,6 +689,7 @@ describe('ReactNewContext', () => {
689 ]);
690 });
691
692 + // @gate !enableLazyContextPropagation
693 it('can skip parents with bitmask bailout while updating their children', () => {
694 const Context = React.createContext({foo: 0, bar: 0}, (a, b) => {
695 let result = 0;
@@ -1077,10 +1078,13 @@ describe('ReactNewContext', () => {
1078
1079 // Update
1080 ReactNoop.render(<App value={2} />);
1080 - expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
1081 - 'calculateChangedBits: Expected the return value to be a 31-bit ' +
1082 - 'integer. Instead received: 4294967295',
1083 - );
1081 +
1082 + if (gate(flags => !flags.enableLazyContextPropagation)) {
1083 + expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
1084 + 'calculateChangedBits: Expected the return value to be a 31-bit ' +
1085 + 'integer. Instead received: 4294967295',
1086 + );
1087 + }
1088 });
1089
1090 it('warns if no value prop provided', () => {
scripts/error-codes/codes.json
+3 -1
@@ -374,5 +374,7 @@
374 "383": "This query has received fewer parameters than the last time the same query was used. Always pass the exact number of parameters that the query needs.",
375 "384": "Refreshing the cache is not supported in Server Components.",
376 "385": "A mutable source was mutated while the %s component was rendering. This is not supported. Move any mutations into event handlers or effects.",
377 - "386": "The current renderer does not support microtasks. This error is likely caused by a bug in React. Please file an issue."
377 + "386": "The current renderer does not support microtasks. This error is likely caused by a bug in React. Please file an issue.",
378 + "387": "Should have a current fiber. This is a bug in React.",
379 + "388": "Expected to find a bailed out fiber. This is a bug in React."
380 }