Don't stop context traversal at matching consumers (facebook#13391)

* Don't stop context traversal at matching consumers

Originally, the idea was to time slice the traversal. This worked when
there was only a single context type per consumer.

Now that each fiber may have a list of context dependencies, including
duplicate entries, that optimization no longer makes sense – we could
end up scanning the same subtree multiple times.

* Remove changedBits from context object and stack

Don't need it anymore, yay

Author: acdlite

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -96,7 +96,6 @@ import {
   resumeMountClassInstance,
   updateClassInstance,
 } from './ReactFiberClassComponent';
-import MAX_SIGNED_31_BIT_INT from './maxSigned31BitInt';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -290,10 +289,7 @@ function updateClassComponent(
   // During mounting we don't know the child context yet as the instance doesn't exist.
   // We will invalidate the child context in finishClassComponent() right after rendering.
   const hasContext = pushLegacyContextProvider(workInProgress);
-  const hasPendingNewContext = prepareToReadContext(
-    workInProgress,
-    renderExpirationTime,
-  );
+  prepareToReadContext(workInProgress, renderExpirationTime);
 
   let shouldUpdate;
   if (current === null) {
@@ -311,15 +307,13 @@ function updateClassComponent(
       // In a resume, we'll already have an instance we can reuse.
       shouldUpdate = resumeMountClassInstance(
         workInProgress,
-        hasPendingNewContext,
         renderExpirationTime,
       );
     }
   } else {
     shouldUpdate = updateClassInstance(
       current,
       workInProgress,
-      hasPendingNewContext,
       renderExpirationTime,
     );
   }
@@ -841,20 +835,17 @@ function updateContextProvider(
     }
   }
 
