Best JavaScript code snippet using playwright-internal
ReactFiberBeginWork.js
Source:ReactFiberBeginWork.js  
...152    // we don't do the bailout and we have to reuse existing props instead.153  } else if (workInProgress.memoizedProps === nextProps) {154    const currentRef = current !== null ? current.ref : null;155    if (ref === currentRef) {156      return bailoutOnAlreadyFinishedWork(current, workInProgress);157    }158  }159  let nextChildren;160  if (__DEV__) {161    ReactCurrentOwner.current = workInProgress;162    ReactCurrentFiber.setCurrentPhase('render');163    nextChildren = render(nextProps, ref);164    ReactCurrentFiber.setCurrentPhase(null);165  } else {166    nextChildren = render(nextProps, ref);167  }168  reconcileChildren(current, workInProgress, nextChildren);169  memoizeProps(workInProgress, nextProps);170  return workInProgress.child;171}172function updateFragment(current, workInProgress) {173  const nextChildren = workInProgress.pendingProps;174  if (hasLegacyContextChanged()) {175    // Normally we can bail out on props equality but if context has changed176    // we don't do the bailout and we have to reuse existing props instead.177  } else if (workInProgress.memoizedProps === nextChildren) {178    return bailoutOnAlreadyFinishedWork(current, workInProgress);179  }180  reconcileChildren(current, workInProgress, nextChildren);181  memoizeProps(workInProgress, nextChildren);182  return workInProgress.child;183}184function updateMode(current, workInProgress) {185  const nextChildren = workInProgress.pendingProps.children;186  if (hasLegacyContextChanged()) {187    // Normally we can bail out on props equality but if context has changed188    // we don't do the bailout and we have to reuse existing props instead.189  } else if (190    nextChildren === null ||191    workInProgress.memoizedProps === nextChildren192  ) {193    return bailoutOnAlreadyFinishedWork(current, workInProgress);194  }195  reconcileChildren(current, workInProgress, nextChildren);196  memoizeProps(workInProgress, nextChildren);197  return workInProgress.child;198}199function updateProfiler(current, workInProgress) {200  const nextProps = workInProgress.pendingProps;201  if (enableProfilerTimer) {202    workInProgress.effectTag |= Update;203  }204  if (workInProgress.memoizedProps === nextProps) {205    return bailoutOnAlreadyFinishedWork(current, workInProgress);206  }207  const nextChildren = nextProps.children;208  reconcileChildren(current, workInProgress, nextChildren);209  memoizeProps(workInProgress, nextProps);210  return workInProgress.child;211}212function markRef(current: Fiber | null, workInProgress: Fiber) {213  const ref = workInProgress.ref;214  if (215    (current === null && ref !== null) ||216    (current !== null && current.ref !== ref)217  ) {218    // Schedule a Ref effect219    workInProgress.effectTag |= Ref;220  }221}222function updateFunctionalComponent(current, workInProgress) {223  const fn = workInProgress.type;224  const nextProps = workInProgress.pendingProps;225  if (hasLegacyContextChanged()) {226    // Normally we can bail out on props equality but if context has changed227    // we don't do the bailout and we have to reuse existing props instead.228  } else {229    if (workInProgress.memoizedProps === nextProps) {230      return bailoutOnAlreadyFinishedWork(current, workInProgress);231    }232    // TODO: consider bringing fn.shouldComponentUpdate() back.233    // It used to be here.234  }235  const unmaskedContext = getUnmaskedContext(workInProgress);236  const context = getMaskedContext(workInProgress, unmaskedContext);237  let nextChildren;238  if (__DEV__) {239    ReactCurrentOwner.current = workInProgress;240    ReactCurrentFiber.setCurrentPhase('render');241    nextChildren = fn(nextProps, context);242    ReactCurrentFiber.setCurrentPhase(null);243  } else {244    nextChildren = fn(nextProps, context);245  }246  // React DevTools reads this flag.247  workInProgress.effectTag |= PerformedWork;248  reconcileChildren(current, workInProgress, nextChildren);249  memoizeProps(workInProgress, nextProps);250  return workInProgress.child;251}252function updateClassComponent(253  current: Fiber | null,254  workInProgress: Fiber,255  renderExpirationTime: ExpirationTime,256) {257  // Push context providers early to prevent context stack mismatches.258  // During mounting we don't know the child context yet as the instance doesn't exist.259  // We will invalidate the child context in finishClassComponent() right after rendering.260  const hasContext = pushLegacyContextProvider(workInProgress);261  let shouldUpdate;262  if (current === null) {263    if (workInProgress.stateNode === null) {264      // In the initial pass we might need to construct the instance.265      constructClassInstance(266        workInProgress,267        workInProgress.pendingProps,268        renderExpirationTime,269      );270      mountClassInstance(workInProgress, renderExpirationTime);271      shouldUpdate = true;272    } else {273      // In a resume, we'll already have an instance we can reuse.274      shouldUpdate = resumeMountClassInstance(275        workInProgress,276        renderExpirationTime,277      );278    }279  } else {280    shouldUpdate = updateClassInstance(281      current,282      workInProgress,283      renderExpirationTime,284    );285  }286  return finishClassComponent(287    current,288    workInProgress,289    shouldUpdate,290    hasContext,291    renderExpirationTime,292  );293}294function finishClassComponent(295  current: Fiber | null,296  workInProgress: Fiber,297  shouldUpdate: boolean,298  hasContext: boolean,299  renderExpirationTime: ExpirationTime,300) {301  // Refs should update even if shouldComponentUpdate returns false302  markRef(current, workInProgress);303  const didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;304  if (!shouldUpdate && !didCaptureError) {305    // Context providers should defer to sCU for rendering306    if (hasContext) {307      invalidateContextProvider(workInProgress, false);308    }309    return bailoutOnAlreadyFinishedWork(current, workInProgress);310  }311  const ctor = workInProgress.type;312  const instance = workInProgress.stateNode;313  // Rerender314  ReactCurrentOwner.current = workInProgress;315  let nextChildren;316  if (317    didCaptureError &&318    (!enableGetDerivedStateFromCatch ||319      typeof ctor.getDerivedStateFromCatch !== 'function')320  ) {321    // If we captured an error, but getDerivedStateFrom catch is not defined,322    // unmount all the children. componentDidCatch will schedule an update to323    // re-render a fallback. This is temporary until we migrate everyone to324    // the new API.325    // TODO: Warn in a future release.326    nextChildren = null;327    if (enableProfilerTimer) {328      stopBaseRenderTimerIfRunning();329    }330  } else {331    if (__DEV__) {332      ReactCurrentFiber.setCurrentPhase('render');333      nextChildren = instance.render();334      if (335        debugRenderPhaseSideEffects ||336        (debugRenderPhaseSideEffectsForStrictMode &&337          workInProgress.mode & StrictMode)338      ) {339        instance.render();340      }341      ReactCurrentFiber.setCurrentPhase(null);342    } else {343      nextChildren = instance.render();344    }345  }346  // React DevTools reads this flag.347  workInProgress.effectTag |= PerformedWork;348  if (current !== null && didCaptureError) {349    // If we're recovering from an error, reconcile twice: first to delete350    // all the existing children.351    reconcileChildrenAtExpirationTime(352      current,353      workInProgress,354      null,355      renderExpirationTime,356    );357    workInProgress.child = null;358    // Now we can continue reconciling like normal. This has the effect of359    // remounting all children regardless of whether their their360    // identity matches.361  }362  reconcileChildrenAtExpirationTime(363    current,364    workInProgress,365    nextChildren,366    renderExpirationTime,367  );368  // Memoize props and state using the values we just used to render.369  // TODO: Restructure so we never read values from the instance.370  memoizeState(workInProgress, instance.state);371  memoizeProps(workInProgress, instance.props);372  // The context might have changed so we need to recalculate it.373  if (hasContext) {374    invalidateContextProvider(workInProgress, true);375  }376  return workInProgress.child;377}378function pushHostRootContext(workInProgress) {379  const root = (workInProgress.stateNode: FiberRoot);380  if (root.pendingContext) {381    pushTopLevelContextObject(382      workInProgress,383      root.pendingContext,384      root.pendingContext !== root.context,385    );386  } else if (root.context) {387    // Should always be set388    pushTopLevelContextObject(workInProgress, root.context, false);389  }390  pushHostContainer(workInProgress, root.containerInfo);391}392function updateHostRoot(current, workInProgress, renderExpirationTime) {393  pushHostRootContext(workInProgress);394  let updateQueue = workInProgress.updateQueue;395  if (updateQueue !== null) {396    const nextProps = workInProgress.pendingProps;397    const prevState = workInProgress.memoizedState;398    const prevChildren = prevState !== null ? prevState.element : null;399    processUpdateQueue(400      workInProgress,401      updateQueue,402      nextProps,403      null,404      renderExpirationTime,405    );406    const nextState = workInProgress.memoizedState;407    // Caution: React DevTools currently depends on this property408    // being called "element".409    const nextChildren = nextState.element;410    if (nextChildren === prevChildren) {411      // If the state is the same as before, that's a bailout because we had412      // no work that expires at this time.413      resetHydrationState();414      return bailoutOnAlreadyFinishedWork(current, workInProgress);415    }416    const root: FiberRoot = workInProgress.stateNode;417    if (418      (current === null || current.child === null) &&419      root.hydrate &&420      enterHydrationState(workInProgress)421    ) {422      // If we don't have any current children this might be the first pass.423      // We always try to hydrate. If this isn't a hydration pass there won't424      // be any children to hydrate which is effectively the same thing as425      // not hydrating.426      // This is a bit of a hack. We track the host root as a placement to427      // know that we're currently in a mounting state. That way isMounted428      // works as expected. We must reset this before committing.429      // TODO: Delete this when we delete isMounted and findDOMNode.430      workInProgress.effectTag |= Placement;431      // Ensure that children mount into this root without tracking432      // side-effects. This ensures that we don't store Placement effects on433      // nodes that will be hydrated.434      workInProgress.child = mountChildFibers(435        workInProgress,436        null,437        nextChildren,438        renderExpirationTime,439      );440    } else {441      // Otherwise reset hydration state in case we aborted and resumed another442      // root.443      resetHydrationState();444      reconcileChildren(current, workInProgress, nextChildren);445    }446    return workInProgress.child;447  }448  resetHydrationState();449  // If there is no update queue, that's a bailout because the root has no props.450  return bailoutOnAlreadyFinishedWork(current, workInProgress);451}452function updateHostComponent(current, workInProgress, renderExpirationTime) {453  pushHostContext(workInProgress);454  if (current === null) {455    tryToClaimNextHydratableInstance(workInProgress);456  }457  const type = workInProgress.type;458  const memoizedProps = workInProgress.memoizedProps;459  const nextProps = workInProgress.pendingProps;460  const prevProps = current !== null ? current.memoizedProps : null;461  if (hasLegacyContextChanged()) {462    // Normally we can bail out on props equality but if context has changed463    // we don't do the bailout and we have to reuse existing props instead.464  } else if (memoizedProps === nextProps) {465    const isHidden =466      workInProgress.mode & AsyncMode &&467      shouldDeprioritizeSubtree(type, nextProps);468    if (isHidden) {469      // Before bailing out, make sure we've deprioritized a hidden component.470      workInProgress.expirationTime = Never;471    }472    if (!isHidden || renderExpirationTime !== Never) {473      return bailoutOnAlreadyFinishedWork(current, workInProgress);474    }475    // If we're rendering a hidden node at hidden priority, don't bailout. The476    // parent is complete, but the children may not be.477  }478  let nextChildren = nextProps.children;479  const isDirectTextChild = shouldSetTextContent(type, nextProps);480  if (isDirectTextChild) {481    // We special case a direct text child of a host node. This is a common482    // case. We won't handle it as a reified child. We will instead handle483    // this in the host environment that also have access to this prop. That484    // avoids allocating another HostText fiber and traversing it.485    nextChildren = null;486  } else if (prevProps && shouldSetTextContent(type, prevProps)) {487    // If we're switching from a direct text child to a normal child, or to488    // empty, we need to schedule the text content to be reset.489    workInProgress.effectTag |= ContentReset;490  }491  markRef(current, workInProgress);492  // Check the host config to see if the children are offscreen/hidden.493  if (494    renderExpirationTime !== Never &&495    workInProgress.mode & AsyncMode &&496    shouldDeprioritizeSubtree(type, nextProps)497  ) {498    // Down-prioritize the children.499    workInProgress.expirationTime = Never;500    // Bailout and come back to this fiber later.501    workInProgress.memoizedProps = nextProps;502    return null;503  }504  reconcileChildren(current, workInProgress, nextChildren);505  memoizeProps(workInProgress, nextProps);506  return workInProgress.child;507}508function updateHostText(current, workInProgress) {509  if (current === null) {510    tryToClaimNextHydratableInstance(workInProgress);511  }512  const nextProps = workInProgress.pendingProps;513  memoizeProps(workInProgress, nextProps);514  // Nothing to do here. This is terminal. We'll do the completion step515  // immediately after.516  return null;517}518function mountIndeterminateComponent(519  current,520  workInProgress,521  renderExpirationTime,522) {523  invariant(524    current === null,525    'An indeterminate component should never have mounted. This error is ' +526      'likely caused by a bug in React. Please file an issue.',527  );528  const fn = workInProgress.type;529  const props = workInProgress.pendingProps;530  const unmaskedContext = getUnmaskedContext(workInProgress);531  const context = getMaskedContext(workInProgress, unmaskedContext);532  let value;533  if (__DEV__) {534    if (fn.prototype && typeof fn.prototype.render === 'function') {535      const componentName = getComponentName(fn) || 'Unknown';536      if (!didWarnAboutBadClass[componentName]) {537        warning(538          false,539          "The <%s /> component appears to have a render method, but doesn't extend React.Component. " +540            'This is likely to cause errors. Change %s to extend React.Component instead.',541          componentName,542          componentName,543        );544        didWarnAboutBadClass[componentName] = true;545      }546    }547    if (workInProgress.mode & StrictMode) {548      ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);549    }550    ReactCurrentOwner.current = workInProgress;551    value = fn(props, context);552  } else {553    value = fn(props, context);554  }555  // React DevTools reads this flag.556  workInProgress.effectTag |= PerformedWork;557  if (558    typeof value === 'object' &&559    value !== null &&560    typeof value.render === 'function' &&561    value.$$typeof === undefined562  ) {563    const Component = workInProgress.type;564    // Proceed under the assumption that this is a class instance565    workInProgress.tag = ClassComponent;566    workInProgress.memoizedState =567      value.state !== null && value.state !== undefined ? value.state : null;568    const getDerivedStateFromProps = Component.getDerivedStateFromProps;569    if (typeof getDerivedStateFromProps === 'function') {570      applyDerivedStateFromProps(571        workInProgress,572        getDerivedStateFromProps,573        props,574      );575    }576    // Push context providers early to prevent context stack mismatches.577    // During mounting we don't know the child context yet as the instance doesn't exist.578    // We will invalidate the child context in finishClassComponent() right after rendering.579    const hasContext = pushLegacyContextProvider(workInProgress);580    adoptClassInstance(workInProgress, value);581    mountClassInstance(workInProgress, renderExpirationTime);582    return finishClassComponent(583      current,584      workInProgress,585      true,586      hasContext,587      renderExpirationTime,588    );589  } else {590    // Proceed under the assumption that this is a functional component591    workInProgress.tag = FunctionalComponent;592    if (__DEV__) {593      const Component = workInProgress.type;594      if (Component) {595        warning(596          !Component.childContextTypes,597          '%s(...): childContextTypes cannot be defined on a functional component.',598          Component.displayName || Component.name || 'Component',599        );600      }601      if (workInProgress.ref !== null) {602        let info = '';603        const ownerName = ReactCurrentFiber.getCurrentFiberOwnerNameInDevOrNull();604        if (ownerName) {605          info += '\n\nCheck the render method of `' + ownerName + '`.';606        }607        let warningKey = ownerName || workInProgress._debugID || '';608        const debugSource = workInProgress._debugSource;609        if (debugSource) {610          warningKey = debugSource.fileName + ':' + debugSource.lineNumber;611        }612        if (!didWarnAboutStatelessRefs[warningKey]) {613          didWarnAboutStatelessRefs[warningKey] = true;614          warning(615            false,616            'Stateless function components cannot be given refs. ' +617              'Attempts to access this ref will fail.%s%s',618            info,619            ReactCurrentFiber.getCurrentFiberStackInDev(),620          );621        }622      }623      if (typeof fn.getDerivedStateFromProps === 'function') {624        const componentName = getComponentName(fn) || 'Unknown';625        if (!didWarnAboutGetDerivedStateOnFunctionalComponent[componentName]) {626          warning(627            false,628            '%s: Stateless functional components do not support getDerivedStateFromProps.',629            componentName,630          );631          didWarnAboutGetDerivedStateOnFunctionalComponent[632            componentName633          ] = true;634        }635      }636    }637    reconcileChildren(current, workInProgress, value);638    memoizeProps(workInProgress, props);639    return workInProgress.child;640  }641}642function updatePlaceholderComponent(643  current,644  workInProgress,645  renderExpirationTime,646) {647  if (enableSuspense) {648    const nextProps = workInProgress.pendingProps;649    const prevProps = workInProgress.memoizedProps;650    const prevDidTimeout = workInProgress.memoizedState === true;651    // Check if we already attempted to render the normal state. If we did,652    // and we timed out, render the placeholder state.653    const alreadyCaptured =654      (workInProgress.effectTag & DidCapture) === NoEffect;655    let nextDidTimeout;656    if (current !== null && workInProgress.updateQueue !== null) {657      // We're outside strict mode. Something inside this Placeholder boundary658      // suspended during the last commit. Switch to the placholder.659      workInProgress.updateQueue = null;660      nextDidTimeout = true;661      // If we're recovering from an error, reconcile twice: first to delete662      // all the existing children.663      reconcileChildrenAtExpirationTime(664        current,665        workInProgress,666        null,667        renderExpirationTime,668      );669      current.child = null;670      // Now we can continue reconciling like normal. This has the effect of671      // remounting all children regardless of whether their their672      // identity matches.673    } else {674      nextDidTimeout = !alreadyCaptured;675    }676    if (hasLegacyContextChanged()) {677      // Normally we can bail out on props equality but if context has changed678      // we don't do the bailout and we have to reuse existing props instead.679    } else if (nextProps === prevProps && nextDidTimeout === prevDidTimeout) {680      return bailoutOnAlreadyFinishedWork(current, workInProgress);681    }682    if ((workInProgress.mode & StrictMode) !== NoEffect) {683      if (nextDidTimeout) {684        // If the timed-out view commits, schedule an update effect to record685        // the committed time.686        workInProgress.effectTag |= Update;687      } else {688        // The state node points to the time at which placeholder timed out.689        // We can clear it once we switch back to the normal children.690        workInProgress.stateNode = null;691      }692    }693    // If the `children` prop is a function, treat it like a render prop.694    // TODO: This is temporary until we finalize a lower level API.695    const children = nextProps.children;696    let nextChildren;697    if (typeof children === 'function') {698      nextChildren = children(nextDidTimeout);699    } else {700      nextChildren = nextDidTimeout ? nextProps.fallback : children;701    }702    workInProgress.memoizedProps = nextProps;703    workInProgress.memoizedState = nextDidTimeout;704    reconcileChildren(current, workInProgress, nextChildren);705    return workInProgress.child;706  } else {707    return null;708  }709}710function updatePortalComponent(current, workInProgress, renderExpirationTime) {711  pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);712  const nextChildren = workInProgress.pendingProps;713  if (hasLegacyContextChanged()) {714    // Normally we can bail out on props equality but if context has changed715    // we don't do the bailout and we have to reuse existing props instead.716  } else if (workInProgress.memoizedProps === nextChildren) {717    return bailoutOnAlreadyFinishedWork(current, workInProgress);718  }719  if (current === null) {720    // Portals are special because we don't append the children during mount721    // but at commit. Therefore we need to track insertions which the normal722    // flow doesn't do during mount. This doesn't happen at the root because723    // the root always starts with a "current" with a null child.724    // TODO: Consider unifying this with how the root works.725    workInProgress.child = reconcileChildFibers(726      workInProgress,727      null,728      nextChildren,729      renderExpirationTime,730    );731    memoizeProps(workInProgress, nextChildren);732  } else {733    reconcileChildren(current, workInProgress, nextChildren);734    memoizeProps(workInProgress, nextChildren);735  }736  return workInProgress.child;737}738function propagateContextChange<V>(739  workInProgress: Fiber,740  context: ReactContext<V>,741  changedBits: number,742  renderExpirationTime: ExpirationTime,743): void {744  let fiber = workInProgress.child;745  if (fiber !== null) {746    // Set the return pointer of the child to the work-in-progress fiber.747    fiber.return = workInProgress;748  }749  while (fiber !== null) {750    let nextFiber;751    // Visit this fiber.752    switch (fiber.tag) {753      case ContextConsumer:754        // Check if the context matches.755        const observedBits: number = fiber.stateNode | 0;756        if (fiber.type === context && (observedBits & changedBits) !== 0) {757          // Update the expiration time of all the ancestors, including758          // the alternates.759          let node = fiber;760          do {761            const alternate = node.alternate;762            if (763              node.expirationTime === NoWork ||764              node.expirationTime > renderExpirationTime765            ) {766              node.expirationTime = renderExpirationTime;767              if (768                alternate !== null &&769                (alternate.expirationTime === NoWork ||770                  alternate.expirationTime > renderExpirationTime)771              ) {772                alternate.expirationTime = renderExpirationTime;773              }774            } else if (775              alternate !== null &&776              (alternate.expirationTime === NoWork ||777                alternate.expirationTime > renderExpirationTime)778            ) {779              alternate.expirationTime = renderExpirationTime;780            } else {781              // Neither alternate was updated, which means the rest of the782              // ancestor path already has sufficient priority.783              break;784            }785            node = node.return;786          } while (node !== null);787          // Don't scan deeper than a matching consumer. When we render the788          // consumer, we'll continue scanning from that point. This way the789          // scanning work is time-sliced.790          nextFiber = null;791        } else {792          // Traverse down.793          nextFiber = fiber.child;794        }795        break;796      case ContextProvider:797        // Don't scan deeper if this is a matching provider798        nextFiber = fiber.type === workInProgress.type ? null : fiber.child;799        break;800      default:801        // Traverse down.802        nextFiber = fiber.child;803        break;804    }805    if (nextFiber !== null) {806      // Set the return pointer of the child to the work-in-progress fiber.807      nextFiber.return = fiber;808    } else {809      // No child. Traverse to next sibling.810      nextFiber = fiber;811      while (nextFiber !== null) {812        if (nextFiber === workInProgress) {813          // We're back to the root of this subtree. Exit.814          nextFiber = null;815          break;816        }817        let sibling = nextFiber.sibling;818        if (sibling !== null) {819          // Set the return pointer of the sibling to the work-in-progress fiber.820          sibling.return = nextFiber.return;821          nextFiber = sibling;822          break;823        }824        // No more siblings. Traverse up.825        nextFiber = nextFiber.return;826      }827    }828    fiber = nextFiber;829  }830}831function updateContextProvider(current, workInProgress, renderExpirationTime) {832  const providerType: ReactProviderType<any> = workInProgress.type;833  const context: ReactContext<any> = providerType._context;834  const newProps = workInProgress.pendingProps;835  const oldProps = workInProgress.memoizedProps;836  let canBailOnProps = true;837  if (hasLegacyContextChanged()) {838    canBailOnProps = false;839    // Normally we can bail out on props equality but if context has changed840    // we don't do the bailout and we have to reuse existing props instead.841  } else if (oldProps === newProps) {842    workInProgress.stateNode = 0;843    pushProvider(workInProgress);844    return bailoutOnAlreadyFinishedWork(current, workInProgress);845  }846  const newValue = newProps.value;847  workInProgress.memoizedProps = newProps;848  if (__DEV__) {849    const providerPropTypes = workInProgress.type.propTypes;850    if (providerPropTypes) {851      checkPropTypes(852        providerPropTypes,853        newProps,854        'prop',855        'Context.Provider',856        ReactCurrentFiber.getCurrentFiberStackInDev,857      );858    }859  }860  let changedBits: number;861  if (oldProps === null) {862    // Initial render863    changedBits = MAX_SIGNED_31_BIT_INT;864  } else {865    if (oldProps.value === newProps.value) {866      // No change. Bailout early if children are the same.867      if (oldProps.children === newProps.children && canBailOnProps) {868        workInProgress.stateNode = 0;869        pushProvider(workInProgress);870        return bailoutOnAlreadyFinishedWork(current, workInProgress);871      }872      changedBits = 0;873    } else {874      const oldValue = oldProps.value;875      // Use Object.is to compare the new context value to the old value.876      // Inlined Object.is polyfill.877      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is878      if (879        (oldValue === newValue &&880          (oldValue !== 0 || 1 / oldValue === 1 / newValue)) ||881        (oldValue !== oldValue && newValue !== newValue) // eslint-disable-line no-self-compare882      ) {883        // No change. Bailout early if children are the same.884        if (oldProps.children === newProps.children && canBailOnProps) {885          workInProgress.stateNode = 0;886          pushProvider(workInProgress);887          return bailoutOnAlreadyFinishedWork(current, workInProgress);888        }889        changedBits = 0;890      } else {891        changedBits =892          typeof context._calculateChangedBits === 'function'893            ? context._calculateChangedBits(oldValue, newValue)894            : MAX_SIGNED_31_BIT_INT;895        if (__DEV__) {896          warning(897            (changedBits & MAX_SIGNED_31_BIT_INT) === changedBits,898            'calculateChangedBits: Expected the return value to be a ' +899              '31-bit integer. Instead received: %s',900            changedBits,901          );902        }903        changedBits |= 0;904        if (changedBits === 0) {905          // No change. Bailout early if children are the same.906          if (oldProps.children === newProps.children && canBailOnProps) {907            workInProgress.stateNode = 0;908            pushProvider(workInProgress);909            return bailoutOnAlreadyFinishedWork(current, workInProgress);910          }911        } else {912          propagateContextChange(913            workInProgress,914            context,915            changedBits,916            renderExpirationTime,917          );918        }919      }920    }921  }922  workInProgress.stateNode = changedBits;923  pushProvider(workInProgress);924  const newChildren = newProps.children;925  reconcileChildren(current, workInProgress, newChildren);926  return workInProgress.child;927}928function updateContextConsumer(current, workInProgress, renderExpirationTime) {929  const context: ReactContext<any> = workInProgress.type;930  const newProps = workInProgress.pendingProps;931  const oldProps = workInProgress.memoizedProps;932  const newValue = getContextCurrentValue(context);933  const changedBits = getContextChangedBits(context);934  if (hasLegacyContextChanged()) {935    // Normally we can bail out on props equality but if context has changed936    // we don't do the bailout and we have to reuse existing props instead.937  } else if (changedBits === 0 && oldProps === newProps) {938    return bailoutOnAlreadyFinishedWork(current, workInProgress);939  }940  workInProgress.memoizedProps = newProps;941  let observedBits = newProps.unstable_observedBits;942  if (observedBits === undefined || observedBits === null) {943    // Subscribe to all changes by default944    observedBits = MAX_SIGNED_31_BIT_INT;945  }946  // Store the observedBits on the fiber's stateNode for quick access.947  workInProgress.stateNode = observedBits;948  if ((changedBits & observedBits) !== 0) {949    // Context change propagation stops at matching consumers, for time-950    // slicing. Continue the propagation here.951    propagateContextChange(952      workInProgress,953      context,954      changedBits,955      renderExpirationTime,956    );957  } else if (oldProps === newProps) {958    // Skip over a memoized parent with a bitmask bailout even959    // if we began working on it because of a deeper matching child.960    return bailoutOnAlreadyFinishedWork(current, workInProgress);961  }962  // There is no bailout on `children` equality because we expect people963  // to often pass a bound method as a child, but it may reference964  // `this.state` or `this.props` (and thus needs to re-render on `setState`).965  const render = newProps.children;966  if (__DEV__) {967    warning(968      typeof render === 'function',969      'A context consumer was rendered with multiple children, or a child ' +970        "that isn't a function. A context consumer expects a single child " +971        'that is a function. If you did pass a function, make sure there ' +972        'is no trailing or leading whitespace around it.',973    );974  }975  let newChildren;976  if (__DEV__) {977    ReactCurrentOwner.current = workInProgress;978    ReactCurrentFiber.setCurrentPhase('render');979    newChildren = render(newValue);980    ReactCurrentFiber.setCurrentPhase(null);981  } else {982    newChildren = render(newValue);983  }984  // React DevTools reads this flag.985  workInProgress.effectTag |= PerformedWork;986  reconcileChildren(current, workInProgress, newChildren);987  return workInProgress.child;988}989/*990  function reuseChildrenEffects(returnFiber : Fiber, firstChild : Fiber) {991    let child = firstChild;992    do {993      // Ensure that the first and last effect of the parent corresponds994      // to the children's first and last effect.995      if (!returnFiber.firstEffect) {996        returnFiber.firstEffect = child.firstEffect;997      }998      if (child.lastEffect) {999        if (returnFiber.lastEffect) {1000          returnFiber.lastEffect.nextEffect = child.firstEffect;1001        }1002        returnFiber.lastEffect = child.lastEffect;1003      }1004    } while (child = child.sibling);1005  }1006  */1007function bailoutOnAlreadyFinishedWork(1008  current,1009  workInProgress: Fiber,1010): Fiber | null {1011  cancelWorkTimer(workInProgress);1012  if (enableProfilerTimer) {1013    // Don't update "base" render times for bailouts.1014    stopBaseRenderTimerIfRunning();1015  }1016  // TODO: We should ideally be able to bail out early if the children have no1017  // more work to do. However, since we don't have a separation of this1018  // Fiber's priority and its children yet - we don't know without doing lots1019  // of the same work we do anyway. Once we have that separation we can just1020  // bail out here if the children has no more work at this priority level.1021  // if (workInProgress.priorityOfChildren <= priorityLevel) {...b0ea876b301f63c96d702a493f5ebd456144bcReactFiberBeginWork.js
Source:b0ea876b301f63c96d702a493f5ebd456144bcReactFiberBeginWork.js  
...94      if (nextChildren === null) {95        nextChildren = workInProgress.memoizedProps;96      }97    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98      return bailoutOnAlreadyFinishedWork(current, workInProgress);99    }100    reconcileChildren(current, workInProgress, nextChildren);101    memoizeProps(workInProgress, nextChildren);102    return workInProgress.child;103  }104  function markRef(current, workInProgress) {105    var ref = workInProgress.ref;106    if (ref !== null && (!current || current.ref !== ref)) {107      workInProgress.effectTag |= Ref;108    }109  }110  function updateFunctionalComponent(current, workInProgress) {111    var fn = workInProgress.type;112    var nextProps = workInProgress.pendingProps;113    var memoizedProps = workInProgress.memoizedProps;114    if (hasContextChanged()) {115      if (nextProps === null) {116        nextProps = memoizedProps;117      }118    } else {119      if (nextProps === null || memoizedProps === nextProps) {120        return bailoutOnAlreadyFinishedWork(current, workInProgress);121      }122      if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123        memoizeProps(workInProgress, nextProps);124        return bailoutOnAlreadyFinishedWork(current, workInProgress);125      }126    }127    var unmaskedContext = getUnmaskedContext(workInProgress);128    var context = getMaskedContext(workInProgress, unmaskedContext);129    var nextChildren;130    if (__DEV__) {131      ReactCurrentOwner.current = workInProgress;132      ReactDebugCurrentFiber.phase = 'render';133      nextChildren = fn(nextProps, context);134      ReactDebugCurrentFiber.phase = null;135    } else {136      nextChildren = fn(nextProps, context);137    }138    reconcileChildren(current, workInProgress, nextChildren);139    memoizeProps(workInProgress, nextProps);140    return workInProgress.child;141  }142  function updateClassComponent(current, workInProgress, priorityLevel) {143    var hasContext = pushContextProvider(workInProgress);144    var shouldUpdate = void 0;145    if (current === null) {146      if (!workInProgress.stateNode) {147        constructClassInstance(workInProgress);148        mountClassInstance(workInProgress, priorityLevel);149        shouldUpdate = true;150      } else {151        shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152      }153    } else {154      shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155    }156    return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157  }158  function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159    markRef(current, workInProgress);160    if (!shouldUpdate) {161      return bailoutOnAlreadyFinishedWork(current, workInProgress);162    }163    var instance = workInProgress.stateNode;164    ReactCurrentOwner.current = workInProgress;165    var nextChildren = void 0;166    if (__DEV__) {167      ReactDebugCurrentFiber.phase = 'render';168      nextChildren = instance.render();169      ReactDebugCurrentFiber.phase = null;170    } else {171      nextChildren = instance.render();172    }173    reconcileChildren(current, workInProgress, nextChildren);174    memoizeState(workInProgress, instance.state);175    memoizeProps(workInProgress, instance.props);176    if (hasContext) {177      invalidateContextProvider(workInProgress);178    }179    return workInProgress.child;180  }181  function updateHostRoot(current, workInProgress, priorityLevel) {182    var root = workInProgress.stateNode;183    if (root.pendingContext) {184      pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185    } else if (root.context) {186      pushTopLevelContextObject(workInProgress, root.context, false);187    }188    pushHostContainer(workInProgress, root.containerInfo);189    var updateQueue = workInProgress.updateQueue;190    if (updateQueue !== null) {191      var prevState = workInProgress.memoizedState;192      var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193      if (prevState === state) {194        return bailoutOnAlreadyFinishedWork(current, workInProgress);195      }196      var element = state.element;197      reconcileChildren(current, workInProgress, element);198      memoizeState(workInProgress, state);199      return workInProgress.child;200    }201    return bailoutOnAlreadyFinishedWork(current, workInProgress);202  }203  function updateHostComponent(current, workInProgress) {204    pushHostContext(workInProgress);205    var nextProps = workInProgress.pendingProps;206    var prevProps = current !== null ? current.memoizedProps : null;207    var memoizedProps = workInProgress.memoizedProps;208    if (hasContextChanged()) {209      if (nextProps === null) {210        nextProps = memoizedProps;211        invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212      }213    } else if (nextProps === null || memoizedProps === nextProps) {214      if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215        var child = workInProgress.progressedChild;216        while (child !== null) {217          child.pendingWorkPriority = OffscreenPriority;218          child = child.sibling;219        }220        return null;221      }222      return bailoutOnAlreadyFinishedWork(current, workInProgress);223    }224    var nextChildren = nextProps.children;225    var isDirectTextChild = shouldSetTextContent(nextProps);226    if (isDirectTextChild) {227      nextChildren = null;228    } else if (prevProps && shouldSetTextContent(prevProps)) {229      workInProgress.effectTag |= ContentReset;230    }231    markRef(current, workInProgress);232    if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233      if (workInProgress.progressedPriority === OffscreenPriority) {234        workInProgress.child = workInProgress.progressedChild;235      }236      reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237      memoizeProps(workInProgress, nextProps);238      workInProgress.child = current !== null ? current.child : null;239      if (current === null) {240        var _child = workInProgress.progressedChild;241        while (_child !== null) {242          _child.effectTag = Placement;243          _child = _child.sibling;244        }245      }246      return null;247    } else {248      reconcileChildren(current, workInProgress, nextChildren);249      memoizeProps(workInProgress, nextProps);250      return workInProgress.child;251    }252  }253  function updateHostText(current, workInProgress) {254    var nextProps = workInProgress.pendingProps;255    if (nextProps === null) {256      nextProps = workInProgress.memoizedProps;257    }258    memoizeProps(workInProgress, nextProps);259    return null;260  }261  function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262    invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263    var fn = workInProgress.type;264    var props = workInProgress.pendingProps;265    var unmaskedContext = getUnmaskedContext(workInProgress);266    var context = getMaskedContext(workInProgress, unmaskedContext);267    var value;268    if (__DEV__) {269      ReactCurrentOwner.current = workInProgress;270      value = fn(props, context);271    } else {272      value = fn(props, context);273    }274    if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275      workInProgress.tag = ClassComponent;276      var hasContext = pushContextProvider(workInProgress);277      adoptClassInstance(workInProgress, value);278      mountClassInstance(workInProgress, priorityLevel);279      return finishClassComponent(current, workInProgress, true, hasContext);280    } else {281      workInProgress.tag = FunctionalComponent;282      if (__DEV__) {283        var Component = workInProgress.type;284        if (Component) {285          warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286        }287        if (workInProgress.ref !== null) {288          var info = '';289          var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290          if (ownerName) {291            info += '\n\nCheck the render method of `' + ownerName + '`.';292          }293          var warningKey = ownerName || workInProgress._debugID || '';294          var debugSource = workInProgress._debugSource;295          if (debugSource) {296            warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297          }298          if (!warnedAboutStatelessRefs[warningKey]) {299            warnedAboutStatelessRefs[warningKey] = true;300            warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301          }302        }303      }304      reconcileChildren(current, workInProgress, value);305      memoizeProps(workInProgress, props);306      return workInProgress.child;307    }308  }309  function updateCoroutineComponent(current, workInProgress) {310    var nextCoroutine = workInProgress.pendingProps;311    if (hasContextChanged()) {312      if (nextCoroutine === null) {313        nextCoroutine = current && current.memoizedProps;314        invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315      }316    } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317      nextCoroutine = workInProgress.memoizedProps;318    }319    var nextChildren = nextCoroutine.children;320    var priorityLevel = workInProgress.pendingWorkPriority;321    workInProgress.memoizedProps = null;322    if (current === null) {323      workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324    } else if (current.child === workInProgress.child) {325      clearDeletions(workInProgress);326      workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327      transferDeletions(workInProgress);328    } else {329      workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330      transferDeletions(workInProgress);331    }332    memoizeProps(workInProgress, nextCoroutine);333    return workInProgress.stateNode;334  }335  function updatePortalComponent(current, workInProgress) {336    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337    var priorityLevel = workInProgress.pendingWorkPriority;338    var nextChildren = workInProgress.pendingProps;339    if (hasContextChanged()) {340      if (nextChildren === null) {341        nextChildren = current && current.memoizedProps;342        invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343      }344    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345      return bailoutOnAlreadyFinishedWork(current, workInProgress);346    }347    if (current === null) {348      workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349      memoizeProps(workInProgress, nextChildren);350      markChildAsProgressed(current, workInProgress, priorityLevel);351    } else {352      reconcileChildren(current, workInProgress, nextChildren);353      memoizeProps(workInProgress, nextChildren);354    }355    return workInProgress.child;356  }357  function bailoutOnAlreadyFinishedWork(current, workInProgress) {358    if (__DEV__) {359      cancelWorkTimer(workInProgress);360    }361    var priorityLevel = workInProgress.pendingWorkPriority;362    if (current && workInProgress.child === current.child) {363      clearDeletions(workInProgress);364    }365    cloneChildFibers(current, workInProgress);366    markChildAsProgressed(current, workInProgress, priorityLevel);367    return workInProgress.child;368  }369  function bailoutOnLowPriority(current, workInProgress) {370    if (__DEV__) {371      cancelWorkTimer(workInProgress);...8a2b1d695be0826d1657ee10d51695117eb487ReactFiberBeginWork.js
Source:8a2b1d695be0826d1657ee10d51695117eb487ReactFiberBeginWork.js  
...94      if (nextChildren === null) {95        nextChildren = workInProgress.memoizedProps;96      }97    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98      return bailoutOnAlreadyFinishedWork(current, workInProgress);99    }100    reconcileChildren(current, workInProgress, nextChildren);101    memoizeProps(workInProgress, nextChildren);102    return workInProgress.child;103  }104  function markRef(current, workInProgress) {105    var ref = workInProgress.ref;106    if (ref !== null && (!current || current.ref !== ref)) {107      workInProgress.effectTag |= Ref;108    }109  }110  function updateFunctionalComponent(current, workInProgress) {111    var fn = workInProgress.type;112    var nextProps = workInProgress.pendingProps;113    var memoizedProps = workInProgress.memoizedProps;114    if (hasContextChanged()) {115      if (nextProps === null) {116        nextProps = memoizedProps;117      }118    } else {119      if (nextProps === null || memoizedProps === nextProps) {120        return bailoutOnAlreadyFinishedWork(current, workInProgress);121      }122      if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123        memoizeProps(workInProgress, nextProps);124        return bailoutOnAlreadyFinishedWork(current, workInProgress);125      }126    }127    var unmaskedContext = getUnmaskedContext(workInProgress);128    var context = getMaskedContext(workInProgress, unmaskedContext);129    var nextChildren;130    if (__DEV__) {131      ReactCurrentOwner.current = workInProgress;132      ReactDebugCurrentFiber.phase = 'render';133      nextChildren = fn(nextProps, context);134      ReactDebugCurrentFiber.phase = null;135    } else {136      nextChildren = fn(nextProps, context);137    }138    reconcileChildren(current, workInProgress, nextChildren);139    memoizeProps(workInProgress, nextProps);140    return workInProgress.child;141  }142  function updateClassComponent(current, workInProgress, priorityLevel) {143    var hasContext = pushContextProvider(workInProgress);144    var shouldUpdate = void 0;145    if (current === null) {146      if (!workInProgress.stateNode) {147        constructClassInstance(workInProgress);148        mountClassInstance(workInProgress, priorityLevel);149        shouldUpdate = true;150      } else {151        shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152      }153    } else {154      shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155    }156    return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157  }158  function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159    markRef(current, workInProgress);160    if (!shouldUpdate) {161      return bailoutOnAlreadyFinishedWork(current, workInProgress);162    }163    var instance = workInProgress.stateNode;164    ReactCurrentOwner.current = workInProgress;165    var nextChildren = void 0;166    if (__DEV__) {167      ReactDebugCurrentFiber.phase = 'render';168      nextChildren = instance.render();169      ReactDebugCurrentFiber.phase = null;170    } else {171      nextChildren = instance.render();172    }173    reconcileChildren(current, workInProgress, nextChildren);174    memoizeState(workInProgress, instance.state);175    memoizeProps(workInProgress, instance.props);176    if (hasContext) {177      invalidateContextProvider(workInProgress);178    }179    return workInProgress.child;180  }181  function updateHostRoot(current, workInProgress, priorityLevel) {182    var root = workInProgress.stateNode;183    if (root.pendingContext) {184      pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185    } else if (root.context) {186      pushTopLevelContextObject(workInProgress, root.context, false);187    }188    pushHostContainer(workInProgress, root.containerInfo);189    var updateQueue = workInProgress.updateQueue;190    if (updateQueue !== null) {191      var prevState = workInProgress.memoizedState;192      var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193      if (prevState === state) {194        return bailoutOnAlreadyFinishedWork(current, workInProgress);195      }196      var element = state.element;197      reconcileChildren(current, workInProgress, element);198      memoizeState(workInProgress, state);199      return workInProgress.child;200    }201    return bailoutOnAlreadyFinishedWork(current, workInProgress);202  }203  function updateHostComponent(current, workInProgress) {204    pushHostContext(workInProgress);205    var nextProps = workInProgress.pendingProps;206    var prevProps = current !== null ? current.memoizedProps : null;207    var memoizedProps = workInProgress.memoizedProps;208    if (hasContextChanged()) {209      if (nextProps === null) {210        nextProps = memoizedProps;211        invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212      }213    } else if (nextProps === null || memoizedProps === nextProps) {214      if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215        var child = workInProgress.progressedChild;216        while (child !== null) {217          child.pendingWorkPriority = OffscreenPriority;218          child = child.sibling;219        }220        return null;221      }222      return bailoutOnAlreadyFinishedWork(current, workInProgress);223    }224    var nextChildren = nextProps.children;225    var isDirectTextChild = shouldSetTextContent(nextProps);226    if (isDirectTextChild) {227      nextChildren = null;228    } else if (prevProps && shouldSetTextContent(prevProps)) {229      workInProgress.effectTag |= ContentReset;230    }231    markRef(current, workInProgress);232    if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233      if (workInProgress.progressedPriority === OffscreenPriority) {234        workInProgress.child = workInProgress.progressedChild;235      }236      reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237      memoizeProps(workInProgress, nextProps);238      workInProgress.child = current !== null ? current.child : null;239      if (current === null) {240        var _child = workInProgress.progressedChild;241        while (_child !== null) {242          _child.effectTag = Placement;243          _child = _child.sibling;244        }245      }246      return null;247    } else {248      reconcileChildren(current, workInProgress, nextChildren);249      memoizeProps(workInProgress, nextProps);250      return workInProgress.child;251    }252  }253  function updateHostText(current, workInProgress) {254    var nextProps = workInProgress.pendingProps;255    if (nextProps === null) {256      nextProps = workInProgress.memoizedProps;257    }258    memoizeProps(workInProgress, nextProps);259    return null;260  }261  function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262    invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263    var fn = workInProgress.type;264    var props = workInProgress.pendingProps;265    var unmaskedContext = getUnmaskedContext(workInProgress);266    var context = getMaskedContext(workInProgress, unmaskedContext);267    var value;268    if (__DEV__) {269      ReactCurrentOwner.current = workInProgress;270      value = fn(props, context);271    } else {272      value = fn(props, context);273    }274    if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275      workInProgress.tag = ClassComponent;276      var hasContext = pushContextProvider(workInProgress);277      adoptClassInstance(workInProgress, value);278      mountClassInstance(workInProgress, priorityLevel);279      return finishClassComponent(current, workInProgress, true, hasContext);280    } else {281      workInProgress.tag = FunctionalComponent;282      if (__DEV__) {283        var Component = workInProgress.type;284        if (Component) {285          warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286        }287        if (workInProgress.ref !== null) {288          var info = '';289          var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290          if (ownerName) {291            info += '\n\nCheck the render method of `' + ownerName + '`.';292          }293          var warningKey = ownerName || workInProgress._debugID || '';294          var debugSource = workInProgress._debugSource;295          if (debugSource) {296            warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297          }298          if (!warnedAboutStatelessRefs[warningKey]) {299            warnedAboutStatelessRefs[warningKey] = true;300            warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301          }302        }303      }304      reconcileChildren(current, workInProgress, value);305      memoizeProps(workInProgress, props);306      return workInProgress.child;307    }308  }309  function updateCoroutineComponent(current, workInProgress) {310    var nextCoroutine = workInProgress.pendingProps;311    if (hasContextChanged()) {312      if (nextCoroutine === null) {313        nextCoroutine = current && current.memoizedProps;314        invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315      }316    } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317      nextCoroutine = workInProgress.memoizedProps;318    }319    var nextChildren = nextCoroutine.children;320    var priorityLevel = workInProgress.pendingWorkPriority;321    workInProgress.memoizedProps = null;322    if (current === null) {323      workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324    } else if (current.child === workInProgress.child) {325      clearDeletions(workInProgress);326      workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327      transferDeletions(workInProgress);328    } else {329      workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330      transferDeletions(workInProgress);331    }332    memoizeProps(workInProgress, nextCoroutine);333    return workInProgress.stateNode;334  }335  function updatePortalComponent(current, workInProgress) {336    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337    var priorityLevel = workInProgress.pendingWorkPriority;338    var nextChildren = workInProgress.pendingProps;339    if (hasContextChanged()) {340      if (nextChildren === null) {341        nextChildren = current && current.memoizedProps;342        invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343      }344    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345      return bailoutOnAlreadyFinishedWork(current, workInProgress);346    }347    if (current === null) {348      workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349      memoizeProps(workInProgress, nextChildren);350      markChildAsProgressed(current, workInProgress, priorityLevel);351    } else {352      reconcileChildren(current, workInProgress, nextChildren);353      memoizeProps(workInProgress, nextChildren);354    }355    return workInProgress.child;356  }357  function bailoutOnAlreadyFinishedWork(current, workInProgress) {358    if (__DEV__) {359      cancelWorkTimer(workInProgress);360    }361    var priorityLevel = workInProgress.pendingWorkPriority;362    if (current && workInProgress.child === current.child) {363      clearDeletions(workInProgress);364    }365    cloneChildFibers(current, workInProgress);366    markChildAsProgressed(current, workInProgress, priorityLevel);367    return workInProgress.child;368  }369  function bailoutOnLowPriority(current, workInProgress) {370    if (__DEV__) {371      cancelWorkTimer(workInProgress);...f53fd5eb0f6d83330f45713d7ad4a8e61020b9ReactFiberBeginWork.js
Source:f53fd5eb0f6d83330f45713d7ad4a8e61020b9ReactFiberBeginWork.js  
...94      if (nextChildren === null) {95        nextChildren = workInProgress.memoizedProps;96      }97    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98      return bailoutOnAlreadyFinishedWork(current, workInProgress);99    }100    reconcileChildren(current, workInProgress, nextChildren);101    memoizeProps(workInProgress, nextChildren);102    return workInProgress.child;103  }104  function markRef(current, workInProgress) {105    var ref = workInProgress.ref;106    if (ref !== null && (!current || current.ref !== ref)) {107      workInProgress.effectTag |= Ref;108    }109  }110  function updateFunctionalComponent(current, workInProgress) {111    var fn = workInProgress.type;112    var nextProps = workInProgress.pendingProps;113    var memoizedProps = workInProgress.memoizedProps;114    if (hasContextChanged()) {115      if (nextProps === null) {116        nextProps = memoizedProps;117      }118    } else {119      if (nextProps === null || memoizedProps === nextProps) {120        return bailoutOnAlreadyFinishedWork(current, workInProgress);121      }122      if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123        memoizeProps(workInProgress, nextProps);124        return bailoutOnAlreadyFinishedWork(current, workInProgress);125      }126    }127    var unmaskedContext = getUnmaskedContext(workInProgress);128    var context = getMaskedContext(workInProgress, unmaskedContext);129    var nextChildren;130    if (__DEV__) {131      ReactCurrentOwner.current = workInProgress;132      ReactDebugCurrentFiber.phase = 'render';133      nextChildren = fn(nextProps, context);134      ReactDebugCurrentFiber.phase = null;135    } else {136      nextChildren = fn(nextProps, context);137    }138    reconcileChildren(current, workInProgress, nextChildren);139    memoizeProps(workInProgress, nextProps);140    return workInProgress.child;141  }142  function updateClassComponent(current, workInProgress, priorityLevel) {143    var hasContext = pushContextProvider(workInProgress);144    var shouldUpdate = void 0;145    if (current === null) {146      if (!workInProgress.stateNode) {147        constructClassInstance(workInProgress);148        mountClassInstance(workInProgress, priorityLevel);149        shouldUpdate = true;150      } else {151        shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152      }153    } else {154      shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155    }156    return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157  }158  function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159    markRef(current, workInProgress);160    if (!shouldUpdate) {161      return bailoutOnAlreadyFinishedWork(current, workInProgress);162    }163    var instance = workInProgress.stateNode;164    ReactCurrentOwner.current = workInProgress;165    var nextChildren = void 0;166    if (__DEV__) {167      ReactDebugCurrentFiber.phase = 'render';168      nextChildren = instance.render();169      ReactDebugCurrentFiber.phase = null;170    } else {171      nextChildren = instance.render();172    }173    reconcileChildren(current, workInProgress, nextChildren);174    memoizeState(workInProgress, instance.state);175    memoizeProps(workInProgress, instance.props);176    if (hasContext) {177      invalidateContextProvider(workInProgress);178    }179    return workInProgress.child;180  }181  function updateHostRoot(current, workInProgress, priorityLevel) {182    var root = workInProgress.stateNode;183    if (root.pendingContext) {184      pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185    } else if (root.context) {186      pushTopLevelContextObject(workInProgress, root.context, false);187    }188    pushHostContainer(workInProgress, root.containerInfo);189    var updateQueue = workInProgress.updateQueue;190    if (updateQueue !== null) {191      var prevState = workInProgress.memoizedState;192      var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193      if (prevState === state) {194        return bailoutOnAlreadyFinishedWork(current, workInProgress);195      }196      var element = state.element;197      reconcileChildren(current, workInProgress, element);198      memoizeState(workInProgress, state);199      return workInProgress.child;200    }201    return bailoutOnAlreadyFinishedWork(current, workInProgress);202  }203  function updateHostComponent(current, workInProgress) {204    pushHostContext(workInProgress);205    var nextProps = workInProgress.pendingProps;206    var prevProps = current !== null ? current.memoizedProps : null;207    var memoizedProps = workInProgress.memoizedProps;208    if (hasContextChanged()) {209      if (nextProps === null) {210        nextProps = memoizedProps;211        invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212      }213    } else if (nextProps === null || memoizedProps === nextProps) {214      if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215        var child = workInProgress.progressedChild;216        while (child !== null) {217          child.pendingWorkPriority = OffscreenPriority;218          child = child.sibling;219        }220        return null;221      }222      return bailoutOnAlreadyFinishedWork(current, workInProgress);223    }224    var nextChildren = nextProps.children;225    var isDirectTextChild = shouldSetTextContent(nextProps);226    if (isDirectTextChild) {227      nextChildren = null;228    } else if (prevProps && shouldSetTextContent(prevProps)) {229      workInProgress.effectTag |= ContentReset;230    }231    markRef(current, workInProgress);232    if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233      if (workInProgress.progressedPriority === OffscreenPriority) {234        workInProgress.child = workInProgress.progressedChild;235      }236      reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237      memoizeProps(workInProgress, nextProps);238      workInProgress.child = current !== null ? current.child : null;239      if (current === null) {240        var _child = workInProgress.progressedChild;241        while (_child !== null) {242          _child.effectTag = Placement;243          _child = _child.sibling;244        }245      }246      return null;247    } else {248      reconcileChildren(current, workInProgress, nextChildren);249      memoizeProps(workInProgress, nextProps);250      return workInProgress.child;251    }252  }253  function updateHostText(current, workInProgress) {254    var nextProps = workInProgress.pendingProps;255    if (nextProps === null) {256      nextProps = workInProgress.memoizedProps;257    }258    memoizeProps(workInProgress, nextProps);259    return null;260  }261  function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262    invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263    var fn = workInProgress.type;264    var props = workInProgress.pendingProps;265    var unmaskedContext = getUnmaskedContext(workInProgress);266    var context = getMaskedContext(workInProgress, unmaskedContext);267    var value;268    if (__DEV__) {269      ReactCurrentOwner.current = workInProgress;270      value = fn(props, context);271    } else {272      value = fn(props, context);273    }274    if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275      workInProgress.tag = ClassComponent;276      var hasContext = pushContextProvider(workInProgress);277      adoptClassInstance(workInProgress, value);278      mountClassInstance(workInProgress, priorityLevel);279      return finishClassComponent(current, workInProgress, true, hasContext);280    } else {281      workInProgress.tag = FunctionalComponent;282      if (__DEV__) {283        var Component = workInProgress.type;284        if (Component) {285          warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286        }287        if (workInProgress.ref !== null) {288          var info = '';289          var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290          if (ownerName) {291            info += '\n\nCheck the render method of `' + ownerName + '`.';292          }293          var warningKey = ownerName || workInProgress._debugID || '';294          var debugSource = workInProgress._debugSource;295          if (debugSource) {296            warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297          }298          if (!warnedAboutStatelessRefs[warningKey]) {299            warnedAboutStatelessRefs[warningKey] = true;300            warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301          }302        }303      }304      reconcileChildren(current, workInProgress, value);305      memoizeProps(workInProgress, props);306      return workInProgress.child;307    }308  }309  function updateCoroutineComponent(current, workInProgress) {310    var nextCoroutine = workInProgress.pendingProps;311    if (hasContextChanged()) {312      if (nextCoroutine === null) {313        nextCoroutine = current && current.memoizedProps;314        invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315      }316    } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317      nextCoroutine = workInProgress.memoizedProps;318    }319    var nextChildren = nextCoroutine.children;320    var priorityLevel = workInProgress.pendingWorkPriority;321    workInProgress.memoizedProps = null;322    if (current === null) {323      workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324    } else if (current.child === workInProgress.child) {325      clearDeletions(workInProgress);326      workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327      transferDeletions(workInProgress);328    } else {329      workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330      transferDeletions(workInProgress);331    }332    memoizeProps(workInProgress, nextCoroutine);333    return workInProgress.stateNode;334  }335  function updatePortalComponent(current, workInProgress) {336    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337    var priorityLevel = workInProgress.pendingWorkPriority;338    var nextChildren = workInProgress.pendingProps;339    if (hasContextChanged()) {340      if (nextChildren === null) {341        nextChildren = current && current.memoizedProps;342        invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343      }344    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345      return bailoutOnAlreadyFinishedWork(current, workInProgress);346    }347    if (current === null) {348      workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349      memoizeProps(workInProgress, nextChildren);350      markChildAsProgressed(current, workInProgress, priorityLevel);351    } else {352      reconcileChildren(current, workInProgress, nextChildren);353      memoizeProps(workInProgress, nextChildren);354    }355    return workInProgress.child;356  }357  function bailoutOnAlreadyFinishedWork(current, workInProgress) {358    if (__DEV__) {359      cancelWorkTimer(workInProgress);360    }361    var priorityLevel = workInProgress.pendingWorkPriority;362    if (current && workInProgress.child === current.child) {363      clearDeletions(workInProgress);364    }365    cloneChildFibers(current, workInProgress);366    markChildAsProgressed(current, workInProgress, priorityLevel);367    return workInProgress.child;368  }369  function bailoutOnLowPriority(current, workInProgress) {370    if (__DEV__) {371      cancelWorkTimer(workInProgress);...0c0973fc7971824d7f8a174e5eae9c482a6244ReactFiberBeginWork.js
Source:0c0973fc7971824d7f8a174e5eae9c482a6244ReactFiberBeginWork.js  
...94      if (nextChildren === null) {95        nextChildren = workInProgress.memoizedProps;96      }97    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98      return bailoutOnAlreadyFinishedWork(current, workInProgress);99    }100    reconcileChildren(current, workInProgress, nextChildren);101    memoizeProps(workInProgress, nextChildren);102    return workInProgress.child;103  }104  function markRef(current, workInProgress) {105    var ref = workInProgress.ref;106    if (ref !== null && (!current || current.ref !== ref)) {107      workInProgress.effectTag |= Ref;108    }109  }110  function updateFunctionalComponent(current, workInProgress) {111    var fn = workInProgress.type;112    var nextProps = workInProgress.pendingProps;113    var memoizedProps = workInProgress.memoizedProps;114    if (hasContextChanged()) {115      if (nextProps === null) {116        nextProps = memoizedProps;117      }118    } else {119      if (nextProps === null || memoizedProps === nextProps) {120        return bailoutOnAlreadyFinishedWork(current, workInProgress);121      }122      if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123        memoizeProps(workInProgress, nextProps);124        return bailoutOnAlreadyFinishedWork(current, workInProgress);125      }126    }127    var unmaskedContext = getUnmaskedContext(workInProgress);128    var context = getMaskedContext(workInProgress, unmaskedContext);129    var nextChildren;130    if (__DEV__) {131      ReactCurrentOwner.current = workInProgress;132      ReactDebugCurrentFiber.phase = 'render';133      nextChildren = fn(nextProps, context);134      ReactDebugCurrentFiber.phase = null;135    } else {136      nextChildren = fn(nextProps, context);137    }138    reconcileChildren(current, workInProgress, nextChildren);139    memoizeProps(workInProgress, nextProps);140    return workInProgress.child;141  }142  function updateClassComponent(current, workInProgress, priorityLevel) {143    var hasContext = pushContextProvider(workInProgress);144    var shouldUpdate = void 0;145    if (current === null) {146      if (!workInProgress.stateNode) {147        constructClassInstance(workInProgress);148        mountClassInstance(workInProgress, priorityLevel);149        shouldUpdate = true;150      } else {151        shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152      }153    } else {154      shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155    }156    return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157  }158  function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159    markRef(current, workInProgress);160    if (!shouldUpdate) {161      return bailoutOnAlreadyFinishedWork(current, workInProgress);162    }163    var instance = workInProgress.stateNode;164    ReactCurrentOwner.current = workInProgress;165    var nextChildren = void 0;166    if (__DEV__) {167      ReactDebugCurrentFiber.phase = 'render';168      nextChildren = instance.render();169      ReactDebugCurrentFiber.phase = null;170    } else {171      nextChildren = instance.render();172    }173    reconcileChildren(current, workInProgress, nextChildren);174    memoizeState(workInProgress, instance.state);175    memoizeProps(workInProgress, instance.props);176    if (hasContext) {177      invalidateContextProvider(workInProgress);178    }179    return workInProgress.child;180  }181  function updateHostRoot(current, workInProgress, priorityLevel) {182    var root = workInProgress.stateNode;183    if (root.pendingContext) {184      pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185    } else if (root.context) {186      pushTopLevelContextObject(workInProgress, root.context, false);187    }188    pushHostContainer(workInProgress, root.containerInfo);189    var updateQueue = workInProgress.updateQueue;190    if (updateQueue !== null) {191      var prevState = workInProgress.memoizedState;192      var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193      if (prevState === state) {194        return bailoutOnAlreadyFinishedWork(current, workInProgress);195      }196      var element = state.element;197      reconcileChildren(current, workInProgress, element);198      memoizeState(workInProgress, state);199      return workInProgress.child;200    }201    return bailoutOnAlreadyFinishedWork(current, workInProgress);202  }203  function updateHostComponent(current, workInProgress) {204    pushHostContext(workInProgress);205    var nextProps = workInProgress.pendingProps;206    var prevProps = current !== null ? current.memoizedProps : null;207    var memoizedProps = workInProgress.memoizedProps;208    if (hasContextChanged()) {209      if (nextProps === null) {210        nextProps = memoizedProps;211        invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212      }213    } else if (nextProps === null || memoizedProps === nextProps) {214      if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215        var child = workInProgress.progressedChild;216        while (child !== null) {217          child.pendingWorkPriority = OffscreenPriority;218          child = child.sibling;219        }220        return null;221      }222      return bailoutOnAlreadyFinishedWork(current, workInProgress);223    }224    var nextChildren = nextProps.children;225    var isDirectTextChild = shouldSetTextContent(nextProps);226    if (isDirectTextChild) {227      nextChildren = null;228    } else if (prevProps && shouldSetTextContent(prevProps)) {229      workInProgress.effectTag |= ContentReset;230    }231    markRef(current, workInProgress);232    if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233      if (workInProgress.progressedPriority === OffscreenPriority) {234        workInProgress.child = workInProgress.progressedChild;235      }236      reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237      memoizeProps(workInProgress, nextProps);238      workInProgress.child = current !== null ? current.child : null;239      if (current === null) {240        var _child = workInProgress.progressedChild;241        while (_child !== null) {242          _child.effectTag = Placement;243          _child = _child.sibling;244        }245      }246      return null;247    } else {248      reconcileChildren(current, workInProgress, nextChildren);249      memoizeProps(workInProgress, nextProps);250      return workInProgress.child;251    }252  }253  function updateHostText(current, workInProgress) {254    var nextProps = workInProgress.pendingProps;255    if (nextProps === null) {256      nextProps = workInProgress.memoizedProps;257    }258    memoizeProps(workInProgress, nextProps);259    return null;260  }261  function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262    invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263    var fn = workInProgress.type;264    var props = workInProgress.pendingProps;265    var unmaskedContext = getUnmaskedContext(workInProgress);266    var context = getMaskedContext(workInProgress, unmaskedContext);267    var value;268    if (__DEV__) {269      ReactCurrentOwner.current = workInProgress;270      value = fn(props, context);271    } else {272      value = fn(props, context);273    }274    if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275      workInProgress.tag = ClassComponent;276      var hasContext = pushContextProvider(workInProgress);277      adoptClassInstance(workInProgress, value);278      mountClassInstance(workInProgress, priorityLevel);279      return finishClassComponent(current, workInProgress, true, hasContext);280    } else {281      workInProgress.tag = FunctionalComponent;282      if (__DEV__) {283        var Component = workInProgress.type;284        if (Component) {285          warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286        }287        if (workInProgress.ref !== null) {288          var info = '';289          var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290          if (ownerName) {291            info += '\n\nCheck the render method of `' + ownerName + '`.';292          }293          var warningKey = ownerName || workInProgress._debugID || '';294          var debugSource = workInProgress._debugSource;295          if (debugSource) {296            warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297          }298          if (!warnedAboutStatelessRefs[warningKey]) {299            warnedAboutStatelessRefs[warningKey] = true;300            warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301          }302        }303      }304      reconcileChildren(current, workInProgress, value);305      memoizeProps(workInProgress, props);306      return workInProgress.child;307    }308  }309  function updateCoroutineComponent(current, workInProgress) {310    var nextCoroutine = workInProgress.pendingProps;311    if (hasContextChanged()) {312      if (nextCoroutine === null) {313        nextCoroutine = current && current.memoizedProps;314        invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315      }316    } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317      nextCoroutine = workInProgress.memoizedProps;318    }319    var nextChildren = nextCoroutine.children;320    var priorityLevel = workInProgress.pendingWorkPriority;321    workInProgress.memoizedProps = null;322    if (current === null) {323      workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324    } else if (current.child === workInProgress.child) {325      clearDeletions(workInProgress);326      workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327      transferDeletions(workInProgress);328    } else {329      workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330      transferDeletions(workInProgress);331    }332    memoizeProps(workInProgress, nextCoroutine);333    return workInProgress.stateNode;334  }335  function updatePortalComponent(current, workInProgress) {336    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337    var priorityLevel = workInProgress.pendingWorkPriority;338    var nextChildren = workInProgress.pendingProps;339    if (hasContextChanged()) {340      if (nextChildren === null) {341        nextChildren = current && current.memoizedProps;342        invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343      }344    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345      return bailoutOnAlreadyFinishedWork(current, workInProgress);346    }347    if (current === null) {348      workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349      memoizeProps(workInProgress, nextChildren);350      markChildAsProgressed(current, workInProgress, priorityLevel);351    } else {352      reconcileChildren(current, workInProgress, nextChildren);353      memoizeProps(workInProgress, nextChildren);354    }355    return workInProgress.child;356  }357  function bailoutOnAlreadyFinishedWork(current, workInProgress) {358    if (__DEV__) {359      cancelWorkTimer(workInProgress);360    }361    var priorityLevel = workInProgress.pendingWorkPriority;362    if (current && workInProgress.child === current.child) {363      clearDeletions(workInProgress);364    }365    cloneChildFibers(current, workInProgress);366    markChildAsProgressed(current, workInProgress, priorityLevel);367    return workInProgress.child;368  }369  function bailoutOnLowPriority(current, workInProgress) {370    if (__DEV__) {371      cancelWorkTimer(workInProgress);...a9c9772a1f3ee8b9618c4d3bc7e33597822442ReactFiberBeginWork.js
Source:a9c9772a1f3ee8b9618c4d3bc7e33597822442ReactFiberBeginWork.js  
...94      if (nextChildren === null) {95        nextChildren = workInProgress.memoizedProps;96      }97    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98      return bailoutOnAlreadyFinishedWork(current, workInProgress);99    }100    reconcileChildren(current, workInProgress, nextChildren);101    memoizeProps(workInProgress, nextChildren);102    return workInProgress.child;103  }104  function markRef(current, workInProgress) {105    var ref = workInProgress.ref;106    if (ref !== null && (!current || current.ref !== ref)) {107      workInProgress.effectTag |= Ref;108    }109  }110  function updateFunctionalComponent(current, workInProgress) {111    var fn = workInProgress.type;112    var nextProps = workInProgress.pendingProps;113    var memoizedProps = workInProgress.memoizedProps;114    if (hasContextChanged()) {115      if (nextProps === null) {116        nextProps = memoizedProps;117      }118    } else {119      if (nextProps === null || memoizedProps === nextProps) {120        return bailoutOnAlreadyFinishedWork(current, workInProgress);121      }122      if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123        memoizeProps(workInProgress, nextProps);124        return bailoutOnAlreadyFinishedWork(current, workInProgress);125      }126    }127    var unmaskedContext = getUnmaskedContext(workInProgress);128    var context = getMaskedContext(workInProgress, unmaskedContext);129    var nextChildren;130    if (__DEV__) {131      ReactCurrentOwner.current = workInProgress;132      ReactDebugCurrentFiber.phase = 'render';133      nextChildren = fn(nextProps, context);134      ReactDebugCurrentFiber.phase = null;135    } else {136      nextChildren = fn(nextProps, context);137    }138    reconcileChildren(current, workInProgress, nextChildren);139    memoizeProps(workInProgress, nextProps);140    return workInProgress.child;141  }142  function updateClassComponent(current, workInProgress, priorityLevel) {143    var hasContext = pushContextProvider(workInProgress);144    var shouldUpdate = void 0;145    if (current === null) {146      if (!workInProgress.stateNode) {147        constructClassInstance(workInProgress);148        mountClassInstance(workInProgress, priorityLevel);149        shouldUpdate = true;150      } else {151        shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152      }153    } else {154      shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155    }156    return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157  }158  function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159    markRef(current, workInProgress);160    if (!shouldUpdate) {161      return bailoutOnAlreadyFinishedWork(current, workInProgress);162    }163    var instance = workInProgress.stateNode;164    ReactCurrentOwner.current = workInProgress;165    var nextChildren = void 0;166    if (__DEV__) {167      ReactDebugCurrentFiber.phase = 'render';168      nextChildren = instance.render();169      ReactDebugCurrentFiber.phase = null;170    } else {171      nextChildren = instance.render();172    }173    reconcileChildren(current, workInProgress, nextChildren);174    memoizeState(workInProgress, instance.state);175    memoizeProps(workInProgress, instance.props);176    if (hasContext) {177      invalidateContextProvider(workInProgress);178    }179    return workInProgress.child;180  }181  function updateHostRoot(current, workInProgress, priorityLevel) {182    var root = workInProgress.stateNode;183    if (root.pendingContext) {184      pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185    } else if (root.context) {186      pushTopLevelContextObject(workInProgress, root.context, false);187    }188    pushHostContainer(workInProgress, root.containerInfo);189    var updateQueue = workInProgress.updateQueue;190    if (updateQueue !== null) {191      var prevState = workInProgress.memoizedState;192      var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193      if (prevState === state) {194        return bailoutOnAlreadyFinishedWork(current, workInProgress);195      }196      var element = state.element;197      reconcileChildren(current, workInProgress, element);198      memoizeState(workInProgress, state);199      return workInProgress.child;200    }201    return bailoutOnAlreadyFinishedWork(current, workInProgress);202  }203  function updateHostComponent(current, workInProgress) {204    pushHostContext(workInProgress);205    var nextProps = workInProgress.pendingProps;206    var prevProps = current !== null ? current.memoizedProps : null;207    var memoizedProps = workInProgress.memoizedProps;208    if (hasContextChanged()) {209      if (nextProps === null) {210        nextProps = memoizedProps;211        invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212      }213    } else if (nextProps === null || memoizedProps === nextProps) {214      if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215        var child = workInProgress.progressedChild;216        while (child !== null) {217          child.pendingWorkPriority = OffscreenPriority;218          child = child.sibling;219        }220        return null;221      }222      return bailoutOnAlreadyFinishedWork(current, workInProgress);223    }224    var nextChildren = nextProps.children;225    var isDirectTextChild = shouldSetTextContent(nextProps);226    if (isDirectTextChild) {227      nextChildren = null;228    } else if (prevProps && shouldSetTextContent(prevProps)) {229      workInProgress.effectTag |= ContentReset;230    }231    markRef(current, workInProgress);232    if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233      if (workInProgress.progressedPriority === OffscreenPriority) {234        workInProgress.child = workInProgress.progressedChild;235      }236      reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237      memoizeProps(workInProgress, nextProps);238      workInProgress.child = current !== null ? current.child : null;239      if (current === null) {240        var _child = workInProgress.progressedChild;241        while (_child !== null) {242          _child.effectTag = Placement;243          _child = _child.sibling;244        }245      }246      return null;247    } else {248      reconcileChildren(current, workInProgress, nextChildren);249      memoizeProps(workInProgress, nextProps);250      return workInProgress.child;251    }252  }253  function updateHostText(current, workInProgress) {254    var nextProps = workInProgress.pendingProps;255    if (nextProps === null) {256      nextProps = workInProgress.memoizedProps;257    }258    memoizeProps(workInProgress, nextProps);259    return null;260  }261  function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262    invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263    var fn = workInProgress.type;264    var props = workInProgress.pendingProps;265    var unmaskedContext = getUnmaskedContext(workInProgress);266    var context = getMaskedContext(workInProgress, unmaskedContext);267    var value;268    if (__DEV__) {269      ReactCurrentOwner.current = workInProgress;270      value = fn(props, context);271    } else {272      value = fn(props, context);273    }274    if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275      workInProgress.tag = ClassComponent;276      var hasContext = pushContextProvider(workInProgress);277      adoptClassInstance(workInProgress, value);278      mountClassInstance(workInProgress, priorityLevel);279      return finishClassComponent(current, workInProgress, true, hasContext);280    } else {281      workInProgress.tag = FunctionalComponent;282      if (__DEV__) {283        var Component = workInProgress.type;284        if (Component) {285          warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286        }287        if (workInProgress.ref !== null) {288          var info = '';289          var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290          if (ownerName) {291            info += '\n\nCheck the render method of `' + ownerName + '`.';292          }293          var warningKey = ownerName || workInProgress._debugID || '';294          var debugSource = workInProgress._debugSource;295          if (debugSource) {296            warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297          }298          if (!warnedAboutStatelessRefs[warningKey]) {299            warnedAboutStatelessRefs[warningKey] = true;300            warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301          }302        }303      }304      reconcileChildren(current, workInProgress, value);305      memoizeProps(workInProgress, props);306      return workInProgress.child;307    }308  }309  function updateCoroutineComponent(current, workInProgress) {310    var nextCoroutine = workInProgress.pendingProps;311    if (hasContextChanged()) {312      if (nextCoroutine === null) {313        nextCoroutine = current && current.memoizedProps;314        invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315      }316    } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317      nextCoroutine = workInProgress.memoizedProps;318    }319    var nextChildren = nextCoroutine.children;320    var priorityLevel = workInProgress.pendingWorkPriority;321    workInProgress.memoizedProps = null;322    if (current === null) {323      workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324    } else if (current.child === workInProgress.child) {325      clearDeletions(workInProgress);326      workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327      transferDeletions(workInProgress);328    } else {329      workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330      transferDeletions(workInProgress);331    }332    memoizeProps(workInProgress, nextCoroutine);333    return workInProgress.stateNode;334  }335  function updatePortalComponent(current, workInProgress) {336    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337    var priorityLevel = workInProgress.pendingWorkPriority;338    var nextChildren = workInProgress.pendingProps;339    if (hasContextChanged()) {340      if (nextChildren === null) {341        nextChildren = current && current.memoizedProps;342        invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343      }344    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345      return bailoutOnAlreadyFinishedWork(current, workInProgress);346    }347    if (current === null) {348      workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349      memoizeProps(workInProgress, nextChildren);350      markChildAsProgressed(current, workInProgress, priorityLevel);351    } else {352      reconcileChildren(current, workInProgress, nextChildren);353      memoizeProps(workInProgress, nextChildren);354    }355    return workInProgress.child;356  }357  function bailoutOnAlreadyFinishedWork(current, workInProgress) {358    if (__DEV__) {359      cancelWorkTimer(workInProgress);360    }361    var priorityLevel = workInProgress.pendingWorkPriority;362    if (current && workInProgress.child === current.child) {363      clearDeletions(workInProgress);364    }365    cloneChildFibers(current, workInProgress);366    markChildAsProgressed(current, workInProgress, priorityLevel);367    return workInProgress.child;368  }369  function bailoutOnLowPriority(current, workInProgress) {370    if (__DEV__) {371      cancelWorkTimer(workInProgress);...38fd25b340d9a8718c2ff51416edd6daa1ddf9ReactFiberBeginWork.js
Source:38fd25b340d9a8718c2ff51416edd6daa1ddf9ReactFiberBeginWork.js  
...94      if (nextChildren === null) {95        nextChildren = workInProgress.memoizedProps;96      }97    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98      return bailoutOnAlreadyFinishedWork(current, workInProgress);99    }100    reconcileChildren(current, workInProgress, nextChildren);101    memoizeProps(workInProgress, nextChildren);102    return workInProgress.child;103  }104  function markRef(current, workInProgress) {105    var ref = workInProgress.ref;106    if (ref !== null && (!current || current.ref !== ref)) {107      workInProgress.effectTag |= Ref;108    }109  }110  function updateFunctionalComponent(current, workInProgress) {111    var fn = workInProgress.type;112    var nextProps = workInProgress.pendingProps;113    var memoizedProps = workInProgress.memoizedProps;114    if (hasContextChanged()) {115      if (nextProps === null) {116        nextProps = memoizedProps;117      }118    } else {119      if (nextProps === null || memoizedProps === nextProps) {120        return bailoutOnAlreadyFinishedWork(current, workInProgress);121      }122      if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123        memoizeProps(workInProgress, nextProps);124        return bailoutOnAlreadyFinishedWork(current, workInProgress);125      }126    }127    var unmaskedContext = getUnmaskedContext(workInProgress);128    var context = getMaskedContext(workInProgress, unmaskedContext);129    var nextChildren;130    if (__DEV__) {131      ReactCurrentOwner.current = workInProgress;132      ReactDebugCurrentFiber.phase = 'render';133      nextChildren = fn(nextProps, context);134      ReactDebugCurrentFiber.phase = null;135    } else {136      nextChildren = fn(nextProps, context);137    }138    reconcileChildren(current, workInProgress, nextChildren);139    memoizeProps(workInProgress, nextProps);140    return workInProgress.child;141  }142  function updateClassComponent(current, workInProgress, priorityLevel) {143    var hasContext = pushContextProvider(workInProgress);144    var shouldUpdate = void 0;145    if (current === null) {146      if (!workInProgress.stateNode) {147        constructClassInstance(workInProgress);148        mountClassInstance(workInProgress, priorityLevel);149        shouldUpdate = true;150      } else {151        shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152      }153    } else {154      shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155    }156    return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157  }158  function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159    markRef(current, workInProgress);160    if (!shouldUpdate) {161      return bailoutOnAlreadyFinishedWork(current, workInProgress);162    }163    var instance = workInProgress.stateNode;164    ReactCurrentOwner.current = workInProgress;165    var nextChildren = void 0;166    if (__DEV__) {167      ReactDebugCurrentFiber.phase = 'render';168      nextChildren = instance.render();169      ReactDebugCurrentFiber.phase = null;170    } else {171      nextChildren = instance.render();172    }173    reconcileChildren(current, workInProgress, nextChildren);174    memoizeState(workInProgress, instance.state);175    memoizeProps(workInProgress, instance.props);176    if (hasContext) {177      invalidateContextProvider(workInProgress);178    }179    return workInProgress.child;180  }181  function updateHostRoot(current, workInProgress, priorityLevel) {182    var root = workInProgress.stateNode;183    if (root.pendingContext) {184      pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185    } else if (root.context) {186      pushTopLevelContextObject(workInProgress, root.context, false);187    }188    pushHostContainer(workInProgress, root.containerInfo);189    var updateQueue = workInProgress.updateQueue;190    if (updateQueue !== null) {191      var prevState = workInProgress.memoizedState;192      var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193      if (prevState === state) {194        return bailoutOnAlreadyFinishedWork(current, workInProgress);195      }196      var element = state.element;197      reconcileChildren(current, workInProgress, element);198      memoizeState(workInProgress, state);199      return workInProgress.child;200    }201    return bailoutOnAlreadyFinishedWork(current, workInProgress);202  }203  function updateHostComponent(current, workInProgress) {204    pushHostContext(workInProgress);205    var nextProps = workInProgress.pendingProps;206    var prevProps = current !== null ? current.memoizedProps : null;207    var memoizedProps = workInProgress.memoizedProps;208    if (hasContextChanged()) {209      if (nextProps === null) {210        nextProps = memoizedProps;211        invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212      }213    } else if (nextProps === null || memoizedProps === nextProps) {214      if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215        var child = workInProgress.progressedChild;216        while (child !== null) {217          child.pendingWorkPriority = OffscreenPriority;218          child = child.sibling;219        }220        return null;221      }222      return bailoutOnAlreadyFinishedWork(current, workInProgress);223    }224    var nextChildren = nextProps.children;225    var isDirectTextChild = shouldSetTextContent(nextProps);226    if (isDirectTextChild) {227      nextChildren = null;228    } else if (prevProps && shouldSetTextContent(prevProps)) {229      workInProgress.effectTag |= ContentReset;230    }231    markRef(current, workInProgress);232    if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233      if (workInProgress.progressedPriority === OffscreenPriority) {234        workInProgress.child = workInProgress.progressedChild;235      }236      reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237      memoizeProps(workInProgress, nextProps);238      workInProgress.child = current !== null ? current.child : null;239      if (current === null) {240        var _child = workInProgress.progressedChild;241        while (_child !== null) {242          _child.effectTag = Placement;243          _child = _child.sibling;244        }245      }246      return null;247    } else {248      reconcileChildren(current, workInProgress, nextChildren);249      memoizeProps(workInProgress, nextProps);250      return workInProgress.child;251    }252  }253  function updateHostText(current, workInProgress) {254    var nextProps = workInProgress.pendingProps;255    if (nextProps === null) {256      nextProps = workInProgress.memoizedProps;257    }258    memoizeProps(workInProgress, nextProps);259    return null;260  }261  function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262    invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263    var fn = workInProgress.type;264    var props = workInProgress.pendingProps;265    var unmaskedContext = getUnmaskedContext(workInProgress);266    var context = getMaskedContext(workInProgress, unmaskedContext);267    var value;268    if (__DEV__) {269      ReactCurrentOwner.current = workInProgress;270      value = fn(props, context);271    } else {272      value = fn(props, context);273    }274    if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275      workInProgress.tag = ClassComponent;276      var hasContext = pushContextProvider(workInProgress);277      adoptClassInstance(workInProgress, value);278      mountClassInstance(workInProgress, priorityLevel);279      return finishClassComponent(current, workInProgress, true, hasContext);280    } else {281      workInProgress.tag = FunctionalComponent;282      if (__DEV__) {283        var Component = workInProgress.type;284        if (Component) {285          warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286        }287        if (workInProgress.ref !== null) {288          var info = '';289          var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290          if (ownerName) {291            info += '\n\nCheck the render method of `' + ownerName + '`.';292          }293          var warningKey = ownerName || workInProgress._debugID || '';294          var debugSource = workInProgress._debugSource;295          if (debugSource) {296            warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297          }298          if (!warnedAboutStatelessRefs[warningKey]) {299            warnedAboutStatelessRefs[warningKey] = true;300            warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301          }302        }303      }304      reconcileChildren(current, workInProgress, value);305      memoizeProps(workInProgress, props);306      return workInProgress.child;307    }308  }309  function updateCoroutineComponent(current, workInProgress) {310    var nextCoroutine = workInProgress.pendingProps;311    if (hasContextChanged()) {312      if (nextCoroutine === null) {313        nextCoroutine = current && current.memoizedProps;314        invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315      }316    } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317      nextCoroutine = workInProgress.memoizedProps;318    }319    var nextChildren = nextCoroutine.children;320    var priorityLevel = workInProgress.pendingWorkPriority;321    workInProgress.memoizedProps = null;322    if (current === null) {323      workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324    } else if (current.child === workInProgress.child) {325      clearDeletions(workInProgress);326      workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327      transferDeletions(workInProgress);328    } else {329      workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330      transferDeletions(workInProgress);331    }332    memoizeProps(workInProgress, nextCoroutine);333    return workInProgress.stateNode;334  }335  function updatePortalComponent(current, workInProgress) {336    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337    var priorityLevel = workInProgress.pendingWorkPriority;338    var nextChildren = workInProgress.pendingProps;339    if (hasContextChanged()) {340      if (nextChildren === null) {341        nextChildren = current && current.memoizedProps;342        invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343      }344    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345      return bailoutOnAlreadyFinishedWork(current, workInProgress);346    }347    if (current === null) {348      workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349      memoizeProps(workInProgress, nextChildren);350      markChildAsProgressed(current, workInProgress, priorityLevel);351    } else {352      reconcileChildren(current, workInProgress, nextChildren);353      memoizeProps(workInProgress, nextChildren);354    }355    return workInProgress.child;356  }357  function bailoutOnAlreadyFinishedWork(current, workInProgress) {358    if (__DEV__) {359      cancelWorkTimer(workInProgress);360    }361    var priorityLevel = workInProgress.pendingWorkPriority;362    if (current && workInProgress.child === current.child) {363      clearDeletions(workInProgress);364    }365    cloneChildFibers(current, workInProgress);366    markChildAsProgressed(current, workInProgress, priorityLevel);367    return workInProgress.child;368  }369  function bailoutOnLowPriority(current, workInProgress) {370    if (__DEV__) {371      cancelWorkTimer(workInProgress);...a4162600ecfb784e7fbd5e1407416c646910f4ReactFiberBeginWork.js
Source:a4162600ecfb784e7fbd5e1407416c646910f4ReactFiberBeginWork.js  
...94      if (nextChildren === null) {95        nextChildren = workInProgress.memoizedProps;96      }97    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98      return bailoutOnAlreadyFinishedWork(current, workInProgress);99    }100    reconcileChildren(current, workInProgress, nextChildren);101    memoizeProps(workInProgress, nextChildren);102    return workInProgress.child;103  }104  function markRef(current, workInProgress) {105    var ref = workInProgress.ref;106    if (ref !== null && (!current || current.ref !== ref)) {107      workInProgress.effectTag |= Ref;108    }109  }110  function updateFunctionalComponent(current, workInProgress) {111    var fn = workInProgress.type;112    var nextProps = workInProgress.pendingProps;113    var memoizedProps = workInProgress.memoizedProps;114    if (hasContextChanged()) {115      if (nextProps === null) {116        nextProps = memoizedProps;117      }118    } else {119      if (nextProps === null || memoizedProps === nextProps) {120        return bailoutOnAlreadyFinishedWork(current, workInProgress);121      }122      if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123        memoizeProps(workInProgress, nextProps);124        return bailoutOnAlreadyFinishedWork(current, workInProgress);125      }126    }127    var unmaskedContext = getUnmaskedContext(workInProgress);128    var context = getMaskedContext(workInProgress, unmaskedContext);129    var nextChildren;130    if (__DEV__) {131      ReactCurrentOwner.current = workInProgress;132      ReactDebugCurrentFiber.phase = 'render';133      nextChildren = fn(nextProps, context);134      ReactDebugCurrentFiber.phase = null;135    } else {136      nextChildren = fn(nextProps, context);137    }138    reconcileChildren(current, workInProgress, nextChildren);139    memoizeProps(workInProgress, nextProps);140    return workInProgress.child;141  }142  function updateClassComponent(current, workInProgress, priorityLevel) {143    var hasContext = pushContextProvider(workInProgress);144    var shouldUpdate = void 0;145    if (current === null) {146      if (!workInProgress.stateNode) {147        constructClassInstance(workInProgress);148        mountClassInstance(workInProgress, priorityLevel);149        shouldUpdate = true;150      } else {151        shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152      }153    } else {154      shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155    }156    return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157  }158  function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159    markRef(current, workInProgress);160    if (!shouldUpdate) {161      return bailoutOnAlreadyFinishedWork(current, workInProgress);162    }163    var instance = workInProgress.stateNode;164    ReactCurrentOwner.current = workInProgress;165    var nextChildren = void 0;166    if (__DEV__) {167      ReactDebugCurrentFiber.phase = 'render';168      nextChildren = instance.render();169      ReactDebugCurrentFiber.phase = null;170    } else {171      nextChildren = instance.render();172    }173    reconcileChildren(current, workInProgress, nextChildren);174    memoizeState(workInProgress, instance.state);175    memoizeProps(workInProgress, instance.props);176    if (hasContext) {177      invalidateContextProvider(workInProgress);178    }179    return workInProgress.child;180  }181  function updateHostRoot(current, workInProgress, priorityLevel) {182    var root = workInProgress.stateNode;183    if (root.pendingContext) {184      pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185    } else if (root.context) {186      pushTopLevelContextObject(workInProgress, root.context, false);187    }188    pushHostContainer(workInProgress, root.containerInfo);189    var updateQueue = workInProgress.updateQueue;190    if (updateQueue !== null) {191      var prevState = workInProgress.memoizedState;192      var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193      if (prevState === state) {194        return bailoutOnAlreadyFinishedWork(current, workInProgress);195      }196      var element = state.element;197      reconcileChildren(current, workInProgress, element);198      memoizeState(workInProgress, state);199      return workInProgress.child;200    }201    return bailoutOnAlreadyFinishedWork(current, workInProgress);202  }203  function updateHostComponent(current, workInProgress) {204    pushHostContext(workInProgress);205    var nextProps = workInProgress.pendingProps;206    var prevProps = current !== null ? current.memoizedProps : null;207    var memoizedProps = workInProgress.memoizedProps;208    if (hasContextChanged()) {209      if (nextProps === null) {210        nextProps = memoizedProps;211        invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212      }213    } else if (nextProps === null || memoizedProps === nextProps) {214      if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215        var child = workInProgress.progressedChild;216        while (child !== null) {217          child.pendingWorkPriority = OffscreenPriority;218          child = child.sibling;219        }220        return null;221      }222      return bailoutOnAlreadyFinishedWork(current, workInProgress);223    }224    var nextChildren = nextProps.children;225    var isDirectTextChild = shouldSetTextContent(nextProps);226    if (isDirectTextChild) {227      nextChildren = null;228    } else if (prevProps && shouldSetTextContent(prevProps)) {229      workInProgress.effectTag |= ContentReset;230    }231    markRef(current, workInProgress);232    if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233      if (workInProgress.progressedPriority === OffscreenPriority) {234        workInProgress.child = workInProgress.progressedChild;235      }236      reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237      memoizeProps(workInProgress, nextProps);238      workInProgress.child = current !== null ? current.child : null;239      if (current === null) {240        var _child = workInProgress.progressedChild;241        while (_child !== null) {242          _child.effectTag = Placement;243          _child = _child.sibling;244        }245      }246      return null;247    } else {248      reconcileChildren(current, workInProgress, nextChildren);249      memoizeProps(workInProgress, nextProps);250      return workInProgress.child;251    }252  }253  function updateHostText(current, workInProgress) {254    var nextProps = workInProgress.pendingProps;255    if (nextProps === null) {256      nextProps = workInProgress.memoizedProps;257    }258    memoizeProps(workInProgress, nextProps);259    return null;260  }261  function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262    invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263    var fn = workInProgress.type;264    var props = workInProgress.pendingProps;265    var unmaskedContext = getUnmaskedContext(workInProgress);266    var context = getMaskedContext(workInProgress, unmaskedContext);267    var value;268    if (__DEV__) {269      ReactCurrentOwner.current = workInProgress;270      value = fn(props, context);271    } else {272      value = fn(props, context);273    }274    if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275      workInProgress.tag = ClassComponent;276      var hasContext = pushContextProvider(workInProgress);277      adoptClassInstance(workInProgress, value);278      mountClassInstance(workInProgress, priorityLevel);279      return finishClassComponent(current, workInProgress, true, hasContext);280    } else {281      workInProgress.tag = FunctionalComponent;282      if (__DEV__) {283        var Component = workInProgress.type;284        if (Component) {285          warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286        }287        if (workInProgress.ref !== null) {288          var info = '';289          var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290          if (ownerName) {291            info += '\n\nCheck the render method of `' + ownerName + '`.';292          }293          var warningKey = ownerName || workInProgress._debugID || '';294          var debugSource = workInProgress._debugSource;295          if (debugSource) {296            warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297          }298          if (!warnedAboutStatelessRefs[warningKey]) {299            warnedAboutStatelessRefs[warningKey] = true;300            warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301          }302        }303      }304      reconcileChildren(current, workInProgress, value);305      memoizeProps(workInProgress, props);306      return workInProgress.child;307    }308  }309  function updateCoroutineComponent(current, workInProgress) {310    var nextCoroutine = workInProgress.pendingProps;311    if (hasContextChanged()) {312      if (nextCoroutine === null) {313        nextCoroutine = current && current.memoizedProps;314        invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315      }316    } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317      nextCoroutine = workInProgress.memoizedProps;318    }319    var nextChildren = nextCoroutine.children;320    var priorityLevel = workInProgress.pendingWorkPriority;321    workInProgress.memoizedProps = null;322    if (current === null) {323      workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324    } else if (current.child === workInProgress.child) {325      clearDeletions(workInProgress);326      workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327      transferDeletions(workInProgress);328    } else {329      workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330      transferDeletions(workInProgress);331    }332    memoizeProps(workInProgress, nextCoroutine);333    return workInProgress.stateNode;334  }335  function updatePortalComponent(current, workInProgress) {336    pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337    var priorityLevel = workInProgress.pendingWorkPriority;338    var nextChildren = workInProgress.pendingProps;339    if (hasContextChanged()) {340      if (nextChildren === null) {341        nextChildren = current && current.memoizedProps;342        invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343      }344    } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345      return bailoutOnAlreadyFinishedWork(current, workInProgress);346    }347    if (current === null) {348      workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349      memoizeProps(workInProgress, nextChildren);350      markChildAsProgressed(current, workInProgress, priorityLevel);351    } else {352      reconcileChildren(current, workInProgress, nextChildren);353      memoizeProps(workInProgress, nextChildren);354    }355    return workInProgress.child;356  }357  function bailoutOnAlreadyFinishedWork(current, workInProgress) {358    if (__DEV__) {359      cancelWorkTimer(workInProgress);360    }361    var priorityLevel = workInProgress.pendingWorkPriority;362    if (current && workInProgress.child === current.child) {363      clearDeletions(workInProgress);364    }365    cloneChildFibers(current, workInProgress);366    markChildAsProgressed(current, workInProgress, priorityLevel);367    return workInProgress.child;368  }369  function bailoutOnLowPriority(current, workInProgress) {370    if (__DEV__) {371      cancelWorkTimer(workInProgress);...Using AI Code Generation
1const playwright = require('playwright');2(async () => {3  const browser = await playwright.chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.bailoutOnAlreadyFinishedWork();7  await page.screenshot({ path: 'example.png' });8  await browser.close();9})();10Example 2: Using the page.bailoutOnAlreadyFinishedWork() method to wait for a selector to appear11const playwright = require('playwright');12(async () => {13  const browser = await playwright.chromium.launch();14  const context = await browser.newContext();15  const page = await context.newPage();16  await page.bailoutOnAlreadyFinishedWork();17  await page.waitForSelector('text=Get Started');18  await page.screenshot({ path: 'example.png' });19  await browser.close();20})();21Example 3: Using the page.bailoutOnAlreadyFinishedWork() method to wait for a selector to appear and then click on it22const playwright = require('playwright');23(async () => {24  const browser = await playwright.chromium.launch();25  const context = await browser.newContext();26  const page = await context.newPage();27  await page.bailoutOnAlreadyFinishedWork();28  await page.waitForSelector('text=Get Started');29  await page.click('text=Get Started');30  await page.screenshot({ path: 'example.png' });31  await browser.close();32})();Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.bailoutOnAlreadyFinishedWork();7  await browser.close();8})();9    at processTicksAndRejections (internal/process/task_queues.js:93:5)10    at async Page.bailoutOnAlreadyFinishedWork (/Users/akshay/Downloads/bailout/node_modules/playwright/lib/server/cjs/dispatchers/pageDispatcher.js:192:5)11    at async Object.<anonymous> (/Users/akshay/Downloads/bailout/test.js:10:5)Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.screenshot({ path: `example.png` });7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch();12  const context = await browser.newContext();13  const page = await context.newPage();14  await page.screenshot({ path: `example.png` });15  await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19  const browser = await chromium.launch();20  const context = await browser.newContext();21  const page = await context.newPage();22  await page.screenshot({ path: `example.png` });23  await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27  const browser = await chromium.launch();28  const context = await browser.newContext();29  const page = await context.newPage();30  await page.screenshot({ path: `example.png` });31  await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35  const browser = await chromium.launch();36  const context = await browser.newContext();37  const page = await context.newPage();38  await page.screenshot({ path: `example.png` });39  await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43  const browser = await chromium.launch();44  const context = await browser.newContext();Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const page = await browser.newPage();5  await page.bailoutOnAlreadyFinishedWork();6  await page.waitForTimeout(5000);7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch();12  const page = await browser.newPage();13  const currentPage = await page._delegate._pageProxy._pageOrError();14  console.log(currentPage);15  await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19  const browser = await chromium.launch();20  const page = await browser.newPage();21  const currentPage = await page._delegate._pageProxy._pageOrError();22  console.log(currentPage);23  await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27  const browser = await chromium.launch();28  const page = await browser.newPage();29  const currentPage = await page._delegate._pageProxy._pageOrError();30  console.log(currentPage);31  await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35  const browser = await chromium.launch();36  const page = await browser.newPage();37  const currentPage = await page._delegate._pageProxy._pageOrError();38  console.log(currentPage);39  await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43  const browser = await chromium.launch();44  const page = await browser.newPage();45  const currentPage = await page._delegate._pageProxy._pageOrError();46  console.log(currentPage);47  await browser.close();48})();49const { chromium } = require('Using AI Code Generation
1const { Playwright } = require('playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await page.bailoutOnAlreadyFinishedWork();7const { Playwright } = require('playwright');8const playwright = new Playwright();9const browser = await playwright.chromium.launch();10const context = await browser.newContext();11const page = await context.newPage();12await page.setDefaultTimeout(10000);13const { Playwright } = require('playwright');14const playwright = new Playwright();15const browser = await playwright.chromium.launch();16const context = await browser.newContext();17const page = await context.newPage();18await page.setDefaultNavigationTimeout(10000);19const { Playwright } = require('playwright');20const playwright = new Playwright();21const browser = await playwright.chromium.launch();22const context = await browser.newContext();23const page = await context.newPage();24await page.setDefaultTimeout(10000);25const { Playwright } = require('playwright');26const playwright = new Playwright();27const browser = await playwright.chromium.launch();28const context = await browser.newContext();29const page = await context.newPage();30await page.setDefaultNavigationTimeout(10000);31const { Playwright } = require('playwright');32const playwright = new Playwright();33const browser = await playwright.chromium.launch();34const context = await browser.newContext();35const page = await context.newPage();36await page.setDefaultTimeout(10000);Using AI Code Generation
1const { Playwright } = require('playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await page.fill('input[type=text]', 'Hello World');7await page.click('input[type=submit]');8await page.screenshot({ path: 'google.png' });9await page.bailoutOnAlreadyFinishedWork();10await browser.close();11module.exports = {12    use: {13        viewport: { width: 1280, height: 720 },14        launchOptions: {15            env: {16            },17        },18    },19};20{21    "scripts": {22    },23    "dependencies": {24    }25}26const { test, expect } = require('@playwright/test');27test('My first test', async ({ page }) => {28    await page.fill('input[type=text]', 'Hello World');29    await page.click('input[type=submit]');30    await page.screenshot({ path: 'google.png' });31    await page.bailoutOnAlreadyFinishedWork();32});Using AI Code Generation
1const playwright = require('playwright');2const internalAPI = require('playwright/lib/internal/api');3(async () => {4  const browser = await playwright.chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  await page.waitForSelector('input[name=q]');8  await page.fill('input[name=q]', 'hello world');9  await page.keyboard.press('Enter');10  await page.waitForSelector('h3');11  await browser.close();12})();Using AI Code Generation
1const { Playwright } = require('playwright');2const { Internal } = require('playwright/lib/internal');3const { Page } = require('playwright/lib/page');4const { Frame } = require('playwright/lib/frame');5const playwright = Playwright.create();6const browser = await playwright.chromium.launch();7const page = await browser.newPage();8const frame = await page.mainFrame();9await frame.bailoutOnAlreadyFinishedWork();10await page.bailoutOnAlreadyFinishedWork();11await Internal.bailoutOnAlreadyFinishedWork();12await playwright.bailoutOnAlreadyFinishedWork();13await browser.bailoutOnAlreadyFinishedWork();14await browserContext.bailoutOnAlreadyFinishedWork();15await browserServer.bailoutOnAlreadyFinishedWork();16await browserType.bailoutOnAlreadyFinishedWork();17await browser.bailoutOnAlreadyFinishedWork();18await browserContext.bailoutOnAlreadyFinishedWork();19await browserServer.bailoutOnAlreadyFinishedWork();20await browserType.bailoutOnAlreadyFinishedWork();21await browser.bailoutOnAlreadyFinishedWork();22await browserContext.bailoutOnAlreadyFinishedWork();23await browserServer.bailoutOnAlreadyFinishedWork();Using AI Code Generation
1const { Playwright } = require('playwright-core');2const playwright = new Playwright(require('playwright-core/lib/server/playwright.js'));3const { chromium } = playwright;4(async () => {5  const browser = await chromium.launch();6  const context = await browser.newContext();7  const page = await context.newPage();8  const testRunner = await page.evaluateHandle( () => window.testRunner);9  await testRunner.evaluate( testRunner => {10    testRunner.bailoutOnAlreadyFinishedWork();11  });12  await page.screenshot({ path: 'google.png' });13  await browser.close();14})();15[Apache 2.0](LICENSE)LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Get 100 minutes of automation test minutes FREE!!
