@samitouri / QOS-React-2 / commits / 34ee3919c3

Clean up enableLazyContextPropagation (#31810)

This flag has shipped everywhere, let's clean it up.

Jack Pope committed Dec 17, 2024 at 11:56 UTC 34ee3919c39bc9b149462322713a9811db4b8498

15 files changed +53 -331

packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js

+1 -9

@@ -233,15 +233,7 @@ describe('ReactLegacyContextDisabled', () => {

233 );

234 });

235 expect(container.textContent).toBe('bbb');

236 - if (gate(flags => flags.enableLazyContextPropagation)) {

237 - // In the lazy propagation implementation, we don't check if context

238 - // changed until after shouldComponentUpdate is run.

239 - expect(lifecycleContextLog).toEqual(['b', 'b', 'b']);

240 - } else {

241 - // In the eager implementation, a dirty flag was set when the parent

242 - // changed, so we skipped sCU.

243 - expect(lifecycleContextLog).toEqual(['b', 'b']);

244 - }

236 + expect(lifecycleContextLog).toEqual(['b', 'b', 'b']);

237 root.unmount();

238 });

239 });

packages/react-reconciler/src/ReactFiberBeginWork.js

+6 -65

@@ -37,8 +37,6 @@ import type {

37 import type {UpdateQueue} from './ReactFiberClassUpdateQueue';

38 import type {RootState} from './ReactFiberRoot';

39 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';

40 -import type {TransitionStatus} from './ReactFiberConfig';

41 -import type {Hook} from './ReactFiberHooks';

41 import {

42 markComponentRenderStarted,

@@ -100,7 +98,6 @@ import {

98 enableProfilerCommitHooks,

99 enableProfilerTimer,

100 enableScopeAPI,

103 - enableLazyContextPropagation,

101 enableSchedulingProfiler,

102 enableTransitionTracing,

103 enableLegacyHidden,

@@ -272,7 +269,6 @@ import {

269 createClassErrorUpdate,

270 initializeClassErrorUpdate,

271 } from './ReactFiberThrow';

275 -import is from 'shared/objectIs';

272 import {

273 getForksAtLevel,

274 isForkedChild,

@@ -843,7 +839,7 @@ function deferHiddenOffscreenComponent(

839

840 pushOffscreenSuspenseHandler(workInProgress);

841

846 - if (enableLazyContextPropagation && current !== null) {

842 + if (current !== null) {

843 // Since this tree will resume rendering in a separate render, we need

844 // to propagate parent contexts now so we don't lose track of which

845 // ones changed.

@@ -1636,26 +1632,6 @@ function updateHostComponent(

1632 } else {

1633 HostTransitionContext._currentValue2 = newState;

1634 }

1639 - if (enableLazyContextPropagation) {

1640 - // In the lazy propagation implementation, we don't scan for matching

1641 - // consumers until something bails out.

1642 - } else {

1643 - if (didReceiveUpdate) {

1644 - if (current !== null) {

1645 - const oldStateHook: Hook = current.memoizedState;

1646 - const oldState: TransitionStatus = oldStateHook.memoizedState;

1647 - // This uses regular equality instead of Object.is because we assume

1648 - // that host transition state doesn't include NaN as a valid type.

1649 - if (oldState !== newState) {

1650 - propagateContextChange(

1651 - workInProgress,

1652 - HostTransitionContext,

1653 - renderLanes,

1654 - );

1655 - }

1656 - }

1657 - }

1658 - }

1635 }

1636

1637 markRef(current, workInProgress);

@@ -2706,10 +2682,7 @@ function updateDehydratedSuspenseComponent(

2682 }

2683

2684 if (

2709 - enableLazyContextPropagation &&

2685 // TODO: Factoring is a little weird, since we check this right below, too.

2711 - // But don't want to re-arrange the if-else chain until/unless this

2712 - // feature lands.

2686 !didReceiveUpdate

2687 ) {

2688 // We need to check if any children have context before we decide to bail

@@ -3300,8 +3273,6 @@ function updateContextProvider(

3273 context = workInProgress.type._context;

3274 }

3275 const newProps = workInProgress.pendingProps;

3303 - const oldProps = workInProgress.memoizedProps;

3304 -

3276 const newValue = newProps.value;

3277

3278 if (__DEV__) {

@@ -3317,34 +3288,6 @@ function updateContextProvider(

3288

3289 pushProvider(workInProgress, context, newValue);

3290

3320 - if (enableLazyContextPropagation) {

3321 - // In the lazy propagation implementation, we don't scan for matching

3322 - // consumers until something bails out, because until something bails out

3323 - // we're going to visit those nodes, anyway. The trade-off is that it shifts

3324 - // responsibility to the consumer to track whether something has changed.

3325 - } else {

3326 - if (oldProps !== null) {

3327 - const oldValue = oldProps.value;

3328 - if (is(oldValue, newValue)) {

3329 - // No change. Bailout early if children are the same.

3330 - if (

3331 - oldProps.children === newProps.children &&

3332 - !hasLegacyContextChanged()

3333 - ) {

3334 - return bailoutOnAlreadyFinishedWork(

3335 - current,

3336 - workInProgress,

3337 - renderLanes,

3338 - );

3339 - }

3340 - } else {

3341 - // The context value changed. Search for matching consumers and schedule

3342 - // them to update.

3343 - propagateContextChange(workInProgress, context, renderLanes);

3344 - }

3345 - }

3346 - }

3347 -

3291 const newChildren = newProps.children;

3292 reconcileChildren(current, workInProgress, newChildren, renderLanes);

3293 return workInProgress.child;

@@ -3463,7 +3406,7 @@ function bailoutOnAlreadyFinishedWork(

3406 // TODO: Once we add back resuming, we should check if the children are

3407 // a work-in-progress set. If so, we need to transfer their effects.

3408

3466 - if (enableLazyContextPropagation && current !== null) {

3409 + if (current !== null) {

3410 // Before bailing out, check if there are any context changes in

3411 // the children.

3412 lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);

@@ -3564,11 +3507,9 @@ function checkScheduledUpdateOrContext(

3507 }

3508 // No pending update, but because context is propagated lazily, we need

3509 // to check for a context change before we bail out.

3567 - if (enableLazyContextPropagation) {

3568 - const dependencies = current.dependencies;

3569 - if (dependencies !== null && checkIfContextChanged(dependencies)) {

3570 - return true;

3571 - }

3510 + const dependencies = current.dependencies;

3511 + if (dependencies !== null && checkIfContextChanged(dependencies)) {

3512 + return true;

3513 }

3514 return false;

3515 }

@@ -3706,7 +3647,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(

3647 workInProgress.childLanes,

3648 );

3649

3709 - if (enableLazyContextPropagation && !hasChildWork) {

3650 + if (!hasChildWork) {

3651 // Context changes may not have been propagated yet. We need to do

3652 // that now, before we can decide whether to bail out.

3653 // TODO: We use `childLanes` as a heuristic for whether there is

packages/react-reconciler/src/ReactFiberClassComponent.js

+1 -4

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

21 debugRenderPhaseSideEffectsForStrictMode,

22 disableLegacyContext,

23 enableSchedulingProfiler,

24 - enableLazyContextPropagation,

24 disableDefaultPropsExceptForClasses,

25 } from 'shared/ReactFeatureFlags';

26 import ReactStrictModeWarnings from './ReactStrictModeWarnings';

@@ -1092,7 +1091,6 @@ function updateClassInstance(

1091 !hasContextChanged() &&

1092 !checkHasForceUpdateAfterProcessing() &&

1093 !(

1095 - enableLazyContextPropagation &&

1094 current !== null &&

1095 current.dependencies !== null &&

1096 checkIfContextChanged(current.dependencies)

@@ -1144,8 +1142,7 @@ function updateClassInstance(

1142 // both before and after `shouldComponentUpdate` has been called. Not ideal,

1143 // but I'm loath to refactor this function. This only happens for memoized

1144 // components so it's not that common.

1147 - (enableLazyContextPropagation &&

1148 - current !== null &&

1145 + (current !== null &&

1146 current.dependencies !== null &&

1147 checkIfContextChanged(current.dependencies));

1148

packages/react-reconciler/src/ReactFiberHooks.js

+15 -18

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

36 import ReactSharedInternals from 'shared/ReactSharedInternals';

37 import {

38 enableSchedulingProfiler,

39 - enableLazyContextPropagation,

39 enableTransitionTracing,

40 enableUseEffectEventHook,

41 enableUseResourceEffectHook,

@@ -743,23 +742,21 @@ function finishRenderingHooks<Props, SecondArg>(

742 );

743 }

744

746 - if (enableLazyContextPropagation) {

747 - if (current !== null) {

748 - if (!checkIfWorkInProgressReceivedUpdate()) {

749 - // If there were no changes to props or state, we need to check if there

750 - // was a context change. We didn't already do this because there's no

751 - // 1:1 correspondence between dependencies and hooks. Although, because

752 - // there almost always is in the common case (`readContext` is an

753 - // internal API), we could compare in there. OTOH, we only hit this case

754 - // if everything else bails out, so on the whole it might be better to

755 - // keep the comparison out of the common path.

756 - const currentDependencies = current.dependencies;

757 - if (

758 - currentDependencies !== null &&

759 - checkIfContextChanged(currentDependencies)

760 - ) {

761 - markWorkInProgressReceivedUpdate();

762 - }

745 + if (current !== null) {

746 + if (!checkIfWorkInProgressReceivedUpdate()) {

747 + // If there were no changes to props or state, we need to check if there

748 + // was a context change. We didn't already do this because there's no

749 + // 1:1 correspondence between dependencies and hooks. Although, because

750 + // there almost always is in the common case (`readContext` is an

751 + // internal API), we could compare in there. OTOH, we only hit this case

752 + // if everything else bails out, so on the whole it might be better to

753 + // keep the comparison out of the common path.

754 + const currentDependencies = current.dependencies;

755 + if (

756 + currentDependencies !== null &&

757 + checkIfContextChanged(currentDependencies)

758 + ) {

759 + markWorkInProgressReceivedUpdate();

760 }

761 }

762 }

packages/react-reconciler/src/ReactFiberNewContext.js

+16 -198

@@ -15,24 +15,13 @@ import type {

15 } from './ReactInternalTypes';

16 import type {StackCursor} from './ReactFiberStack';

17 import type {Lanes} from './ReactFiberLane';

18 -import type {SharedQueue} from './ReactFiberClassUpdateQueue';

18 import type {TransitionStatus} from './ReactFiberConfig';

19 import type {Hook} from './ReactFiberHooks';

21 import {isPrimaryRenderer, HostTransitionContext} from './ReactFiberConfig';

22 import {createCursor, push, pop} from './ReactFiberStack';

24 -import {

25 - ContextProvider,

26 - ClassComponent,

27 - DehydratedFragment,

28 -} from './ReactWorkTags';

29 -import {

30 - NoLanes,

31 - isSubsetOfLanes,

32 - includesSomeLane,

33 - mergeLanes,

34 - pickArbitraryLane,

35 -} from './ReactFiberLane';

23 +import {ContextProvider, DehydratedFragment} from './ReactWorkTags';

24 +import {NoLanes, isSubsetOfLanes, mergeLanes} from './ReactFiberLane';

25 import {

26 NoFlags,

27 DidPropagateContext,

@@ -40,12 +29,7 @@ import {

29 } from './ReactFiberFlags';

31 import is from 'shared/objectIs';

43 -import {createUpdate, ForceUpdate} from './ReactFiberClassUpdateQueue';

44 -import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork';

45 -import {

46 - enableLazyContextPropagation,

47 - enableRenderableContext,

48 -} from 'shared/ReactFeatureFlags';

32 +import {enableRenderableContext} from 'shared/ReactFeatureFlags';

33 import {getHostTransitionProvider} from './ReactFiberHostContext';

35 const valueCursor: StackCursor<mixed> = createCursor(null);

@@ -210,157 +194,16 @@ export function propagateContextChange<T>(

194 context: ReactContext<T>,

195 renderLanes: Lanes,

196 ): void {

213 - if (enableLazyContextPropagation) {

214 - // TODO: This path is only used by Cache components. Update

215 - // lazilyPropagateParentContextChanges to look for Cache components so they

216 - // can take advantage of lazy propagation.

217 - const forcePropagateEntireTree = true;

218 - propagateContextChanges(

219 - workInProgress,

220 - [context],

221 - renderLanes,

222 - forcePropagateEntireTree,

223 - );

224 - } else {

225 - propagateContextChange_eager(workInProgress, context, renderLanes);

226 - }

227 -}

228 -

229 -function propagateContextChange_eager<T>(

230 - workInProgress: Fiber,

231 - context: ReactContext<T>,

232 - renderLanes: Lanes,

233 -): void {

234 - // Only used by eager implementation

235 - if (enableLazyContextPropagation) {

236 - return;

237 - }

238 - let fiber = workInProgress.child;

239 - if (fiber !== null) {

240 - // Set the return pointer of the child to the work-in-progress fiber.

241 - fiber.return = workInProgress;

242 - }

243 - while (fiber !== null) {

244 - let nextFiber;

245 -

246 - // Visit this fiber.

247 - const list = fiber.dependencies;

248 - if (list !== null) {

249 - nextFiber = fiber.child;

250 -

251 - let dependency = list.firstContext;

252 - while (dependency !== null) {

253 - // Check if the context matches.

254 - if (dependency.context === context) {

255 - // Match! Schedule an update on this fiber.

256 - if (fiber.tag === ClassComponent) {

257 - // Schedule a force update on the work-in-progress.

258 - const lane = pickArbitraryLane(renderLanes);

259 - const update = createUpdate(lane);

260 - update.tag = ForceUpdate;

261 - // TODO: Because we don't have a work-in-progress, this will add the

262 - // update to the current fiber, too, which means it will persist even if

263 - // this render is thrown away. Since it's a race condition, not sure it's

264 - // worth fixing.

265 -

266 - // Inlined `enqueueUpdate` to remove interleaved update check

267 - const updateQueue = fiber.updateQueue;

268 - if (updateQueue === null) {

269 - // Only occurs if the fiber has been unmounted.

270 - } else {

271 - const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;

272 - const pending = sharedQueue.pending;

273 - if (pending === null) {

274 - // This is the first update. Create a circular list.

275 - update.next = update;

276 - } else {

277 - update.next = pending.next;

278 - pending.next = update;

279 - }

280 - sharedQueue.pending = update;

281 - }

282 - }

283 -

284 - fiber.lanes = mergeLanes(fiber.lanes, renderLanes);

285 - const alternate = fiber.alternate;

286 - if (alternate !== null) {

287 - alternate.lanes = mergeLanes(alternate.lanes, renderLanes);

288 - }

289 - scheduleContextWorkOnParentPath(

290 - fiber.return,

291 - renderLanes,

292 - workInProgress,

293 - );

294 -

295 - // Mark the updated lanes on the list, too.

296 - list.lanes = mergeLanes(list.lanes, renderLanes);

297 -

298 - // Since we already found a match, we can stop traversing the

299 - // dependency list.

300 - break;

301 - }

302 - dependency = dependency.next;

303 - }

304 - } else if (fiber.tag === ContextProvider) {

305 - // Don't scan deeper if this is a matching provider

306 - nextFiber = fiber.type === workInProgress.type ? null : fiber.child;

307 - } else if (fiber.tag === DehydratedFragment) {

308 - // If a dehydrated suspense boundary is in this subtree, we don't know

309 - // if it will have any context consumers in it. The best we can do is

310 - // mark it as having updates.

311 - const parentSuspense = fiber.return;

312 -

313 - if (parentSuspense === null) {

314 - throw new Error(

315 - 'We just came from a parent so we must have had a parent. This is a bug in React.',

316 - );

317 - }

318 -

319 - parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);

320 - const alternate = parentSuspense.alternate;

321 - if (alternate !== null) {

322 - alternate.lanes = mergeLanes(alternate.lanes, renderLanes);

323 - }

324 - // This is intentionally passing this fiber as the parent

325 - // because we want to schedule this fiber as having work

326 - // on its children. We'll use the childLanes on

327 - // this fiber to indicate that a context has changed.

328 - scheduleContextWorkOnParentPath(

329 - parentSuspense,

330 - renderLanes,

331 - workInProgress,

332 - );

333 - nextFiber = fiber.sibling;

334 - } else {

335 - // Traverse down.

336 - nextFiber = fiber.child;

337 - }

338 -

339 - if (nextFiber !== null) {

340 - // Set the return pointer of the child to the work-in-progress fiber.

341 - nextFiber.return = fiber;

342 - } else {

343 - // No child. Traverse to next sibling.

344 - nextFiber = fiber;

345 - while (nextFiber !== null) {

346 - if (nextFiber === workInProgress) {

347 - // We're back to the root of this subtree. Exit.

348 - nextFiber = null;

349 - break;

350 - }

351 - const sibling = nextFiber.sibling;

352 - if (sibling !== null) {

353 - // Set the return pointer of the sibling to the work-in-progress fiber.

354 - sibling.return = nextFiber.return;

355 - nextFiber = sibling;

356 - break;

357 - }

358 - // No more siblings. Traverse up.

359 - nextFiber = nextFiber.return;

360 - }

361 - }

362 - fiber = nextFiber;

363 - }

197 + // TODO: This path is only used by Cache components. Update

198 + // lazilyPropagateParentContextChanges to look for Cache components so they

199 + // can take advantage of lazy propagation.

200 + const forcePropagateEntireTree = true;

201 + propagateContextChanges(

202 + workInProgress,

203 + [context],

204 + renderLanes,

205 + forcePropagateEntireTree,

206 + );

207 }

208

209 function propagateContextChanges<T>(

@@ -369,10 +212,6 @@ function propagateContextChanges<T>(

212 renderLanes: Lanes,

213 forcePropagateEntireTree: boolean,

214 ): void {

372 - // Only used by lazy implementation

373 - if (!enableLazyContextPropagation) {

374 - return;

375 - }

215 let fiber = workInProgress.child;

216 if (fiber !== null) {

217 // Set the return pointer of the child to the work-in-progress fiber.

@@ -527,10 +366,6 @@ function propagateParentContextChanges(

366 renderLanes: Lanes,

367 forcePropagateEntireTree: boolean,

368 ) {

530 - if (!enableLazyContextPropagation) {

531 - return;

532 - }

533 -

369 // Collect all the parent providers that changed. Since this is usually small

370 // number, we use an Array instead of Set.

371 let contexts = null;

@@ -637,9 +472,6 @@ function propagateParentContextChanges(

472 export function checkIfContextChanged(

473 currentDependencies: Dependencies,

474 ): boolean {

640 - if (!enableLazyContextPropagation) {

641 - return false;

642 - }

475 // Iterate over the current dependencies to see if something changed. This

476 // only gets called if props and state has already bailed out, so it's a

477 // relatively uncommon path, except at the root of a changed subtree.

@@ -669,20 +501,8 @@ export function prepareToReadContext(

501

502 const dependencies = workInProgress.dependencies;

503 if (dependencies !== null) {

672 - if (enableLazyContextPropagation) {

673 - // Reset the work-in-progress list

674 - dependencies.firstContext = null;

675 - } else {

676 - const firstContext = dependencies.firstContext;

677 - if (firstContext !== null) {

678 - if (includesSomeLane(dependencies.lanes, renderLanes)) {

679 - // Context list has a pending update. Mark that this fiber performed work.

680 - markWorkInProgressReceivedUpdate();

681 - }

682 - // Reset the work-in-progress list

683 - dependencies.firstContext = null;

684 - }

685 - }

504 + // Reset the work-in-progress list

505 + dependencies.firstContext = null;

506 }

507 }

508

@@ -749,9 +569,7 @@ function readContextForConsumer<T>(

569 lanes: NoLanes,

570 firstContext: contextItem,

571 };

752 - if (enableLazyContextPropagation) {

753 - consumer.flags |= NeedsPropagation;

754 - }

572 + consumer.flags |= NeedsPropagation;

573 } else {

574 // Append a new context item.

575 lastContextDependency = lastContextDependency.next = contextItem;

packages/react-reconciler/src/ReactFiberThrow.js

+13 -16

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

39 } from './ReactFiberFlags';

40 import {NoMode, ConcurrentMode} from './ReactTypeOfMode';

41 import {

42 - enableLazyContextPropagation,

42 enableUpdaterTracking,

43 enablePostpone,

44 disableLegacyMode,

@@ -199,21 +198,19 @@ function initializeClassErrorUpdate(

198 }

199

200 function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {

202 - if (enableLazyContextPropagation) {

203 - const currentSourceFiber = sourceFiber.alternate;

204 - if (currentSourceFiber !== null) {

205 - // Since we never visited the children of the suspended component, we

206 - // need to propagate the context change now, to ensure that we visit

207 - // them during the retry.

208 - //

209 - // We don't have to do this for errors because we retry errors without

210 - // committing in between. So this is specific to Suspense.

211 - propagateParentContextChangesToDeferredTree(

212 - currentSourceFiber,

213 - sourceFiber,

214 - rootRenderLanes,

215 - );

216 - }

201 + const currentSourceFiber = sourceFiber.alternate;

202 + if (currentSourceFiber !== null) {

203 + // Since we never visited the children of the suspended component, we

204 + // need to propagate the context change now, to ensure that we visit

205 + // them during the retry.

206 + //

207 + // We don't have to do this for errors because we retry errors without

208 + // committing in between. So this is specific to Suspense.

209 + propagateParentContextChangesToDeferredTree(

210 + currentSourceFiber,

211 + sourceFiber,

212 + rootRenderLanes,

213 + );

214 }

215

216 // Reset the memoizedState to what it was before we attempted to render it.

packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js

-5

@@ -35,11 +35,6 @@ describe('ReactLazyContextPropagation', () => {

35 seededCache = null;

36 });

38 - // NOTE: These tests are not specific to the lazy propagation (as opposed to

39 - // eager propagation). The behavior should be the same in both

40 - // implementations. These are tests that are more relevant to the lazy

41 - // propagation implementation, though.

42 -

38 function createTextCache() {

39 if (seededCache !== null) {

40 // Trick to seed a cache before it exists.

packages/react/src/__tests__/ReactContextValidator-test.js

+1 -7

@@ -350,13 +350,7 @@ describe('ReactContextValidator', () => {

350 expect(componentWillUpdateNextContext).toBe(secondContext);

351 expect(renderContext).toBe(secondContext);

352 expect(componentDidUpdateContext).toBe(secondContext);

353 -

354 - if (gate(flags => flags.enableLazyContextPropagation)) {

355 - expect(shouldComponentUpdateWasCalled).toBe(true);

356 - } else {

357 - // sCU is not called in this case because React force updates when a provider re-renders

358 - expect(shouldComponentUpdateWasCalled).toBe(false);

359 - }

353 + expect(shouldComponentUpdateWasCalled).toBe(true);

354 });

355

356 it('should re-render PureComponents when context Provider updates', async () => {

packages/shared/ReactFeatureFlags.js

-2

@@ -99,8 +99,6 @@ export const enableObjectFiber = false;

100 export const enableTransitionTracing = false;

101

102 -export const enableLazyContextPropagation = true;

103 -

102 // FB-only usage. The new API has different semantics.

103 export const enableLegacyHidden = false;

104

packages/shared/forks/ReactFeatureFlags.native-fb.js

-1

@@ -53,7 +53,6 @@ export const enableFizzExternalRuntime = true;

53 export const enableGetInspectorDataForInstanceInProduction = true;

54 export const enableHalt = false;

55 export const enableInfiniteRenderLoopDetection = false;

56 -export const enableLazyContextPropagation = true;

56 export const enableLegacyCache = false;

57 export const enableLegacyFBSupport = false;

58 export const enableLegacyHidden = false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

-1

@@ -42,7 +42,6 @@ export const enableGetInspectorDataForInstanceInProduction = false;