-  let changedBits: number;
-  if (oldProps === null) {
-    // Initial render
-    changedBits = MAX_SIGNED_31_BIT_INT;
-  } else {
+  pushProvider(workInProgress, newValue);
+
+  if (oldProps !== null) {
     const oldValue = oldProps.value;
-    changedBits = calculateChangedBits(context, newValue, oldValue);
+    const changedBits = calculateChangedBits(context, newValue, oldValue);
     if (changedBits === 0) {
       // No change. Bailout early if children are the same.
       if (
         oldProps.children === newProps.children &&
         !hasLegacyContextChanged()
       ) {
-        pushProvider(workInProgress, 0);
         return bailoutOnAlreadyFinishedWork(
           current,
           workInProgress,
@@ -873,8 +864,6 @@ function updateContextProvider(
     }
   }
 
-  pushProvider(workInProgress, changedBits);
-
   const newChildren = newProps.children;
   reconcileChildren(current, workInProgress, newChildren, renderExpirationTime);
   return workInProgress.child;
@@ -1014,9 +1003,11 @@ function beginWork(
           workInProgress.stateNode.containerInfo,
         );
         break;
-      case ContextProvider:
-        pushProvider(workInProgress, 0);
+      case ContextProvider: {
+        const newValue = workInProgress.memoizedProps.value;
+        pushProvider(workInProgress, newValue);
         break;
+      }
       case Profiler:
         if (enableProfilerTimer) {
           workInProgress.effectTag |= Update;

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -744,7 +744,6 @@ function mountClassInstance(
 
 function resumeMountClassInstance(
   workInProgress: Fiber,
-  hasPendingNewContext: boolean,
   renderExpirationTime: ExpirationTime,
 ): boolean {
   const ctor = workInProgress.type;
@@ -806,7 +805,6 @@ function resumeMountClassInstance(
     oldProps === newProps &&
     oldState === newState &&
     !hasContextChanged() &&
-    !hasPendingNewContext &&
     !checkHasForceUpdateAfterProcessing()
   ) {
     // If an update was already in progress, we should schedule an Update
@@ -828,7 +826,6 @@ function resumeMountClassInstance(
 
   const shouldUpdate =
     checkHasForceUpdateAfterProcessing() ||
-    hasPendingNewContext ||
     checkShouldComponentUpdate(
       workInProgress,
       oldProps,
@@ -884,7 +881,6 @@ function resumeMountClassInstance(
 function updateClassInstance(
   current: Fiber,
   workInProgress: Fiber,
-  hasPendingNewContext: boolean,
   renderExpirationTime: ExpirationTime,
 ): boolean {
   const ctor = workInProgress.type;
@@ -947,7 +943,6 @@ function updateClassInstance(
     oldProps === newProps &&
     oldState === newState &&
     !hasContextChanged() &&
-    !hasPendingNewContext &&
     !checkHasForceUpdateAfterProcessing()
   ) {
     // If an update was already in progress, we should schedule an Update
@@ -982,7 +977,6 @@ function updateClassInstance(
 
   const shouldUpdate =
     checkHasForceUpdateAfterProcessing() ||
-    hasPendingNewContext ||
     checkShouldComponentUpdate(
       workInProgress,
       oldProps,

packages/react-reconciler/src/ReactFiberNewContext.js

@@ -23,14 +23,18 @@ import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
 import maxSigned31BitInt from './maxSigned31BitInt';
 import {NoWork} from './ReactFiberExpirationTime';
-import {ContextProvider} from 'shared/ReactTypeOfWork';
+import {ContextProvider, ClassComponent} from 'shared/ReactTypeOfWork';
 
 import invariant from 'shared/invariant';
 import warning from 'shared/warning';
+import {
+  createUpdate,
+  enqueueUpdate,
+  ForceUpdate,
+} from 'react-reconciler/src/ReactUpdateQueue';
 
 import MAX_SIGNED_31_BIT_INT from './maxSigned31BitInt';
 const valueCursor: StackCursor<mixed> = createCursor(null);
-const changedBitsCursor: StackCursor<number> = createCursor(0);
 
 let rendererSigil;
 if (__DEV__) {
@@ -50,15 +54,13 @@ export function resetContextDependences(): void {
   lastContextWithAllBitsObserved = null;
 }
 
-export function pushProvider(providerFiber: Fiber, changedBits: number): void {
-  const context: ReactContext<any> = providerFiber.type._context;
+export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
+  const context: ReactContext<T> = providerFiber.type._context;
 
   if (isPrimaryRenderer) {
-    push(changedBitsCursor, context._changedBits, providerFiber);
     push(valueCursor, context._currentValue, providerFiber);
 
-    context._currentValue = providerFiber.pendingProps.value;
-    context._changedBits = changedBits;
+    context._currentValue = nextValue;
     if (__DEV__) {
       warningWithoutStack(
         context._currentRenderer === undefined ||
@@ -70,11 +72,9 @@ export function pushProvider(providerFiber: Fiber, changedBits: number): void {
       context._currentRenderer = rendererSigil;
     }
   } else {
-    push(changedBitsCursor, context._changedBits2, providerFiber);
     push(valueCursor, context._currentValue2, providerFiber);
 
-    context._currentValue2 = providerFiber.pendingProps.value;
-    context._changedBits2 = changedBits;
+    context._currentValue2 = nextValue;
     if (__DEV__) {
       warningWithoutStack(
         context._currentRenderer2 === undefined ||
@@ -89,19 +89,15 @@ export function pushProvider(providerFiber: Fiber, changedBits: number): void {
 }
 
 export function popProvider(providerFiber: Fiber): void {
-  const changedBits = changedBitsCursor.current;
   const currentValue = valueCursor.current;
 
   pop(valueCursor, providerFiber);
-  pop(changedBitsCursor, providerFiber);
 
   const context: ReactContext<any> = providerFiber.type._context;
   if (isPrimaryRenderer) {
     context._currentValue = currentValue;
-    context._changedBits = changedBits;
   } else {
     context._currentValue2 = currentValue;
-    context._changedBits2 = changedBits;
   }
 }
 
@@ -162,6 +158,18 @@ export function propagateContextChange(
           (dependency.observedBits & changedBits) !== 0
         ) {
           // Match! Schedule an update on this fiber.
+
+          if (fiber.tag === ClassComponent) {
+            // Schedule a force update on the work-in-progress.
+            const update = createUpdate(renderExpirationTime);
+            update.tag = ForceUpdate;
+            // TODO: Because we don't have a work-in-progress, this will add the
+            // update to the current fiber, too, which means it will persist even if
+            // this render is thrown away. Since it's a race condition, not sure it's
+            // worth fixing.
+            enqueueUpdate(fiber, update);
+          }
+
           if (
             fiber.expirationTime === NoWork ||
             fiber.expirationTime > renderExpirationTime
@@ -206,13 +214,8 @@ export function propagateContextChange(
             }
             node = node.return;
           }
-          // Don't scan deeper than a matching consumer. When we render the
-          // consumer, we'll continue scanning from that point. This way the
-          // scanning work is time-sliced.
-          nextFiber = null;
-        } else {
-          nextFiber = fiber.child;
         }
+        nextFiber = fiber.child;
         dependency = dependency.next;
       } while (dependency !== null);
     } else if (fiber.tag === ContextProvider) {
@@ -253,46 +256,13 @@ export function propagateContextChange(
 export function prepareToReadContext(
   workInProgress: Fiber,
   renderExpirationTime: ExpirationTime,
-): boolean {
+): void {
   currentlyRenderingFiber = workInProgress;
   lastContextDependency = null;
   lastContextWithAllBitsObserved = null;
 
-  const firstContextDependency = workInProgress.firstContextDependency;
-  if (firstContextDependency !== null) {
-    // Reset the work-in-progress list
-    workInProgress.firstContextDependency = null;
-
-    // Iterate through the context dependencies and see if there were any
-    // changes. If so, continue propagating the context change by scanning
-    // the child subtree.
-    let dependency = firstContextDependency;
-    let hasPendingContext = false;
-    do {
-      const context = dependency.context;
-      const changedBits = isPrimaryRenderer
-        ? context._changedBits
-        : context._changedBits2;
-      if (changedBits !== 0) {
-        // Resume context change propagation. We need to call this even if
-        // this fiber bails out, in case deeply nested consumers observe more
-        // bits than this one.
-        propagateContextChange(
-          workInProgress,
-          context,
-          changedBits,
-          renderExpirationTime,
-        );
-        if ((changedBits & dependency.observedBits) !== 0) {
-          hasPendingContext = true;
-        }
-      }
-      dependency = dependency.next;
-    } while (dependency !== null);
-    return hasPendingContext;
-  } else {
-    return false;
-  }
+  // Reset the work-in-progress list
+  workInProgress.firstContextDependency = null;
 }
 
 export function readContext<T>(

packages/react/src/ReactContext.js

@@ -57,8 +57,6 @@ export function createContext<T>(
     // Secondary renderers store their context values on separate fields.
     _currentValue: defaultValue,
     _currentValue2: defaultValue,
-    _changedBits: 0,
-    _changedBits2: 0,
     // These are circular
     Provider: (null: any),
     Consumer: (null: any),

packages/shared/ReactTypes.js

@@ -85,8 +85,6 @@ export type ReactContext<T> = {
 
   _currentValue: T,
   _currentValue2: T,
-  _changedBits: number,
-  _changedBits2: number,
 
   // DEV only
   _currentRenderer?: Object | null,