Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use resolveRetryWakeable method in Playwright Internal
Best JavaScript code snippet using playwright-internal
ReactFiberCommitWork.js
Source:ReactFiberCommitWork.js 
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @flow8 */9import type {10 Instance,11 TextInstance,12 SuspenseInstance,13 Container,14 ChildSet,15 UpdatePayload,16} from './ReactFiberHostConfig';17import type {Fiber} from './ReactFiber';18import type {FiberRoot} from './ReactFiberRoot';19import type {ExpirationTime} from './ReactFiberExpirationTime';20import type {SuspenseState} from './ReactFiberSuspenseComponent';21import type {FunctionComponentUpdateQueue} from './ReactFiberHooks';22import type {Wakeable} from 'shared/ReactTypes';23import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';24import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';25import {26 deferPassiveEffectCleanupDuringUnmount,27 enableSchedulerTracing,28 enableProfilerTimer,29 enableProfilerCommitHooks,30 enableSuspenseServerRenderer,31 enableDeprecatedFlareAPI,32 enableFundamentalAPI,33 enableSuspenseCallback,34 enableScopeAPI,35 runAllPassiveEffectDestroysBeforeCreates,36 enableUseEventAPI,37} from 'shared/ReactFeatureFlags';38import {39 FunctionComponent,40 ForwardRef,41 ClassComponent,42 HostRoot,43 HostComponent,44 HostText,45 HostPortal,46 Profiler,47 SuspenseComponent,48 DehydratedFragment,49 IncompleteClassComponent,50 MemoComponent,51 SimpleMemoComponent,52 SuspenseListComponent,53 FundamentalComponent,54 ScopeComponent,55 Block,56} from './ReactWorkTags';57import {58 invokeGuardedCallback,59 hasCaughtError,60 clearCaughtError,61} from 'shared/ReactErrorUtils';62import {63 NoEffect,64 ContentReset,65 Placement,66 Snapshot,67 Update,68 Passive,69} from './ReactSideEffectTags';70import getComponentName from 'shared/getComponentName';71import invariant from 'shared/invariant';72import {onCommitUnmount} from './ReactFiberDevToolsHook';73import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';74import {resolveDefaultProps} from './ReactFiberLazyComponent';75import {76 getCommitTime,77 recordLayoutEffectDuration,78 recordPassiveEffectDuration,79 startLayoutEffectTimer,80 startPassiveEffectTimer,81} from './ReactProfilerTimer';82import {ProfileMode} from './ReactTypeOfMode';83import {commitUpdateQueue} from './ReactUpdateQueue';84import {85 getPublicInstance,86 supportsMutation,87 supportsPersistence,88 supportsHydration,89 commitMount,90 commitUpdate,91 resetTextContent,92 commitTextUpdate,93 appendChild,94 appendChildToContainer,95 insertBefore,96 insertInContainerBefore,97 removeChild,98 removeChildFromContainer,99 clearSuspenseBoundary,100 clearSuspenseBoundaryFromContainer,101 replaceContainerChildren,102 createContainerChildSet,103 hideInstance,104 hideTextInstance,105 unhideInstance,106 unhideTextInstance,107 unmountFundamentalComponent,108 updateFundamentalComponent,109 commitHydratedContainer,110 commitHydratedSuspenseInstance,111 beforeRemoveInstance,112} from './ReactFiberHostConfig';113import {114 captureCommitPhaseError,115 resolveRetryWakeable,116 markCommitTimeOfFallback,117 enqueuePendingPassiveHookEffectMount,118 enqueuePendingPassiveHookEffectUnmount,119 enqueuePendingPassiveProfilerEffect,120} from './ReactFiberWorkLoop';121import {122 NoEffect as NoHookEffect,123 HasEffect as HookHasEffect,124 Layout as HookLayout,125 Passive as HookPassive,126} from './ReactHookEffectTags';127import {didWarnAboutReassigningProps} from './ReactFiberBeginWork';128import {runWithPriority, NormalPriority} from './SchedulerWithReactIntegration';129import {130 updateDeprecatedEventListeners,131 unmountDeprecatedResponderListeners,132} from './ReactFiberDeprecatedEvents';133let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;134if (__DEV__) {135 didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();136}137const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;138const callComponentWillUnmountWithTimer = function(current, instance) {139 instance.props = current.memoizedProps;140 instance.state = current.memoizedState;141 if (142 enableProfilerTimer &&143 enableProfilerCommitHooks &&144 current.mode & ProfileMode145 ) {146 try {147 startLayoutEffectTimer();148 instance.componentWillUnmount();149 } finally {150 recordLayoutEffectDuration(current);151 }152 } else {153 instance.componentWillUnmount();154 }155};156// Capture errors so they don't interrupt unmounting.157function safelyCallComponentWillUnmount(current, instance) {158 if (__DEV__) {159 invokeGuardedCallback(160 null,161 callComponentWillUnmountWithTimer,162 null,163 current,164 instance,165 );166 if (hasCaughtError()) {167 const unmountError = clearCaughtError();168 captureCommitPhaseError(current, unmountError);169 }170 } else {171 try {172 callComponentWillUnmountWithTimer(current, instance);173 } catch (unmountError) {174 captureCommitPhaseError(current, unmountError);175 }176 }177}178function safelyDetachRef(current: Fiber) {179 const ref = current.ref;180 if (ref !== null) {181 if (typeof ref === 'function') {182 if (__DEV__) {183 invokeGuardedCallback(null, ref, null, null);184 if (hasCaughtError()) {185 const refError = clearCaughtError();186 captureCommitPhaseError(current, refError);187 }188 } else {189 try {190 ref(null);191 } catch (refError) {192 captureCommitPhaseError(current, refError);193 }194 }195 } else {196 ref.current = null;197 }198 }199}200function safelyCallDestroy(current, destroy) {201 if (__DEV__) {202 invokeGuardedCallback(null, destroy, null);203 if (hasCaughtError()) {204 const error = clearCaughtError();205 captureCommitPhaseError(current, error);206 }207 } else {208 try {209 destroy();210 } catch (error) {211 captureCommitPhaseError(current, error);212 }213 }214}215function commitBeforeMutationLifeCycles(216 current: Fiber | null,217 finishedWork: Fiber,218): void {219 switch (finishedWork.tag) {220 case FunctionComponent:221 case ForwardRef:222 case SimpleMemoComponent:223 case Block: {224 return;225 }226 case ClassComponent: {227 if (finishedWork.effectTag & Snapshot) {228 if (current !== null) {229 const prevProps = current.memoizedProps;230 const prevState = current.memoizedState;231 const instance = finishedWork.stateNode;232 // We could update instance props and state here,233 // but instead we rely on them being set during last render.234 // TODO: revisit this when we implement resuming.235 if (__DEV__) {236 if (237 finishedWork.type === finishedWork.elementType &&238 !didWarnAboutReassigningProps239 ) {240 if (instance.props !== finishedWork.memoizedProps) {241 console.error(242 'Expected %s props to match memoized props before ' +243 'getSnapshotBeforeUpdate. ' +244 'This might either be because of a bug in React, or because ' +245 'a component reassigns its own `this.props`. ' +246 'Please file an issue.',247 getComponentName(finishedWork.type) || 'instance',248 );249 }250 if (instance.state !== finishedWork.memoizedState) {251 console.error(252 'Expected %s state to match memoized state before ' +253 'getSnapshotBeforeUpdate. ' +254 'This might either be because of a bug in React, or because ' +255 'a component reassigns its own `this.state`. ' +256 'Please file an issue.',257 getComponentName(finishedWork.type) || 'instance',258 );259 }260 }261 }262 const snapshot = instance.getSnapshotBeforeUpdate(263 finishedWork.elementType === finishedWork.type264 ? prevProps265 : resolveDefaultProps(finishedWork.type, prevProps),266 prevState,267 );268 if (__DEV__) {269 const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);270 if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {271 didWarnSet.add(finishedWork.type);272 console.error(273 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +274 'must be returned. You have returned undefined.',275 getComponentName(finishedWork.type),276 );277 }278 }279 instance.__reactInternalSnapshotBeforeUpdate = snapshot;280 }281 }282 return;283 }284 case HostRoot:285 case HostComponent:286 case HostText:287 case HostPortal:288 case IncompleteClassComponent:289 // Nothing to do for these component types290 return;291 }292 invariant(293 false,294 'This unit of work tag should not have side-effects. This error is ' +295 'likely caused by a bug in React. Please file an issue.',296 );297}298function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {299 const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);300 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;301 if (lastEffect !== null) {302 const firstEffect = lastEffect.next;303 let effect = firstEffect;304 do {305 if ((effect.tag & tag) === tag) {306 // Unmount307 const destroy = effect.destroy;308 effect.destroy = undefined;309 if (destroy !== undefined) {310 destroy();311 }312 }313 effect = effect.next;314 } while (effect !== firstEffect);315 }316}317function commitHookEffectListMount(tag: number, finishedWork: Fiber) {318 const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);319 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;320 if (lastEffect !== null) {321 const firstEffect = lastEffect.next;322 let effect = firstEffect;323 do {324 if ((effect.tag & tag) === tag) {325 // Mount326 const create = effect.create;327 effect.destroy = create();328 if (__DEV__) {329 const destroy = effect.destroy;330 if (destroy !== undefined && typeof destroy !== 'function') {331 let addendum;332 if (destroy === null) {333 addendum =334 ' You returned null. If your effect does not require clean ' +335 'up, return undefined (or nothing).';336 } else if (typeof destroy.then === 'function') {337 addendum =338 '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +339 'Instead, write the async function inside your effect ' +340 'and call it immediately:\n\n' +341 'useEffect(() => {\n' +342 ' async function fetchData() {\n' +343 ' // You can await here\n' +344 ' const response = await MyAPI.getData(someId);\n' +345 ' // ...\n' +346 ' }\n' +347 ' fetchData();\n' +348 `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +349 'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching';350 } else {351 addendum = ' You returned: ' + destroy;352 }353 console.error(354 'An effect function must not return anything besides a function, ' +355 'which is used for clean-up.%s%s',356 addendum,357 getStackByFiberInDevAndProd(finishedWork),358 );359 }360 }361 }362 effect = effect.next;363 } while (effect !== firstEffect);364 }365}366function schedulePassiveEffects(finishedWork: Fiber) {367 if (runAllPassiveEffectDestroysBeforeCreates) {368 const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);369 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;370 if (lastEffect !== null) {371 const firstEffect = lastEffect.next;372 let effect = firstEffect;373 do {374 const {next, tag} = effect;375 if (376 (tag & HookPassive) !== NoHookEffect &&377 (tag & HookHasEffect) !== NoHookEffect378 ) {379 enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);380 enqueuePendingPassiveHookEffectMount(finishedWork, effect);381 }382 effect = next;383 } while (effect !== firstEffect);384 }385 }386}387export function commitPassiveHookEffects(finishedWork: Fiber): void {388 if ((finishedWork.effectTag & Passive) !== NoEffect) {389 switch (finishedWork.tag) {390 case FunctionComponent:391 case ForwardRef:392 case SimpleMemoComponent:393 case Block: {394 // TODO (#17945) We should call all passive destroy functions (for all fibers)395 // before calling any create functions. The current approach only serializes396 // these for a single fiber.397 if (398 enableProfilerTimer &&399 enableProfilerCommitHooks &&400 finishedWork.mode & ProfileMode401 ) {402 try {403 startPassiveEffectTimer();404 commitHookEffectListUnmount(405 HookPassive | HookHasEffect,406 finishedWork,407 );408 commitHookEffectListMount(409 HookPassive | HookHasEffect,410 finishedWork,411 );412 } finally {413 recordPassiveEffectDuration(finishedWork);414 }415 } else {416 commitHookEffectListUnmount(417 HookPassive | HookHasEffect,418 finishedWork,419 );420 commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);421 }422 break;423 }424 default:425 break;426 }427 }428}429export function commitPassiveEffectDurations(430 finishedRoot: FiberRoot,431 finishedWork: Fiber,432): void {433 if (enableProfilerTimer && enableProfilerCommitHooks) {434 // Only Profilers with work in their subtree will have an Update effect scheduled.435 if ((finishedWork.effectTag & Update) !== NoEffect) {436 switch (finishedWork.tag) {437 case Profiler: {438 const {passiveEffectDuration} = finishedWork.stateNode;439 const {id, onPostCommit} = finishedWork.memoizedProps;440 // This value will still reflect the previous commit phase.441 // It does not get reset until the start of the next commit phase.442 const commitTime = getCommitTime();443 if (typeof onPostCommit === 'function') {444 if (enableSchedulerTracing) {445 onPostCommit(446 id,447 finishedWork.alternate === null ? 'mount' : 'update',448 passiveEffectDuration,449 commitTime,450 finishedRoot.memoizedInteractions,451 );452 } else {453 onPostCommit(454 id,455 finishedWork.alternate === null ? 'mount' : 'update',456 passiveEffectDuration,457 commitTime,458 );459 }460 }461 // Bubble times to the next nearest ancestor Profiler.462 // After we process that Profiler, we'll bubble further up.463 let parentFiber = finishedWork.return;464 while (parentFiber !== null) {465 if (parentFiber.tag === Profiler) {466 const parentStateNode = parentFiber.stateNode;467 parentStateNode.passiveEffectDuration += passiveEffectDuration;468 break;469 }470 parentFiber = parentFiber.return;471 }472 break;473 }474 default:475 break;476 }477 }478 }479}480function commitLifeCycles(481 finishedRoot: FiberRoot,482 current: Fiber | null,483 finishedWork: Fiber,484 committedExpirationTime: ExpirationTime,485): void {486 switch (finishedWork.tag) {487 case FunctionComponent:488 case ForwardRef:489 case SimpleMemoComponent:490 case Block: {491 // At this point layout effects have already been destroyed (during mutation phase).492 // This is done to prevent sibling component effects from interfering with each other,493 // e.g. a destroy function in one component should never override a ref set494 // by a create function in another component during the same commit.495 if (496 enableProfilerTimer &&497 enableProfilerCommitHooks &&498 finishedWork.mode & ProfileMode499 ) {500 try {501 startLayoutEffectTimer();502 commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);503 } finally {504 recordLayoutEffectDuration(finishedWork);505 }506 } else {507 commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);508 }509 if (runAllPassiveEffectDestroysBeforeCreates) {510 schedulePassiveEffects(finishedWork);511 }512 return;513 }514 case ClassComponent: {515 const instance = finishedWork.stateNode;516 if (finishedWork.effectTag & Update) {517 if (current === null) {518 // We could update instance props and state here,519 // but instead we rely on them being set during last render.520 // TODO: revisit this when we implement resuming.521 if (__DEV__) {522 if (523 finishedWork.type === finishedWork.elementType &&524 !didWarnAboutReassigningProps525 ) {526 if (instance.props !== finishedWork.memoizedProps) {527 console.error(528 'Expected %s props to match memoized props before ' +529 'componentDidMount. ' +530 'This might either be because of a bug in React, or because ' +531 'a component reassigns its own `this.props`. ' +532 'Please file an issue.',533 getComponentName(finishedWork.type) || 'instance',534 );535 }536 if (instance.state !== finishedWork.memoizedState) {537 console.error(538 'Expected %s state to match memoized state before ' +539 'componentDidMount. ' +540 'This might either be because of a bug in React, or because ' +541 'a component reassigns its own `this.state`. ' +542 'Please file an issue.',543 getComponentName(finishedWork.type) || 'instance',544 );545 }546 }547 }548 if (549 enableProfilerTimer &&550 enableProfilerCommitHooks &&551 finishedWork.mode & ProfileMode552 ) {553 try {554 startLayoutEffectTimer();555 instance.componentDidMount();556 } finally {557 recordLayoutEffectDuration(finishedWork);558 }559 } else {560 instance.componentDidMount();561 }562 } else {563 const prevProps =564 finishedWork.elementType === finishedWork.type565 ? current.memoizedProps566 : resolveDefaultProps(finishedWork.type, current.memoizedProps);567 const prevState = current.memoizedState;568 // We could update instance props and state here,569 // but instead we rely on them being set during last render.570 // TODO: revisit this when we implement resuming.571 if (__DEV__) {572 if (573 finishedWork.type === finishedWork.elementType &&574 !didWarnAboutReassigningProps575 ) {576 if (instance.props !== finishedWork.memoizedProps) {577 console.error(578 'Expected %s props to match memoized props before ' +579 'componentDidUpdate. ' +580 'This might either be because of a bug in React, or because ' +581 'a component reassigns its own `this.props`. ' +582 'Please file an issue.',583 getComponentName(finishedWork.type) || 'instance',584 );585 }586 if (instance.state !== finishedWork.memoizedState) {587 console.error(588 'Expected %s state to match memoized state before ' +589 'componentDidUpdate. ' +590 'This might either be because of a bug in React, or because ' +591 'a component reassigns its own `this.state`. ' +592 'Please file an issue.',593 getComponentName(finishedWork.type) || 'instance',594 );595 }596 }597 }598 if (599 enableProfilerTimer &&600 enableProfilerCommitHooks &&601 finishedWork.mode & ProfileMode602 ) {603 try {604 startLayoutEffectTimer();605 instance.componentDidUpdate(606 prevProps,607 prevState,608 instance.__reactInternalSnapshotBeforeUpdate,609 );610 } finally {611 recordLayoutEffectDuration(finishedWork);612 }613 } else {614 instance.componentDidUpdate(615 prevProps,616 prevState,617 instance.__reactInternalSnapshotBeforeUpdate,618 );619 }620 }621 }622 const updateQueue = finishedWork.updateQueue;623 if (updateQueue !== null) {624 if (__DEV__) {625 if (626 finishedWork.type === finishedWork.elementType &&627 !didWarnAboutReassigningProps628 ) {629 if (instance.props !== finishedWork.memoizedProps) {630 console.error(631 'Expected %s props to match memoized props before ' +632 'processing the update queue. ' +633 'This might either be because of a bug in React, or because ' +634 'a component reassigns its own `this.props`. ' +635 'Please file an issue.',636 getComponentName(finishedWork.type) || 'instance',637 );638 }639 if (instance.state !== finishedWork.memoizedState) {640 console.error(641 'Expected %s state to match memoized state before ' +642 'processing the update queue. ' +643 'This might either be because of a bug in React, or because ' +644 'a component reassigns its own `this.state`. ' +645 'Please file an issue.',646 getComponentName(finishedWork.type) || 'instance',647 );648 }649 }650 }651 // We could update instance props and state here,652 // but instead we rely on them being set during last render.653 // TODO: revisit this when we implement resuming.654 commitUpdateQueue(finishedWork, updateQueue, instance);655 }656 return;657 }658 case HostRoot: {659 const updateQueue = finishedWork.updateQueue;660 if (updateQueue !== null) {661 let instance = null;662 if (finishedWork.child !== null) {663 switch (finishedWork.child.tag) {664 case HostComponent:665 instance = getPublicInstance(finishedWork.child.stateNode);666 break;667 case ClassComponent:668 instance = finishedWork.child.stateNode;669 break;670 }671 }672 commitUpdateQueue(finishedWork, updateQueue, instance);673 }674 return;675 }676 case HostComponent: {677 const instance: Instance = finishedWork.stateNode;678 // Renderers may schedule work to be done after host components are mounted679 // (eg DOM renderer may schedule auto-focus for inputs and form controls).680 // These effects should only be committed when components are first mounted,681 // aka when there is no current/alternate.682 if (current === null && finishedWork.effectTag & Update) {683 const type = finishedWork.type;684 const props = finishedWork.memoizedProps;685 commitMount(instance, type, props, finishedWork);686 }687 return;688 }689 case HostText: {690 // We have no life-cycles associated with text.691 return;692 }693 case HostPortal: {694 // We have no life-cycles associated with portals.695 return;696 }697 case Profiler: {698 if (enableProfilerTimer) {699 const {onCommit, onRender} = finishedWork.memoizedProps;700 const {effectDuration} = finishedWork.stateNode;701 const commitTime = getCommitTime();702 if (typeof onRender === 'function') {703 if (enableSchedulerTracing) {704 onRender(705 finishedWork.memoizedProps.id,706 current === null ? 'mount' : 'update',707 finishedWork.actualDuration,708 finishedWork.treeBaseDuration,709 finishedWork.actualStartTime,710 commitTime,711 finishedRoot.memoizedInteractions,712 );713 } else {714 onRender(715 finishedWork.memoizedProps.id,716 current === null ? 'mount' : 'update',717 finishedWork.actualDuration,718 finishedWork.treeBaseDuration,719 finishedWork.actualStartTime,720 commitTime,721 );722 }723 }724 if (enableProfilerCommitHooks) {725 if (typeof onCommit === 'function') {726 if (enableSchedulerTracing) {727 onCommit(728 finishedWork.memoizedProps.id,729 current === null ? 'mount' : 'update',730 effectDuration,731 commitTime,732 finishedRoot.memoizedInteractions,733 );734 } else {735 onCommit(736 finishedWork.memoizedProps.id,737 current === null ? 'mount' : 'update',738 effectDuration,739 commitTime,740 );741 }742 }743 // Schedule a passive effect for this Profiler to call onPostCommit hooks.744 // This effect should be scheduled even if there is no onPostCommit callback for this Profiler,745 // because the effect is also where times bubble to parent Profilers.746 enqueuePendingPassiveProfilerEffect(finishedWork);747 // Propagate layout effect durations to the next nearest Profiler ancestor.748 // Do not reset these values until the next render so DevTools has a chance to read them first.749 let parentFiber = finishedWork.return;750 while (parentFiber !== null) {751 if (parentFiber.tag === Profiler) {752 const parentStateNode = parentFiber.stateNode;753 parentStateNode.effectDuration += effectDuration;754 break;755 }756 parentFiber = parentFiber.return;757 }758 }759 }760 return;761 }762 case SuspenseComponent: {763 commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);764 return;765 }766 case SuspenseListComponent:767 case IncompleteClassComponent:768 case FundamentalComponent:769 case ScopeComponent:770 return;771 }772 invariant(773 false,774 'This unit of work tag should not have side-effects. This error is ' +775 'likely caused by a bug in React. Please file an issue.',776 );777}778function hideOrUnhideAllChildren(finishedWork, isHidden) {779 if (supportsMutation) {780 // We only have the top Fiber that was inserted but we need to recurse down its781 // children to find all the terminal nodes.782 let node: Fiber = finishedWork;783 while (true) {784 if (node.tag === HostComponent) {785 const instance = node.stateNode;786 if (isHidden) {787 hideInstance(instance);788 } else {789 unhideInstance(node.stateNode, node.memoizedProps);790 }791 } else if (node.tag === HostText) {792 const instance = node.stateNode;793 if (isHidden) {794 hideTextInstance(instance);795 } else {796 unhideTextInstance(instance, node.memoizedProps);797 }798 } else if (799 node.tag === SuspenseComponent &&800 node.memoizedState !== null &&801 node.memoizedState.dehydrated === null802 ) {803 // Found a nested Suspense component that timed out. Skip over the804 // primary child fragment, which should remain hidden.805 const fallbackChildFragment: Fiber = (node.child: any).sibling;806 fallbackChildFragment.return = node;807 node = fallbackChildFragment;808 continue;809 } else if (node.child !== null) {810 node.child.return = node;811 node = node.child;812 continue;813 }814 if (node === finishedWork) {815 return;816 }817 while (node.sibling === null) {818 if (node.return === null || node.return === finishedWork) {819 return;820 }821 node = node.return;822 }823 node.sibling.return = node.return;824 node = node.sibling;825 }826 }827}828function commitAttachRef(finishedWork: Fiber) {829 const ref = finishedWork.ref;830 if (ref !== null) {831 const instance = finishedWork.stateNode;832 let instanceToUse;833 switch (finishedWork.tag) {834 case HostComponent:835 instanceToUse = getPublicInstance(instance);836 break;837 default:838 instanceToUse = instance;839 }840 // Moved outside to ensure DCE works with this flag841 if (enableScopeAPI && finishedWork.tag === ScopeComponent) {842 instanceToUse = instance.methods;843 }844 if (typeof ref === 'function') {845 ref(instanceToUse);846 } else {847 if (__DEV__) {848 if (!ref.hasOwnProperty('current')) {849 console.error(850 'Unexpected ref object provided for %s. ' +851 'Use either a ref-setter function or React.createRef().%s',852 getComponentName(finishedWork.type),853 getStackByFiberInDevAndProd(finishedWork),854 );855 }856 }857 ref.current = instanceToUse;858 }859 }860}861function commitDetachRef(current: Fiber) {862 const currentRef = current.ref;863 if (currentRef !== null) {864 if (typeof currentRef === 'function') {865 currentRef(null);866 } else {867 currentRef.current = null;868 }869 }870}871// User-originating errors (lifecycles and refs) should not interrupt872// deletion, so don't let them throw. Host-originating errors should873// interrupt deletion, so it's okay874function commitUnmount(875 finishedRoot: FiberRoot,876 current: Fiber,877 renderPriorityLevel: ReactPriorityLevel,878): void {879 onCommitUnmount(current);880 switch (current.tag) {881 case FunctionComponent:882 case ForwardRef:883 case MemoComponent:884 case SimpleMemoComponent:885 case Block: {886 const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);887 if (updateQueue !== null) {888 const lastEffect = updateQueue.lastEffect;889 if (lastEffect !== null) {890 const firstEffect = lastEffect.next;891 if (892 deferPassiveEffectCleanupDuringUnmount &&893 runAllPassiveEffectDestroysBeforeCreates894 ) {895 let effect = firstEffect;896 do {897 const {destroy, tag} = effect;898 if (destroy !== undefined) {899 if ((tag & HookPassive) !== NoHookEffect) {900 enqueuePendingPassiveHookEffectUnmount(current, effect);901 } else {902 if (903 enableProfilerTimer &&904 enableProfilerCommitHooks &&905 current.mode & ProfileMode906 ) {907 startLayoutEffectTimer();908 safelyCallDestroy(current, destroy);909 recordLayoutEffectDuration(current);910 } else {911 safelyCallDestroy(current, destroy);912 }913 }914 }915 effect = effect.next;916 } while (effect !== firstEffect);917 } else {918 // When the owner fiber is deleted, the destroy function of a passive919 // effect hook is called during the synchronous commit phase. This is920 // a concession to implementation complexity. Calling it in the921 // passive effect phase (like they usually are, when dependencies922 // change during an update) would require either traversing the923 // children of the deleted fiber again, or including unmount effects924 // as part of the fiber effect list.925 //926 // Because this is during the sync commit phase, we need to change927 // the priority.928 //929 // TODO: Reconsider this implementation trade off.930 const priorityLevel =931 renderPriorityLevel > NormalPriority932 ? NormalPriority933 : renderPriorityLevel;934 runWithPriority(priorityLevel, () => {935 let effect = firstEffect;936 do {937 const {destroy, tag} = effect;938 if (destroy !== undefined) {939 if (940 enableProfilerTimer &&941 enableProfilerCommitHooks &&942 current.mode & ProfileMode943 ) {944 if ((tag & HookPassive) !== NoHookEffect) {945 safelyCallDestroy(current, destroy);946 } else {947 startLayoutEffectTimer();948 safelyCallDestroy(current, destroy);949 recordLayoutEffectDuration(current);950 }951 } else {952 safelyCallDestroy(current, destroy);953 }954 }955 effect = effect.next;956 } while (effect !== firstEffect);957 });958 }959 }960 }961 return;962 }963 case ClassComponent: {964 safelyDetachRef(current);965 const instance = current.stateNode;966 if (typeof instance.componentWillUnmount === 'function') {967 safelyCallComponentWillUnmount(current, instance);968 }969 return;970 }971 case HostComponent: {972 if (enableDeprecatedFlareAPI) {973 unmountDeprecatedResponderListeners(current);974 }975 if (enableDeprecatedFlareAPI || enableUseEventAPI) {976 beforeRemoveInstance(current.stateNode);977 }978 safelyDetachRef(current);979 return;980 }981 case HostPortal: {982 // TODO: this is recursive.983 // We are also not using this parent because984 // the portal will get pushed immediately.985 if (supportsMutation) {986 unmountHostComponents(finishedRoot, current, renderPriorityLevel);987 } else if (supportsPersistence) {988 emptyPortalContainer(current);989 }990 return;991 }992 case FundamentalComponent: {993 if (enableFundamentalAPI) {994 const fundamentalInstance = current.stateNode;995 if (fundamentalInstance !== null) {996 unmountFundamentalComponent(fundamentalInstance);997 current.stateNode = null;998 }999 }1000 return;1001 }1002 case DehydratedFragment: {1003 if (enableSuspenseCallback) {1004 const hydrationCallbacks = finishedRoot.hydrationCallbacks;1005 if (hydrationCallbacks !== null) {1006 const onDeleted = hydrationCallbacks.onDeleted;1007 if (onDeleted) {1008 onDeleted((current.stateNode: SuspenseInstance));1009 }1010 }1011 }1012 return;1013 }1014 case ScopeComponent: {1015 if (enableDeprecatedFlareAPI) {1016 unmountDeprecatedResponderListeners(current);1017 }1018 if (enableScopeAPI) {1019 safelyDetachRef(current);1020 }1021 return;1022 }1023 }1024}1025function commitNestedUnmounts(1026 finishedRoot: FiberRoot,1027 root: Fiber,1028 renderPriorityLevel: ReactPriorityLevel,1029): void {1030 // While we're inside a removed host node we don't want to call1031 // removeChild on the inner nodes because they're removed by the top1032 // call anyway. We also want to call componentWillUnmount on all1033 // composites before this host node is removed from the tree. Therefore1034 // we do an inner loop while we're still inside the host node.1035 let node: Fiber = root;1036 while (true) {1037 commitUnmount(finishedRoot, node, renderPriorityLevel);1038 // Visit children because they may contain more composite or host nodes.1039 // Skip portals because commitUnmount() currently visits them recursively.1040 if (1041 node.child !== null &&1042 // If we use mutation we drill down into portals using commitUnmount above.1043 // If we don't use mutation we drill down into portals here instead.1044 (!supportsMutation || node.tag !== HostPortal)1045 ) {1046 node.child.return = node;1047 node = node.child;1048 continue;1049 }1050 if (node === root) {1051 return;1052 }1053 while (node.sibling === null) {1054 if (node.return === null || node.return === root) {1055 return;1056 }1057 node = node.return;1058 }1059 node.sibling.return = node.return;1060 node = node.sibling;1061 }1062}1063function detachFiber(current: Fiber) {1064 const alternate = current.alternate;1065 // Cut off the return pointers to disconnect it from the tree. Ideally, we1066 // should clear the child pointer of the parent alternate to let this1067 // get GC:ed but we don't know which for sure which parent is the current1068 // one so we'll settle for GC:ing the subtree of this child. This child1069 // itself will be GC:ed when the parent updates the next time.1070 current.return = null;1071 current.child = null;1072 current.memoizedState = null;1073 current.updateQueue = null;1074 current.dependencies = null;1075 current.alternate = null;1076 current.firstEffect = null;1077 current.lastEffect = null;1078 current.pendingProps = null;1079 current.memoizedProps = null;1080 current.stateNode = null;1081 if (alternate !== null) {1082 detachFiber(alternate);1083 }1084}1085function emptyPortalContainer(current: Fiber) {1086 if (!supportsPersistence) {1087 return;1088 }1089 const portal: {1090 containerInfo: Container,1091 pendingChildren: ChildSet,1092 ...1093 } = current.stateNode;1094 const {containerInfo} = portal;1095 const emptyChildSet = createContainerChildSet(containerInfo);1096 replaceContainerChildren(containerInfo, emptyChildSet);1097}1098function commitContainer(finishedWork: Fiber) {1099 if (!supportsPersistence) {1100 return;1101 }1102 switch (finishedWork.tag) {1103 case ClassComponent:1104 case HostComponent:1105 case HostText:1106 case FundamentalComponent: {1107 return;1108 }1109 case HostRoot:1110 case HostPortal: {1111 const portalOrRoot: {1112 containerInfo: Container,1113 pendingChildren: ChildSet,1114 ...1115 } = finishedWork.stateNode;1116 const {containerInfo, pendingChildren} = portalOrRoot;1117 replaceContainerChildren(containerInfo, pendingChildren);1118 return;1119 }1120 }1121 invariant(1122 false,1123 'This unit of work tag should not have side-effects. This error is ' +1124 'likely caused by a bug in React. Please file an issue.',1125 );1126}1127function getHostParentFiber(fiber: Fiber): Fiber {1128 let parent = fiber.return;1129 while (parent !== null) {1130 if (isHostParent(parent)) {1131 return parent;1132 }1133 parent = parent.return;1134 }1135 invariant(1136 false,1137 'Expected to find a host parent. This error is likely caused by a bug ' +1138 'in React. Please file an issue.',1139 );1140}1141function isHostParent(fiber: Fiber): boolean {1142 return (1143 fiber.tag === HostComponent ||1144 fiber.tag === HostRoot ||1145 fiber.tag === HostPortal1146 );1147}1148function getHostSibling(fiber: Fiber): ?Instance {1149 // We're going to search forward into the tree until we find a sibling host1150 // node. Unfortunately, if multiple insertions are done in a row we have to1151 // search past them. This leads to exponential search for the next sibling.1152 // TODO: Find a more efficient way to do this.1153 let node: Fiber = fiber;1154 siblings: while (true) {1155 // If we didn't find anything, let's try the next sibling.1156 while (node.sibling === null) {1157 if (node.return === null || isHostParent(node.return)) {1158 // If we pop out of the root or hit the parent the fiber we are the1159 // last sibling.1160 return null;1161 }1162 node = node.return;1163 }1164 node.sibling.return = node.return;1165 node = node.sibling;1166 while (1167 node.tag !== HostComponent &&1168 node.tag !== HostText &&1169 node.tag !== DehydratedFragment1170 ) {1171 // If it is not host node and, we might have a host node inside it.1172 // Try to search down until we find one.1173 if (node.effectTag & Placement) {1174 // If we don't have a child, try the siblings instead.1175 continue siblings;1176 }1177 // If we don't have a child, try the siblings instead.1178 // We also skip portals because they are not part of this host tree.1179 if (node.child === null || node.tag === HostPortal) {1180 continue siblings;1181 } else {1182 node.child.return = node;1183 node = node.child;1184 }1185 }1186 // Check if this host node is stable or about to be placed.1187 if (!(node.effectTag & Placement)) {1188 // Found it!1189 return node.stateNode;1190 }1191 }1192}1193function commitPlacement(finishedWork: Fiber): void {1194 if (!supportsMutation) {1195 return;1196 }1197 // Recursively insert all host nodes into the parent.1198 const parentFiber = getHostParentFiber(finishedWork);1199 // Note: these two variables *must* always be updated together.1200 let parent;1201 let isContainer;1202 const parentStateNode = parentFiber.stateNode;1203 switch (parentFiber.tag) {1204 case HostComponent:1205 parent = parentStateNode;1206 isContainer = false;1207 break;1208 case HostRoot:1209 parent = parentStateNode.containerInfo;1210 isContainer = true;1211 break;1212 case HostPortal:1213 parent = parentStateNode.containerInfo;1214 isContainer = true;1215 break;1216 case FundamentalComponent:1217 if (enableFundamentalAPI) {1218 parent = parentStateNode.instance;1219 isContainer = false;1220 }1221 // eslint-disable-next-line-no-fallthrough1222 default:1223 invariant(1224 false,1225 'Invalid host parent fiber. This error is likely caused by a bug ' +1226 'in React. Please file an issue.',1227 );1228 }1229 if (parentFiber.effectTag & ContentReset) {1230 // Reset the text content of the parent before doing any insertions1231 resetTextContent(parent);1232 // Clear ContentReset from the effect tag1233 parentFiber.effectTag &= ~ContentReset;1234 }1235 const before = getHostSibling(finishedWork);1236 // We only have the top Fiber that was inserted but we need to recurse down its1237 // children to find all the terminal nodes.1238 if (isContainer) {1239 insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);1240 } else {1241 insertOrAppendPlacementNode(finishedWork, before, parent);1242 }1243}1244function insertOrAppendPlacementNodeIntoContainer(1245 node: Fiber,1246 before: ?Instance,1247 parent: Container,1248): void {1249 const {tag} = node;1250 const isHost = tag === HostComponent || tag === HostText;1251 if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {1252 const stateNode = isHost ? node.stateNode : node.stateNode.instance;1253 if (before) {1254 insertInContainerBefore(parent, stateNode, before);1255 } else {1256 appendChildToContainer(parent, stateNode);1257 }1258 } else if (tag === HostPortal) {1259 // If the insertion itself is a portal, then we don't want to traverse1260 // down its children. Instead, we'll get insertions from each child in1261 // the portal directly.1262 } else {1263 const child = node.child;1264 if (child !== null) {1265 insertOrAppendPlacementNodeIntoContainer(child, before, parent);1266 let sibling = child.sibling;1267 while (sibling !== null) {1268 insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);1269 sibling = sibling.sibling;1270 }1271 }1272 }1273}1274function insertOrAppendPlacementNode(1275 node: Fiber,1276 before: ?Instance,1277 parent: Instance,1278): void {1279 const {tag} = node;1280 const isHost = tag === HostComponent || tag === HostText;1281 if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {1282 const stateNode = isHost ? node.stateNode : node.stateNode.instance;1283 if (before) {1284 insertBefore(parent, stateNode, before);1285 } else {1286 appendChild(parent, stateNode);1287 }1288 } else if (tag === HostPortal) {1289 // If the insertion itself is a portal, then we don't want to traverse1290 // down its children. Instead, we'll get insertions from each child in1291 // the portal directly.1292 } else {1293 const child = node.child;1294 if (child !== null) {1295 insertOrAppendPlacementNode(child, before, parent);1296 let sibling = child.sibling;1297 while (sibling !== null) {1298 insertOrAppendPlacementNode(sibling, before, parent);1299 sibling = sibling.sibling;1300 }1301 }1302 }1303}1304function unmountHostComponents(1305 finishedRoot,1306 current,1307 renderPriorityLevel,1308): void {1309 // We only have the top Fiber that was deleted but we need to recurse down its1310 // children to find all the terminal nodes.1311 let node: Fiber = current;1312 // Each iteration, currentParent is populated with node's host parent if not1313 // currentParentIsValid.1314 let currentParentIsValid = false;1315 // Note: these two variables *must* always be updated together.1316 let currentParent;1317 let currentParentIsContainer;1318 while (true) {1319 if (!currentParentIsValid) {1320 let parent = node.return;1321 findParent: while (true) {1322 invariant(1323 parent !== null,1324 'Expected to find a host parent. This error is likely caused by ' +1325 'a bug in React. Please file an issue.',1326 );1327 const parentStateNode = parent.stateNode;1328 switch (parent.tag) {1329 case HostComponent:1330 currentParent = parentStateNode;1331 currentParentIsContainer = false;1332 break findParent;1333 case HostRoot:1334 currentParent = parentStateNode.containerInfo;1335 currentParentIsContainer = true;1336 break findParent;1337 case HostPortal:1338 currentParent = parentStateNode.containerInfo;1339 currentParentIsContainer = true;1340 break findParent;1341 case FundamentalComponent:1342 if (enableFundamentalAPI) {1343 currentParent = parentStateNode.instance;1344 currentParentIsContainer = false;1345 }1346 }1347 parent = parent.return;1348 }1349 currentParentIsValid = true;1350 }1351 if (node.tag === HostComponent || node.tag === HostText) {1352 commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);1353 // After all the children have unmounted, it is now safe to remove the1354 // node from the tree.1355 if (currentParentIsContainer) {1356 removeChildFromContainer(1357 ((currentParent: any): Container),1358 (node.stateNode: Instance | TextInstance),1359 );1360 } else {1361 removeChild(1362 ((currentParent: any): Instance),1363 (node.stateNode: Instance | TextInstance),1364 );1365 }1366 // Don't visit children because we already visited them.1367 } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {1368 const fundamentalNode = node.stateNode.instance;1369 commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);1370 // After all the children have unmounted, it is now safe to remove the1371 // node from the tree.1372 if (currentParentIsContainer) {1373 removeChildFromContainer(1374 ((currentParent: any): Container),1375 (fundamentalNode: Instance),1376 );1377 } else {1378 removeChild(1379 ((currentParent: any): Instance),1380 (fundamentalNode: Instance),1381 );1382 }1383 } else if (1384 enableSuspenseServerRenderer &&1385 node.tag === DehydratedFragment1386 ) {1387 if (enableSuspenseCallback) {1388 const hydrationCallbacks = finishedRoot.hydrationCallbacks;1389 if (hydrationCallbacks !== null) {1390 const onDeleted = hydrationCallbacks.onDeleted;1391 if (onDeleted) {1392 onDeleted((node.stateNode: SuspenseInstance));1393 }1394 }1395 }1396 // Delete the dehydrated suspense boundary and all of its content.1397 if (currentParentIsContainer) {1398 clearSuspenseBoundaryFromContainer(1399 ((currentParent: any): Container),1400 (node.stateNode: SuspenseInstance),1401 );1402 } else {1403 clearSuspenseBoundary(1404 ((currentParent: any): Instance),1405 (node.stateNode: SuspenseInstance),1406 );1407 }1408 } else if (node.tag === HostPortal) {1409 if (node.child !== null) {1410 // When we go into a portal, it becomes the parent to remove from.1411 // We will reassign it back when we pop the portal on the way up.1412 currentParent = node.stateNode.containerInfo;1413 currentParentIsContainer = true;1414 // Visit children because portals might contain host components.1415 node.child.return = node;1416 node = node.child;1417 continue;1418 }1419 } else {1420 commitUnmount(finishedRoot, node, renderPriorityLevel);1421 // Visit children because we may find more host components below.1422 if (node.child !== null) {1423 node.child.return = node;1424 node = node.child;1425 continue;1426 }1427 }1428 if (node === current) {1429 return;1430 }1431 while (node.sibling === null) {1432 if (node.return === null || node.return === current) {1433 return;1434 }1435 node = node.return;1436 if (node.tag === HostPortal) {1437 // When we go out of the portal, we need to restore the parent.1438 // Since we don't keep a stack of them, we will search for it.1439 currentParentIsValid = false;1440 }1441 }1442 node.sibling.return = node.return;1443 node = node.sibling;1444 }1445}1446function commitDeletion(1447 finishedRoot: FiberRoot,1448 current: Fiber,1449 renderPriorityLevel: ReactPriorityLevel,1450): void {1451 if (supportsMutation) {1452 // Recursively delete all host nodes from the parent.1453 // Detach refs and call componentWillUnmount() on the whole subtree.1454 unmountHostComponents(finishedRoot, current, renderPriorityLevel);1455 } else {1456 // Detach refs and call componentWillUnmount() on the whole subtree.1457 commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);1458 }1459 detachFiber(current);1460}1461function commitWork(current: Fiber | null, finishedWork: Fiber): void {1462 if (!supportsMutation) {1463 switch (finishedWork.tag) {1464 case FunctionComponent:1465 case ForwardRef:1466 case MemoComponent:1467 case SimpleMemoComponent:1468 case Block: {1469 // Layout effects are destroyed during the mutation phase so that all1470 // destroy functions for all fibers are called before any create functions.1471 // This prevents sibling component effects from interfering with each other,1472 // e.g. a destroy function in one component should never override a ref set1473 // by a create function in another component during the same commit.1474 if (1475 enableProfilerTimer &&1476 enableProfilerCommitHooks &&1477 finishedWork.mode & ProfileMode1478 ) {1479 try {1480 startLayoutEffectTimer();1481 commitHookEffectListUnmount(1482 HookLayout | HookHasEffect,1483 finishedWork,1484 );1485 } finally {1486 recordLayoutEffectDuration(finishedWork);1487 }1488 } else {1489 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1490 }1491 return;1492 }1493 case Profiler: {1494 return;1495 }1496 case SuspenseComponent: {1497 commitSuspenseComponent(finishedWork);1498 attachSuspenseRetryListeners(finishedWork);1499 return;1500 }1501 case SuspenseListComponent: {1502 attachSuspenseRetryListeners(finishedWork);1503 return;1504 }1505 case HostRoot: {1506 if (supportsHydration) {1507 const root: FiberRoot = finishedWork.stateNode;1508 if (root.hydrate) {1509 // We've just hydrated. No need to hydrate again.1510 root.hydrate = false;1511 commitHydratedContainer(root.containerInfo);1512 }1513 }1514 break;1515 }1516 }1517 commitContainer(finishedWork);1518 return;1519 }1520 switch (finishedWork.tag) {1521 case FunctionComponent:1522 case ForwardRef:1523 case MemoComponent:1524 case SimpleMemoComponent:1525 case Block: {1526 // Layout effects are destroyed during the mutation phase so that all1527 // destroy functions for all fibers are called before any create functions.1528 // This prevents sibling component effects from interfering with each other,1529 // e.g. a destroy function in one component should never override a ref set1530 // by a create function in another component during the same commit.1531 if (1532 enableProfilerTimer &&1533 enableProfilerCommitHooks &&1534 finishedWork.mode & ProfileMode1535 ) {1536 try {1537 startLayoutEffectTimer();1538 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1539 } finally {1540 recordLayoutEffectDuration(finishedWork);1541 }1542 } else {1543 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1544 }1545 return;1546 }1547 case ClassComponent: {1548 return;1549 }1550 case HostComponent: {1551 const instance: Instance = finishedWork.stateNode;1552 if (instance != null) {1553 // Commit the work prepared earlier.1554 const newProps = finishedWork.memoizedProps;1555 // For hydration we reuse the update path but we treat the oldProps1556 // as the newProps. The updatePayload will contain the real change in1557 // this case.1558 const oldProps = current !== null ? current.memoizedProps : newProps;1559 const type = finishedWork.type;1560 // TODO: Type the updateQueue to be specific to host components.1561 const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);1562 finishedWork.updateQueue = null;1563 if (updatePayload !== null) {1564 commitUpdate(1565 instance,1566 updatePayload,1567 type,1568 oldProps,1569 newProps,1570 finishedWork,1571 );1572 }1573 if (enableDeprecatedFlareAPI) {1574 const prevListeners = oldProps.DEPRECATED_flareListeners;1575 const nextListeners = newProps.DEPRECATED_flareListeners;1576 if (prevListeners !== nextListeners) {1577 updateDeprecatedEventListeners(nextListeners, finishedWork, null);1578 }1579 }1580 }1581 return;1582 }1583 case HostText: {1584 invariant(1585 finishedWork.stateNode !== null,1586 'This should have a text node initialized. This error is likely ' +1587 'caused by a bug in React. Please file an issue.',1588 );1589 const textInstance: TextInstance = finishedWork.stateNode;1590 const newText: string = finishedWork.memoizedProps;1591 // For hydration we reuse the update path but we treat the oldProps1592 // as the newProps. The updatePayload will contain the real change in1593 // this case.1594 const oldText: string =1595 current !== null ? current.memoizedProps : newText;1596 commitTextUpdate(textInstance, oldText, newText);1597 return;1598 }1599 case HostRoot: {1600 if (supportsHydration) {1601 const root: FiberRoot = finishedWork.stateNode;1602 if (root.hydrate) {1603 // We've just hydrated. No need to hydrate again.1604 root.hydrate = false;1605 commitHydratedContainer(root.containerInfo);1606 }1607 }1608 return;1609 }1610 case Profiler: {1611 return;1612 }1613 case SuspenseComponent: {1614 commitSuspenseComponent(finishedWork);1615 attachSuspenseRetryListeners(finishedWork);1616 return;1617 }1618 case SuspenseListComponent: {1619 attachSuspenseRetryListeners(finishedWork);1620 return;1621 }1622 case IncompleteClassComponent: {1623 return;1624 }1625 case FundamentalComponent: {1626 if (enableFundamentalAPI) {1627 const fundamentalInstance = finishedWork.stateNode;1628 updateFundamentalComponent(fundamentalInstance);1629 return;1630 }1631 break;1632 }1633 case ScopeComponent: {1634 if (enableScopeAPI) {1635 const scopeInstance = finishedWork.stateNode;1636 scopeInstance.fiber = finishedWork;1637 if (enableDeprecatedFlareAPI) {1638 const newProps = finishedWork.memoizedProps;1639 const oldProps = current !== null ? current.memoizedProps : newProps;1640 const prevListeners = oldProps.DEPRECATED_flareListeners;1641 const nextListeners = newProps.DEPRECATED_flareListeners;1642 if (prevListeners !== nextListeners || current === null) {1643 updateDeprecatedEventListeners(nextListeners, finishedWork, null);1644 }1645 }1646 return;1647 }1648 break;1649 }1650 }1651 invariant(1652 false,1653 'This unit of work tag should not have side-effects. This error is ' +1654 'likely caused by a bug in React. Please file an issue.',1655 );1656}1657function commitSuspenseComponent(finishedWork: Fiber) {1658 const newState: SuspenseState | null = finishedWork.memoizedState;1659 let newDidTimeout;1660 let primaryChildParent = finishedWork;1661 if (newState === null) {1662 newDidTimeout = false;1663 } else {1664 newDidTimeout = true;1665 primaryChildParent = finishedWork.child;1666 markCommitTimeOfFallback();1667 }1668 if (supportsMutation && primaryChildParent !== null) {1669 hideOrUnhideAllChildren(primaryChildParent, newDidTimeout);1670 }1671 if (enableSuspenseCallback && newState !== null) {1672 const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;1673 if (typeof suspenseCallback === 'function') {1674 const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);1675 if (wakeables !== null) {1676 suspenseCallback(new Set(wakeables));1677 }1678 } else if (__DEV__) {1679 if (suspenseCallback !== undefined) {1680 console.error('Unexpected type for suspenseCallback.');1681 }1682 }1683 }1684}1685function commitSuspenseHydrationCallbacks(1686 finishedRoot: FiberRoot,1687 finishedWork: Fiber,1688) {1689 if (!supportsHydration) {1690 return;1691 }1692 const newState: SuspenseState | null = finishedWork.memoizedState;1693 if (newState === null) {1694 const current = finishedWork.alternate;1695 if (current !== null) {1696 const prevState: SuspenseState | null = current.memoizedState;1697 if (prevState !== null) {1698 const suspenseInstance = prevState.dehydrated;1699 if (suspenseInstance !== null) {1700 commitHydratedSuspenseInstance(suspenseInstance);1701 if (enableSuspenseCallback) {1702 const hydrationCallbacks = finishedRoot.hydrationCallbacks;1703 if (hydrationCallbacks !== null) {1704 const onHydrated = hydrationCallbacks.onHydrated;1705 if (onHydrated) {1706 onHydrated(suspenseInstance);1707 }1708 }1709 }1710 }1711 }1712 }1713 }1714}1715function attachSuspenseRetryListeners(finishedWork: Fiber) {1716 // If this boundary just timed out, then it will have a set of wakeables.1717 // For each wakeable, attach a listener so that when it resolves, React1718 // attempts to re-render the boundary in the primary (pre-timeout) state.1719 const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);1720 if (wakeables !== null) {1721 finishedWork.updateQueue = null;1722 let retryCache = finishedWork.stateNode;1723 if (retryCache === null) {1724 retryCache = finishedWork.stateNode = new PossiblyWeakSet();1725 }1726 wakeables.forEach(wakeable => {1727 // Memoize using the boundary fiber to prevent redundant listeners.1728 let retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);1729 if (!retryCache.has(wakeable)) {1730 if (enableSchedulerTracing) {1731 if (wakeable.__reactDoNotTraceInteractions !== true) {1732 retry = Schedule_tracing_wrap(retry);1733 }1734 }1735 retryCache.add(wakeable);1736 wakeable.then(retry, retry);1737 }1738 });1739 }1740}1741function commitResetTextContent(current: Fiber) {1742 if (!supportsMutation) {1743 return;1744 }1745 resetTextContent(current.stateNode);1746}1747export {1748 commitBeforeMutationLifeCycles,1749 commitResetTextContent,1750 commitPlacement,1751 commitDeletion,1752 commitWork,1753 commitLifeCycles,1754 commitAttachRef,1755 commitDetachRef,...
ReactFiberCommitWork.new.js
Source:ReactFiberCommitWork.new.js
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @flow8 */9import type {10 Instance,11 TextInstance,12 SuspenseInstance,13 Container,14 ChildSet,15 UpdatePayload,16} from './ReactFiberHostConfig';17import type {Fiber} from './ReactInternalTypes';18import type {FiberRoot} from './ReactInternalTypes';19import type {Lanes} from './ReactFiberLane.new';20import type {SuspenseState} from './ReactFiberSuspenseComponent.new';21import type {UpdateQueue} from './ReactUpdateQueue.new';22import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';23import type {Wakeable} from 'shared/ReactTypes';24import type {ReactPriorityLevel} from './ReactInternalTypes';25import type {OffscreenState} from './ReactFiberOffscreenComponent';26import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';27import {28 enableSchedulerTracing,29 enableProfilerTimer,30 enableProfilerCommitHooks,31 enableProfilerNestedUpdatePhase,32 enableSuspenseServerRenderer,33 enableFundamentalAPI,34 enableSuspenseCallback,35 enableScopeAPI,36} from 'shared/ReactFeatureFlags';37import {38 FunctionComponent,39 ForwardRef,40 ClassComponent,41 HostRoot,42 HostComponent,43 HostText,44 HostPortal,45 Profiler,46 SuspenseComponent,47 DehydratedFragment,48 IncompleteClassComponent,49 MemoComponent,50 SimpleMemoComponent,51 SuspenseListComponent,52 FundamentalComponent,53 ScopeComponent,54 OffscreenComponent,55 LegacyHiddenComponent,56} from './ReactWorkTags';57import {58 invokeGuardedCallback,59 hasCaughtError,60 clearCaughtError,61} from 'shared/ReactErrorUtils';62import {63 NoFlags,64 ContentReset,65 Placement,66 Snapshot,67 Update,68} from './ReactFiberFlags';69import getComponentName from 'shared/getComponentName';70import invariant from 'shared/invariant';71import {onCommitUnmount} from './ReactFiberDevToolsHook.new';72import {resolveDefaultProps} from './ReactFiberLazyComponent.new';73import {74 isCurrentUpdateNested,75 getCommitTime,76 recordLayoutEffectDuration,77 startLayoutEffectTimer,78} from './ReactProfilerTimer.new';79import {ProfileMode} from './ReactTypeOfMode';80import {commitUpdateQueue} from './ReactUpdateQueue.new';81import {82 getPublicInstance,83 supportsMutation,84 supportsPersistence,85 supportsHydration,86 commitMount,87 commitUpdate,88 resetTextContent,89 commitTextUpdate,90 appendChild,91 appendChildToContainer,92 insertBefore,93 insertInContainerBefore,94 removeChild,95 removeChildFromContainer,96 clearSuspenseBoundary,97 clearSuspenseBoundaryFromContainer,98 replaceContainerChildren,99 createContainerChildSet,100 hideInstance,101 hideTextInstance,102 unhideInstance,103 unhideTextInstance,104 unmountFundamentalComponent,105 updateFundamentalComponent,106 commitHydratedContainer,107 commitHydratedSuspenseInstance,108 clearContainer,109 prepareScopeUpdate,110} from './ReactFiberHostConfig';111import {112 captureCommitPhaseError,113 resolveRetryWakeable,114 markCommitTimeOfFallback,115 enqueuePendingPassiveHookEffectMount,116 enqueuePendingPassiveHookEffectUnmount,117 enqueuePendingPassiveProfilerEffect,118} from './ReactFiberWorkLoop.new';119import {120 NoFlags as NoHookEffect,121 HasEffect as HookHasEffect,122 Layout as HookLayout,123 Passive as HookPassive,124} from './ReactHookEffectTags';125import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';126let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;127if (__DEV__) {128 didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();129}130const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;131const callComponentWillUnmountWithTimer = function(current, instance) {132 instance.props = current.memoizedProps;133 instance.state = current.memoizedState;134 if (135 enableProfilerTimer &&136 enableProfilerCommitHooks &&137 current.mode & ProfileMode138 ) {139 try {140 startLayoutEffectTimer();141 instance.componentWillUnmount();142 } finally {143 recordLayoutEffectDuration(current);144 }145 } else {146 instance.componentWillUnmount();147 }148};149// Capture errors so they don't interrupt unmounting.150function safelyCallComponentWillUnmount(current: Fiber, instance: any) {151 if (__DEV__) {152 invokeGuardedCallback(153 null,154 callComponentWillUnmountWithTimer,155 null,156 current,157 instance,158 );159 if (hasCaughtError()) {160 const unmountError = clearCaughtError();161 captureCommitPhaseError(current, unmountError);162 }163 } else {164 try {165 callComponentWillUnmountWithTimer(current, instance);166 } catch (unmountError) {167 captureCommitPhaseError(current, unmountError);168 }169 }170}171function safelyDetachRef(current: Fiber) {172 const ref = current.ref;173 if (ref !== null) {174 if (typeof ref === 'function') {175 if (__DEV__) {176 if (177 enableProfilerTimer &&178 enableProfilerCommitHooks &&179 current.mode & ProfileMode180 ) {181 startLayoutEffectTimer();182 invokeGuardedCallback(null, ref, null, null);183 recordLayoutEffectDuration(current);184 } else {185 invokeGuardedCallback(null, ref, null, null);186 }187 if (hasCaughtError()) {188 const refError = clearCaughtError();189 captureCommitPhaseError(current, refError);190 }191 } else {192 try {193 if (194 enableProfilerTimer &&195 enableProfilerCommitHooks &&196 current.mode & ProfileMode197 ) {198 try {199 startLayoutEffectTimer();200 ref(null);201 } finally {202 recordLayoutEffectDuration(current);203 }204 } else {205 ref(null);206 }207 } catch (refError) {208 captureCommitPhaseError(current, refError);209 }210 }211 } else {212 ref.current = null;213 }214 }215}216function safelyCallDestroy(current: Fiber, destroy: () => void) {217 if (__DEV__) {218 invokeGuardedCallback(null, destroy, null);219 if (hasCaughtError()) {220 const error = clearCaughtError();221 captureCommitPhaseError(current, error);222 }223 } else {224 try {225 destroy();226 } catch (error) {227 captureCommitPhaseError(current, error);228 }229 }230}231function commitBeforeMutationLifeCycles(232 current: Fiber | null,233 finishedWork: Fiber,234): void {235 switch (finishedWork.tag) {236 case FunctionComponent:237 case ForwardRef:238 case SimpleMemoComponent: {239 return;240 }241 case ClassComponent: {242 if (finishedWork.flags & Snapshot) {243 if (current !== null) {244 const prevProps = current.memoizedProps;245 const prevState = current.memoizedState;246 const instance = finishedWork.stateNode;247 // We could update instance props and state here,248 // but instead we rely on them being set during last render.249 // TODO: revisit this when we implement resuming.250 if (__DEV__) {251 if (252 finishedWork.type === finishedWork.elementType &&253 !didWarnAboutReassigningProps254 ) {255 if (instance.props !== finishedWork.memoizedProps) {256 console.error(257 'Expected %s props to match memoized props before ' +258 'getSnapshotBeforeUpdate. ' +259 'This might either be because of a bug in React, or because ' +260 'a component reassigns its own `this.props`. ' +261 'Please file an issue.',262 getComponentName(finishedWork.type) || 'instance',263 );264 }265 if (instance.state !== finishedWork.memoizedState) {266 console.error(267 'Expected %s state to match memoized state before ' +268 'getSnapshotBeforeUpdate. ' +269 'This might either be because of a bug in React, or because ' +270 'a component reassigns its own `this.state`. ' +271 'Please file an issue.',272 getComponentName(finishedWork.type) || 'instance',273 );274 }275 }276 }277 const snapshot = instance.getSnapshotBeforeUpdate(278 finishedWork.elementType === finishedWork.type279 ? prevProps280 : resolveDefaultProps(finishedWork.type, prevProps),281 prevState,282 );283 if (__DEV__) {284 const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);285 if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {286 didWarnSet.add(finishedWork.type);287 console.error(288 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +289 'must be returned. You have returned undefined.',290 getComponentName(finishedWork.type),291 );292 }293 }294 instance.__reactInternalSnapshotBeforeUpdate = snapshot;295 }296 }297 return;298 }299 case HostRoot: {300 if (supportsMutation) {301 if (finishedWork.flags & Snapshot) {302 const root = finishedWork.stateNode;303 clearContainer(root.containerInfo);304 }305 }306 return;307 }308 case HostComponent:309 case HostText:310 case HostPortal:311 case IncompleteClassComponent:312 // Nothing to do for these component types313 return;314 }315 invariant(316 false,317 'This unit of work tag should not have side-effects. This error is ' +318 'likely caused by a bug in React. Please file an issue.',319 );320}321function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {322 const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);323 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;324 if (lastEffect !== null) {325 const firstEffect = lastEffect.next;326 let effect = firstEffect;327 do {328 if ((effect.tag & tag) === tag) {329 // Unmount330 const destroy = effect.destroy;331 effect.destroy = undefined;332 if (destroy !== undefined) {333 destroy();334 }335 }336 effect = effect.next;337 } while (effect !== firstEffect);338 }339}340function commitHookEffectListMount(tag: number, finishedWork: Fiber) {341 const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);342 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;343 if (lastEffect !== null) {344 const firstEffect = lastEffect.next;345 let effect = firstEffect;346 do {347 if ((effect.tag & tag) === tag) {348 // Mount349 const create = effect.create;350 effect.destroy = create();351 if (__DEV__) {352 const destroy = effect.destroy;353 if (destroy !== undefined && typeof destroy !== 'function') {354 let addendum;355 if (destroy === null) {356 addendum =357 ' You returned null. If your effect does not require clean ' +358 'up, return undefined (or nothing).';359 } else if (typeof destroy.then === 'function') {360 addendum =361 '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +362 'Instead, write the async function inside your effect ' +363 'and call it immediately:\n\n' +364 'useEffect(() => {\n' +365 ' async function fetchData() {\n' +366 ' // You can await here\n' +367 ' const response = await MyAPI.getData(someId);\n' +368 ' // ...\n' +369 ' }\n' +370 ' fetchData();\n' +371 `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +372 'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching';373 } else {374 addendum = ' You returned: ' + destroy;375 }376 console.error(377 'An effect function must not return anything besides a function, ' +378 'which is used for clean-up.%s',379 addendum,380 );381 }382 }383 }384 effect = effect.next;385 } while (effect !== firstEffect);386 }387}388function schedulePassiveEffects(finishedWork: Fiber) {389 const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);390 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;391 if (lastEffect !== null) {392 const firstEffect = lastEffect.next;393 let effect = firstEffect;394 do {395 const {next, tag} = effect;396 if (397 (tag & HookPassive) !== NoHookEffect &&398 (tag & HookHasEffect) !== NoHookEffect399 ) {400 enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);401 enqueuePendingPassiveHookEffectMount(finishedWork, effect);402 }403 effect = next;404 } while (effect !== firstEffect);405 }406}407export function commitPassiveEffectDurations(408 finishedRoot: FiberRoot,409 finishedWork: Fiber,410): void {411 if (enableProfilerTimer && enableProfilerCommitHooks) {412 // Only Profilers with work in their subtree will have an Update effect scheduled.413 if ((finishedWork.flags & Update) !== NoFlags) {414 switch (finishedWork.tag) {415 case Profiler: {416 const {passiveEffectDuration} = finishedWork.stateNode;417 const {id, onPostCommit} = finishedWork.memoizedProps;418 // This value will still reflect the previous commit phase.419 // It does not get reset until the start of the next commit phase.420 const commitTime = getCommitTime();421 let phase = finishedWork.alternate === null ? 'mount' : 'update';422 if (enableProfilerNestedUpdatePhase) {423 if (isCurrentUpdateNested()) {424 phase = 'nested-update';425 }426 }427 if (typeof onPostCommit === 'function') {428 if (enableSchedulerTracing) {429 onPostCommit(430 id,431 phase,432 passiveEffectDuration,433 commitTime,434 finishedRoot.memoizedInteractions,435 );436 } else {437 onPostCommit(id, phase, passiveEffectDuration, commitTime);438 }439 }440 // Bubble times to the next nearest ancestor Profiler.441 // After we process that Profiler, we'll bubble further up.442 let parentFiber = finishedWork.return;443 while (parentFiber !== null) {444 if (parentFiber.tag === Profiler) {445 const parentStateNode = parentFiber.stateNode;446 parentStateNode.passiveEffectDuration += passiveEffectDuration;447 break;448 }449 parentFiber = parentFiber.return;450 }451 break;452 }453 default:454 break;455 }456 }457 }458}459function commitLifeCycles(460 finishedRoot: FiberRoot,461 current: Fiber | null,462 finishedWork: Fiber,463 committedLanes: Lanes,464): void {465 switch (finishedWork.tag) {466 case FunctionComponent:467 case ForwardRef:468 case SimpleMemoComponent: {469 // At this point layout effects have already been destroyed (during mutation phase).470 // This is done to prevent sibling component effects from interfering with each other,471 // e.g. a destroy function in one component should never override a ref set472 // by a create function in another component during the same commit.473 if (474 enableProfilerTimer &&475 enableProfilerCommitHooks &&476 finishedWork.mode & ProfileMode477 ) {478 try {479 startLayoutEffectTimer();480 commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);481 } finally {482 recordLayoutEffectDuration(finishedWork);483 }484 } else {485 commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);486 }487 schedulePassiveEffects(finishedWork);488 return;489 }490 case ClassComponent: {491 const instance = finishedWork.stateNode;492 if (finishedWork.flags & Update) {493 if (current === null) {494 // We could update instance props and state here,495 // but instead we rely on them being set during last render.496 // TODO: revisit this when we implement resuming.497 if (__DEV__) {498 if (499 finishedWork.type === finishedWork.elementType &&500 !didWarnAboutReassigningProps501 ) {502 if (instance.props !== finishedWork.memoizedProps) {503 console.error(504 'Expected %s props to match memoized props before ' +505 'componentDidMount. ' +506 'This might either be because of a bug in React, or because ' +507 'a component reassigns its own `this.props`. ' +508 'Please file an issue.',509 getComponentName(finishedWork.type) || 'instance',510 );511 }512 if (instance.state !== finishedWork.memoizedState) {513 console.error(514 'Expected %s state to match memoized state before ' +515 'componentDidMount. ' +516 'This might either be because of a bug in React, or because ' +517 'a component reassigns its own `this.state`. ' +518 'Please file an issue.',519 getComponentName(finishedWork.type) || 'instance',520 );521 }522 }523 }524 if (525 enableProfilerTimer &&526 enableProfilerCommitHooks &&527 finishedWork.mode & ProfileMode528 ) {529 try {530 startLayoutEffectTimer();531 instance.componentDidMount();532 } finally {533 recordLayoutEffectDuration(finishedWork);534 }535 } else {536 instance.componentDidMount();537 }538 } else {539 const prevProps =540 finishedWork.elementType === finishedWork.type541 ? current.memoizedProps542 : resolveDefaultProps(finishedWork.type, current.memoizedProps);543 const prevState = current.memoizedState;544 // We could update instance props and state here,545 // but instead we rely on them being set during last render.546 // TODO: revisit this when we implement resuming.547 if (__DEV__) {548 if (549 finishedWork.type === finishedWork.elementType &&550 !didWarnAboutReassigningProps551 ) {552 if (instance.props !== finishedWork.memoizedProps) {553 console.error(554 'Expected %s props to match memoized props before ' +555 'componentDidUpdate. ' +556 'This might either be because of a bug in React, or because ' +557 'a component reassigns its own `this.props`. ' +558 'Please file an issue.',559 getComponentName(finishedWork.type) || 'instance',560 );561 }562 if (instance.state !== finishedWork.memoizedState) {563 console.error(564 'Expected %s state to match memoized state before ' +565 'componentDidUpdate. ' +566 'This might either be because of a bug in React, or because ' +567 'a component reassigns its own `this.state`. ' +568 'Please file an issue.',569 getComponentName(finishedWork.type) || 'instance',570 );571 }572 }573 }574 if (575 enableProfilerTimer &&576 enableProfilerCommitHooks &&577 finishedWork.mode & ProfileMode578 ) {579 try {580 startLayoutEffectTimer();581 instance.componentDidUpdate(582 prevProps,583 prevState,584 instance.__reactInternalSnapshotBeforeUpdate,585 );586 } finally {587 recordLayoutEffectDuration(finishedWork);588 }589 } else {590 instance.componentDidUpdate(591 prevProps,592 prevState,593 instance.__reactInternalSnapshotBeforeUpdate,594 );595 }596 }597 }598 // TODO: I think this is now always non-null by the time it reaches the599 // commit phase. Consider removing the type check.600 const updateQueue: UpdateQueue<601 *,602 > | null = (finishedWork.updateQueue: any);603 if (updateQueue !== null) {604 if (__DEV__) {605 if (606 finishedWork.type === finishedWork.elementType &&607 !didWarnAboutReassigningProps608 ) {609 if (instance.props !== finishedWork.memoizedProps) {610 console.error(611 'Expected %s props to match memoized props before ' +612 'processing the update queue. ' +613 'This might either be because of a bug in React, or because ' +614 'a component reassigns its own `this.props`. ' +615 'Please file an issue.',616 getComponentName(finishedWork.type) || 'instance',617 );618 }619 if (instance.state !== finishedWork.memoizedState) {620 console.error(621 'Expected %s state to match memoized state before ' +622 'processing the update queue. ' +623 'This might either be because of a bug in React, or because ' +624 'a component reassigns its own `this.state`. ' +625 'Please file an issue.',626 getComponentName(finishedWork.type) || 'instance',627 );628 }629 }630 }631 // We could update instance props and state here,632 // but instead we rely on them being set during last render.633 // TODO: revisit this when we implement resuming.634 commitUpdateQueue(finishedWork, updateQueue, instance);635 }636 return;637 }638 case HostRoot: {639 // TODO: I think this is now always non-null by the time it reaches the640 // commit phase. Consider removing the type check.641 const updateQueue: UpdateQueue<642 *,643 > | null = (finishedWork.updateQueue: any);644 if (updateQueue !== null) {645 let instance = null;646 if (finishedWork.child !== null) {647 switch (finishedWork.child.tag) {648 case HostComponent:649 instance = getPublicInstance(finishedWork.child.stateNode);650 break;651 case ClassComponent:652 instance = finishedWork.child.stateNode;653 break;654 }655 }656 commitUpdateQueue(finishedWork, updateQueue, instance);657 }658 return;659 }660 case HostComponent: {661 const instance: Instance = finishedWork.stateNode;662 // Renderers may schedule work to be done after host components are mounted663 // (eg DOM renderer may schedule auto-focus for inputs and form controls).664 // These effects should only be committed when components are first mounted,665 // aka when there is no current/alternate.666 if (current === null && finishedWork.flags & Update) {667 const type = finishedWork.type;668 const props = finishedWork.memoizedProps;669 commitMount(instance, type, props, finishedWork);670 }671 return;672 }673 case HostText: {674 // We have no life-cycles associated with text.675 return;676 }677 case HostPortal: {678 // We have no life-cycles associated with portals.679 return;680 }681 case Profiler: {682 if (enableProfilerTimer) {683 const {onCommit, onRender} = finishedWork.memoizedProps;684 const {effectDuration} = finishedWork.stateNode;685 const commitTime = getCommitTime();686 let phase = current === null ? 'mount' : 'update';687 if (enableProfilerNestedUpdatePhase) {688 if (isCurrentUpdateNested()) {689 phase = 'nested-update';690 }691 }692 if (typeof onRender === 'function') {693 if (enableSchedulerTracing) {694 onRender(695 finishedWork.memoizedProps.id,696 phase,697 finishedWork.actualDuration,698 finishedWork.treeBaseDuration,699 finishedWork.actualStartTime,700 commitTime,701 finishedRoot.memoizedInteractions,702 );703 } else {704 onRender(705 finishedWork.memoizedProps.id,706 phase,707 finishedWork.actualDuration,708 finishedWork.treeBaseDuration,709 finishedWork.actualStartTime,710 commitTime,711 );712 }713 }714 if (enableProfilerCommitHooks) {715 if (typeof onCommit === 'function') {716 if (enableSchedulerTracing) {717 onCommit(718 finishedWork.memoizedProps.id,719 phase,720 effectDuration,721 commitTime,722 finishedRoot.memoizedInteractions,723 );724 } else {725 onCommit(726 finishedWork.memoizedProps.id,727 phase,728 effectDuration,729 commitTime,730 );731 }732 }733 // Schedule a passive effect for this Profiler to call onPostCommit hooks.734 // This effect should be scheduled even if there is no onPostCommit callback for this Profiler,735 // because the effect is also where times bubble to parent Profilers.736 enqueuePendingPassiveProfilerEffect(finishedWork);737 // Propagate layout effect durations to the next nearest Profiler ancestor.738 // Do not reset these values until the next render so DevTools has a chance to read them first.739 let parentFiber = finishedWork.return;740 while (parentFiber !== null) {741 if (parentFiber.tag === Profiler) {742 const parentStateNode = parentFiber.stateNode;743 parentStateNode.effectDuration += effectDuration;744 break;745 }746 parentFiber = parentFiber.return;747 }748 }749 }750 return;751 }752 case SuspenseComponent: {753 commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);754 return;755 }756 case SuspenseListComponent:757 case IncompleteClassComponent:758 case FundamentalComponent:759 case ScopeComponent:760 case OffscreenComponent:761 case LegacyHiddenComponent:762 return;763 }764 invariant(765 false,766 'This unit of work tag should not have side-effects. This error is ' +767 'likely caused by a bug in React. Please file an issue.',768 );769}770function hideOrUnhideAllChildren(finishedWork, isHidden) {771 if (supportsMutation) {772 // We only have the top Fiber that was inserted but we need to recurse down its773 // children to find all the terminal nodes.774 let node: Fiber = finishedWork;775 while (true) {776 if (node.tag === HostComponent) {777 const instance = node.stateNode;778 if (isHidden) {779 hideInstance(instance);780 } else {781 unhideInstance(node.stateNode, node.memoizedProps);782 }783 } else if (node.tag === HostText) {784 const instance = node.stateNode;785 if (isHidden) {786 hideTextInstance(instance);787 } else {788 unhideTextInstance(instance, node.memoizedProps);789 }790 } else if (791 (node.tag === OffscreenComponent ||792 node.tag === LegacyHiddenComponent) &&793 (node.memoizedState: OffscreenState) !== null &&794 node !== finishedWork795 ) {796 // Found a nested Offscreen component that is hidden. Don't search797 // any deeper. This tree should remain hidden.798 } else if (node.child !== null) {799 node.child.return = node;800 node = node.child;801 continue;802 }803 if (node === finishedWork) {804 return;805 }806 while (node.sibling === null) {807 if (node.return === null || node.return === finishedWork) {808 return;809 }810 node = node.return;811 }812 node.sibling.return = node.return;813 node = node.sibling;814 }815 }816}817function commitAttachRef(finishedWork: Fiber) {818 const ref = finishedWork.ref;819 if (ref !== null) {820 const instance = finishedWork.stateNode;821 let instanceToUse;822 switch (finishedWork.tag) {823 case HostComponent:824 instanceToUse = getPublicInstance(instance);825 break;826 default:827 instanceToUse = instance;828 }829 // Moved outside to ensure DCE works with this flag830 if (enableScopeAPI && finishedWork.tag === ScopeComponent) {831 instanceToUse = instance;832 }833 if (typeof ref === 'function') {834 if (835 enableProfilerTimer &&836 enableProfilerCommitHooks &&837 finishedWork.mode & ProfileMode838 ) {839 try {840 startLayoutEffectTimer();841 ref(instanceToUse);842 } finally {843 recordLayoutEffectDuration(finishedWork);844 }845 } else {846 ref(instanceToUse);847 }848 } else {849 if (__DEV__) {850 if (!ref.hasOwnProperty('current')) {851 console.error(852 'Unexpected ref object provided for %s. ' +853 'Use either a ref-setter function or React.createRef().',854 getComponentName(finishedWork.type),855 );856 }857 }858 ref.current = instanceToUse;859 }860 }861}862function commitDetachRef(current: Fiber) {863 const currentRef = current.ref;864 if (currentRef !== null) {865 if (typeof currentRef === 'function') {866 if (867 enableProfilerTimer &&868 enableProfilerCommitHooks &&869 current.mode & ProfileMode870 ) {871 try {872 startLayoutEffectTimer();873 currentRef(null);874 } finally {875 recordLayoutEffectDuration(current);876 }877 } else {878 currentRef(null);879 }880 } else {881 currentRef.current = null;882 }883 }884}885// User-originating errors (lifecycles and refs) should not interrupt886// deletion, so don't let them throw. Host-originating errors should887// interrupt deletion, so it's okay888function commitUnmount(889 finishedRoot: FiberRoot,890 current: Fiber,891 renderPriorityLevel: ReactPriorityLevel,892): void {893 onCommitUnmount(current);894 switch (current.tag) {895 case FunctionComponent:896 case ForwardRef:897 case MemoComponent:898 case SimpleMemoComponent: {899 const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);900 if (updateQueue !== null) {901 const lastEffect = updateQueue.lastEffect;902 if (lastEffect !== null) {903 const firstEffect = lastEffect.next;904 let effect = firstEffect;905 do {906 const {destroy, tag} = effect;907 if (destroy !== undefined) {908 if ((tag & HookPassive) !== NoHookEffect) {909 enqueuePendingPassiveHookEffectUnmount(current, effect);910 } else {911 if (912 enableProfilerTimer &&913 enableProfilerCommitHooks &&914 current.mode & ProfileMode915 ) {916 startLayoutEffectTimer();917 safelyCallDestroy(current, destroy);918 recordLayoutEffectDuration(current);919 } else {920 safelyCallDestroy(current, destroy);921 }922 }923 }924 effect = effect.next;925 } while (effect !== firstEffect);926 }927 }928 return;929 }930 case ClassComponent: {931 safelyDetachRef(current);932 const instance = current.stateNode;933 if (typeof instance.componentWillUnmount === 'function') {934 safelyCallComponentWillUnmount(current, instance);935 }936 return;937 }938 case HostComponent: {939 safelyDetachRef(current);940 return;941 }942 case HostPortal: {943 // TODO: this is recursive.944 // We are also not using this parent because945 // the portal will get pushed immediately.946 if (supportsMutation) {947 unmountHostComponents(finishedRoot, current, renderPriorityLevel);948 } else if (supportsPersistence) {949 emptyPortalContainer(current);950 }951 return;952 }953 case FundamentalComponent: {954 if (enableFundamentalAPI) {955 const fundamentalInstance = current.stateNode;956 if (fundamentalInstance !== null) {957 unmountFundamentalComponent(fundamentalInstance);958 current.stateNode = null;959 }960 }961 return;962 }963 case DehydratedFragment: {964 if (enableSuspenseCallback) {965 const hydrationCallbacks = finishedRoot.hydrationCallbacks;966 if (hydrationCallbacks !== null) {967 const onDeleted = hydrationCallbacks.onDeleted;968 if (onDeleted) {969 onDeleted((current.stateNode: SuspenseInstance));970 }971 }972 }973 return;974 }975 case ScopeComponent: {976 if (enableScopeAPI) {977 safelyDetachRef(current);978 }979 return;980 }981 }982}983function commitNestedUnmounts(984 finishedRoot: FiberRoot,985 root: Fiber,986 renderPriorityLevel: ReactPriorityLevel,987): void {988 // While we're inside a removed host node we don't want to call989 // removeChild on the inner nodes because they're removed by the top990 // call anyway. We also want to call componentWillUnmount on all991 // composites before this host node is removed from the tree. Therefore992 // we do an inner loop while we're still inside the host node.993 let node: Fiber = root;994 while (true) {995 commitUnmount(finishedRoot, node, renderPriorityLevel);996 // Visit children because they may contain more composite or host nodes.997 // Skip portals because commitUnmount() currently visits them recursively.998 if (999 node.child !== null &&1000 // If we use mutation we drill down into portals using commitUnmount above.1001 // If we don't use mutation we drill down into portals here instead.1002 (!supportsMutation || node.tag !== HostPortal)1003 ) {1004 node.child.return = node;1005 node = node.child;1006 continue;1007 }1008 if (node === root) {1009 return;1010 }1011 while (node.sibling === null) {1012 if (node.return === null || node.return === root) {1013 return;1014 }1015 node = node.return;1016 }1017 node.sibling.return = node.return;1018 node = node.sibling;1019 }1020}1021function detachFiberMutation(fiber: Fiber) {1022 // Cut off the return pointers to disconnect it from the tree. Ideally, we1023 // should clear the child pointer of the parent alternate to let this1024 // get GC:ed but we don't know which for sure which parent is the current1025 // one so we'll settle for GC:ing the subtree of this child. This child1026 // itself will be GC:ed when the parent updates the next time.1027 // Note: we cannot null out sibling here, otherwise it can cause issues1028 // with findDOMNode and how it requires the sibling field to carry out1029 // traversal in a later effect. See PR #16820. We now clear the sibling1030 // field after effects, see: detachFiberAfterEffects.1031 //1032 // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.1033 // It may be required if the current component is an error boundary,1034 // and one of its descendants throws while unmounting a passive effect.1035 fiber.alternate = null;1036 fiber.child = null;1037 fiber.dependencies = null;1038 fiber.firstEffect = null;1039 fiber.lastEffect = null;1040 fiber.memoizedProps = null;1041 fiber.memoizedState = null;1042 fiber.pendingProps = null;1043 fiber.return = null;1044 fiber.updateQueue = null;1045 if (__DEV__) {1046 fiber._debugOwner = null;1047 }1048}1049function emptyPortalContainer(current: Fiber) {1050 if (!supportsPersistence) {1051 return;1052 }1053 const portal: {1054 containerInfo: Container,1055 pendingChildren: ChildSet,1056 ...1057 } = current.stateNode;1058 const {containerInfo} = portal;1059 const emptyChildSet = createContainerChildSet(containerInfo);1060 replaceContainerChildren(containerInfo, emptyChildSet);1061}1062function commitContainer(finishedWork: Fiber) {1063 if (!supportsPersistence) {1064 return;1065 }1066 switch (finishedWork.tag) {1067 case ClassComponent:1068 case HostComponent:1069 case HostText:1070 case FundamentalComponent: {1071 return;1072 }1073 case HostRoot:1074 case HostPortal: {1075 const portalOrRoot: {1076 containerInfo: Container,1077 pendingChildren: ChildSet,1078 ...1079 } = finishedWork.stateNode;1080 const {containerInfo, pendingChildren} = portalOrRoot;1081 replaceContainerChildren(containerInfo, pendingChildren);1082 return;1083 }1084 }1085 invariant(1086 false,1087 'This unit of work tag should not have side-effects. This error is ' +1088 'likely caused by a bug in React. Please file an issue.',1089 );1090}1091function getHostParentFiber(fiber: Fiber): Fiber {1092 let parent = fiber.return;1093 while (parent !== null) {1094 if (isHostParent(parent)) {1095 return parent;1096 }1097 parent = parent.return;1098 }1099 invariant(1100 false,1101 'Expected to find a host parent. This error is likely caused by a bug ' +1102 'in React. Please file an issue.',1103 );1104}1105function isHostParent(fiber: Fiber): boolean {1106 return (1107 fiber.tag === HostComponent ||1108 fiber.tag === HostRoot ||1109 fiber.tag === HostPortal1110 );1111}1112function getHostSibling(fiber: Fiber): ?Instance {1113 // We're going to search forward into the tree until we find a sibling host1114 // node. Unfortunately, if multiple insertions are done in a row we have to1115 // search past them. This leads to exponential search for the next sibling.1116 // TODO: Find a more efficient way to do this.1117 let node: Fiber = fiber;1118 siblings: while (true) {1119 // If we didn't find anything, let's try the next sibling.1120 while (node.sibling === null) {1121 if (node.return === null || isHostParent(node.return)) {1122 // If we pop out of the root or hit the parent the fiber we are the1123 // last sibling.1124 return null;1125 }1126 node = node.return;1127 }1128 node.sibling.return = node.return;1129 node = node.sibling;1130 while (1131 node.tag !== HostComponent &&1132 node.tag !== HostText &&1133 node.tag !== DehydratedFragment1134 ) {1135 // If it is not host node and, we might have a host node inside it.1136 // Try to search down until we find one.1137 if (node.flags & Placement) {1138 // If we don't have a child, try the siblings instead.1139 continue siblings;1140 }1141 // If we don't have a child, try the siblings instead.1142 // We also skip portals because they are not part of this host tree.1143 if (node.child === null || node.tag === HostPortal) {1144 continue siblings;1145 } else {1146 node.child.return = node;1147 node = node.child;1148 }1149 }1150 // Check if this host node is stable or about to be placed.1151 if (!(node.flags & Placement)) {1152 // Found it!1153 return node.stateNode;1154 }1155 }1156}1157function commitPlacement(finishedWork: Fiber): void {1158 if (!supportsMutation) {1159 return;1160 }1161 // Recursively insert all host nodes into the parent.1162 const parentFiber = getHostParentFiber(finishedWork);1163 // Note: these two variables *must* always be updated together.1164 let parent;1165 let isContainer;1166 const parentStateNode = parentFiber.stateNode;1167 switch (parentFiber.tag) {1168 case HostComponent:1169 parent = parentStateNode;1170 isContainer = false;1171 break;1172 case HostRoot:1173 parent = parentStateNode.containerInfo;1174 isContainer = true;1175 break;1176 case HostPortal:1177 parent = parentStateNode.containerInfo;1178 isContainer = true;1179 break;1180 case FundamentalComponent:1181 if (enableFundamentalAPI) {1182 parent = parentStateNode.instance;1183 isContainer = false;1184 }1185 // eslint-disable-next-line-no-fallthrough1186 default:1187 invariant(1188 false,1189 'Invalid host parent fiber. This error is likely caused by a bug ' +1190 'in React. Please file an issue.',1191 );1192 }1193 if (parentFiber.flags & ContentReset) {1194 // Reset the text content of the parent before doing any insertions1195 resetTextContent(parent);1196 // Clear ContentReset from the effect tag1197 parentFiber.flags &= ~ContentReset;1198 }1199 const before = getHostSibling(finishedWork);1200 // We only have the top Fiber that was inserted but we need to recurse down its1201 // children to find all the terminal nodes.1202 if (isContainer) {1203 insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);1204 } else {1205 insertOrAppendPlacementNode(finishedWork, before, parent);1206 }1207}1208function insertOrAppendPlacementNodeIntoContainer(1209 node: Fiber,1210 before: ?Instance,1211 parent: Container,1212): void {1213 const {tag} = node;1214 const isHost = tag === HostComponent || tag === HostText;1215 if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {1216 const stateNode = isHost ? node.stateNode : node.stateNode.instance;1217 if (before) {1218 insertInContainerBefore(parent, stateNode, before);1219 } else {1220 appendChildToContainer(parent, stateNode);1221 }1222 } else if (tag === HostPortal) {1223 // If the insertion itself is a portal, then we don't want to traverse1224 // down its children. Instead, we'll get insertions from each child in1225 // the portal directly.1226 } else {1227 const child = node.child;1228 if (child !== null) {1229 insertOrAppendPlacementNodeIntoContainer(child, before, parent);1230 let sibling = child.sibling;1231 while (sibling !== null) {1232 insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);1233 sibling = sibling.sibling;1234 }1235 }1236 }1237}1238function insertOrAppendPlacementNode(1239 node: Fiber,1240 before: ?Instance,1241 parent: Instance,1242): void {1243 const {tag} = node;1244 const isHost = tag === HostComponent || tag === HostText;1245 if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {1246 const stateNode = isHost ? node.stateNode : node.stateNode.instance;1247 if (before) {1248 insertBefore(parent, stateNode, before);1249 } else {1250 appendChild(parent, stateNode);1251 }1252 } else if (tag === HostPortal) {1253 // If the insertion itself is a portal, then we don't want to traverse1254 // down its children. Instead, we'll get insertions from each child in1255 // the portal directly.1256 } else {1257 const child = node.child;1258 if (child !== null) {1259 insertOrAppendPlacementNode(child, before, parent);1260 let sibling = child.sibling;1261 while (sibling !== null) {1262 insertOrAppendPlacementNode(sibling, before, parent);1263 sibling = sibling.sibling;1264 }1265 }1266 }1267}1268function unmountHostComponents(1269 finishedRoot: FiberRoot,1270 current: Fiber,1271 renderPriorityLevel: ReactPriorityLevel,1272): void {1273 // We only have the top Fiber that was deleted but we need to recurse down its1274 // children to find all the terminal nodes.1275 let node: Fiber = current;1276 // Each iteration, currentParent is populated with node's host parent if not1277 // currentParentIsValid.1278 let currentParentIsValid = false;1279 // Note: these two variables *must* always be updated together.1280 let currentParent;1281 let currentParentIsContainer;1282 while (true) {1283 if (!currentParentIsValid) {1284 let parent = node.return;1285 findParent: while (true) {1286 invariant(1287 parent !== null,1288 'Expected to find a host parent. This error is likely caused by ' +1289 'a bug in React. Please file an issue.',1290 );1291 const parentStateNode = parent.stateNode;1292 switch (parent.tag) {1293 case HostComponent:1294 currentParent = parentStateNode;1295 currentParentIsContainer = false;1296 break findParent;1297 case HostRoot:1298 currentParent = parentStateNode.containerInfo;1299 currentParentIsContainer = true;1300 break findParent;1301 case HostPortal:1302 currentParent = parentStateNode.containerInfo;1303 currentParentIsContainer = true;1304 break findParent;1305 case FundamentalComponent:1306 if (enableFundamentalAPI) {1307 currentParent = parentStateNode.instance;1308 currentParentIsContainer = false;1309 }1310 }1311 parent = parent.return;1312 }1313 currentParentIsValid = true;1314 }1315 if (node.tag === HostComponent || node.tag === HostText) {1316 commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);1317 // After all the children have unmounted, it is now safe to remove the1318 // node from the tree.1319 if (currentParentIsContainer) {1320 removeChildFromContainer(1321 ((currentParent: any): Container),1322 (node.stateNode: Instance | TextInstance),1323 );1324 } else {1325 removeChild(1326 ((currentParent: any): Instance),1327 (node.stateNode: Instance | TextInstance),1328 );1329 }1330 // Don't visit children because we already visited them.1331 } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {1332 const fundamentalNode = node.stateNode.instance;1333 commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);1334 // After all the children have unmounted, it is now safe to remove the1335 // node from the tree.1336 if (currentParentIsContainer) {1337 removeChildFromContainer(1338 ((currentParent: any): Container),1339 (fundamentalNode: Instance),1340 );1341 } else {1342 removeChild(1343 ((currentParent: any): Instance),1344 (fundamentalNode: Instance),1345 );1346 }1347 } else if (1348 enableSuspenseServerRenderer &&1349 node.tag === DehydratedFragment1350 ) {1351 if (enableSuspenseCallback) {1352 const hydrationCallbacks = finishedRoot.hydrationCallbacks;1353 if (hydrationCallbacks !== null) {1354 const onDeleted = hydrationCallbacks.onDeleted;1355 if (onDeleted) {1356 onDeleted((node.stateNode: SuspenseInstance));1357 }1358 }1359 }1360 // Delete the dehydrated suspense boundary and all of its content.1361 if (currentParentIsContainer) {1362 clearSuspenseBoundaryFromContainer(1363 ((currentParent: any): Container),1364 (node.stateNode: SuspenseInstance),1365 );1366 } else {1367 clearSuspenseBoundary(1368 ((currentParent: any): Instance),1369 (node.stateNode: SuspenseInstance),1370 );1371 }1372 } else if (node.tag === HostPortal) {1373 if (node.child !== null) {1374 // When we go into a portal, it becomes the parent to remove from.1375 // We will reassign it back when we pop the portal on the way up.1376 currentParent = node.stateNode.containerInfo;1377 currentParentIsContainer = true;1378 // Visit children because portals might contain host components.1379 node.child.return = node;1380 node = node.child;1381 continue;1382 }1383 } else {1384 commitUnmount(finishedRoot, node, renderPriorityLevel);1385 // Visit children because we may find more host components below.1386 if (node.child !== null) {1387 node.child.return = node;1388 node = node.child;1389 continue;1390 }1391 }1392 if (node === current) {1393 return;1394 }1395 while (node.sibling === null) {1396 if (node.return === null || node.return === current) {1397 return;1398 }1399 node = node.return;1400 if (node.tag === HostPortal) {1401 // When we go out of the portal, we need to restore the parent.1402 // Since we don't keep a stack of them, we will search for it.1403 currentParentIsValid = false;1404 }1405 }1406 node.sibling.return = node.return;1407 node = node.sibling;1408 }1409}1410function commitDeletion(1411 finishedRoot: FiberRoot,1412 current: Fiber,1413 renderPriorityLevel: ReactPriorityLevel,1414): void {1415 if (supportsMutation) {1416 // Recursively delete all host nodes from the parent.1417 // Detach refs and call componentWillUnmount() on the whole subtree.1418 unmountHostComponents(finishedRoot, current, renderPriorityLevel);1419 } else {1420 // Detach refs and call componentWillUnmount() on the whole subtree.1421 commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);1422 }1423 const alternate = current.alternate;1424 detachFiberMutation(current);1425 if (alternate !== null) {1426 detachFiberMutation(alternate);1427 }1428}1429function commitWork(current: Fiber | null, finishedWork: Fiber): void {1430 if (!supportsMutation) {1431 switch (finishedWork.tag) {1432 case FunctionComponent:1433 case ForwardRef:1434 case MemoComponent:1435 case SimpleMemoComponent: {1436 // Layout effects are destroyed during the mutation phase so that all1437 // destroy functions for all fibers are called before any create functions.1438 // This prevents sibling component effects from interfering with each other,1439 // e.g. a destroy function in one component should never override a ref set1440 // by a create function in another component during the same commit.1441 if (1442 enableProfilerTimer &&1443 enableProfilerCommitHooks &&1444 finishedWork.mode & ProfileMode1445 ) {1446 try {1447 startLayoutEffectTimer();1448 commitHookEffectListUnmount(1449 HookLayout | HookHasEffect,1450 finishedWork,1451 );1452 } finally {1453 recordLayoutEffectDuration(finishedWork);1454 }1455 } else {1456 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1457 }1458 return;1459 }1460 case Profiler: {1461 return;1462 }1463 case SuspenseComponent: {1464 commitSuspenseComponent(finishedWork);1465 attachSuspenseRetryListeners(finishedWork);1466 return;1467 }1468 case SuspenseListComponent: {1469 attachSuspenseRetryListeners(finishedWork);1470 return;1471 }1472 case HostRoot: {1473 if (supportsHydration) {1474 const root: FiberRoot = finishedWork.stateNode;1475 if (root.hydrate) {1476 // We've just hydrated. No need to hydrate again.1477 root.hydrate = false;1478 commitHydratedContainer(root.containerInfo);1479 }1480 }1481 break;1482 }1483 case OffscreenComponent:1484 case LegacyHiddenComponent: {1485 return;1486 }1487 }1488 commitContainer(finishedWork);1489 return;1490 }1491 switch (finishedWork.tag) {1492 case FunctionComponent:1493 case ForwardRef:1494 case MemoComponent:1495 case SimpleMemoComponent: {1496 // Layout effects are destroyed during the mutation phase so that all1497 // destroy functions for all fibers are called before any create functions.1498 // This prevents sibling component effects from interfering with each other,1499 // e.g. a destroy function in one component should never override a ref set1500 // by a create function in another component during the same commit.1501 if (1502 enableProfilerTimer &&1503 enableProfilerCommitHooks &&1504 finishedWork.mode & ProfileMode1505 ) {1506 try {1507 startLayoutEffectTimer();1508 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1509 } finally {1510 recordLayoutEffectDuration(finishedWork);1511 }1512 } else {1513 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1514 }1515 return;1516 }1517 case ClassComponent: {1518 return;1519 }1520 case HostComponent: {1521 const instance: Instance = finishedWork.stateNode;1522 if (instance != null) {1523 // Commit the work prepared earlier.1524 const newProps = finishedWork.memoizedProps;1525 // For hydration we reuse the update path but we treat the oldProps1526 // as the newProps. The updatePayload will contain the real change in1527 // this case.1528 const oldProps = current !== null ? current.memoizedProps : newProps;1529 const type = finishedWork.type;1530 // TODO: Type the updateQueue to be specific to host components.1531 const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);1532 finishedWork.updateQueue = null;1533 if (updatePayload !== null) {1534 commitUpdate(1535 instance,1536 updatePayload,1537 type,1538 oldProps,1539 newProps,1540 finishedWork,1541 );1542 }1543 }1544 return;1545 }1546 case HostText: {1547 invariant(1548 finishedWork.stateNode !== null,1549 'This should have a text node initialized. This error is likely ' +1550 'caused by a bug in React. Please file an issue.',1551 );1552 const textInstance: TextInstance = finishedWork.stateNode;1553 const newText: string = finishedWork.memoizedProps;1554 // For hydration we reuse the update path but we treat the oldProps1555 // as the newProps. The updatePayload will contain the real change in1556 // this case.1557 const oldText: string =1558 current !== null ? current.memoizedProps : newText;1559 commitTextUpdate(textInstance, oldText, newText);1560 return;1561 }1562 case HostRoot: {1563 if (supportsHydration) {1564 const root: FiberRoot = finishedWork.stateNode;1565 if (root.hydrate) {1566 // We've just hydrated. No need to hydrate again.1567 root.hydrate = false;1568 commitHydratedContainer(root.containerInfo);1569 }1570 }1571 return;1572 }1573 case Profiler: {1574 return;1575 }1576 case SuspenseComponent: {1577 commitSuspenseComponent(finishedWork);1578 attachSuspenseRetryListeners(finishedWork);1579 return;1580 }1581 case SuspenseListComponent: {1582 attachSuspenseRetryListeners(finishedWork);1583 return;1584 }1585 case IncompleteClassComponent: {1586 return;1587 }1588 case FundamentalComponent: {1589 if (enableFundamentalAPI) {1590 const fundamentalInstance = finishedWork.stateNode;1591 updateFundamentalComponent(fundamentalInstance);1592 return;1593 }1594 break;1595 }1596 case ScopeComponent: {1597 if (enableScopeAPI) {1598 const scopeInstance = finishedWork.stateNode;1599 prepareScopeUpdate(scopeInstance, finishedWork);1600 return;1601 }1602 break;1603 }1604 case OffscreenComponent:1605 case LegacyHiddenComponent: {1606 const newState: OffscreenState | null = finishedWork.memoizedState;1607 const isHidden = newState !== null;1608 hideOrUnhideAllChildren(finishedWork, isHidden);1609 return;1610 }1611 }1612 invariant(1613 false,1614 'This unit of work tag should not have side-effects. This error is ' +1615 'likely caused by a bug in React. Please file an issue.',1616 );1617}1618function commitSuspenseComponent(finishedWork: Fiber) {1619 const newState: SuspenseState | null = finishedWork.memoizedState;1620 if (newState !== null) {1621 markCommitTimeOfFallback();1622 if (supportsMutation) {1623 // Hide the Offscreen component that contains the primary children. TODO:1624 // Ideally, this effect would have been scheduled on the Offscreen fiber1625 // itself. That's how unhiding works: the Offscreen component schedules an1626 // effect on itself. However, in this case, the component didn't complete,1627 // so the fiber was never added to the effect list in the normal path. We1628 // could have appended it to the effect list in the Suspense component's1629 // second pass, but doing it this way is less complicated. This would be1630 // simpler if we got rid of the effect list and traversed the tree, like1631 // we're planning to do.1632 const primaryChildParent: Fiber = (finishedWork.child: any);1633 hideOrUnhideAllChildren(primaryChildParent, true);1634 }1635 }1636 if (enableSuspenseCallback && newState !== null) {1637 const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;1638 if (typeof suspenseCallback === 'function') {1639 const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);1640 if (wakeables !== null) {1641 suspenseCallback(new Set(wakeables));1642 }1643 } else if (__DEV__) {1644 if (suspenseCallback !== undefined) {1645 console.error('Unexpected type for suspenseCallback.');1646 }1647 }1648 }1649}1650function commitSuspenseHydrationCallbacks(1651 finishedRoot: FiberRoot,1652 finishedWork: Fiber,1653) {1654 if (!supportsHydration) {1655 return;1656 }1657 const newState: SuspenseState | null = finishedWork.memoizedState;1658 if (newState === null) {1659 const current = finishedWork.alternate;1660 if (current !== null) {1661 const prevState: SuspenseState | null = current.memoizedState;1662 if (prevState !== null) {1663 const suspenseInstance = prevState.dehydrated;1664 if (suspenseInstance !== null) {1665 commitHydratedSuspenseInstance(suspenseInstance);1666 if (enableSuspenseCallback) {1667 const hydrationCallbacks = finishedRoot.hydrationCallbacks;1668 if (hydrationCallbacks !== null) {1669 const onHydrated = hydrationCallbacks.onHydrated;1670 if (onHydrated) {1671 onHydrated(suspenseInstance);1672 }1673 }1674 }1675 }1676 }1677 }1678 }1679}1680function attachSuspenseRetryListeners(finishedWork: Fiber) {1681 // If this boundary just timed out, then it will have a set of wakeables.1682 // For each wakeable, attach a listener so that when it resolves, React1683 // attempts to re-render the boundary in the primary (pre-timeout) state.1684 const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);1685 if (wakeables !== null) {1686 finishedWork.updateQueue = null;1687 let retryCache = finishedWork.stateNode;1688 if (retryCache === null) {1689 retryCache = finishedWork.stateNode = new PossiblyWeakSet();1690 }1691 wakeables.forEach(wakeable => {1692 // Memoize using the boundary fiber to prevent redundant listeners.1693 let retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);1694 if (!retryCache.has(wakeable)) {1695 if (enableSchedulerTracing) {1696 if (wakeable.__reactDoNotTraceInteractions !== true) {1697 retry = Schedule_tracing_wrap(retry);1698 }1699 }1700 retryCache.add(wakeable);1701 wakeable.then(retry, retry);1702 }1703 });1704 }1705}1706// This function detects when a Suspense boundary goes from visible to hidden.1707// It returns false if the boundary is already hidden.1708// TODO: Use an effect tag.1709export function isSuspenseBoundaryBeingHidden(1710 current: Fiber | null,1711 finishedWork: Fiber,1712): boolean {1713 if (current !== null) {1714 const oldState: SuspenseState | null = current.memoizedState;1715 if (oldState === null || oldState.dehydrated !== null) {1716 const newState: SuspenseState | null = finishedWork.memoizedState;1717 return newState !== null && newState.dehydrated === null;1718 }1719 }1720 return false;1721}1722function commitResetTextContent(current: Fiber) {1723 if (!supportsMutation) {1724 return;1725 }1726 resetTextContent(current.stateNode);1727}1728export {1729 commitBeforeMutationLifeCycles,1730 commitResetTextContent,1731 commitPlacement,1732 commitDeletion,1733 commitWork,1734 commitLifeCycles,1735 commitAttachRef,1736 commitDetachRef,...
ReactFiberCommitWork.old.js
Source:ReactFiberCommitWork.old.js
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * 8 */9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';27import {28 enableSchedulerTracing,29 enableProfilerTimer,30 enableProfilerCommitHooks,31 enableSuspenseServerRenderer,32 enableFundamentalAPI,33 enableSuspenseCallback,34 enableScopeAPI,35} from 'shared/ReactFeatureFlags';36import {37 FunctionComponent,38 ForwardRef,39 ClassComponent,40 HostRoot,41 HostComponent,42 HostText,43 HostPortal,44 Profiler,45 SuspenseComponent,46 DehydratedFragment,47 IncompleteClassComponent,48 MemoComponent,49 SimpleMemoComponent,50 SuspenseListComponent,51 FundamentalComponent,52 ScopeComponent,53 Block,54 OffscreenComponent,55 LegacyHiddenComponent,56} from './ReactWorkTags';57import {58 invokeGuardedCallback,59 hasCaughtError,60 clearCaughtError,61} from 'shared/ReactErrorUtils';62import {63 NoFlags,64 ContentReset,65 Placement,66 Snapshot,67 Update,68} from './ReactFiberFlags';69import getComponentName from 'shared/getComponentName';70import invariant from 'shared/invariant';71import {onCommitUnmount} from './ReactFiberDevToolsHook.old';72import {resolveDefaultProps} from './ReactFiberLazyComponent.old';73import {74 getCommitTime,75 recordLayoutEffectDuration,76 startLayoutEffectTimer,77} from './ReactProfilerTimer.old';78import {ProfileMode} from './ReactTypeOfMode';79import {commitUpdateQueue} from './ReactUpdateQueue.old';80import {81 getPublicInstance,82 supportsMutation,83 supportsPersistence,84 supportsHydration,85 commitMount,86 commitUpdate,87 resetTextContent,88 commitTextUpdate,89 appendChild,90 appendChildToContainer,91 insertBefore,92 insertInContainerBefore,93 removeChild,94 removeChildFromContainer,95 clearSuspenseBoundary,96 clearSuspenseBoundaryFromContainer,97 replaceContainerChildren,98 createContainerChildSet,99 hideInstance,100 hideTextInstance,101 unhideInstance,102 unhideTextInstance,103 unmountFundamentalComponent,104 updateFundamentalComponent,105 commitHydratedContainer,106 commitHydratedSuspenseInstance,107 clearContainer,108 prepareScopeUpdate,109} from './ReactFiberHostConfig';110import {111 captureCommitPhaseError,112 resolveRetryWakeable,113 markCommitTimeOfFallback,114 enqueuePendingPassiveHookEffectMount,115 enqueuePendingPassiveHookEffectUnmount,116 enqueuePendingPassiveProfilerEffect,117} from './ReactFiberWorkLoop.old';118import {119 NoFlags as NoHookEffect,120 HasEffect as HookHasEffect,121 Layout as HookLayout,122 Passive as HookPassive,123} from './ReactHookEffectTags';124import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';125let didWarnAboutUndefinedSnapshotBeforeUpdate = null;126if (__DEV__) {127 didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();128}129const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;130const callComponentWillUnmountWithTimer = function(current, instance) {131 instance.props = current.memoizedProps;132 instance.state = current.memoizedState;133 if (134 enableProfilerTimer &&135 enableProfilerCommitHooks &&136 current.mode & ProfileMode137 ) {138 try {139 startLayoutEffectTimer();140 instance.componentWillUnmount();141 } finally {142 recordLayoutEffectDuration(current);143 }144 } else {145 instance.componentWillUnmount();146 }147};148// Capture errors so they don't interrupt unmounting.149function safelyCallComponentWillUnmount(current , instance ) {150 if (__DEV__) {151 invokeGuardedCallback(152 null,153 callComponentWillUnmountWithTimer,154 null,155 current,156 instance,157 );158 if (hasCaughtError()) {159 const unmountError = clearCaughtError();160 captureCommitPhaseError(current, unmountError);161 }162 } else {163 try {164 callComponentWillUnmountWithTimer(current, instance);165 } catch (unmountError) {166 captureCommitPhaseError(current, unmountError);167 }168 }169}170function safelyDetachRef(current ) {171 const ref = current.ref;172 if (ref !== null) {173 if (typeof ref === 'function') {174 if (__DEV__) {175 invokeGuardedCallback(null, ref, null, null);176 if (hasCaughtError()) {177 const refError = clearCaughtError();178 captureCommitPhaseError(current, refError);179 }180 } else {181 try {182 ref(null);183 } catch (refError) {184 captureCommitPhaseError(current, refError);185 }186 }187 } else {188 ref.current = null;189 }190 }191}192function safelyCallDestroy(current , destroy ) {193 if (__DEV__) {194 invokeGuardedCallback(null, destroy, null);195 if (hasCaughtError()) {196 const error = clearCaughtError();197 captureCommitPhaseError(current, error);198 }199 } else {200 try {201 destroy();202 } catch (error) {203 captureCommitPhaseError(current, error);204 }205 }206}207function commitBeforeMutationLifeCycles(208 current ,209 finishedWork ,210) {211 switch (finishedWork.tag) {212 case FunctionComponent:213 case ForwardRef:214 case SimpleMemoComponent:215 case Block: {216 return;217 }218 case ClassComponent: {219 if (finishedWork.flags & Snapshot) {220 if (current !== null) {221 const prevProps = current.memoizedProps;222 const prevState = current.memoizedState;223 const instance = finishedWork.stateNode;224 // We could update instance props and state here,225 // but instead we rely on them being set during last render.226 // TODO: revisit this when we implement resuming.227 if (__DEV__) {228 if (229 finishedWork.type === finishedWork.elementType &&230 !didWarnAboutReassigningProps231 ) {232 if (instance.props !== finishedWork.memoizedProps) {233 console.error(234 'Expected %s props to match memoized props before ' +235 'getSnapshotBeforeUpdate. ' +236 'This might either be because of a bug in React, or because ' +237 'a component reassigns its own `this.props`. ' +238 'Please file an issue.',239 getComponentName(finishedWork.type) || 'instance',240 );241 }242 if (instance.state !== finishedWork.memoizedState) {243 console.error(244 'Expected %s state to match memoized state before ' +245 'getSnapshotBeforeUpdate. ' +246 'This might either be because of a bug in React, or because ' +247 'a component reassigns its own `this.state`. ' +248 'Please file an issue.',249 getComponentName(finishedWork.type) || 'instance',250 );251 }252 }253 }254 const snapshot = instance.getSnapshotBeforeUpdate(255 finishedWork.elementType === finishedWork.type256 ? prevProps257 : resolveDefaultProps(finishedWork.type, prevProps),258 prevState,259 );260 if (__DEV__) {261 const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate ) );262 if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {263 didWarnSet.add(finishedWork.type);264 console.error(265 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +266 'must be returned. You have returned undefined.',267 getComponentName(finishedWork.type),268 );269 }270 }271 instance.__reactInternalSnapshotBeforeUpdate = snapshot;272 }273 }274 return;275 }276 case HostRoot: {277 if (supportsMutation) {278 if (finishedWork.flags & Snapshot) {279 const root = finishedWork.stateNode;280 clearContainer(root.containerInfo);281 }282 }283 return;284 }285 case HostComponent:286 case HostText:287 case HostPortal:288 case IncompleteClassComponent:289 // Nothing to do for these component types290 return;291 }292 invariant(293 false,294 'This unit of work tag should not have side-effects. This error is ' +295 'likely caused by a bug in React. Please file an issue.',296 );297}298function commitHookEffectListUnmount(tag , finishedWork ) {299 const updateQueue = (finishedWork.updateQueue );300 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;301 if (lastEffect !== null) {302 const firstEffect = lastEffect.next;303 let effect = firstEffect;304 do {305 if ((effect.tag & tag) === tag) {306 // Unmount307 const destroy = effect.destroy;308 effect.destroy = undefined;309 if (destroy !== undefined) {310 destroy();311 }312 }313 effect = effect.next;314 } while (effect !== firstEffect);315 }316}317function commitHookEffectListMount(tag , finishedWork ) {318 const updateQueue = (finishedWork.updateQueue );319 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;320 if (lastEffect !== null) {321 const firstEffect = lastEffect.next;322 let effect = firstEffect;323 do {324 if ((effect.tag & tag) === tag) {325 // Mount326 const create = effect.create;327 effect.destroy = create();328 if (__DEV__) {329 const destroy = effect.destroy;330 if (destroy !== undefined && typeof destroy !== 'function') {331 let addendum;332 if (destroy === null) {333 addendum =334 ' You returned null. If your effect does not require clean ' +335 'up, return undefined (or nothing).';336 } else if (typeof destroy.then === 'function') {337 addendum =338 '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +339 'Instead, write the async function inside your effect ' +340 'and call it immediately:\n\n' +341 'useEffect(() => {\n' +342 ' async function fetchData() {\n' +343 ' // You can await here\n' +344 ' const response = await MyAPI.getData(someId);\n' +345 ' // ...\n' +346 ' }\n' +347 ' fetchData();\n' +348 `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +349 'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching';350 } else {351 addendum = ' You returned: ' + destroy;352 }353 console.error(354 'An effect function must not return anything besides a function, ' +355 'which is used for clean-up.%s',356 addendum,357 );358 }359 }360 }361 effect = effect.next;362 } while (effect !== firstEffect);363 }364}365function schedulePassiveEffects(finishedWork ) {366 const updateQueue = (finishedWork.updateQueue );367 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;368 if (lastEffect !== null) {369 const firstEffect = lastEffect.next;370 let effect = firstEffect;371 do {372 const {next, tag} = effect;373 if (374 (tag & HookPassive) !== NoHookEffect &&375 (tag & HookHasEffect) !== NoHookEffect376 ) {377 enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);378 enqueuePendingPassiveHookEffectMount(finishedWork, effect);379 }380 effect = next;381 } while (effect !== firstEffect);382 }383}384export function commitPassiveEffectDurations(385 finishedRoot ,386 finishedWork ,387) {388 if (enableProfilerTimer && enableProfilerCommitHooks) {389 // Only Profilers with work in their subtree will have an Update effect scheduled.390 if ((finishedWork.flags & Update) !== NoFlags) {391 switch (finishedWork.tag) {392 case Profiler: {393 const {passiveEffectDuration} = finishedWork.stateNode;394 const {id, onPostCommit} = finishedWork.memoizedProps;395 // This value will still reflect the previous commit phase.396 // It does not get reset until the start of the next commit phase.397 const commitTime = getCommitTime();398 if (typeof onPostCommit === 'function') {399 if (enableSchedulerTracing) {400 onPostCommit(401 id,402 finishedWork.alternate === null ? 'mount' : 'update',403 passiveEffectDuration,404 commitTime,405 finishedRoot.memoizedInteractions,406 );407 } else {408 onPostCommit(409 id,410 finishedWork.alternate === null ? 'mount' : 'update',411 passiveEffectDuration,412 commitTime,413 );414 }415 }416 // Bubble times to the next nearest ancestor Profiler.417 // After we process that Profiler, we'll bubble further up.418 let parentFiber = finishedWork.return;419 while (parentFiber !== null) {420 if (parentFiber.tag === Profiler) {421 const parentStateNode = parentFiber.stateNode;422 parentStateNode.passiveEffectDuration += passiveEffectDuration;423 break;424 }425 parentFiber = parentFiber.return;426 }427 break;428 }429 default:430 break;431 }432 }433 }434}435function commitLifeCycles(436 finishedRoot ,437 current ,438 finishedWork ,439 committedLanes ,440) {441 switch (finishedWork.tag) {442 case FunctionComponent:443 case ForwardRef:444 case SimpleMemoComponent:445 case Block: {446 // At this point layout effects have already been destroyed (during mutation phase).447 // This is done to prevent sibling component effects from interfering with each other,448 // e.g. a destroy function in one component should never override a ref set449 // by a create function in another component during the same commit.450 if (451 enableProfilerTimer &&452 enableProfilerCommitHooks &&453 finishedWork.mode & ProfileMode454 ) {455 try {456 startLayoutEffectTimer();457 commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);458 } finally {459 recordLayoutEffectDuration(finishedWork);460 }461 } else {462 commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);463 }464 schedulePassiveEffects(finishedWork);465 return;466 }467 case ClassComponent: {468 const instance = finishedWork.stateNode;469 if (finishedWork.flags & Update) {470 if (current === null) {471 // We could update instance props and state here,472 // but instead we rely on them being set during last render.473 // TODO: revisit this when we implement resuming.474 if (__DEV__) {475 if (476 finishedWork.type === finishedWork.elementType &&477 !didWarnAboutReassigningProps478 ) {479 if (instance.props !== finishedWork.memoizedProps) {480 console.error(481 'Expected %s props to match memoized props before ' +482 'componentDidMount. ' +483 'This might either be because of a bug in React, or because ' +484 'a component reassigns its own `this.props`. ' +485 'Please file an issue.',486 getComponentName(finishedWork.type) || 'instance',487 );488 }489 if (instance.state !== finishedWork.memoizedState) {490 console.error(491 'Expected %s state to match memoized state before ' +492 'componentDidMount. ' +493 'This might either be because of a bug in React, or because ' +494 'a component reassigns its own `this.state`. ' +495 'Please file an issue.',496 getComponentName(finishedWork.type) || 'instance',497 );498 }499 }500 }501 if (502 enableProfilerTimer &&503 enableProfilerCommitHooks &&504 finishedWork.mode & ProfileMode505 ) {506 try {507 startLayoutEffectTimer();508 instance.componentDidMount();509 } finally {510 recordLayoutEffectDuration(finishedWork);511 }512 } else {513 instance.componentDidMount();514 }515 } else {516 const prevProps =517 finishedWork.elementType === finishedWork.type518 ? current.memoizedProps519 : resolveDefaultProps(finishedWork.type, current.memoizedProps);520 const prevState = current.memoizedState;521 // We could update instance props and state here,522 // but instead we rely on them being set during last render.523 // TODO: revisit this when we implement resuming.524 if (__DEV__) {525 if (526 finishedWork.type === finishedWork.elementType &&527 !didWarnAboutReassigningProps528 ) {529 if (instance.props !== finishedWork.memoizedProps) {530 console.error(531 'Expected %s props to match memoized props before ' +532 'componentDidUpdate. ' +533 'This might either be because of a bug in React, or because ' +534 'a component reassigns its own `this.props`. ' +535 'Please file an issue.',536 getComponentName(finishedWork.type) || 'instance',537 );538 }539 if (instance.state !== finishedWork.memoizedState) {540 console.error(541 'Expected %s state to match memoized state before ' +542 'componentDidUpdate. ' +543 'This might either be because of a bug in React, or because ' +544 'a component reassigns its own `this.state`. ' +545 'Please file an issue.',546 getComponentName(finishedWork.type) || 'instance',547 );548 }549 }550 }551 if (552 enableProfilerTimer &&553 enableProfilerCommitHooks &&554 finishedWork.mode & ProfileMode555 ) {556 try {557 startLayoutEffectTimer();558 instance.componentDidUpdate(559 prevProps,560 prevState,561 instance.__reactInternalSnapshotBeforeUpdate,562 );563 } finally {564 recordLayoutEffectDuration(finishedWork);565 }566 } else {567 instance.componentDidUpdate(568 prevProps,569 prevState,570 instance.__reactInternalSnapshotBeforeUpdate,571 );572 }573 }574 }575 // TODO: I think this is now always non-null by the time it reaches the576 // commit phase. Consider removing the type check.577 const updateQueue 578 579 = (finishedWork.updateQueue );580 if (updateQueue !== null) {581 if (__DEV__) {582 if (583 finishedWork.type === finishedWork.elementType &&584 !didWarnAboutReassigningProps585 ) {586 if (instance.props !== finishedWork.memoizedProps) {587 console.error(588 'Expected %s props to match memoized props before ' +589 'processing the update queue. ' +590 'This might either be because of a bug in React, or because ' +591 'a component reassigns its own `this.props`. ' +592 'Please file an issue.',593 getComponentName(finishedWork.type) || 'instance',594 );595 }596 if (instance.state !== finishedWork.memoizedState) {597 console.error(598 'Expected %s state to match memoized state before ' +599 'processing the update queue. ' +600 'This might either be because of a bug in React, or because ' +601 'a component reassigns its own `this.state`. ' +602 'Please file an issue.',603 getComponentName(finishedWork.type) || 'instance',604 );605 }606 }607 }608 // We could update instance props and state here,609 // but instead we rely on them being set during last render.610 // TODO: revisit this when we implement resuming.611 commitUpdateQueue(finishedWork, updateQueue, instance);612 }613 return;614 }615 case HostRoot: {616 // TODO: I think this is now always non-null by the time it reaches the617 // commit phase. Consider removing the type check.618 const updateQueue 619 620 = (finishedWork.updateQueue );621 if (updateQueue !== null) {622 let instance = null;623 if (finishedWork.child !== null) {624 switch (finishedWork.child.tag) {625 case HostComponent:626 instance = getPublicInstance(finishedWork.child.stateNode);627 break;628 case ClassComponent:629 instance = finishedWork.child.stateNode;630 break;631 }632 }633 commitUpdateQueue(finishedWork, updateQueue, instance);634 }635 return;636 }637 case HostComponent: {638 const instance = finishedWork.stateNode;639 // Renderers may schedule work to be done after host components are mounted640 // (eg DOM renderer may schedule auto-focus for inputs and form controls).641 // These effects should only be committed when components are first mounted,642 // aka when there is no current/alternate.643 if (current === null && finishedWork.flags & Update) {644 const type = finishedWork.type;645 const props = finishedWork.memoizedProps;646 commitMount(instance, type, props, finishedWork);647 }648 return;649 }650 case HostText: {651 // We have no life-cycles associated with text.652 return;653 }654 case HostPortal: {655 // We have no life-cycles associated with portals.656 return;657 }658 case Profiler: {659 if (enableProfilerTimer) {660 const {onCommit, onRender} = finishedWork.memoizedProps;661 const {effectDuration} = finishedWork.stateNode;662 const commitTime = getCommitTime();663 if (typeof onRender === 'function') {664 if (enableSchedulerTracing) {665 onRender(666 finishedWork.memoizedProps.id,667 current === null ? 'mount' : 'update',668 finishedWork.actualDuration,669 finishedWork.treeBaseDuration,670 finishedWork.actualStartTime,671 commitTime,672 finishedRoot.memoizedInteractions,673 );674 } else {675 onRender(676 finishedWork.memoizedProps.id,677 current === null ? 'mount' : 'update',678 finishedWork.actualDuration,679 finishedWork.treeBaseDuration,680 finishedWork.actualStartTime,681 commitTime,682 );683 }684 }685 if (enableProfilerCommitHooks) {686 if (typeof onCommit === 'function') {687 if (enableSchedulerTracing) {688 onCommit(689 finishedWork.memoizedProps.id,690 current === null ? 'mount' : 'update',691 effectDuration,692 commitTime,693 finishedRoot.memoizedInteractions,694 );695 } else {696 onCommit(697 finishedWork.memoizedProps.id,698 current === null ? 'mount' : 'update',699 effectDuration,700 commitTime,701 );702 }703 }704 // Schedule a passive effect for this Profiler to call onPostCommit hooks.705 // This effect should be scheduled even if there is no onPostCommit callback for this Profiler,706 // because the effect is also where times bubble to parent Profilers.707 enqueuePendingPassiveProfilerEffect(finishedWork);708 // Propagate layout effect durations to the next nearest Profiler ancestor.709 // Do not reset these values until the next render so DevTools has a chance to read them first.710 let parentFiber = finishedWork.return;711 while (parentFiber !== null) {712 if (parentFiber.tag === Profiler) {713 const parentStateNode = parentFiber.stateNode;714 parentStateNode.effectDuration += effectDuration;715 break;716 }717 parentFiber = parentFiber.return;718 }719 }720 }721 return;722 }723 case SuspenseComponent: {724 commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);725 return;726 }727 case SuspenseListComponent:728 case IncompleteClassComponent:729 case FundamentalComponent:730 case ScopeComponent:731 case OffscreenComponent:732 case LegacyHiddenComponent:733 return;734 }735 invariant(736 false,737 'This unit of work tag should not have side-effects. This error is ' +738 'likely caused by a bug in React. Please file an issue.',739 );740}741function hideOrUnhideAllChildren(finishedWork, isHidden) {742 if (supportsMutation) {743 // We only have the top Fiber that was inserted but we need to recurse down its744 // children to find all the terminal nodes.745 let node = finishedWork;746 while (true) {747 if (node.tag === HostComponent) {748 const instance = node.stateNode;749 if (isHidden) {750 hideInstance(instance);751 } else {752 unhideInstance(node.stateNode, node.memoizedProps);753 }754 } else if (node.tag === HostText) {755 const instance = node.stateNode;756 if (isHidden) {757 hideTextInstance(instance);758 } else {759 unhideTextInstance(instance, node.memoizedProps);760 }761 } else if (762 (node.tag === OffscreenComponent ||763 node.tag === LegacyHiddenComponent) &&764 (node.memoizedState ) !== null &&765 node !== finishedWork766 ) {767 // Found a nested Offscreen component that is hidden. Don't search768 // any deeper. This tree should remain hidden.769 } else if (node.child !== null) {770 node.child.return = node;771 node = node.child;772 continue;773 }774 if (node === finishedWork) {775 return;776 }777 while (node.sibling === null) {778 if (node.return === null || node.return === finishedWork) {779 return;780 }781 node = node.return;782 }783 node.sibling.return = node.return;784 node = node.sibling;785 }786 }787}788function commitAttachRef(finishedWork ) {789 const ref = finishedWork.ref;790 if (ref !== null) {791 const instance = finishedWork.stateNode;792 let instanceToUse;793 switch (finishedWork.tag) {794 case HostComponent:795 instanceToUse = getPublicInstance(instance);796 break;797 default:798 instanceToUse = instance;799 }800 // Moved outside to ensure DCE works with this flag801 if (enableScopeAPI && finishedWork.tag === ScopeComponent) {802 instanceToUse = instance;803 }804 if (typeof ref === 'function') {805 ref(instanceToUse);806 } else {807 if (__DEV__) {808 if (!ref.hasOwnProperty('current')) {809 console.error(810 'Unexpected ref object provided for %s. ' +811 'Use either a ref-setter function or React.createRef().',812 getComponentName(finishedWork.type),813 );814 }815 }816 ref.current = instanceToUse;817 }818 }819}820function commitDetachRef(current ) {821 const currentRef = current.ref;822 if (currentRef !== null) {823 if (typeof currentRef === 'function') {824 currentRef(null);825 } else {826 currentRef.current = null;827 }828 }829}830// User-originating errors (lifecycles and refs) should not interrupt831// deletion, so don't let them throw. Host-originating errors should832// interrupt deletion, so it's okay833function commitUnmount(834 finishedRoot ,835 current ,836 renderPriorityLevel ,837) {838 onCommitUnmount(current);839 switch (current.tag) {840 case FunctionComponent:841 case ForwardRef:842 case MemoComponent:843 case SimpleMemoComponent:844 case Block: {845 const updateQueue = (current.updateQueue );846 if (updateQueue !== null) {847 const lastEffect = updateQueue.lastEffect;848 if (lastEffect !== null) {849 const firstEffect = lastEffect.next;850 let effect = firstEffect;851 do {852 const {destroy, tag} = effect;853 if (destroy !== undefined) {854 if ((tag & HookPassive) !== NoHookEffect) {855 enqueuePendingPassiveHookEffectUnmount(current, effect);856 } else {857 if (858 enableProfilerTimer &&859 enableProfilerCommitHooks &&860 current.mode & ProfileMode861 ) {862 startLayoutEffectTimer();863 safelyCallDestroy(current, destroy);864 recordLayoutEffectDuration(current);865 } else {866 safelyCallDestroy(current, destroy);867 }868 }869 }870 effect = effect.next;871 } while (effect !== firstEffect);872 }873 }874 return;875 }876 case ClassComponent: {877 safelyDetachRef(current);878 const instance = current.stateNode;879 if (typeof instance.componentWillUnmount === 'function') {880 safelyCallComponentWillUnmount(current, instance);881 }882 return;883 }884 case HostComponent: {885 safelyDetachRef(current);886 return;887 }888 case HostPortal: {889 // TODO: this is recursive.890 // We are also not using this parent because891 // the portal will get pushed immediately.892 if (supportsMutation) {893 unmountHostComponents(finishedRoot, current, renderPriorityLevel);894 } else if (supportsPersistence) {895 emptyPortalContainer(current);896 }897 return;898 }899 case FundamentalComponent: {900 if (enableFundamentalAPI) {901 const fundamentalInstance = current.stateNode;902 if (fundamentalInstance !== null) {903 unmountFundamentalComponent(fundamentalInstance);904 current.stateNode = null;905 }906 }907 return;908 }909 case DehydratedFragment: {910 if (enableSuspenseCallback) {911 const hydrationCallbacks = finishedRoot.hydrationCallbacks;912 if (hydrationCallbacks !== null) {913 const onDeleted = hydrationCallbacks.onDeleted;914 if (onDeleted) {915 onDeleted((current.stateNode ));916 }917 }918 }919 return;920 }921 case ScopeComponent: {922 if (enableScopeAPI) {923 safelyDetachRef(current);924 }925 return;926 }927 }928}929function commitNestedUnmounts(930 finishedRoot ,931 root ,932 renderPriorityLevel ,933) {934 // While we're inside a removed host node we don't want to call935 // removeChild on the inner nodes because they're removed by the top936 // call anyway. We also want to call componentWillUnmount on all937 // composites before this host node is removed from the tree. Therefore938 // we do an inner loop while we're still inside the host node.939 let node = root;940 while (true) {941 commitUnmount(finishedRoot, node, renderPriorityLevel);942 // Visit children because they may contain more composite or host nodes.943 // Skip portals because commitUnmount() currently visits them recursively.944 if (945 node.child !== null &&946 // If we use mutation we drill down into portals using commitUnmount above.947 // If we don't use mutation we drill down into portals here instead.948 (!supportsMutation || node.tag !== HostPortal)949 ) {950 node.child.return = node;951 node = node.child;952 continue;953 }954 if (node === root) {955 return;956 }957 while (node.sibling === null) {958 if (node.return === null || node.return === root) {959 return;960 }961 node = node.return;962 }963 node.sibling.return = node.return;964 node = node.sibling;965 }966}967function detachFiberMutation(fiber ) {968 // Cut off the return pointers to disconnect it from the tree. Ideally, we969 // should clear the child pointer of the parent alternate to let this970 // get GC:ed but we don't know which for sure which parent is the current971 // one so we'll settle for GC:ing the subtree of this child. This child972 // itself will be GC:ed when the parent updates the next time.973 // Note: we cannot null out sibling here, otherwise it can cause issues974 // with findDOMNode and how it requires the sibling field to carry out975 // traversal in a later effect. See PR #16820. We now clear the sibling976 // field after effects, see: detachFiberAfterEffects.977 //978 // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.979 // It may be required if the current component is an error boundary,980 // and one of its descendants throws while unmounting a passive effect.981 fiber.alternate = null;982 fiber.child = null;983 fiber.dependencies = null;984 fiber.firstEffect = null;985 fiber.lastEffect = null;986 fiber.memoizedProps = null;987 fiber.memoizedState = null;988 fiber.pendingProps = null;989 fiber.return = null;990 fiber.updateQueue = null;991 if (__DEV__) {992 fiber._debugOwner = null;993 }994}995function emptyPortalContainer(current ) {996 if (!supportsPersistence) {997 return;998 }999 const portal 1000 1001 1002 1003 = current.stateNode;1004 const {containerInfo} = portal;1005 const emptyChildSet = createContainerChildSet(containerInfo);1006 replaceContainerChildren(containerInfo, emptyChildSet);1007}1008function commitContainer(finishedWork ) {1009 if (!supportsPersistence) {1010 return;1011 }1012 switch (finishedWork.tag) {1013 case ClassComponent:1014 case HostComponent:1015 case HostText:1016 case FundamentalComponent: {1017 return;1018 }1019 case HostRoot:1020 case HostPortal: {1021 const portalOrRoot 1022 1023 1024 1025 = finishedWork.stateNode;1026 const {containerInfo, pendingChildren} = portalOrRoot;1027 replaceContainerChildren(containerInfo, pendingChildren);1028 return;1029 }1030 }1031 invariant(1032 false,1033 'This unit of work tag should not have side-effects. This error is ' +1034 'likely caused by a bug in React. Please file an issue.',1035 );1036}1037function getHostParentFiber(fiber ) {1038 let parent = fiber.return;1039 while (parent !== null) {1040 if (isHostParent(parent)) {1041 return parent;1042 }1043 parent = parent.return;1044 }1045 invariant(1046 false,1047 'Expected to find a host parent. This error is likely caused by a bug ' +1048 'in React. Please file an issue.',1049 );1050}1051function isHostParent(fiber ) {1052 return (1053 fiber.tag === HostComponent ||1054 fiber.tag === HostRoot ||1055 fiber.tag === HostPortal1056 );1057}1058function getHostSibling(fiber ) {1059 // We're going to search forward into the tree until we find a sibling host1060 // node. Unfortunately, if multiple insertions are done in a row we have to1061 // search past them. This leads to exponential search for the next sibling.1062 // TODO: Find a more efficient way to do this.1063 let node = fiber;1064 siblings: while (true) {1065 // If we didn't find anything, let's try the next sibling.1066 while (node.sibling === null) {1067 if (node.return === null || isHostParent(node.return)) {1068 // If we pop out of the root or hit the parent the fiber we are the1069 // last sibling.1070 return null;1071 }1072 node = node.return;1073 }1074 node.sibling.return = node.return;1075 node = node.sibling;1076 while (1077 node.tag !== HostComponent &&1078 node.tag !== HostText &&1079 node.tag !== DehydratedFragment1080 ) {1081 // If it is not host node and, we might have a host node inside it.1082 // Try to search down until we find one.1083 if (node.flags & Placement) {1084 // If we don't have a child, try the siblings instead.1085 continue siblings;1086 }1087 // If we don't have a child, try the siblings instead.1088 // We also skip portals because they are not part of this host tree.1089 if (node.child === null || node.tag === HostPortal) {1090 continue siblings;1091 } else {1092 node.child.return = node;1093 node = node.child;1094 }1095 }1096 // Check if this host node is stable or about to be placed.1097 if (!(node.flags & Placement)) {1098 // Found it!1099 return node.stateNode;1100 }1101 }1102}1103function commitPlacement(finishedWork ) {1104 if (!supportsMutation) {1105 return;1106 }1107 // Recursively insert all host nodes into the parent.1108 const parentFiber = getHostParentFiber(finishedWork);1109 // Note: these two variables *must* always be updated together.1110 let parent;1111 let isContainer;1112 const parentStateNode = parentFiber.stateNode;1113 switch (parentFiber.tag) {1114 case HostComponent:1115 parent = parentStateNode;1116 isContainer = false;1117 break;1118 case HostRoot:1119 parent = parentStateNode.containerInfo;1120 isContainer = true;1121 break;1122 case HostPortal:1123 parent = parentStateNode.containerInfo;1124 isContainer = true;1125 break;1126 case FundamentalComponent:1127 if (enableFundamentalAPI) {1128 parent = parentStateNode.instance;1129 isContainer = false;1130 }1131 // eslint-disable-next-line-no-fallthrough1132 default:1133 invariant(1134 false,1135 'Invalid host parent fiber. This error is likely caused by a bug ' +1136 'in React. Please file an issue.',1137 );1138 }1139 if (parentFiber.flags & ContentReset) {1140 // Reset the text content of the parent before doing any insertions1141 resetTextContent(parent);1142 // Clear ContentReset from the effect tag1143 parentFiber.flags &= ~ContentReset;1144 }1145 const before = getHostSibling(finishedWork);1146 // We only have the top Fiber that was inserted but we need to recurse down its1147 // children to find all the terminal nodes.1148 if (isContainer) {1149 insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);1150 } else {1151 insertOrAppendPlacementNode(finishedWork, before, parent);1152 }1153}1154function insertOrAppendPlacementNodeIntoContainer(1155 node ,1156 before ,1157 parent ,1158) {1159 const {tag} = node;1160 const isHost = tag === HostComponent || tag === HostText;1161 if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {1162 const stateNode = isHost ? node.stateNode : node.stateNode.instance;1163 if (before) {1164 insertInContainerBefore(parent, stateNode, before);1165 } else {1166 appendChildToContainer(parent, stateNode);1167 }1168 } else if (tag === HostPortal) {1169 // If the insertion itself is a portal, then we don't want to traverse1170 // down its children. Instead, we'll get insertions from each child in1171 // the portal directly.1172 } else {1173 const child = node.child;1174 if (child !== null) {1175 insertOrAppendPlacementNodeIntoContainer(child, before, parent);1176 let sibling = child.sibling;1177 while (sibling !== null) {1178 insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);1179 sibling = sibling.sibling;1180 }1181 }1182 }1183}1184function insertOrAppendPlacementNode(1185 node ,1186 before ,1187 parent ,1188) {1189 const {tag} = node;1190 const isHost = tag === HostComponent || tag === HostText;1191 if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {1192 const stateNode = isHost ? node.stateNode : node.stateNode.instance;1193 if (before) {1194 insertBefore(parent, stateNode, before);1195 } else {1196 appendChild(parent, stateNode);1197 }1198 } else if (tag === HostPortal) {1199 // If the insertion itself is a portal, then we don't want to traverse1200 // down its children. Instead, we'll get insertions from each child in1201 // the portal directly.1202 } else {1203 const child = node.child;1204 if (child !== null) {1205 insertOrAppendPlacementNode(child, before, parent);1206 let sibling = child.sibling;1207 while (sibling !== null) {1208 insertOrAppendPlacementNode(sibling, before, parent);1209 sibling = sibling.sibling;1210 }1211 }1212 }1213}1214function unmountHostComponents(1215 finishedRoot ,1216 current ,1217 renderPriorityLevel ,1218) {1219 // We only have the top Fiber that was deleted but we need to recurse down its1220 // children to find all the terminal nodes.1221 let node = current;1222 // Each iteration, currentParent is populated with node's host parent if not1223 // currentParentIsValid.1224 let currentParentIsValid = false;1225 // Note: these two variables *must* always be updated together.1226 let currentParent;1227 let currentParentIsContainer;1228 while (true) {1229 if (!currentParentIsValid) {1230 let parent = node.return;1231 findParent: while (true) {1232 invariant(1233 parent !== null,1234 'Expected to find a host parent. This error is likely caused by ' +1235 'a bug in React. Please file an issue.',1236 );1237 const parentStateNode = parent.stateNode;1238 switch (parent.tag) {1239 case HostComponent:1240 currentParent = parentStateNode;1241 currentParentIsContainer = false;1242 break findParent;1243 case HostRoot:1244 currentParent = parentStateNode.containerInfo;1245 currentParentIsContainer = true;1246 break findParent;1247 case HostPortal:1248 currentParent = parentStateNode.containerInfo;1249 currentParentIsContainer = true;1250 break findParent;1251 case FundamentalComponent:1252 if (enableFundamentalAPI) {1253 currentParent = parentStateNode.instance;1254 currentParentIsContainer = false;1255 }1256 }1257 parent = parent.return;1258 }1259 currentParentIsValid = true;1260 }1261 if (node.tag === HostComponent || node.tag === HostText) {1262 commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);1263 // After all the children have unmounted, it is now safe to remove the1264 // node from the tree.1265 if (currentParentIsContainer) {1266 removeChildFromContainer(1267 ((currentParent ) ),1268 (node.stateNode ),1269 );1270 } else {1271 removeChild(1272 ((currentParent ) ),1273 (node.stateNode ),1274 );1275 }1276 // Don't visit children because we already visited them.1277 } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {1278 const fundamentalNode = node.stateNode.instance;1279 commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);1280 // After all the children have unmounted, it is now safe to remove the1281 // node from the tree.1282 if (currentParentIsContainer) {1283 removeChildFromContainer(1284 ((currentParent ) ),1285 (fundamentalNode ),1286 );1287 } else {1288 removeChild(1289 ((currentParent ) ),1290 (fundamentalNode ),1291 );1292 }1293 } else if (1294 enableSuspenseServerRenderer &&1295 node.tag === DehydratedFragment1296 ) {1297 if (enableSuspenseCallback) {1298 const hydrationCallbacks = finishedRoot.hydrationCallbacks;1299 if (hydrationCallbacks !== null) {1300 const onDeleted = hydrationCallbacks.onDeleted;1301 if (onDeleted) {1302 onDeleted((node.stateNode ));1303 }1304 }1305 }1306 // Delete the dehydrated suspense boundary and all of its content.1307 if (currentParentIsContainer) {1308 clearSuspenseBoundaryFromContainer(1309 ((currentParent ) ),1310 (node.stateNode ),1311 );1312 } else {1313 clearSuspenseBoundary(1314 ((currentParent ) ),1315 (node.stateNode ),1316 );1317 }1318 } else if (node.tag === HostPortal) {1319 if (node.child !== null) {1320 // When we go into a portal, it becomes the parent to remove from.1321 // We will reassign it back when we pop the portal on the way up.1322 currentParent = node.stateNode.containerInfo;1323 currentParentIsContainer = true;1324 // Visit children because portals might contain host components.1325 node.child.return = node;1326 node = node.child;1327 continue;1328 }1329 } else {1330 commitUnmount(finishedRoot, node, renderPriorityLevel);1331 // Visit children because we may find more host components below.1332 if (node.child !== null) {1333 node.child.return = node;1334 node = node.child;1335 continue;1336 }1337 }1338 if (node === current) {1339 return;1340 }1341 while (node.sibling === null) {1342 if (node.return === null || node.return === current) {1343 return;1344 }1345 node = node.return;1346 if (node.tag === HostPortal) {1347 // When we go out of the portal, we need to restore the parent.1348 // Since we don't keep a stack of them, we will search for it.1349 currentParentIsValid = false;1350 }1351 }1352 node.sibling.return = node.return;1353 node = node.sibling;1354 }1355}1356function commitDeletion(1357 finishedRoot ,1358 current ,1359 renderPriorityLevel ,1360) {1361 if (supportsMutation) {1362 // Recursively delete all host nodes from the parent.1363 // Detach refs and call componentWillUnmount() on the whole subtree.1364 unmountHostComponents(finishedRoot, current, renderPriorityLevel);1365 } else {1366 // Detach refs and call componentWillUnmount() on the whole subtree.1367 commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);1368 }1369 const alternate = current.alternate;1370 detachFiberMutation(current);1371 if (alternate !== null) {1372 detachFiberMutation(alternate);1373 }1374}1375function commitWork(current , finishedWork ) {1376 if (!supportsMutation) {1377 switch (finishedWork.tag) {1378 case FunctionComponent:1379 case ForwardRef:1380 case MemoComponent:1381 case SimpleMemoComponent:1382 case Block: {1383 // Layout effects are destroyed during the mutation phase so that all1384 // destroy functions for all fibers are called before any create functions.1385 // This prevents sibling component effects from interfering with each other,1386 // e.g. a destroy function in one component should never override a ref set1387 // by a create function in another component during the same commit.1388 if (1389 enableProfilerTimer &&1390 enableProfilerCommitHooks &&1391 finishedWork.mode & ProfileMode1392 ) {1393 try {1394 startLayoutEffectTimer();1395 commitHookEffectListUnmount(1396 HookLayout | HookHasEffect,1397 finishedWork,1398 );1399 } finally {1400 recordLayoutEffectDuration(finishedWork);1401 }1402 } else {1403 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1404 }1405 return;1406 }1407 case Profiler: {1408 return;1409 }1410 case SuspenseComponent: {1411 commitSuspenseComponent(finishedWork);1412 attachSuspenseRetryListeners(finishedWork);1413 return;1414 }1415 case SuspenseListComponent: {1416 attachSuspenseRetryListeners(finishedWork);1417 return;1418 }1419 case HostRoot: {1420 if (supportsHydration) {1421 const root = finishedWork.stateNode;1422 if (root.hydrate) {1423 // We've just hydrated. No need to hydrate again.1424 root.hydrate = false;1425 commitHydratedContainer(root.containerInfo);1426 }1427 }1428 break;1429 }1430 case OffscreenComponent:1431 case LegacyHiddenComponent: {1432 return;1433 }1434 }1435 commitContainer(finishedWork);1436 return;1437 }1438 switch (finishedWork.tag) {1439 case FunctionComponent:1440 case ForwardRef:1441 case MemoComponent:1442 case SimpleMemoComponent:1443 case Block: {1444 // Layout effects are destroyed during the mutation phase so that all1445 // destroy functions for all fibers are called before any create functions.1446 // This prevents sibling component effects from interfering with each other,1447 // e.g. a destroy function in one component should never override a ref set1448 // by a create function in another component during the same commit.1449 if (1450 enableProfilerTimer &&1451 enableProfilerCommitHooks &&1452 finishedWork.mode & ProfileMode1453 ) {1454 try {1455 startLayoutEffectTimer();1456 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1457 } finally {1458 recordLayoutEffectDuration(finishedWork);1459 }1460 } else {1461 commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);1462 }1463 return;1464 }1465 case ClassComponent: {1466 return;1467 }1468 case HostComponent: {1469 const instance = finishedWork.stateNode;1470 if (instance != null) {1471 // Commit the work prepared earlier.1472 const newProps = finishedWork.memoizedProps;1473 // For hydration we reuse the update path but we treat the oldProps1474 // as the newProps. The updatePayload will contain the real change in1475 // this case.1476 const oldProps = current !== null ? current.memoizedProps : newProps;1477 const type = finishedWork.type;1478 // TODO: Type the updateQueue to be specific to host components.1479 const updatePayload = (finishedWork.updateQueue );1480 finishedWork.updateQueue = null;1481 if (updatePayload !== null) {1482 commitUpdate(1483 instance,1484 updatePayload,1485 type,1486 oldProps,1487 newProps,1488 finishedWork,1489 );1490 }1491 }1492 return;1493 }1494 case HostText: {1495 invariant(1496 finishedWork.stateNode !== null,1497 'This should have a text node initialized. This error is likely ' +1498 'caused by a bug in React. Please file an issue.',1499 );1500 const textInstance = finishedWork.stateNode;1501 const newText = finishedWork.memoizedProps;1502 // For hydration we reuse the update path but we treat the oldProps1503 // as the newProps. The updatePayload will contain the real change in1504 // this case.1505 const oldText =1506 current !== null ? current.memoizedProps : newText;1507 commitTextUpdate(textInstance, oldText, newText);1508 return;1509 }1510 case HostRoot: {1511 if (supportsHydration) {1512 const root = finishedWork.stateNode;1513 if (root.hydrate) {1514 // We've just hydrated. No need to hydrate again.1515 root.hydrate = false;1516 commitHydratedContainer(root.containerInfo);1517 }1518 }1519 return;1520 }1521 case Profiler: {1522 return;1523 }1524 case SuspenseComponent: {1525 commitSuspenseComponent(finishedWork);1526 attachSuspenseRetryListeners(finishedWork);1527 return;1528 }1529 case SuspenseListComponent: {1530 attachSuspenseRetryListeners(finishedWork);1531 return;1532 }1533 case IncompleteClassComponent: {1534 return;1535 }1536 case FundamentalComponent: {1537 if (enableFundamentalAPI) {1538 const fundamentalInstance = finishedWork.stateNode;1539 updateFundamentalComponent(fundamentalInstance);1540 return;1541 }1542 break;1543 }1544 case ScopeComponent: {1545 if (enableScopeAPI) {1546 const scopeInstance = finishedWork.stateNode;1547 prepareScopeUpdate(scopeInstance, finishedWork);1548 return;1549 }1550 break;1551 }1552 case OffscreenComponent:1553 case LegacyHiddenComponent: {1554 const newState = finishedWork.memoizedState;1555 const isHidden = newState !== null;1556 hideOrUnhideAllChildren(finishedWork, isHidden);1557 return;1558 }1559 }1560 invariant(1561 false,1562 'This unit of work tag should not have side-effects. This error is ' +1563 'likely caused by a bug in React. Please file an issue.',1564 );1565}1566function commitSuspenseComponent(finishedWork ) {1567 const newState = finishedWork.memoizedState;1568 if (newState !== null) {1569 markCommitTimeOfFallback();1570 if (supportsMutation) {1571 // Hide the Offscreen component that contains the primary children. TODO:1572 // Ideally, this effect would have been scheduled on the Offscreen fiber1573 // itself. That's how unhiding works: the Offscreen component schedules an1574 // effect on itself. However, in this case, the component didn't complete,1575 // so the fiber was never added to the effect list in the normal path. We1576 // could have appended it to the effect list in the Suspense component's1577 // second pass, but doing it this way is less complicated. This would be1578 // simpler if we got rid of the effect list and traversed the tree, like1579 // we're planning to do.1580 const primaryChildParent = (finishedWork.child );1581 hideOrUnhideAllChildren(primaryChildParent, true);1582 }1583 }1584 if (enableSuspenseCallback && newState !== null) {1585 const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;1586 if (typeof suspenseCallback === 'function') {1587 const wakeables = (finishedWork.updateQueue );1588 if (wakeables !== null) {1589 suspenseCallback(new Set(wakeables));1590 }1591 } else if (__DEV__) {1592 if (suspenseCallback !== undefined) {1593 console.error('Unexpected type for suspenseCallback.');1594 }1595 }1596 }1597}1598function commitSuspenseHydrationCallbacks(1599 finishedRoot ,1600 finishedWork ,1601) {1602 if (!supportsHydration) {1603 return;1604 }1605 const newState = finishedWork.memoizedState;1606 if (newState === null) {1607 const current = finishedWork.alternate;1608 if (current !== null) {1609 const prevState = current.memoizedState;1610 if (prevState !== null) {1611 const suspenseInstance = prevState.dehydrated;1612 if (suspenseInstance !== null) {1613 commitHydratedSuspenseInstance(suspenseInstance);1614 if (enableSuspenseCallback) {1615 const hydrationCallbacks = finishedRoot.hydrationCallbacks;1616 if (hydrationCallbacks !== null) {1617 const onHydrated = hydrationCallbacks.onHydrated;1618 if (onHydrated) {1619 onHydrated(suspenseInstance);1620 }1621 }1622 }1623 }1624 }1625 }1626 }1627}1628function attachSuspenseRetryListeners(finishedWork ) {1629 // If this boundary just timed out, then it will have a set of wakeables.1630 // For each wakeable, attach a listener so that when it resolves, React1631 // attempts to re-render the boundary in the primary (pre-timeout) state.1632 const wakeables = (finishedWork.updateQueue );1633 if (wakeables !== null) {1634 finishedWork.updateQueue = null;1635 let retryCache = finishedWork.stateNode;1636 if (retryCache === null) {1637 retryCache = finishedWork.stateNode = new PossiblyWeakSet();1638 }1639 wakeables.forEach(wakeable => {1640 // Memoize using the boundary fiber to prevent redundant listeners.1641 let retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);1642 if (!retryCache.has(wakeable)) {1643 if (enableSchedulerTracing) {1644 if (wakeable.__reactDoNotTraceInteractions !== true) {1645 retry = Schedule_tracing_wrap(retry);1646 }1647 }1648 retryCache.add(wakeable);1649 wakeable.then(retry, retry);1650 }1651 });1652 }1653}1654// This function detects when a Suspense boundary goes from visible to hidden.1655// It returns false if the boundary is already hidden.1656// TODO: Use an effect tag.1657export function isSuspenseBoundaryBeingHidden(1658 current ,1659 finishedWork ,1660) {1661 if (current !== null) {1662 const oldState = current.memoizedState;1663 if (oldState === null || oldState.dehydrated !== null) {1664 const newState = finishedWork.memoizedState;1665 return newState !== null && newState.dehydrated === null;1666 }1667 }1668 return false;1669}1670function commitResetTextContent(current ) {1671 if (!supportsMutation) {1672 return;1673 }1674 resetTextContent(current.stateNode);1675}1676export {1677 commitBeforeMutationLifeCycles,1678 commitResetTextContent,1679 commitPlacement,1680 commitDeletion,1681 commitWork,1682 commitLifeCycles,1683 commitAttachRef,1684 commitDetachRef,...
FiberCommitWork.js
Source:FiberCommitWork.js
1import{2 HostRoot,3 HostText,4 HostComponent,5 FunctionComponent,6 BeforeMutationMask,7 MutationMask,8 NoFlags,9 ContentReset,10 Placement,11 Update,12 PlacementAndUpdate,13 LayoutMask,14 SuspenseComponent,15 OffscreenComponent,16 ChildDeletion,17 PassiveMask,18 Passive,19 HookPassive,20 HookHasEffect21} from '@Jeact/shared/Constants';22import {23 resolveRetryWakeable24} from '@Jeact/vDOM/FiberWorkLoop';25import {26 updateFiberProps,27 detachDeletedInstance28} from '@Jeact/vDOM/DOMComponentTree';29import { updateDOMProperties } from '@Jeact/vDOM/DOMComponent'30let nextEffect = null;31export function commitBeforeMutationEffects(firstChild){32 nextEffect = firstChild;33 commitBeforeMutationEffects_begin();34}35function commitBeforeMutationEffects_begin(){36 while(nextEffect !== null){37 const fiber = nextEffect;38 const deletions = fiber.deletions;39 if(deletions !== null){40 for (let i = 0; i < deletions.length; i++){41 const deletion = deletions[i];42 // commitBeforeMutationEffectsDeletion(deletion);43 }44 }45 const child = fiber.child;46 if(47 (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&48 child !== null49 ){50 nextEffect = child;51 } else {52 commitBeforeMutationEffects_complete();53 }54 }55}56function commitBeforeMutationEffects_complete(){57 while(nextEffect !== null){58 const fiber = nextEffect;59 commitBeforeMutationEffectsOnFiber(fiber);60 const sibling = fiber.sibling;61 if(sibling !== null){62 nextEffect = sibling;63 return;64 }65 nextEffect = fiber.return;66 }67}68function commitBeforeMutationEffectsOnFiber(finishedWork){69 const current = finishedWork.alternate;70 const flags = finishedWork.flags;71}72function commitHookEffectListUnmount(73 flags, 74 finishedWork, 75 nearestMountedAncestor76){77 const updateQueue = finishedWork.updateQueue;78 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;79 if (lastEffect !== null){80 const firstEffect = lastEffect.next;81 let effect = firstEffect;82 do {83 if ((effect.tag & flags) === flags){84 // unmount85 const destroy = effect.destroy;86 effect.destroy = undefined;87 if (destroy !== undefined){88 destroy();89 }90 }91 effect = effect.next;92 } while (effect !== firstEffect);93 }94}95function commitHookEffectListMount(tag, finishedWork){96 const updateQueue = finishedWork.updateQueue;97 const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;98 if (lastEffect !== null){99 const firstEffect = lastEffect.next;100 let effect = firstEffect;101 do {102 if ((effect.tag & tag) === tag){103 // Mount104 const create = effect.create;105 effect.destroy = create();106 }107 effect = effect.next;108 } while(effect !== firstEffect);109 }110}111function attachSuspenseRetryListeners(finishedWork){112 const wakeables = finishedWork.updateQueue;113 if (wakeables !== null){114 finishedWork.updateQueue = null;115 let retryCache = finishedWork.stateNode;116 if(retryCache === null){117 retryCache = finishedWork.stateNode = new WeakSet()118 }119 wakeables.forEach(wakeable => {120 const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);121 if(!retryCache.has(wakeable)){122 retryCache.add(wakeable);123 wakeable.then(retry, retry); 124 }125 })126 }127}128export function commitMutationEffects(root,firstChild){129 nextEffect = firstChild;130 commitMutationEffects_begin(root);131}132function commitMutationEffects_begin(root){133 while(nextEffect !== null){134 const fiber = nextEffect;135 const deletions = fiber.deletions;136 if(deletions !==null ){137 for (let i = 0; i < deletions.length; i++){138 const childToDelete = deletions[i];139 commitDeletion(root, childToDelete, fiber);140 }141 }142 const child = fiber.child;143 if((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null){144 nextEffect = child;145 } else {146 commitMutationEffects_complete(root);147 }148 }149}150function commitMutationEffects_complete(root){151 while(nextEffect !== null){152 const fiber = nextEffect;153 commitMutationEffectsOnFiber(fiber, root);154 const sibling = fiber.sibling;155 if (sibling !== null){156 nextEffect = sibling;157 return;158 }159 nextEffect = fiber.return;160 }161}162function commitMutationEffectsOnFiber(finishedWork, root){163 const flags = finishedWork.flags;164 const primaryFlags = flags & (Placement | Update);165 switch(primaryFlags){166 case Placement:{167 commitPlacement(finishedWork);168 finishedWork.flags &= ~Placement;169 break;170 }171 case PlacementAndUpdate:{172 // Placement173 commitPlacement(finishedWork);174 finishedWork.flags &= ~Placement;175 //Update176 const current = finishedWork.alternate;177 commitWork(current, finishedWork);178 break;179 }180 case Update:{181 const current = finishedWork.alternate;182 commitWork(current, finishedWork);183 break;184 }185 }186}187export function commitLayoutEffects(finishedWork, root, committedLanes){188 nextEffect = finishedWork;189 commitLayoutEffects_begin(finishedWork, root, committedLanes);190}191function commitLayoutEffects_begin(subtreeRoot, root, committedLanes){192 while (nextEffect !== null){193 const fiber = nextEffect;194 const firstChild = fiber.child;195 if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null){196 nextEffect = firstChild;197 } else {198 commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);199 }200 }201}202function commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes){203 while (nextEffect !== null){204 const fiber = nextEffect;205 if((fiber.flags & LayoutMask) !== NoFlags){206 const current = fiber.alternate;207 commitLayoutEffectOnFiber(root, current, fiber, committedLanes);208 }209 if (fiber === subtreeRoot){210 nextEffect = null;211 return;212 }213 const sibling = fiber.sibling;214 if (sibling !== null){215 nextEffect = sibling;216 return;217 }218 nextEffect = fiber.return;219 }220}221export function commitPassiveMountEffects(root, finishedWork){222 nextEffect = finishedWork;223 commitPassiveMountEffects_begin(finishedWork, root);224}225function commitPassiveMountEffects_begin(subtreeRoot, root){226 while(nextEffect!== null){227 const fiber = nextEffect;228 const firstChild = fiber.child;229 if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null){230 nextEffect = firstChild;231 } else {232 commitPassiveMountEffects_complete(subtreeRoot, root);233 }234 }235}236function commitPassiveMountEffects_complete(subtreeRoot, root){237 while(nextEffect !== null){238 const fiber = nextEffect;239 if ((fiber.flags & Passive) !== NoFlags){240 commitPassiveMountEffectsOnFiber(root, fiber);241 }242 if (fiber === subtreeRoot){243 nextEffect = null;244 return ;245 }246 const sibling = fiber.sibling;247 if (sibling !== null){248 nextEffect = sibling;249 return;250 }251 nextEffect = fiber.return;252 }253}254function commitPassiveMountOnFiber(finishedRoot, finishedWork){255 switch(finishedWork.tag){256 case FunctionComponent:{257 commitHookEffectListMount(258 HookPassive | HookHasEffect, 259 finishedWork260 );261 break;262 }263 }264}265function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committedLanes){266 if ((finishedWork.flags & Update) !== NoFlags){267 switch(finishedWork.tag){268 default:269 break;270 }271 }272}273export function commitPassiveUnmountEffects(firstChild){274 nextEffect = firstChild;275 commitPassiveUnmountEffects_begin();276}277function commitPassiveUnmountEffects_begin(){278 while(nextEffect !== null){279 const fiber = nextEffect;280 const child = fiber.child;281 if ((nextEffect.flags & ChildDeletion) !== NoFlags){282 const deletions = fiber.deletions;283 if(deletions !== null){284 for (let i = 0; i < deletions.length; i++){285 const fiberToDel = deletions[i];286 nextEffect = fiberToDel;287 commitPassiveUnmountEffectsInDelTree_begin(288 fiberToDel,289 fiber,290 )291 }292 }293 }294 if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null){295 nextEffect = child;296 } else {297 commitPassiveUnmountEffects_complete();298 }299 }300}301function commitPassiveUnmountEffects_complete(){302 while (nextEffect !== null){303 const fiber = nextEffect;304 if ((fiber.flags & Passive) !== NoFlags){305 commitPassiveUnmountOnFiber(fiber);306 }307 const sibling = fiber.sibling;308 if (sibling !== null){309 nextEffect = sibling;310 return;311 }312 nextEffect = fiber.return;313 }314}315function commitPassiveUnmountOnFiber(finishedWork){316 switch(finishedWork.tag){317 case FunctionComponent:{318 commitHookEffectListUnmount(319 HookPassive | HookHasEffect,320 finishedWork,321 finishedWork.return322 )323 }324 }325}326function commitPassiveUnmountEffectsInDelTree_begin(327 deletedSubtreeRoot,328 nearestMountedAncestor329){330 while (nextEffect !== null){331 const fiber = nextEffect;332 333 commitPassiveUnmountEffectsInDelTreeOnFiber(334 fiber, 335 nearestMountedAncestor336 );337 const child = fiber.child;338 if (child !== null){339 nextEffect = child;340 } else {341 commitPassiveUnmountEffectsInDelTree_complete(342 deletedSubtreeRoot343 )344 }345 }346}347function commitPassiveUnmountEffectsInDelTree_complete(deletedSubtreeRoot){348 while (nextEffect !== null){349 const fiber = nextEffect;350 const sibling = fiber.sibling;351 const returnFiber = fiber.return;352 if (fiber === deletedSubtreeRoot){353 detachFiberAfterEffects(fiber);354 nextEffect = null;355 return;356 }357 if (sibling !== null){358 nextEffect = sibling;359 return;360 }361 nextEffect = returnFiber;362 }363}364function commitPassiveUnmountEffectsInDelTreeOnFiber(365 current, nearestMountedAncestor366){367 switch(current.tag){368 case FunctionComponent:{369 commitHookEffectListUnmount(370 HookPassive,371 current,372 nearestMountedAncestor373 );374 break;375 }376 }377}378function commitUnmount(finishedRoot, current, nearestMountedAncestor){379 switch(current.tag){380 case FunctionComponent:381 case HostComponent:382 return;383 }384}385function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor){386 let node = root;387 while(true){388 commitUnmount(finishedRoot, node, nearestMountedAncestor);389 if(node.child !== null){390 node.child.return = node;391 node = node.child;392 continue;393 }394 if (node === root){395 return;396 }397 while (node.sibling === null){398 if (node.return === null || node.return === root){399 return;400 }401 node = node.return;402 }403 node.sibling.return = node.return;404 node = node.sibling;405 }406}407function detachFiberMutation(fiber){408 const alternate = fiber.alternate;409 if (alternate !== null){410 alternate.return = null;411 }412 fiber.return = null;413}414function detachFiberAfterEffects(fiber){415 const alternate = fiber.alternate;416 if (alternate !== null){417 fiber.alternate = null;418 detachFiberAfterEffects(alternate);419 }420 fiber.child = null;421 fiber.deletions = null;422 fiber.sibling = null;423 if (fiber.tag === HostComponent){424 if(fiber.stateNode !== null){425 detachDeletedInstance(fiber.stateNode);426 }427 }428 fiber.stateNode = null;429}430function toggleAllChildren(finishedWork, isHidden){431 let hostSubtreeRoot = null;432 let node = finishedWork;433 while(true){434 if (node.tag === HostComponent){435 if(hostSubtreeRoot === null){436 hostSubtreeRoot = node;437 const instance = node.stateNode;438 if (isHidden){439 const style = instance.style;440 if(typeof style.setProperty === 'function'){441 style.setProperty('display', 'none', 'important');442 } else {443 style.display = 'none';444 }445 } else {446 instance.style.removeProperty('display');447 }448 }449 } else if (node.tag === HostText){450 if(hostSubtreeRoot === null){451 const instance = node.stateNode;452 if (isHidden){453 instance.nodeValue ='';454 } else {455 instance.nodeValue = node.memoizedProps;456 }457 }458 } else if(459 node.tag === OffscreenComponent &&460 node.memoizedState !== null &&461 node !== finishedWork462 ){463 debugger;464 } else if (node.child !== null){465 node.child.return = node;466 node = node.child;467 continue;468 }469 if (node == finishedWork){470 return;471 }472 while(node.sibling === null){473 if (node.return === null || node.return === finishedWork){474 return;475 }476 if(hostSubtreeRoot === node){477 hostSubtreeRoot = null;478 }479 node = node.return;480 }481 if(hostSubtreeRoot === node){482 hostSubtreeRoot = null;483 }484 node.sibling.return = node.return;485 node = node.sibling;486 }487}488function getHostParentFiber(fiber){489 let parent = fiber.return;490 while (parent!== null){491 if (isHostParent(parent)){492 return parent;493 }494 parent = parent.return;495 }496}497function isHostParent(fiber){498 return (499 fiber.tag === HostRoot ||500 fiber.tag === HostComponent501 );502}503function getHostSibling(fiber){504 let node = fiber;505 siblings: while (true){506 while(node.sibling === null){507 if (node.return === null || isHostParent(node.return)){508 return null;509 }510 node = node.return;511 }512 node.sibling.return = node.return;513 node = node.sibling;514 while (515 node.tag !== HostComponent &&516 node.tag !== HostText517 ){518 if (node.flags & Placement){519 continue siblings;520 }521 if (node.child === null){522 continue siblings;523 } else {524 node.child.return = node;525 node = node.child;526 }527 }528 if (!(node.flags & Placement)){529 return node.stateNode;530 }531 }532}533function commitPlacement(finishedWork){534 const parentFiber = getHostParentFiber(finishedWork);535 let parent;536 let isContainer;537 const parentStateNode = parentFiber.stateNode;538 switch(parentFiber.tag){539 case HostComponent:540 parent = parentStateNode;541 isContainer = false;542 break;543 case HostRoot:544 parent = parentStateNode.container;545 isContainer = true;546 break;547 default:548 console.error('Unknown parentFiber', parentFiber.tag);549 }550 const before = getHostSibling(finishedWork);551 if(isContainer){552 insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);553 } else {554 insertOrAppendPlacementNode(finishedWork, before, parent);555 }556}557function insertOrAppendPlacementNodeIntoContainer(node, before, parent){558 const tag = node.tag;559 const isHost = tag === HostComponent || tag === HostText;560 if (isHost){561 const stateNode =node.stateNode;562 if (before){563 parent.insertBefore(stateNode, before)564 } else {565 parent.append(stateNode);566 }567 } else {568 const child = node.child;569 if (child !== null){570 insertOrAppendPlacementNodeIntoContainer(child, before, parent);571 let sibling = child.sibling;572 while (sibling !== null ){573 insertOrAppendPlacementNodeIntoContainer(574 sibling, 575 before, 576 parent);577 sibling = sibling.sibling;578 }579 }580 }581}582function insertOrAppendPlacementNode(node, before, parent){583 const tag = node.tag;584 const isHost = tag === HostComponent || tag === HostText;585 if (isHost){586 const stateNode = node.stateNode;587 if (before){588 parent.insertBefore(stateNode, before);589 } else {590 parent.append(stateNode);591 }592 } else {593 const child = node.child;594 if(child !== null){595 insertOrAppendPlacementNode(child, before, parent);596 let sibling = child.sibling;597 while(sibling !== null){598 insertOrAppendPlacementNode(sibling, before, parent);599 sibling = sibling.sibling;600 }601 }602 }603}604function unmountHostComponents(finishedRoot, current, nearestMountedAncestor){605 let node = current;606 let currentParentIsValid = false;607 let currentParent;608 let currentParentIsContainer;609 while(true){610 if (!currentParentIsValid){611 let parent = node.return;612 findParent: while(true){613 const parentStateNode = parent.stateNode;614 switch(parent.tag){615 case HostComponent:616 currentParent = parentStateNode;617 currentParentIsContainer = false;618 break findParent;619 case HostRoot:620 currentParent = parentStateNode.container;621 currentParentIsContainer = true;622 break findParent;623 }624 parent = parent.return;625 }626 currentParentIsValid = true;627 }628 if (node.tag === HostComponent || node.tag === HostText){629 commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor);630 currentParent.removeChild(node.stateNode);631 } else {632 commitUnmount(finishedRoot, node, nearestMountedAncestor);633 if (node.child !== null){634 node.child.return = node;635 node = node.child;636 continue;637 }638 }639 if (node === current){640 return;641 }642 while (node.sibling === null){643 if (node.return === null || node.return === current){644 return;645 }646 node = node.return;647 }648 node.sibling.return = node.return;649 node = node.sibling;650 }651}652function commitDeletion(finishedRoot, current, nearestMountedAncestor){653 unmountHostComponents(finishedRoot, current, nearestMountedAncestor);654 detachFiberMutation(current);655}656function commitWork(current, finishedWork){657 switch(finishedWork.tag){658 case HostComponent:{659 const instance = finishedWork.stateNode;660 if (instance !== null){661 const newProps = finishedWork.memoizedProps;662 const oldProps = current !== null ? current.memoizedProps : newProps;663 const type = finishedWork.type;664 const updatePayload = finishedWork.updateQueue;665 finishedWork.updateQueue = null;666 if (updatePayload !== null){667 commitUpdate(668 instance,669 updatePayload,670 type,671 oldProps,672 newProps,673 finishedWork,674 )675 }676 }677 return;678 }679 case SuspenseComponent:{680 commitSuspenseComponent(finishedWork);681 attachSuspenseRetryListeners(finishedWork);682 return;683 }684 case OffscreenComponent:{685 const newState = finishedWork.memoizedState;686 const isHidden = newState !== null;687 toggleAllChildren(finishedWork, isHidden);688 return;689 }690 case HostText:{691 const textInstance = finishedWork.stateNode;692 const newText = finishedWork.memoizedProps;693 textInstance.nodeValue = newText;694 }695 }696}697function commitSuspenseComponent(finishedWork){698 const newState = finishedWork.memoizedState;699 if (newState !== null){700 const primaryChildParent = finishedWork.child;701 //hideOrUnhideAllChildren()702 toggleAllChildren(primaryChildParent, true); 703 }704}705function commitUpdate(706 domElement,707 updatePayload,708 type,709 oldProps,710 newProps,711 internalInstanceHandle712){713 updateFiberProps(domElement, newProps);714 updateDOMProperties(domElement, updatePayload);...
FiberWorkLoop.js
Source:FiberWorkLoop.js
...420 markRootUpdated(root, retryLane, eventTime);421 ensureRootIsScheduled(root, eventTime);422 }423}424export function resolveRetryWakeable(boundaryFiber, wakeable){425 let retryCache = boundaryFiber.stateNode;426 if(retryCache !== null){427 retryCache.delete(wakeable);428 }429 retryTimedOutBoundary(boundaryFiber);...
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 { resolveRetryWakeable } = require('playwright');10module.exports = {11 use: {12 viewport: { width: 800, height: 600 },13 },14};15const { resolveRetryWakeable } = require('playwright');16module.exports = {17 use: {18 viewport: { width: 800, height: 600 },19 },20};21const { resolveRetryWakeable } = require('playwright');22module.exports = {23 use: {24 viewport: { width: 800, height: 600 },25 },26};27const { resolveRetryWakeable } = require('playwright');28module.exports = {29 use: {30 viewport: { width: 800, height: 600 },31 },32};33const { resolveRetryWakeable } = require('playwright');34module.exports = {35 use: {36 viewport: { width: 800, height: 600 },37 },38};
Using AI Code Generation
1const { resolveRetryWakeable } = require("@playwright/test/lib/server/wakeable");2const { chromium } = require("playwright");3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const elementHandle = await page.$("text=Get Started");8 const wakeable = await elementHandle._retry();9 const retry = await resolveRetryWakeable(wakeable);10 console.log(retry);11 await browser.close();12})();
Using AI Code Generation
1const { resolveRetryWakeable } = require('playwright-core/lib/server/wakeable');2const { chromium } = require('playwright-core');3const browser = await chromium.launch();4const page = await browser.newPage();5await page.waitForSelector('a');6const wakeable = await page.waitForSelector('a');7const element = await resolveRetryWakeable(wakeable);8console.log(element);9await browser.close();10ElementHandle {11 _context: ExecutionContext {12 _page: Page {13 _browserContext: BrowserContext {14 _browser: Browser {15 _connection: Connection {16 _ws: WebSocket {…},17 _callbacks: Map {},18 _sessions: Map {},19 _sessionsIds: Map {},20 _dispatchQueue: Promise {},21 _crBrowserSessionPromise: Promise {},22 _crBrowserSessionClosePromise: Promise {},
Using AI Code Generation
1const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');2const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');3const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');4const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');5const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');6const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');7const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');8const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');9const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');10const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');11const { resolveRetryWakeable } = require('playwright/lib/internal/utils/utils');12const { resolve
Using AI Code Generation
1const {InternalHelper} = require('playwright/lib/server/helper.js');2const helper = new InternalHelper();3const wakeable = helper.resolveRetryWakeable(1000);4wakeable.then((value) => {5 console.log(value);6});7const {InternalHelper} = require('playwright/lib/server/helper.js');8const helper = new InternalHelper();9const wakeable = helper.resolveRetryWakeable(1000);10wakeable.then((value) => {11 console.log(value);12});13const {InternalHelper} = require('playwright/lib/server/helper.js');14const helper = new InternalHelper();15const wakeable = helper.resolveRetryWakeable(1000);16wakeable.then((value) => {17 console.log(value);18});19const {InternalHelper} = require('playwright/lib/server/helper.js');20const helper = new InternalHelper();21const wakeable = helper.resolveRetryWakeable(1000);22wakeable.then((value) => {23 console.log(value);24});25const {InternalHelper} = require('playwright/lib/server/helper.js');26const helper = new InternalHelper();27const wakeable = helper.resolveRetryWakeable(1000);28wakeable.then((value) => {29 console.log(value);30});31const {InternalHelper} = require('playwright/lib/server/helper.js');32const helper = new InternalHelper();33const wakeable = helper.resolveRetryWakeable(1000);34wakeable.then((value) => {35 console.log(value);36});37const {InternalHelper} = require('playwright
Using AI Code Generation
1const { resolveRetryWakeable } = require('playwright/lib/utils/utils');2const { PlaywrightTest } = require('@playwright/test');3const { test } = PlaywrightTest;4test('test', async ({ page }) => {5 await resolveRetryWakeable(() => page.isVisible('css=div'), false);6 await page.click('css=div');7});8Example: Wait for the element to be visible using waitForSelector()9const { test } = require('@playwright/test');10test('test', async ({ page }) => {11 await page.waitForSelector('css=div');12 await page.click('css=div');13});14Example: Wait for the element to be visible using waitForFunction()15const { test } = require('@playwright/test');16test('test', async ({ page }) => {17 await page.waitForFunction(() => document.querySelector('div').offsetWidth > 0);18 await page.click('css=div');19});20Example: Wait for the element to be visible using waitForTimeout()21const { test } = require('@playwright/test');22test('test', async ({ page }) => {23 await page.waitForTimeout(1000);24 await page.click('css=div');25});26Example: Wait for the element to be visible using waitForResponse()27const { test } = require('@playwright/test');28test('test', async ({ page }) => {29 await page.click('css=div');30});31Example: Wait for the element to be visible using waitForRequest()32const { test } = require('@playwright/test');33test('test', async ({ page }) => {34 await page.click('css=div');35});36Example: Wait for the element to be visible using waitForEvent()37const { test } = require('@playwright/test');
Using AI Code Generation
1const { resolveRetryWakeable } = require('playwright/lib/utils/utils');2const { TimeoutError } = require('playwright/lib/errors');3const { createTestServer } = require('playwright/lib/utils/testserver');4(async () => {5 const server = await createTestServer();6 server.setRoute('/sleep', async (req, res) => {7 res.setHeader('Content-Type', 'text/plain');8 res.write('hello ');9 await new Promise(f => setTimeout(f, 1000));10 res.end('world');11 });12 const url = server.PREFIX + '/sleep';13 const wakeable = new Promise(f => setTimeout(f, 1000));14 const timeout = 100;15 try {16 await resolveRetryWakeable(wakeable, async () => {17 await page.goto(url);18 }, timeout);19 } catch (e) {20 if (e instanceof TimeoutError)21 console.log('Error: Timeout');22 }23})();
Playwright tutorial
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.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
