mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Brian Vaughn
2930 lines
91 KiB
JavaScript
2930 lines
91 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import type {
|
|
Instance,
|
|
TextInstance,
|
|
SuspenseInstance,
|
|
Container,
|
|
ChildSet,
|
|
UpdatePayload,
|
|
} from './ReactFiberHostConfig';
|
|
import type {Fiber} from './ReactInternalTypes';
|
|
import type {FiberRoot} from './ReactInternalTypes';
|
|
import type {Lanes} from './ReactFiberLane.new';
|
|
import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
|
|
import type {UpdateQueue} from './ReactUpdateQueue.new';
|
|
import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
|
|
import type {Wakeable} from 'shared/ReactTypes';
|
|
import type {OffscreenState} from './ReactFiberOffscreenComponent';
|
|
import type {HookFlags} from './ReactHookEffectTags';
|
|
|
|
import {
|
|
enableProfilerTimer,
|
|
enableProfilerCommitHooks,
|
|
enableProfilerNestedUpdatePhase,
|
|
enableSuspenseServerRenderer,
|
|
enableSuspenseCallback,
|
|
enableScopeAPI,
|
|
enableStrictEffects,
|
|
deletedTreeCleanUpLevel,
|
|
enableSuspenseLayoutEffectSemantics,
|
|
enableUpdaterTracking,
|
|
} from 'shared/ReactFeatureFlags';
|
|
import {
|
|
FunctionComponent,
|
|
ForwardRef,
|
|
ClassComponent,
|
|
HostRoot,
|
|
HostComponent,
|
|
HostText,
|
|
HostPortal,
|
|
Profiler,
|
|
SuspenseComponent,
|
|
DehydratedFragment,
|
|
IncompleteClassComponent,
|
|
MemoComponent,
|
|
SimpleMemoComponent,
|
|
SuspenseListComponent,
|
|
ScopeComponent,
|
|
OffscreenComponent,
|
|
LegacyHiddenComponent,
|
|
} from './ReactWorkTags';
|
|
import {
|
|
invokeGuardedCallback,
|
|
hasCaughtError,
|
|
clearCaughtError,
|
|
} from 'shared/ReactErrorUtils';
|
|
import {detachDeletedInstance} from './ReactFiberHostConfig';
|
|
import {
|
|
NoFlags,
|
|
ContentReset,
|
|
Placement,
|
|
PlacementAndUpdate,
|
|
ChildDeletion,
|
|
Snapshot,
|
|
Update,
|
|
Callback,
|
|
Ref,
|
|
Hydrating,
|
|
HydratingAndUpdate,
|
|
Passive,
|
|
BeforeMutationMask,
|
|
MutationMask,
|
|
LayoutMask,
|
|
PassiveMask,
|
|
} from './ReactFiberFlags';
|
|
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
|
|
import invariant from 'shared/invariant';
|
|
import {
|
|
resetCurrentFiber as resetCurrentDebugFiberInDEV,
|
|
setCurrentFiber as setCurrentDebugFiberInDEV,
|
|
} from './ReactCurrentFiber';
|
|
import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
|
|
import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
|
|
import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
|
|
import {
|
|
isCurrentUpdateNested,
|
|
getCommitTime,
|
|
recordLayoutEffectDuration,
|
|
startLayoutEffectTimer,
|
|
recordPassiveEffectDuration,
|
|
startPassiveEffectTimer,
|
|
} from './ReactProfilerTimer.new';
|
|
import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
|
|
import {commitUpdateQueue} from './ReactUpdateQueue.new';
|
|
import {
|
|
getPublicInstance,
|
|
supportsMutation,
|
|
supportsPersistence,
|
|
supportsHydration,
|
|
commitMount,
|
|
commitUpdate,
|
|
resetTextContent,
|
|
commitTextUpdate,
|
|
appendChild,
|
|
appendChildToContainer,
|
|
insertBefore,
|
|
insertInContainerBefore,
|
|
removeChild,
|
|
removeChildFromContainer,
|
|
clearSuspenseBoundary,
|
|
clearSuspenseBoundaryFromContainer,
|
|
replaceContainerChildren,
|
|
createContainerChildSet,
|
|
hideInstance,
|
|
hideTextInstance,
|
|
unhideInstance,
|
|
unhideTextInstance,
|
|
commitHydratedContainer,
|
|
commitHydratedSuspenseInstance,
|
|
clearContainer,
|
|
prepareScopeUpdate,
|
|
prepareForCommit,
|
|
beforeActiveInstanceBlur,
|
|
} from './ReactFiberHostConfig';
|
|
import {
|
|
captureCommitPhaseError,
|
|
resolveRetryWakeable,
|
|
markCommitTimeOfFallback,
|
|
enqueuePendingPassiveProfilerEffect,
|
|
restorePendingUpdaters,
|
|
} from './ReactFiberWorkLoop.new';
|
|
import {
|
|
NoFlags as NoHookEffect,
|
|
HasEffect as HookHasEffect,
|
|
Layout as HookLayout,
|
|
Passive as HookPassive,
|
|
} from './ReactHookEffectTags';
|
|
import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
|
|
import {doesFiberContain} from './ReactFiberTreeReflection';
|
|
|
|
let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
|
|
if (__DEV__) {
|
|
didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();
|
|
}
|
|
|
|
// Used during the commit phase to track the state of the Offscreen component stack.
|
|
// Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
|
|
// Only used when enableSuspenseLayoutEffectSemantics is enabled.
|
|
let offscreenSubtreeIsHidden: boolean = false;
|
|
let offscreenSubtreeWasHidden: boolean = false;
|
|
|
|
const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
|
|
|
|
let nextEffect: Fiber | null = null;
|
|
|
|
// Used for Profiling builds to track updaters.
|
|
let inProgressLanes: Lanes | null = null;
|
|
let inProgressRoot: FiberRoot | null = null;
|
|
|
|
const callComponentWillUnmountWithTimer = function(current, instance) {
|
|
instance.props = current.memoizedProps;
|
|
instance.state = current.memoizedState;
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
current.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
instance.componentWillUnmount();
|
|
} finally {
|
|
recordLayoutEffectDuration(current);
|
|
}
|
|
} else {
|
|
instance.componentWillUnmount();
|
|
}
|
|
};
|
|
|
|
// Capture errors so they don't interrupt mounting.
|
|
function safelyCallCommitHookLayoutEffectListMount(
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber | null,
|
|
) {
|
|
if (__DEV__) {
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitHookEffectListMount,
|
|
null,
|
|
HookLayout,
|
|
current,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const unmountError = clearCaughtError();
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
} else {
|
|
try {
|
|
commitHookEffectListMount(HookLayout, current);
|
|
} catch (unmountError) {
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Capture errors so they don't interrupt unmounting.
|
|
function safelyCallComponentWillUnmount(
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber | null,
|
|
instance: any,
|
|
) {
|
|
if (__DEV__) {
|
|
invokeGuardedCallback(
|
|
null,
|
|
callComponentWillUnmountWithTimer,
|
|
null,
|
|
current,
|
|
instance,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const unmountError = clearCaughtError();
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
} else {
|
|
try {
|
|
callComponentWillUnmountWithTimer(current, instance);
|
|
} catch (unmountError) {
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Capture errors so they don't interrupt mounting.
|
|
function safelyCallComponentDidMount(
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber | null,
|
|
instance: any,
|
|
) {
|
|
if (__DEV__) {
|
|
invokeGuardedCallback(null, instance.componentDidMount, instance);
|
|
if (hasCaughtError()) {
|
|
const unmountError = clearCaughtError();
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
} else {
|
|
try {
|
|
instance.componentDidMount();
|
|
} catch (unmountError) {
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Capture errors so they don't interrupt mounting.
|
|
function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
|
|
if (__DEV__) {
|
|
invokeGuardedCallback(null, commitAttachRef, null, current);
|
|
if (hasCaughtError()) {
|
|
const unmountError = clearCaughtError();
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
} else {
|
|
try {
|
|
commitAttachRef(current);
|
|
} catch (unmountError) {
|
|
captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
|
|
}
|
|
}
|
|
}
|
|
|
|
function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
|
|
const ref = current.ref;
|
|
if (ref !== null) {
|
|
if (typeof ref === 'function') {
|
|
if (__DEV__) {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
current.mode & ProfileMode
|
|
) {
|
|
startLayoutEffectTimer();
|
|
invokeGuardedCallback(null, ref, null, null);
|
|
recordLayoutEffectDuration(current);
|
|
} else {
|
|
invokeGuardedCallback(null, ref, null, null);
|
|
}
|
|
|
|
if (hasCaughtError()) {
|
|
const refError = clearCaughtError();
|
|
captureCommitPhaseError(current, nearestMountedAncestor, refError);
|
|
}
|
|
} else {
|
|
try {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
current.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
ref(null);
|
|
} finally {
|
|
recordLayoutEffectDuration(current);
|
|
}
|
|
} else {
|
|
ref(null);
|
|
}
|
|
} catch (refError) {
|
|
captureCommitPhaseError(current, nearestMountedAncestor, refError);
|
|
}
|
|
}
|
|
} else {
|
|
ref.current = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
function safelyCallDestroy(
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber | null,
|
|
destroy: () => void,
|
|
) {
|
|
if (__DEV__) {
|
|
invokeGuardedCallback(null, destroy, null);
|
|
if (hasCaughtError()) {
|
|
const error = clearCaughtError();
|
|
captureCommitPhaseError(current, nearestMountedAncestor, error);
|
|
}
|
|
} else {
|
|
try {
|
|
destroy();
|
|
} catch (error) {
|
|
captureCommitPhaseError(current, nearestMountedAncestor, error);
|
|
}
|
|
}
|
|
}
|
|
|
|
let focusedInstanceHandle: null | Fiber = null;
|
|
let shouldFireAfterActiveInstanceBlur: boolean = false;
|
|
|
|
export function commitBeforeMutationEffects(
|
|
root: FiberRoot,
|
|
firstChild: Fiber,
|
|
) {
|
|
focusedInstanceHandle = prepareForCommit(root.containerInfo);
|
|
|
|
nextEffect = firstChild;
|
|
commitBeforeMutationEffects_begin();
|
|
|
|
// We no longer need to track the active instance fiber
|
|
const shouldFire = shouldFireAfterActiveInstanceBlur;
|
|
shouldFireAfterActiveInstanceBlur = false;
|
|
focusedInstanceHandle = null;
|
|
|
|
return shouldFire;
|
|
}
|
|
|
|
function commitBeforeMutationEffects_begin() {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
|
|
// TODO: Should wrap this in flags check, too, as optimization
|
|
const deletions = fiber.deletions;
|
|
if (deletions !== null) {
|
|
for (let i = 0; i < deletions.length; i++) {
|
|
const deletion = deletions[i];
|
|
commitBeforeMutationEffectsDeletion(deletion);
|
|
}
|
|
}
|
|
|
|
const child = fiber.child;
|
|
if (
|
|
(fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
|
|
child !== null
|
|
) {
|
|
ensureCorrectReturnPointer(child, fiber);
|
|
nextEffect = child;
|
|
} else {
|
|
commitBeforeMutationEffects_complete();
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitBeforeMutationEffects_complete() {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
if (__DEV__) {
|
|
setCurrentDebugFiberInDEV(fiber);
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitBeforeMutationEffectsOnFiber,
|
|
null,
|
|
fiber,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const error = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
resetCurrentDebugFiberInDEV();
|
|
} else {
|
|
try {
|
|
commitBeforeMutationEffectsOnFiber(fiber);
|
|
} catch (error) {
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
}
|
|
|
|
const sibling = fiber.sibling;
|
|
if (sibling !== null) {
|
|
ensureCorrectReturnPointer(sibling, fiber.return);
|
|
nextEffect = sibling;
|
|
return;
|
|
}
|
|
|
|
nextEffect = fiber.return;
|
|
}
|
|
}
|
|
|
|
function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
|
|
const current = finishedWork.alternate;
|
|
const flags = finishedWork.flags;
|
|
|
|
if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
|
|
// Check to see if the focused element was inside of a hidden (Suspense) subtree.
|
|
// TODO: Move this out of the hot path using a dedicated effect tag.
|
|
if (
|
|
finishedWork.tag === SuspenseComponent &&
|
|
isSuspenseBoundaryBeingHidden(current, finishedWork) &&
|
|
doesFiberContain(finishedWork, focusedInstanceHandle)
|
|
) {
|
|
shouldFireAfterActiveInstanceBlur = true;
|
|
beforeActiveInstanceBlur(finishedWork);
|
|
}
|
|
}
|
|
|
|
if ((flags & Snapshot) !== NoFlags) {
|
|
setCurrentDebugFiberInDEV(finishedWork);
|
|
|
|
switch (finishedWork.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
break;
|
|
}
|
|
case ClassComponent: {
|
|
if (current !== null) {
|
|
const prevProps = current.memoizedProps;
|
|
const prevState = current.memoizedState;
|
|
const instance = finishedWork.stateNode;
|
|
// We could update instance props and state here,
|
|
// but instead we rely on them being set during last render.
|
|
// TODO: revisit this when we implement resuming.
|
|
if (__DEV__) {
|
|
if (
|
|
finishedWork.type === finishedWork.elementType &&
|
|
!didWarnAboutReassigningProps
|
|
) {
|
|
if (instance.props !== finishedWork.memoizedProps) {
|
|
console.error(
|
|
'Expected %s props to match memoized props before ' +
|
|
'getSnapshotBeforeUpdate. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.props`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
if (instance.state !== finishedWork.memoizedState) {
|
|
console.error(
|
|
'Expected %s state to match memoized state before ' +
|
|
'getSnapshotBeforeUpdate. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.state`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
const snapshot = instance.getSnapshotBeforeUpdate(
|
|
finishedWork.elementType === finishedWork.type
|
|
? prevProps
|
|
: resolveDefaultProps(finishedWork.type, prevProps),
|
|
prevState,
|
|
);
|
|
if (__DEV__) {
|
|
const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
|
|
if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
|
|
didWarnSet.add(finishedWork.type);
|
|
console.error(
|
|
'%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
|
|
'must be returned. You have returned undefined.',
|
|
getComponentNameFromFiber(finishedWork),
|
|
);
|
|
}
|
|
}
|
|
instance.__reactInternalSnapshotBeforeUpdate = snapshot;
|
|
}
|
|
break;
|
|
}
|
|
case HostRoot: {
|
|
if (supportsMutation) {
|
|
const root = finishedWork.stateNode;
|
|
clearContainer(root.containerInfo);
|
|
}
|
|
break;
|
|
}
|
|
case HostComponent:
|
|
case HostText:
|
|
case HostPortal:
|
|
case IncompleteClassComponent:
|
|
// Nothing to do for these component types
|
|
break;
|
|
default: {
|
|
invariant(
|
|
false,
|
|
'This unit of work tag should not have side-effects. This error is ' +
|
|
'likely caused by a bug in React. Please file an issue.',
|
|
);
|
|
}
|
|
}
|
|
|
|
resetCurrentDebugFiberInDEV();
|
|
}
|
|
}
|
|
|
|
function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
|
|
// TODO (effects) It would be nice to avoid calling doesFiberContain()
|
|
// Maybe we can repurpose one of the subtreeFlags positions for this instead?
|
|
// Use it to store which part of the tree the focused instance is in?
|
|
// This assumes we can safely determine that instance during the "render" phase.
|
|
if (doesFiberContain(deletion, ((focusedInstanceHandle: any): Fiber))) {
|
|
shouldFireAfterActiveInstanceBlur = true;
|
|
beforeActiveInstanceBlur(deletion);
|
|
}
|
|
}
|
|
|
|
function commitHookEffectListUnmount(
|
|
flags: HookFlags,
|
|
finishedWork: Fiber,
|
|
nearestMountedAncestor: Fiber | null,
|
|
) {
|
|
const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
|
|
const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
|
|
if (lastEffect !== null) {
|
|
const firstEffect = lastEffect.next;
|
|
let effect = firstEffect;
|
|
do {
|
|
if ((effect.tag & flags) === flags) {
|
|
// Unmount
|
|
const destroy = effect.destroy;
|
|
effect.destroy = undefined;
|
|
if (destroy !== undefined) {
|
|
safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
|
|
}
|
|
}
|
|
effect = effect.next;
|
|
} while (effect !== firstEffect);
|
|
}
|
|
}
|
|
|
|
function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
|
|
const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
|
|
const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
|
|
if (lastEffect !== null) {
|
|
const firstEffect = lastEffect.next;
|
|
let effect = firstEffect;
|
|
do {
|
|
if ((effect.tag & tag) === tag) {
|
|
// Mount
|
|
const create = effect.create;
|
|
effect.destroy = create();
|
|
|
|
if (__DEV__) {
|
|
const destroy = effect.destroy;
|
|
if (destroy !== undefined && typeof destroy !== 'function') {
|
|
let addendum;
|
|
if (destroy === null) {
|
|
addendum =
|
|
' You returned null. If your effect does not require clean ' +
|
|
'up, return undefined (or nothing).';
|
|
} else if (typeof destroy.then === 'function') {
|
|
addendum =
|
|
'\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +
|
|
'Instead, write the async function inside your effect ' +
|
|
'and call it immediately:\n\n' +
|
|
'useEffect(() => {\n' +
|
|
' async function fetchData() {\n' +
|
|
' // You can await here\n' +
|
|
' const response = await MyAPI.getData(someId);\n' +
|
|
' // ...\n' +
|
|
' }\n' +
|
|
' fetchData();\n' +
|
|
`}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
|
|
'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching';
|
|
} else {
|
|
addendum = ' You returned: ' + destroy;
|
|
}
|
|
console.error(
|
|
'An effect function must not return anything besides a function, ' +
|
|
'which is used for clean-up.%s',
|
|
addendum,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
effect = effect.next;
|
|
} while (effect !== firstEffect);
|
|
}
|
|
}
|
|
|
|
export function commitPassiveEffectDurations(
|
|
finishedRoot: FiberRoot,
|
|
finishedWork: Fiber,
|
|
): void {
|
|
if (enableProfilerTimer && enableProfilerCommitHooks) {
|
|
// Only Profilers with work in their subtree will have an Update effect scheduled.
|
|
if ((finishedWork.flags & Update) !== NoFlags) {
|
|
switch (finishedWork.tag) {
|
|
case Profiler: {
|
|
const {passiveEffectDuration} = finishedWork.stateNode;
|
|
const {id, onPostCommit} = finishedWork.memoizedProps;
|
|
|
|
// This value will still reflect the previous commit phase.
|
|
// It does not get reset until the start of the next commit phase.
|
|
const commitTime = getCommitTime();
|
|
|
|
let phase = finishedWork.alternate === null ? 'mount' : 'update';
|
|
if (enableProfilerNestedUpdatePhase) {
|
|
if (isCurrentUpdateNested()) {
|
|
phase = 'nested-update';
|
|
}
|
|
}
|
|
|
|
if (typeof onPostCommit === 'function') {
|
|
onPostCommit(id, phase, passiveEffectDuration, commitTime);
|
|
}
|
|
|
|
// Bubble times to the next nearest ancestor Profiler.
|
|
// After we process that Profiler, we'll bubble further up.
|
|
let parentFiber = finishedWork.return;
|
|
outer: while (parentFiber !== null) {
|
|
switch (parentFiber.tag) {
|
|
case HostRoot:
|
|
const root = parentFiber.stateNode;
|
|
root.passiveEffectDuration += passiveEffectDuration;
|
|
break outer;
|
|
case Profiler:
|
|
const parentStateNode = parentFiber.stateNode;
|
|
parentStateNode.passiveEffectDuration += passiveEffectDuration;
|
|
break outer;
|
|
}
|
|
parentFiber = parentFiber.return;
|
|
}
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitLayoutEffectOnFiber(
|
|
finishedRoot: FiberRoot,
|
|
current: Fiber | null,
|
|
finishedWork: Fiber,
|
|
committedLanes: Lanes,
|
|
): void {
|
|
if ((finishedWork.flags & (Update | Callback)) !== NoFlags) {
|
|
switch (finishedWork.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
// At this point layout effects have already been destroyed (during mutation phase).
|
|
// This is done to prevent sibling component effects from interfering with each other,
|
|
// e.g. a destroy function in one component should never override a ref set
|
|
// by a create function in another component during the same commit.
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
|
|
} finally {
|
|
recordLayoutEffectDuration(finishedWork);
|
|
}
|
|
} else {
|
|
commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
|
|
}
|
|
break;
|
|
}
|
|
case ClassComponent: {
|
|
const instance = finishedWork.stateNode;
|
|
if (finishedWork.flags & Update) {
|
|
if (current === null) {
|
|
// We could update instance props and state here,
|
|
// but instead we rely on them being set during last render.
|
|
// TODO: revisit this when we implement resuming.
|
|
if (__DEV__) {
|
|
if (
|
|
finishedWork.type === finishedWork.elementType &&
|
|
!didWarnAboutReassigningProps
|
|
) {
|
|
if (instance.props !== finishedWork.memoizedProps) {
|
|
console.error(
|
|
'Expected %s props to match memoized props before ' +
|
|
'componentDidMount. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.props`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
if (instance.state !== finishedWork.memoizedState) {
|
|
console.error(
|
|
'Expected %s state to match memoized state before ' +
|
|
'componentDidMount. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.state`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
instance.componentDidMount();
|
|
} finally {
|
|
recordLayoutEffectDuration(finishedWork);
|
|
}
|
|
} else {
|
|
instance.componentDidMount();
|
|
}
|
|
} else {
|
|
const prevProps =
|
|
finishedWork.elementType === finishedWork.type
|
|
? current.memoizedProps
|
|
: resolveDefaultProps(finishedWork.type, current.memoizedProps);
|
|
const prevState = current.memoizedState;
|
|
// We could update instance props and state here,
|
|
// but instead we rely on them being set during last render.
|
|
// TODO: revisit this when we implement resuming.
|
|
if (__DEV__) {
|
|
if (
|
|
finishedWork.type === finishedWork.elementType &&
|
|
!didWarnAboutReassigningProps
|
|
) {
|
|
if (instance.props !== finishedWork.memoizedProps) {
|
|
console.error(
|
|
'Expected %s props to match memoized props before ' +
|
|
'componentDidUpdate. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.props`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
if (instance.state !== finishedWork.memoizedState) {
|
|
console.error(
|
|
'Expected %s state to match memoized state before ' +
|
|
'componentDidUpdate. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.state`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
instance.componentDidUpdate(
|
|
prevProps,
|
|
prevState,
|
|
instance.__reactInternalSnapshotBeforeUpdate,
|
|
);
|
|
} finally {
|
|
recordLayoutEffectDuration(finishedWork);
|
|
}
|
|
} else {
|
|
instance.componentDidUpdate(
|
|
prevProps,
|
|
prevState,
|
|
instance.__reactInternalSnapshotBeforeUpdate,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO: I think this is now always non-null by the time it reaches the
|
|
// commit phase. Consider removing the type check.
|
|
const updateQueue: UpdateQueue<
|
|
*,
|
|
> | null = (finishedWork.updateQueue: any);
|
|
if (updateQueue !== null) {
|
|
if (__DEV__) {
|
|
if (
|
|
finishedWork.type === finishedWork.elementType &&
|
|
!didWarnAboutReassigningProps
|
|
) {
|
|
if (instance.props !== finishedWork.memoizedProps) {
|
|
console.error(
|
|
'Expected %s props to match memoized props before ' +
|
|
'processing the update queue. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.props`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
if (instance.state !== finishedWork.memoizedState) {
|
|
console.error(
|
|
'Expected %s state to match memoized state before ' +
|
|
'processing the update queue. ' +
|
|
'This might either be because of a bug in React, or because ' +
|
|
'a component reassigns its own `this.state`. ' +
|
|
'Please file an issue.',
|
|
getComponentNameFromFiber(finishedWork) || 'instance',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
// We could update instance props and state here,
|
|
// but instead we rely on them being set during last render.
|
|
// TODO: revisit this when we implement resuming.
|
|
commitUpdateQueue(finishedWork, updateQueue, instance);
|
|
}
|
|
break;
|
|
}
|
|
case HostRoot: {
|
|
// TODO: I think this is now always non-null by the time it reaches the
|
|
// commit phase. Consider removing the type check.
|
|
const updateQueue: UpdateQueue<
|
|
*,
|
|
> | null = (finishedWork.updateQueue: any);
|
|
if (updateQueue !== null) {
|
|
let instance = null;
|
|
if (finishedWork.child !== null) {
|
|
switch (finishedWork.child.tag) {
|
|
case HostComponent:
|
|
instance = getPublicInstance(finishedWork.child.stateNode);
|
|
break;
|
|
case ClassComponent:
|
|
instance = finishedWork.child.stateNode;
|
|
break;
|
|
}
|
|
}
|
|
commitUpdateQueue(finishedWork, updateQueue, instance);
|
|
}
|
|
break;
|
|
}
|
|
case HostComponent: {
|
|
const instance: Instance = finishedWork.stateNode;
|
|
|
|
// Renderers may schedule work to be done after host components are mounted
|
|
// (eg DOM renderer may schedule auto-focus for inputs and form controls).
|
|
// These effects should only be committed when components are first mounted,
|
|
// aka when there is no current/alternate.
|
|
if (current === null && finishedWork.flags & Update) {
|
|
const type = finishedWork.type;
|
|
const props = finishedWork.memoizedProps;
|
|
commitMount(instance, type, props, finishedWork);
|
|
}
|
|
|
|
break;
|
|
}
|
|
case HostText: {
|
|
// We have no life-cycles associated with text.
|
|
break;
|
|
}
|
|
case HostPortal: {
|
|
// We have no life-cycles associated with portals.
|
|
break;
|
|
}
|
|
case Profiler: {
|
|
if (enableProfilerTimer) {
|
|
const {onCommit, onRender} = finishedWork.memoizedProps;
|
|
const {effectDuration} = finishedWork.stateNode;
|
|
|
|
const commitTime = getCommitTime();
|
|
|
|
let phase = current === null ? 'mount' : 'update';
|
|
if (enableProfilerNestedUpdatePhase) {
|
|
if (isCurrentUpdateNested()) {
|
|
phase = 'nested-update';
|
|
}
|
|
}
|
|
|
|
if (typeof onRender === 'function') {
|
|
onRender(
|
|
finishedWork.memoizedProps.id,
|
|
phase,
|
|
finishedWork.actualDuration,
|
|
finishedWork.treeBaseDuration,
|
|
finishedWork.actualStartTime,
|
|
commitTime,
|
|
);
|
|
}
|
|
|
|
if (enableProfilerCommitHooks) {
|
|
if (typeof onCommit === 'function') {
|
|
onCommit(
|
|
finishedWork.memoizedProps.id,
|
|
phase,
|
|
effectDuration,
|
|
commitTime,
|
|
);
|
|
}
|
|
|
|
// Schedule a passive effect for this Profiler to call onPostCommit hooks.
|
|
// This effect should be scheduled even if there is no onPostCommit callback for this Profiler,
|
|
// because the effect is also where times bubble to parent Profilers.
|
|
enqueuePendingPassiveProfilerEffect(finishedWork);
|
|
|
|
// Propagate layout effect durations to the next nearest Profiler ancestor.
|
|
// Do not reset these values until the next render so DevTools has a chance to read them first.
|
|
let parentFiber = finishedWork.return;
|
|
outer: while (parentFiber !== null) {
|
|
switch (parentFiber.tag) {
|
|
case HostRoot:
|
|
const root = parentFiber.stateNode;
|
|
root.effectDuration += effectDuration;
|
|
break outer;
|
|
case Profiler:
|
|
const parentStateNode = parentFiber.stateNode;
|
|
parentStateNode.effectDuration += effectDuration;
|
|
break outer;
|
|
}
|
|
parentFiber = parentFiber.return;
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
case SuspenseComponent: {
|
|
commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
|
|
break;
|
|
}
|
|
case SuspenseListComponent:
|
|
case IncompleteClassComponent:
|
|
case ScopeComponent:
|
|
case OffscreenComponent:
|
|
case LegacyHiddenComponent:
|
|
break;
|
|
default:
|
|
invariant(
|
|
false,
|
|
'This unit of work tag should not have side-effects. This error is ' +
|
|
'likely caused by a bug in React. Please file an issue.',
|
|
);
|
|
}
|
|
}
|
|
|
|
if (enableScopeAPI) {
|
|
// TODO: This is a temporary solution that allowed us to transition away
|
|
// from React Flare on www.
|
|
if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
|
|
commitAttachRef(finishedWork);
|
|
}
|
|
} else {
|
|
if (finishedWork.flags & Ref) {
|
|
commitAttachRef(finishedWork);
|
|
}
|
|
}
|
|
}
|
|
|
|
function hideOrUnhideAllChildren(finishedWork, isHidden) {
|
|
// Suspense layout effects semantics don't change for legacy roots.
|
|
const isModernRoot = (finishedWork.mode & ConcurrentMode) !== NoMode;
|
|
|
|
const current = finishedWork.alternate;
|
|
const wasHidden = current !== null && current.memoizedState !== null;
|
|
|
|
// Only hide or unhide the top-most host nodes.
|
|
let hostSubtreeRoot = null;
|
|
|
|
if (supportsMutation) {
|
|
// We only have the top Fiber that was inserted but we need to recurse down its
|
|
// children to find all the terminal nodes.
|
|
let node: Fiber = finishedWork;
|
|
while (true) {
|
|
if (node.tag === HostComponent) {
|
|
if (hostSubtreeRoot === null) {
|
|
hostSubtreeRoot = node;
|
|
|
|
const instance = node.stateNode;
|
|
if (isHidden) {
|
|
hideInstance(instance);
|
|
} else {
|
|
unhideInstance(node.stateNode, node.memoizedProps);
|
|
}
|
|
}
|
|
|
|
if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
|
|
// This method is called during mutation; it should detach refs within a hidden subtree.
|
|
// Attaching refs should be done elsewhere though (during layout).
|
|
// TODO (Offscreen) Also check: flags & RefStatic
|
|
if (isHidden) {
|
|
safelyDetachRef(node, finishedWork);
|
|
}
|
|
|
|
// TODO (Offscreen) Also check: subtreeFlags & (RefStatic | LayoutStatic)
|
|
if (node.child !== null) {
|
|
node.child.return = node;
|
|
node = node.child;
|
|
continue;
|
|
}
|
|
}
|
|
} else if (node.tag === HostText) {
|
|
if (hostSubtreeRoot === null) {
|
|
const instance = node.stateNode;
|
|
if (isHidden) {
|
|
hideTextInstance(instance);
|
|
} else {
|
|
unhideTextInstance(instance, node.memoizedProps);
|
|
}
|
|
}
|
|
} else if (
|
|
(node.tag === OffscreenComponent ||
|
|
node.tag === LegacyHiddenComponent) &&
|
|
(node.memoizedState: OffscreenState) !== null &&
|
|
node !== finishedWork
|
|
) {
|
|
// Found a nested Offscreen component that is hidden.
|
|
// Don't search any deeper. This tree should remain hidden.
|
|
} else if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
|
|
// When a mounted Suspense subtree gets hidden again, destroy any nested layout effects.
|
|
// TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
|
|
switch (node.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case MemoComponent:
|
|
case SimpleMemoComponent: {
|
|
// Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
|
|
if (isHidden && !wasHidden) {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
node.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
commitHookEffectListUnmount(HookLayout, node, finishedWork);
|
|
} finally {
|
|
recordLayoutEffectDuration(node);
|
|
}
|
|
} else {
|
|
commitHookEffectListUnmount(HookLayout, node, finishedWork);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
case ClassComponent: {
|
|
if (isHidden && !wasHidden) {
|
|
// TODO (Offscreen) Check: flags & RefStatic
|
|
safelyDetachRef(node, finishedWork);
|
|
|
|
const instance = node.stateNode;
|
|
if (typeof instance.componentWillUnmount === 'function') {
|
|
safelyCallComponentWillUnmount(node, finishedWork, instance);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (node.child !== null) {
|
|
node.child.return = node;
|
|
node = node.child;
|
|
continue;
|
|
}
|
|
} else if (node.child !== null) {
|
|
node.child.return = node;
|
|
node = node.child;
|
|
continue;
|
|
}
|
|
|
|
if (node === finishedWork) {
|
|
return;
|
|
}
|
|
while (node.sibling === null) {
|
|
if (node.return === null || node.return === finishedWork) {
|
|
return;
|
|
}
|
|
|
|
if (hostSubtreeRoot === node) {
|
|
hostSubtreeRoot = null;
|
|
}
|
|
|
|
node = node.return;
|
|
}
|
|
|
|
if (hostSubtreeRoot === node) {
|
|
hostSubtreeRoot = null;
|
|
}
|
|
|
|
node.sibling.return = node.return;
|
|
node = node.sibling;
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitAttachRef(finishedWork: Fiber) {
|
|
const ref = finishedWork.ref;
|
|
if (ref !== null) {
|
|
const instance = finishedWork.stateNode;
|
|
let instanceToUse;
|
|
switch (finishedWork.tag) {
|
|
case HostComponent:
|
|
instanceToUse = getPublicInstance(instance);
|
|
break;
|
|
default:
|
|
instanceToUse = instance;
|
|
}
|
|
// Moved outside to ensure DCE works with this flag
|
|
if (enableScopeAPI && finishedWork.tag === ScopeComponent) {
|
|
instanceToUse = instance;
|
|
}
|
|
if (typeof ref === 'function') {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
ref(instanceToUse);
|
|
} finally {
|
|
recordLayoutEffectDuration(finishedWork);
|
|
}
|
|
} else {
|
|
ref(instanceToUse);
|
|
}
|
|
} else {
|
|
if (__DEV__) {
|
|
if (!ref.hasOwnProperty('current')) {
|
|
console.error(
|
|
'Unexpected ref object provided for %s. ' +
|
|
'Use either a ref-setter function or React.createRef().',
|
|
getComponentNameFromFiber(finishedWork),
|
|
);
|
|
}
|
|
}
|
|
|
|
ref.current = instanceToUse;
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitDetachRef(current: Fiber) {
|
|
const currentRef = current.ref;
|
|
if (currentRef !== null) {
|
|
if (typeof currentRef === 'function') {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
current.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
currentRef(null);
|
|
} finally {
|
|
recordLayoutEffectDuration(current);
|
|
}
|
|
} else {
|
|
currentRef(null);
|
|
}
|
|
} else {
|
|
currentRef.current = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// User-originating errors (lifecycles and refs) should not interrupt
|
|
// deletion, so don't let them throw. Host-originating errors should
|
|
// interrupt deletion, so it's okay
|
|
function commitUnmount(
|
|
finishedRoot: FiberRoot,
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber,
|
|
): void {
|
|
onCommitUnmount(current);
|
|
|
|
switch (current.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case MemoComponent:
|
|
case SimpleMemoComponent: {
|
|
const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
|
|
if (updateQueue !== null) {
|
|
const lastEffect = updateQueue.lastEffect;
|
|
if (lastEffect !== null) {
|
|
const firstEffect = lastEffect.next;
|
|
|
|
let effect = firstEffect;
|
|
do {
|
|
const {destroy, tag} = effect;
|
|
if (destroy !== undefined) {
|
|
if ((tag & HookLayout) !== NoHookEffect) {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
current.mode & ProfileMode
|
|
) {
|
|
startLayoutEffectTimer();
|
|
safelyCallDestroy(current, nearestMountedAncestor, destroy);
|
|
recordLayoutEffectDuration(current);
|
|
} else {
|
|
safelyCallDestroy(current, nearestMountedAncestor, destroy);
|
|
}
|
|
}
|
|
}
|
|
effect = effect.next;
|
|
} while (effect !== firstEffect);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
case ClassComponent: {
|
|
safelyDetachRef(current, nearestMountedAncestor);
|
|
const instance = current.stateNode;
|
|
if (typeof instance.componentWillUnmount === 'function') {
|
|
safelyCallComponentWillUnmount(
|
|
current,
|
|
nearestMountedAncestor,
|
|
instance,
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
case HostComponent: {
|
|
safelyDetachRef(current, nearestMountedAncestor);
|
|
return;
|
|
}
|
|
case HostPortal: {
|
|
// TODO: this is recursive.
|
|
// We are also not using this parent because
|
|
// the portal will get pushed immediately.
|
|
if (supportsMutation) {
|
|
unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
|
|
} else if (supportsPersistence) {
|
|
emptyPortalContainer(current);
|
|
}
|
|
return;
|
|
}
|
|
case DehydratedFragment: {
|
|
if (enableSuspenseCallback) {
|
|
const hydrationCallbacks = finishedRoot.hydrationCallbacks;
|
|
if (hydrationCallbacks !== null) {
|
|
const onDeleted = hydrationCallbacks.onDeleted;
|
|
if (onDeleted) {
|
|
onDeleted((current.stateNode: SuspenseInstance));
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
case ScopeComponent: {
|
|
if (enableScopeAPI) {
|
|
safelyDetachRef(current, nearestMountedAncestor);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitNestedUnmounts(
|
|
finishedRoot: FiberRoot,
|
|
root: Fiber,
|
|
nearestMountedAncestor: Fiber,
|
|
): void {
|
|
// While we're inside a removed host node we don't want to call
|
|
// removeChild on the inner nodes because they're removed by the top
|
|
// call anyway. We also want to call componentWillUnmount on all
|
|
// composites before this host node is removed from the tree. Therefore
|
|
// we do an inner loop while we're still inside the host node.
|
|
let node: Fiber = root;
|
|
while (true) {
|
|
commitUnmount(finishedRoot, node, nearestMountedAncestor);
|
|
// Visit children because they may contain more composite or host nodes.
|
|
// Skip portals because commitUnmount() currently visits them recursively.
|
|
if (
|
|
node.child !== null &&
|
|
// If we use mutation we drill down into portals using commitUnmount above.
|
|
// If we don't use mutation we drill down into portals here instead.
|
|
(!supportsMutation || node.tag !== HostPortal)
|
|
) {
|
|
node.child.return = node;
|
|
node = node.child;
|
|
continue;
|
|
}
|
|
if (node === root) {
|
|
return;
|
|
}
|
|
while (node.sibling === null) {
|
|
if (node.return === null || node.return === root) {
|
|
return;
|
|
}
|
|
node = node.return;
|
|
}
|
|
node.sibling.return = node.return;
|
|
node = node.sibling;
|
|
}
|
|
}
|
|
|
|
function detachFiberMutation(fiber: Fiber) {
|
|
// Cut off the return pointer to disconnect it from the tree.
|
|
// This enables us to detect and warn against state updates on an unmounted component.
|
|
// It also prevents events from bubbling from within disconnected components.
|
|
//
|
|
// Ideally, we should also clear the child pointer of the parent alternate to let this
|
|
// get GC:ed but we don't know which for sure which parent is the current
|
|
// one so we'll settle for GC:ing the subtree of this child.
|
|
// This child itself will be GC:ed when the parent updates the next time.
|
|
//
|
|
// Note that we can't clear child or sibling pointers yet.
|
|
// They're needed for passive effects and for findDOMNode.
|
|
// We defer those fields, and all other cleanup, to the passive phase (see detachFiberAfterEffects).
|
|
//
|
|
// Don't reset the alternate yet, either. We need that so we can detach the
|
|
// alternate's fields in the passive phase. Clearing the return pointer is
|
|
// sufficient for findDOMNode semantics.
|
|
const alternate = fiber.alternate;
|
|
if (alternate !== null) {
|
|
alternate.return = null;
|
|
}
|
|
fiber.return = null;
|
|
}
|
|
|
|
function detachFiberAfterEffects(fiber: Fiber) {
|
|
const alternate = fiber.alternate;
|
|
if (alternate !== null) {
|
|
fiber.alternate = null;
|
|
detachFiberAfterEffects(alternate);
|
|
}
|
|
|
|
// Note: Defensively using negation instead of < in case
|
|
// `deletedTreeCleanUpLevel` is undefined.
|
|
if (!(deletedTreeCleanUpLevel >= 2)) {
|
|
// This is the default branch (level 0).
|
|
fiber.child = null;
|
|
fiber.deletions = null;
|
|
fiber.dependencies = null;
|
|
fiber.memoizedProps = null;
|
|
fiber.memoizedState = null;
|
|
fiber.pendingProps = null;
|
|
fiber.sibling = null;
|
|
fiber.stateNode = null;
|
|
fiber.updateQueue = null;
|
|
|
|
if (__DEV__) {
|
|
fiber._debugOwner = null;
|
|
}
|
|
} else {
|
|
// Clear cyclical Fiber fields. This level alone is designed to roughly
|
|
// approximate the planned Fiber refactor. In that world, `setState` will be
|
|
// bound to a special "instance" object instead of a Fiber. The Instance
|
|
// object will not have any of these fields. It will only be connected to
|
|
// the fiber tree via a single link at the root. So if this level alone is
|
|
// sufficient to fix memory issues, that bodes well for our plans.
|
|
fiber.child = null;
|
|
fiber.deletions = null;
|
|
fiber.sibling = null;
|
|
|
|
// The `stateNode` is cyclical because on host nodes it points to the host
|
|
// tree, which has its own pointers to children, parents, and siblings.
|
|
// The other host nodes also point back to fibers, so we should detach that
|
|
// one, too.
|
|
if (fiber.tag === HostComponent) {
|
|
const hostInstance: Instance = fiber.stateNode;
|
|
if (hostInstance !== null) {
|
|
detachDeletedInstance(hostInstance);
|
|
}
|
|
}
|
|
fiber.stateNode = null;
|
|
|
|
// I'm intentionally not clearing the `return` field in this level. We
|
|
// already disconnect the `return` pointer at the root of the deleted
|
|
// subtree (in `detachFiberMutation`). Besides, `return` by itself is not
|
|
// cyclical — it's only cyclical when combined with `child`, `sibling`, and
|
|
// `alternate`. But we'll clear it in the next level anyway, just in case.
|
|
|
|
if (__DEV__) {
|
|
fiber._debugOwner = null;
|
|
}
|
|
|
|
if (deletedTreeCleanUpLevel >= 3) {
|
|
// Theoretically, nothing in here should be necessary, because we already
|
|
// disconnected the fiber from the tree. So even if something leaks this
|
|
// particular fiber, it won't leak anything else
|
|
//
|
|
// The purpose of this branch is to be super aggressive so we can measure
|
|
// if there's any difference in memory impact. If there is, that could
|
|
// indicate a React leak we don't know about.
|
|
fiber.return = null;
|
|
fiber.dependencies = null;
|
|
fiber.memoizedProps = null;
|
|
fiber.memoizedState = null;
|
|
fiber.pendingProps = null;
|
|
fiber.stateNode = null;
|
|
// TODO: Move to `commitPassiveUnmountInsideDeletedTreeOnFiber` instead.
|
|
fiber.updateQueue = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
function emptyPortalContainer(current: Fiber) {
|
|
if (!supportsPersistence) {
|
|
return;
|
|
}
|
|
|
|
const portal: {
|
|
containerInfo: Container,
|
|
pendingChildren: ChildSet,
|
|
...
|
|
} = current.stateNode;
|
|
const {containerInfo} = portal;
|
|
const emptyChildSet = createContainerChildSet(containerInfo);
|
|
replaceContainerChildren(containerInfo, emptyChildSet);
|
|
}
|
|
|
|
function commitContainer(finishedWork: Fiber) {
|
|
if (!supportsPersistence) {
|
|
return;
|
|
}
|
|
|
|
switch (finishedWork.tag) {
|
|
case ClassComponent:
|
|
case HostComponent:
|
|
case HostText: {
|
|
return;
|
|
}
|
|
case HostRoot:
|
|
case HostPortal: {
|
|
const portalOrRoot: {
|
|
containerInfo: Container,
|
|
pendingChildren: ChildSet,
|
|
...
|
|
} = finishedWork.stateNode;
|
|
const {containerInfo, pendingChildren} = portalOrRoot;
|
|
replaceContainerChildren(containerInfo, pendingChildren);
|
|
return;
|
|
}
|
|
}
|
|
invariant(
|
|
false,
|
|
'This unit of work tag should not have side-effects. This error is ' +
|
|
'likely caused by a bug in React. Please file an issue.',
|
|
);
|
|
}
|
|
|
|
function getHostParentFiber(fiber: Fiber): Fiber {
|
|
let parent = fiber.return;
|
|
while (parent !== null) {
|
|
if (isHostParent(parent)) {
|
|
return parent;
|
|
}
|
|
parent = parent.return;
|
|
}
|
|
invariant(
|
|
false,
|
|
'Expected to find a host parent. This error is likely caused by a bug ' +
|
|
'in React. Please file an issue.',
|
|
);
|
|
}
|
|
|
|
function isHostParent(fiber: Fiber): boolean {
|
|
return (
|
|
fiber.tag === HostComponent ||
|
|
fiber.tag === HostRoot ||
|
|
fiber.tag === HostPortal
|
|
);
|
|
}
|
|
|
|
function getHostSibling(fiber: Fiber): ?Instance {
|
|
// We're going to search forward into the tree until we find a sibling host
|
|
// node. Unfortunately, if multiple insertions are done in a row we have to
|
|
// search past them. This leads to exponential search for the next sibling.
|
|
// TODO: Find a more efficient way to do this.
|
|
let node: Fiber = fiber;
|
|
siblings: while (true) {
|
|
// If we didn't find anything, let's try the next sibling.
|
|
while (node.sibling === null) {
|
|
if (node.return === null || isHostParent(node.return)) {
|
|
// If we pop out of the root or hit the parent the fiber we are the
|
|
// last sibling.
|
|
return null;
|
|
}
|
|
node = node.return;
|
|
}
|
|
node.sibling.return = node.return;
|
|
node = node.sibling;
|
|
while (
|
|
node.tag !== HostComponent &&
|
|
node.tag !== HostText &&
|
|
node.tag !== DehydratedFragment
|
|
) {
|
|
// If it is not host node and, we might have a host node inside it.
|
|
// Try to search down until we find one.
|
|
if (node.flags & Placement) {
|
|
// If we don't have a child, try the siblings instead.
|
|
continue siblings;
|
|
}
|
|
// If we don't have a child, try the siblings instead.
|
|
// We also skip portals because they are not part of this host tree.
|
|
if (node.child === null || node.tag === HostPortal) {
|
|
continue siblings;
|
|
} else {
|
|
node.child.return = node;
|
|
node = node.child;
|
|
}
|
|
}
|
|
// Check if this host node is stable or about to be placed.
|
|
if (!(node.flags & Placement)) {
|
|
// Found it!
|
|
return node.stateNode;
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitPlacement(finishedWork: Fiber): void {
|
|
if (!supportsMutation) {
|
|
return;
|
|
}
|
|
|
|
// Recursively insert all host nodes into the parent.
|
|
const parentFiber = getHostParentFiber(finishedWork);
|
|
|
|
// Note: these two variables *must* always be updated together.
|
|
let parent;
|
|
let isContainer;
|
|
const parentStateNode = parentFiber.stateNode;
|
|
switch (parentFiber.tag) {
|
|
case HostComponent:
|
|
parent = parentStateNode;
|
|
isContainer = false;
|
|
break;
|
|
case HostRoot:
|
|
parent = parentStateNode.containerInfo;
|
|
isContainer = true;
|
|
break;
|
|
case HostPortal:
|
|
parent = parentStateNode.containerInfo;
|
|
isContainer = true;
|
|
break;
|
|
// eslint-disable-next-line-no-fallthrough
|
|
default:
|
|
invariant(
|
|
false,
|
|
'Invalid host parent fiber. This error is likely caused by a bug ' +
|
|
'in React. Please file an issue.',
|
|
);
|
|
}
|
|
if (parentFiber.flags & ContentReset) {
|
|
// Reset the text content of the parent before doing any insertions
|
|
resetTextContent(parent);
|
|
// Clear ContentReset from the effect tag
|
|
parentFiber.flags &= ~ContentReset;
|
|
}
|
|
|
|
const before = getHostSibling(finishedWork);
|
|
// We only have the top Fiber that was inserted but we need to recurse down its
|
|
// children to find all the terminal nodes.
|
|
if (isContainer) {
|
|
insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
|
|
} else {
|
|
insertOrAppendPlacementNode(finishedWork, before, parent);
|
|
}
|
|
}
|
|
|
|
function insertOrAppendPlacementNodeIntoContainer(
|
|
node: Fiber,
|
|
before: ?Instance,
|
|
parent: Container,
|
|
): void {
|
|
const {tag} = node;
|
|
const isHost = tag === HostComponent || tag === HostText;
|
|
if (isHost) {
|
|
const stateNode = node.stateNode;
|
|
if (before) {
|
|
insertInContainerBefore(parent, stateNode, before);
|
|
} else {
|
|
appendChildToContainer(parent, stateNode);
|
|
}
|
|
} else if (tag === HostPortal) {
|
|
// If the insertion itself is a portal, then we don't want to traverse
|
|
// down its children. Instead, we'll get insertions from each child in
|
|
// the portal directly.
|
|
} else {
|
|
const child = node.child;
|
|
if (child !== null) {
|
|
insertOrAppendPlacementNodeIntoContainer(child, before, parent);
|
|
let sibling = child.sibling;
|
|
while (sibling !== null) {
|
|
insertOrAppendPlacementNodeIntoContainer(sibling, before, parent);
|
|
sibling = sibling.sibling;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function insertOrAppendPlacementNode(
|
|
node: Fiber,
|
|
before: ?Instance,
|
|
parent: Instance,
|
|
): void {
|
|
const {tag} = node;
|
|
const isHost = tag === HostComponent || tag === HostText;
|
|
if (isHost) {
|
|
const stateNode = node.stateNode;
|
|
if (before) {
|
|
insertBefore(parent, stateNode, before);
|
|
} else {
|
|
appendChild(parent, stateNode);
|
|
}
|
|
} else if (tag === HostPortal) {
|
|
// If the insertion itself is a portal, then we don't want to traverse
|
|
// down its children. Instead, we'll get insertions from each child in
|
|
// the portal directly.
|
|
} else {
|
|
const child = node.child;
|
|
if (child !== null) {
|
|
insertOrAppendPlacementNode(child, before, parent);
|
|
let sibling = child.sibling;
|
|
while (sibling !== null) {
|
|
insertOrAppendPlacementNode(sibling, before, parent);
|
|
sibling = sibling.sibling;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function unmountHostComponents(
|
|
finishedRoot: FiberRoot,
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber,
|
|
): void {
|
|
// We only have the top Fiber that was deleted but we need to recurse down its
|
|
// children to find all the terminal nodes.
|
|
let node: Fiber = current;
|
|
|
|
// Each iteration, currentParent is populated with node's host parent if not
|
|
// currentParentIsValid.
|
|
let currentParentIsValid = false;
|
|
|
|
// Note: these two variables *must* always be updated together.
|
|
let currentParent;
|
|
let currentParentIsContainer;
|
|
|
|
while (true) {
|
|
if (!currentParentIsValid) {
|
|
let parent = node.return;
|
|
findParent: while (true) {
|
|
invariant(
|
|
parent !== null,
|
|
'Expected to find a host parent. This error is likely caused by ' +
|
|
'a bug in React. Please file an issue.',
|
|
);
|
|
const parentStateNode = parent.stateNode;
|
|
switch (parent.tag) {
|
|
case HostComponent:
|
|
currentParent = parentStateNode;
|
|
currentParentIsContainer = false;
|
|
break findParent;
|
|
case HostRoot:
|
|
currentParent = parentStateNode.containerInfo;
|
|
currentParentIsContainer = true;
|
|
break findParent;
|
|
case HostPortal:
|
|
currentParent = parentStateNode.containerInfo;
|
|
currentParentIsContainer = true;
|
|
break findParent;
|
|
}
|
|
parent = parent.return;
|
|
}
|
|
currentParentIsValid = true;
|
|
}
|
|
|
|
if (node.tag === HostComponent || node.tag === HostText) {
|
|
commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor);
|
|
// After all the children have unmounted, it is now safe to remove the
|
|
// node from the tree.
|
|
if (currentParentIsContainer) {
|
|
removeChildFromContainer(
|
|
((currentParent: any): Container),
|
|
(node.stateNode: Instance | TextInstance),
|
|
);
|
|
} else {
|
|
removeChild(
|
|
((currentParent: any): Instance),
|
|
(node.stateNode: Instance | TextInstance),
|
|
);
|
|
}
|
|
// Don't visit children because we already visited them.
|
|
} else if (
|
|
enableSuspenseServerRenderer &&
|
|
node.tag === DehydratedFragment
|
|
) {
|
|
if (enableSuspenseCallback) {
|
|
const hydrationCallbacks = finishedRoot.hydrationCallbacks;
|
|
if (hydrationCallbacks !== null) {
|
|
const onDeleted = hydrationCallbacks.onDeleted;
|
|
if (onDeleted) {
|
|
onDeleted((node.stateNode: SuspenseInstance));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Delete the dehydrated suspense boundary and all of its content.
|
|
if (currentParentIsContainer) {
|
|
clearSuspenseBoundaryFromContainer(
|
|
((currentParent: any): Container),
|
|
(node.stateNode: SuspenseInstance),
|
|
);
|
|
} else {
|
|
clearSuspenseBoundary(
|
|
((currentParent: any): Instance),
|
|
(node.stateNode: SuspenseInstance),
|
|
);
|
|
}
|
|
} else if (node.tag === HostPortal) {
|
|
if (node.child !== null) {
|
|
// When we go into a portal, it becomes the parent to remove from.
|
|
// We will reassign it back when we pop the portal on the way up.
|
|
currentParent = node.stateNode.containerInfo;
|
|
currentParentIsContainer = true;
|
|
// Visit children because portals might contain host components.
|
|
node.child.return = node;
|
|
node = node.child;
|
|
continue;
|
|
}
|
|
} else {
|
|
commitUnmount(finishedRoot, node, nearestMountedAncestor);
|
|
// Visit children because we may find more host components below.
|
|
if (node.child !== null) {
|
|
node.child.return = node;
|
|
node = node.child;
|
|
continue;
|
|
}
|
|
}
|
|
if (node === current) {
|
|
return;
|
|
}
|
|
while (node.sibling === null) {
|
|
if (node.return === null || node.return === current) {
|
|
return;
|
|
}
|
|
node = node.return;
|
|
if (node.tag === HostPortal) {
|
|
// When we go out of the portal, we need to restore the parent.
|
|
// Since we don't keep a stack of them, we will search for it.
|
|
currentParentIsValid = false;
|
|
}
|
|
}
|
|
node.sibling.return = node.return;
|
|
node = node.sibling;
|
|
}
|
|
}
|
|
|
|
function commitDeletion(
|
|
finishedRoot: FiberRoot,
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber,
|
|
): void {
|
|
if (supportsMutation) {
|
|
// Recursively delete all host nodes from the parent.
|
|
// Detach refs and call componentWillUnmount() on the whole subtree.
|
|
unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
|
|
} else {
|
|
// Detach refs and call componentWillUnmount() on the whole subtree.
|
|
commitNestedUnmounts(finishedRoot, current, nearestMountedAncestor);
|
|
}
|
|
|
|
detachFiberMutation(current);
|
|
}
|
|
|
|
function commitWork(current: Fiber | null, finishedWork: Fiber): void {
|
|
if (!supportsMutation) {
|
|
switch (finishedWork.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case MemoComponent:
|
|
case SimpleMemoComponent: {
|
|
// Layout effects are destroyed during the mutation phase so that all
|
|
// destroy functions for all fibers are called before any create functions.
|
|
// This prevents sibling component effects from interfering with each other,
|
|
// e.g. a destroy function in one component should never override a ref set
|
|
// by a create function in another component during the same commit.
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
commitHookEffectListUnmount(
|
|
HookLayout | HookHasEffect,
|
|
finishedWork,
|
|
finishedWork.return,
|
|
);
|
|
} finally {
|
|
recordLayoutEffectDuration(finishedWork);
|
|
}
|
|
} else {
|
|
commitHookEffectListUnmount(
|
|
HookLayout | HookHasEffect,
|
|
finishedWork,
|
|
finishedWork.return,
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
case Profiler: {
|
|
return;
|
|
}
|
|
case SuspenseComponent: {
|
|
commitSuspenseComponent(finishedWork);
|
|
attachSuspenseRetryListeners(finishedWork);
|
|
return;
|
|
}
|
|
case SuspenseListComponent: {
|
|
attachSuspenseRetryListeners(finishedWork);
|
|
return;
|
|
}
|
|
case HostRoot: {
|
|
if (supportsHydration) {
|
|
const root: FiberRoot = finishedWork.stateNode;
|
|
if (root.hydrate) {
|
|
// We've just hydrated. No need to hydrate again.
|
|
root.hydrate = false;
|
|
commitHydratedContainer(root.containerInfo);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
case OffscreenComponent:
|
|
case LegacyHiddenComponent: {
|
|
return;
|
|
}
|
|
}
|
|
|
|
commitContainer(finishedWork);
|
|
return;
|
|
}
|
|
|
|
switch (finishedWork.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case MemoComponent:
|
|
case SimpleMemoComponent: {
|
|
// Layout effects are destroyed during the mutation phase so that all
|
|
// destroy functions for all fibers are called before any create functions.
|
|
// This prevents sibling component effects from interfering with each other,
|
|
// e.g. a destroy function in one component should never override a ref set
|
|
// by a create function in another component during the same commit.
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
commitHookEffectListUnmount(
|
|
HookLayout | HookHasEffect,
|
|
finishedWork,
|
|
finishedWork.return,
|
|
);
|
|
} finally {
|
|
recordLayoutEffectDuration(finishedWork);
|
|
}
|
|
} else {
|
|
commitHookEffectListUnmount(
|
|
HookLayout | HookHasEffect,
|
|
finishedWork,
|
|
finishedWork.return,
|
|
);
|
|
}
|
|
return;
|
|
}
|
|
case ClassComponent: {
|
|
return;
|
|
}
|
|
case HostComponent: {
|
|
const instance: Instance = finishedWork.stateNode;
|
|
if (instance != null) {
|
|
// Commit the work prepared earlier.
|
|
const newProps = finishedWork.memoizedProps;
|
|
// For hydration we reuse the update path but we treat the oldProps
|
|
// as the newProps. The updatePayload will contain the real change in
|
|
// this case.
|
|
const oldProps = current !== null ? current.memoizedProps : newProps;
|
|
const type = finishedWork.type;
|
|
// TODO: Type the updateQueue to be specific to host components.
|
|
const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
|
|
finishedWork.updateQueue = null;
|
|
if (updatePayload !== null) {
|
|
commitUpdate(
|
|
instance,
|
|
updatePayload,
|
|
type,
|
|
oldProps,
|
|
newProps,
|
|
finishedWork,
|
|
);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
case HostText: {
|
|
invariant(
|
|
finishedWork.stateNode !== null,
|
|
'This should have a text node initialized. This error is likely ' +
|
|
'caused by a bug in React. Please file an issue.',
|
|
);
|
|
const textInstance: TextInstance = finishedWork.stateNode;
|
|
const newText: string = finishedWork.memoizedProps;
|
|
// For hydration we reuse the update path but we treat the oldProps
|
|
// as the newProps. The updatePayload will contain the real change in
|
|
// this case.
|
|
const oldText: string =
|
|
current !== null ? current.memoizedProps : newText;
|
|
commitTextUpdate(textInstance, oldText, newText);
|
|
return;
|
|
}
|
|
case HostRoot: {
|
|
if (supportsHydration) {
|
|
const root: FiberRoot = finishedWork.stateNode;
|
|
if (root.hydrate) {
|
|
// We've just hydrated. No need to hydrate again.
|
|
root.hydrate = false;
|
|
commitHydratedContainer(root.containerInfo);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
case Profiler: {
|
|
return;
|
|
}
|
|
case SuspenseComponent: {
|
|
commitSuspenseComponent(finishedWork);
|
|
attachSuspenseRetryListeners(finishedWork);
|
|
return;
|
|
}
|
|
case SuspenseListComponent: {
|
|
attachSuspenseRetryListeners(finishedWork);
|
|
return;
|
|
}
|
|
case IncompleteClassComponent: {
|
|
return;
|
|
}
|
|
case ScopeComponent: {
|
|
if (enableScopeAPI) {
|
|
const scopeInstance = finishedWork.stateNode;
|
|
prepareScopeUpdate(scopeInstance, finishedWork);
|
|
return;
|
|
}
|
|
break;
|
|
}
|
|
case OffscreenComponent:
|
|
case LegacyHiddenComponent: {
|
|
const newState: OffscreenState | null = finishedWork.memoizedState;
|
|
const isHidden = newState !== null;
|
|
hideOrUnhideAllChildren(finishedWork, isHidden);
|
|
return;
|
|
}
|
|
}
|
|
invariant(
|
|
false,
|
|
'This unit of work tag should not have side-effects. This error is ' +
|
|
'likely caused by a bug in React. Please file an issue.',
|
|
);
|
|
}
|
|
|
|
function commitSuspenseComponent(finishedWork: Fiber) {
|
|
const newState: SuspenseState | null = finishedWork.memoizedState;
|
|
|
|
if (newState !== null) {
|
|
markCommitTimeOfFallback();
|
|
|
|
if (supportsMutation) {
|
|
// Hide the Offscreen component that contains the primary children. TODO:
|
|
// Ideally, this effect would have been scheduled on the Offscreen fiber
|
|
// itself. That's how unhiding works: the Offscreen component schedules an
|
|
// effect on itself. However, in this case, the component didn't complete,
|
|
// so the fiber was never added to the effect list in the normal path. We
|
|
// could have appended it to the effect list in the Suspense component's
|
|
// second pass, but doing it this way is less complicated. This would be
|
|
// simpler if we got rid of the effect list and traversed the tree, like
|
|
// we're planning to do.
|
|
const primaryChildParent: Fiber = (finishedWork.child: any);
|
|
hideOrUnhideAllChildren(primaryChildParent, true);
|
|
}
|
|
}
|
|
|
|
if (enableSuspenseCallback && newState !== null) {
|
|
const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;
|
|
if (typeof suspenseCallback === 'function') {
|
|
const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
|
|
if (wakeables !== null) {
|
|
suspenseCallback(new Set(wakeables));
|
|
}
|
|
} else if (__DEV__) {
|
|
if (suspenseCallback !== undefined) {
|
|
console.error('Unexpected type for suspenseCallback.');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitSuspenseHydrationCallbacks(
|
|
finishedRoot: FiberRoot,
|
|
finishedWork: Fiber,
|
|
) {
|
|
if (!supportsHydration) {
|
|
return;
|
|
}
|
|
const newState: SuspenseState | null = finishedWork.memoizedState;
|
|
if (newState === null) {
|
|
const current = finishedWork.alternate;
|
|
if (current !== null) {
|
|
const prevState: SuspenseState | null = current.memoizedState;
|
|
if (prevState !== null) {
|
|
const suspenseInstance = prevState.dehydrated;
|
|
if (suspenseInstance !== null) {
|
|
commitHydratedSuspenseInstance(suspenseInstance);
|
|
if (enableSuspenseCallback) {
|
|
const hydrationCallbacks = finishedRoot.hydrationCallbacks;
|
|
if (hydrationCallbacks !== null) {
|
|
const onHydrated = hydrationCallbacks.onHydrated;
|
|
if (onHydrated) {
|
|
onHydrated(suspenseInstance);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function attachSuspenseRetryListeners(finishedWork: Fiber) {
|
|
// If this boundary just timed out, then it will have a set of wakeables.
|
|
// For each wakeable, attach a listener so that when it resolves, React
|
|
// attempts to re-render the boundary in the primary (pre-timeout) state.
|
|
const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
|
|
if (wakeables !== null) {
|
|
finishedWork.updateQueue = null;
|
|
let retryCache = finishedWork.stateNode;
|
|
if (retryCache === null) {
|
|
retryCache = finishedWork.stateNode = new PossiblyWeakSet();
|
|
}
|
|
wakeables.forEach(wakeable => {
|
|
// Memoize using the boundary fiber to prevent redundant listeners.
|
|
const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
|
|
if (!retryCache.has(wakeable)) {
|
|
retryCache.add(wakeable);
|
|
|
|
if (enableUpdaterTracking) {
|
|
if (isDevToolsPresent) {
|
|
if (inProgressLanes !== null && inProgressRoot !== null) {
|
|
// If we have pending work still, associate the original updaters with it.
|
|
restorePendingUpdaters(inProgressRoot, inProgressLanes);
|
|
} else {
|
|
throw Error(
|
|
'Expected finished root and lanes to be set. This is a bug in React.',
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
wakeable.then(retry, retry);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// This function detects when a Suspense boundary goes from visible to hidden.
|
|
// It returns false if the boundary is already hidden.
|
|
// TODO: Use an effect tag.
|
|
export function isSuspenseBoundaryBeingHidden(
|
|
current: Fiber | null,
|
|
finishedWork: Fiber,
|
|
): boolean {
|
|
if (current !== null) {
|
|
const oldState: SuspenseState | null = current.memoizedState;
|
|
if (oldState === null || oldState.dehydrated !== null) {
|
|
const newState: SuspenseState | null = finishedWork.memoizedState;
|
|
return newState !== null && newState.dehydrated === null;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function commitResetTextContent(current: Fiber) {
|
|
if (!supportsMutation) {
|
|
return;
|
|
}
|
|
resetTextContent(current.stateNode);
|
|
}
|
|
|
|
export function commitMutationEffects(
|
|
root: FiberRoot,
|
|
firstChild: Fiber,
|
|
committedLanes: Lanes,
|
|
) {
|
|
inProgressLanes = committedLanes;
|
|
inProgressRoot = root;
|
|
nextEffect = firstChild;
|
|
|
|
commitMutationEffects_begin(root);
|
|
|
|
inProgressLanes = null;
|
|
inProgressRoot = null;
|
|
}
|
|
|
|
function commitMutationEffects_begin(root: FiberRoot) {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
|
|
// TODO: Should wrap this in flags check, too, as optimization
|
|
const deletions = fiber.deletions;
|
|
if (deletions !== null) {
|
|
for (let i = 0; i < deletions.length; i++) {
|
|
const childToDelete = deletions[i];
|
|
if (__DEV__) {
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitDeletion,
|
|
null,
|
|
root,
|
|
childToDelete,
|
|
fiber,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const error = clearCaughtError();
|
|
captureCommitPhaseError(childToDelete, fiber, error);
|
|
}
|
|
} else {
|
|
try {
|
|
commitDeletion(root, childToDelete, fiber);
|
|
} catch (error) {
|
|
captureCommitPhaseError(childToDelete, fiber, error);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const child = fiber.child;
|
|
if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
|
|
ensureCorrectReturnPointer(child, fiber);
|
|
nextEffect = child;
|
|
} else {
|
|
commitMutationEffects_complete(root);
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitMutationEffects_complete(root: FiberRoot) {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
if (__DEV__) {
|
|
setCurrentDebugFiberInDEV(fiber);
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitMutationEffectsOnFiber,
|
|
null,
|
|
fiber,
|
|
root,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const error = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
resetCurrentDebugFiberInDEV();
|
|
} else {
|
|
try {
|
|
commitMutationEffectsOnFiber(fiber, root);
|
|
} catch (error) {
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
}
|
|
|
|
const sibling = fiber.sibling;
|
|
if (sibling !== null) {
|
|
ensureCorrectReturnPointer(sibling, fiber.return);
|
|
nextEffect = sibling;
|
|
return;
|
|
}
|
|
|
|
nextEffect = fiber.return;
|
|
}
|
|
}
|
|
|
|
function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
|
|
const flags = finishedWork.flags;
|
|
|
|
if (flags & ContentReset) {
|
|
commitResetTextContent(finishedWork);
|
|
}
|
|
|
|
if (flags & Ref) {
|
|
const current = finishedWork.alternate;
|
|
if (current !== null) {
|
|
commitDetachRef(current);
|
|
}
|
|
if (enableScopeAPI) {
|
|
// TODO: This is a temporary solution that allowed us to transition away
|
|
// from React Flare on www.
|
|
if (finishedWork.tag === ScopeComponent) {
|
|
commitAttachRef(finishedWork);
|
|
}
|
|
}
|
|
}
|
|
|
|
// The following switch statement is only concerned about placement,
|
|
// updates, and deletions. To avoid needing to add a case for every possible
|
|
// bitmap value, we remove the secondary effects from the effect tag and
|
|
// switch on that value.
|
|
const primaryFlags = flags & (Placement | Update | Hydrating);
|
|
outer: switch (primaryFlags) {
|
|
case Placement: {
|
|
commitPlacement(finishedWork);
|
|
// Clear the "placement" from effect tag so that we know that this is
|
|
// inserted, before any life-cycles like componentDidMount gets called.
|
|
// TODO: findDOMNode doesn't rely on this any more but isMounted does
|
|
// and isMounted is deprecated anyway so we should be able to kill this.
|
|
finishedWork.flags &= ~Placement;
|
|
break;
|
|
}
|
|
case PlacementAndUpdate: {
|
|
// Placement
|
|
commitPlacement(finishedWork);
|
|
// Clear the "placement" from effect tag so that we know that this is
|
|
// inserted, before any life-cycles like componentDidMount gets called.
|
|
finishedWork.flags &= ~Placement;
|
|
|
|
// Update
|
|
const current = finishedWork.alternate;
|
|
commitWork(current, finishedWork);
|
|
break;
|
|
}
|
|
case Hydrating: {
|
|
finishedWork.flags &= ~Hydrating;
|
|
break;
|
|
}
|
|
case HydratingAndUpdate: {
|
|
finishedWork.flags &= ~Hydrating;
|
|
|
|
// Update
|
|
const current = finishedWork.alternate;
|
|
commitWork(current, finishedWork);
|
|
break;
|
|
}
|
|
case Update: {
|
|
const current = finishedWork.alternate;
|
|
commitWork(current, finishedWork);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
export function commitLayoutEffects(
|
|
finishedWork: Fiber,
|
|
root: FiberRoot,
|
|
committedLanes: Lanes,
|
|
): void {
|
|
inProgressLanes = committedLanes;
|
|
inProgressRoot = root;
|
|
nextEffect = finishedWork;
|
|
|
|
commitLayoutEffects_begin(finishedWork, root, committedLanes);
|
|
|
|
inProgressLanes = null;
|
|
inProgressRoot = null;
|
|
}
|
|
|
|
function commitLayoutEffects_begin(
|
|
subtreeRoot: Fiber,
|
|
root: FiberRoot,
|
|
committedLanes: Lanes,
|
|
) {
|
|
// Suspense layout effects semantics don't change for legacy roots.
|
|
const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
|
|
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
const firstChild = fiber.child;
|
|
|
|
if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
|
|
// Keep track of the current Offscreen stack's state.
|
|
if (fiber.tag === OffscreenComponent) {
|
|
const current = fiber.alternate;
|
|
const wasHidden = current !== null && current.memoizedState !== null;
|
|
const isHidden = fiber.memoizedState !== null;
|
|
|
|
const newOffscreenSubtreeIsHidden =
|
|
isHidden || offscreenSubtreeIsHidden;
|
|
const newOffscreenSubtreeWasHidden =
|
|
wasHidden || offscreenSubtreeWasHidden;
|
|
|
|
if (
|
|
newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
|
|
newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
|
|
) {
|
|
const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
|
|
const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
|
|
|
|
// Traverse the Offscreen subtree with the current Offscreen as the root.
|
|
offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
|
|
offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
|
|
commitLayoutEffects_begin(
|
|
fiber, // New root; bubble back up to here and stop.
|
|
root,
|
|
committedLanes,
|
|
);
|
|
|
|
// Restore Offscreen state and resume in our-progress traversal.
|
|
nextEffect = fiber;
|
|
offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
|
|
offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
|
|
commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
|
|
|
|
continue;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
|
|
ensureCorrectReturnPointer(firstChild, fiber);
|
|
nextEffect = firstChild;
|
|
} else {
|
|
if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
|
|
const visibilityChanged =
|
|
!offscreenSubtreeIsHidden && offscreenSubtreeWasHidden;
|
|
|
|
// TODO (Offscreen) Also check: subtreeFlags & LayoutStatic
|
|
if (visibilityChanged && firstChild !== null) {
|
|
// We've just shown or hidden a Offscreen tree that contains layout effects.
|
|
// We only enter this code path for subtrees that are updated,
|
|
// because newly mounted ones would pass the LayoutMask check above.
|
|
ensureCorrectReturnPointer(firstChild, fiber);
|
|
nextEffect = firstChild;
|
|
continue;
|
|
}
|
|
}
|
|
|
|
commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitLayoutMountEffects_complete(
|
|
subtreeRoot: Fiber,
|
|
root: FiberRoot,
|
|
committedLanes: Lanes,
|
|
) {
|
|
// Suspense layout effects semantics don't change for legacy roots.
|
|
const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
|
|
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
|
|
if (
|
|
enableSuspenseLayoutEffectSemantics &&
|
|
isModernRoot &&
|
|
offscreenSubtreeWasHidden &&
|
|
!offscreenSubtreeIsHidden
|
|
) {
|
|
// Inside of an Offscreen subtree that changed visibility during this commit.
|
|
// If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
|
|
// but if it was just shown, we need to (re)create the effects now.
|
|
// TODO (Offscreen) Check: flags & LayoutStatic
|
|
switch (fiber.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
fiber.mode & ProfileMode
|
|
) {
|
|
try {
|
|
startLayoutEffectTimer();
|
|
safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
|
|
} finally {
|
|
recordLayoutEffectDuration(fiber);
|
|
}
|
|
} else {
|
|
safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
|
|
}
|
|
break;
|
|
}
|
|
case ClassComponent: {
|
|
const instance = fiber.stateNode;
|
|
if (typeof instance.componentDidMount === 'function') {
|
|
safelyCallComponentDidMount(fiber, fiber.return, instance);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
// TODO (Offscreen) Check flags & RefStatic
|
|
switch (fiber.tag) {
|
|
case ClassComponent:
|
|
case HostComponent:
|
|
safelyAttachRef(fiber, fiber.return);
|
|
break;
|
|
}
|
|
} else if ((fiber.flags & LayoutMask) !== NoFlags) {
|
|
const current = fiber.alternate;
|
|
if (__DEV__) {
|
|
setCurrentDebugFiberInDEV(fiber);
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitLayoutEffectOnFiber,
|
|
null,
|
|
root,
|
|
current,
|
|
fiber,
|
|
committedLanes,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const error = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
resetCurrentDebugFiberInDEV();
|
|
} else {
|
|
try {
|
|
commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
|
|
} catch (error) {
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (fiber === subtreeRoot) {
|
|
nextEffect = null;
|
|
return;
|
|
}
|
|
|
|
const sibling = fiber.sibling;
|
|
if (sibling !== null) {
|
|
ensureCorrectReturnPointer(sibling, fiber.return);
|
|
nextEffect = sibling;
|
|
return;
|
|
}
|
|
|
|
nextEffect = fiber.return;
|
|
}
|
|
}
|
|
|
|
export function commitPassiveMountEffects(
|
|
root: FiberRoot,
|
|
finishedWork: Fiber,
|
|
): void {
|
|
nextEffect = finishedWork;
|
|
commitPassiveMountEffects_begin(finishedWork, root);
|
|
}
|
|
|
|
function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
const firstChild = fiber.child;
|
|
if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
|
|
ensureCorrectReturnPointer(firstChild, fiber);
|
|
nextEffect = firstChild;
|
|
} else {
|
|
commitPassiveMountEffects_complete(subtreeRoot, root);
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitPassiveMountEffects_complete(
|
|
subtreeRoot: Fiber,
|
|
root: FiberRoot,
|
|
) {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
if ((fiber.flags & Passive) !== NoFlags) {
|
|
if (__DEV__) {
|
|
setCurrentDebugFiberInDEV(fiber);
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitPassiveMountOnFiber,
|
|
null,
|
|
root,
|
|
fiber,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const error = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
resetCurrentDebugFiberInDEV();
|
|
} else {
|
|
try {
|
|
commitPassiveMountOnFiber(root, fiber);
|
|
} catch (error) {
|
|
captureCommitPhaseError(fiber, fiber.return, error);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (fiber === subtreeRoot) {
|
|
nextEffect = null;
|
|
return;
|
|
}
|
|
|
|
const sibling = fiber.sibling;
|
|
if (sibling !== null) {
|
|
ensureCorrectReturnPointer(sibling, fiber.return);
|
|
nextEffect = sibling;
|
|
return;
|
|
}
|
|
|
|
nextEffect = fiber.return;
|
|
}
|
|
}
|
|
|
|
function commitPassiveMountOnFiber(
|
|
finishedRoot: FiberRoot,
|
|
finishedWork: Fiber,
|
|
): void {
|
|
switch (finishedWork.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
startPassiveEffectTimer();
|
|
try {
|
|
commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
|
|
} finally {
|
|
recordPassiveEffectDuration(finishedWork);
|
|
}
|
|
} else {
|
|
commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
export function commitPassiveUnmountEffects(firstChild: Fiber): void {
|
|
nextEffect = firstChild;
|
|
commitPassiveUnmountEffects_begin();
|
|
}
|
|
|
|
function commitPassiveUnmountEffects_begin() {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
const child = fiber.child;
|
|
|
|
if ((nextEffect.flags & ChildDeletion) !== NoFlags) {
|
|
const deletions = fiber.deletions;
|
|
if (deletions !== null) {
|
|
for (let i = 0; i < deletions.length; i++) {
|
|
const fiberToDelete = deletions[i];
|
|
nextEffect = fiberToDelete;
|
|
commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
|
|
fiberToDelete,
|
|
fiber,
|
|
);
|
|
}
|
|
|
|
if (deletedTreeCleanUpLevel >= 1) {
|
|
// A fiber was deleted from this parent fiber, but it's still part of
|
|
// the previous (alternate) parent fiber's list of children. Because
|
|
// children are a linked list, an earlier sibling that's still alive
|
|
// will be connected to the deleted fiber via its `alternate`:
|
|
//
|
|
// live fiber
|
|
// --alternate--> previous live fiber
|
|
// --sibling--> deleted fiber
|
|
//
|
|
// We can't disconnect `alternate` on nodes that haven't been deleted
|
|
// yet, but we can disconnect the `sibling` and `child` pointers.
|
|
const previousFiber = fiber.alternate;
|
|
if (previousFiber !== null) {
|
|
let detachedChild = previousFiber.child;
|
|
if (detachedChild !== null) {
|
|
previousFiber.child = null;
|
|
do {
|
|
const detachedSibling = detachedChild.sibling;
|
|
detachedChild.sibling = null;
|
|
detachedChild = detachedSibling;
|
|
} while (detachedChild !== null);
|
|
}
|
|
}
|
|
}
|
|
|
|
nextEffect = fiber;
|
|
}
|
|
}
|
|
|
|
if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
|
|
ensureCorrectReturnPointer(child, fiber);
|
|
nextEffect = child;
|
|
} else {
|
|
commitPassiveUnmountEffects_complete();
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitPassiveUnmountEffects_complete() {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
if ((fiber.flags & Passive) !== NoFlags) {
|
|
setCurrentDebugFiberInDEV(fiber);
|
|
commitPassiveUnmountOnFiber(fiber);
|
|
resetCurrentDebugFiberInDEV();
|
|
}
|
|
|
|
const sibling = fiber.sibling;
|
|
if (sibling !== null) {
|
|
ensureCorrectReturnPointer(sibling, fiber.return);
|
|
nextEffect = sibling;
|
|
return;
|
|
}
|
|
|
|
nextEffect = fiber.return;
|
|
}
|
|
}
|
|
|
|
function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
|
|
switch (finishedWork.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
finishedWork.mode & ProfileMode
|
|
) {
|
|
startPassiveEffectTimer();
|
|
commitHookEffectListUnmount(
|
|
HookPassive | HookHasEffect,
|
|
finishedWork,
|
|
finishedWork.return,
|
|
);
|
|
recordPassiveEffectDuration(finishedWork);
|
|
} else {
|
|
commitHookEffectListUnmount(
|
|
HookPassive | HookHasEffect,
|
|
finishedWork,
|
|
finishedWork.return,
|
|
);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
|
|
deletedSubtreeRoot: Fiber,
|
|
nearestMountedAncestor: Fiber | null,
|
|
) {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
|
|
// Deletion effects fire in parent -> child order
|
|
// TODO: Check if fiber has a PassiveStatic flag
|
|
setCurrentDebugFiberInDEV(fiber);
|
|
commitPassiveUnmountInsideDeletedTreeOnFiber(fiber, nearestMountedAncestor);
|
|
resetCurrentDebugFiberInDEV();
|
|
|
|
const child = fiber.child;
|
|
// TODO: Only traverse subtree if it has a PassiveStatic flag. (But, if we
|
|
// do this, still need to handle `deletedTreeCleanUpLevel` correctly.)
|
|
if (child !== null) {
|
|
ensureCorrectReturnPointer(child, fiber);
|
|
nextEffect = child;
|
|
} else {
|
|
commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
|
|
deletedSubtreeRoot,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
|
|
deletedSubtreeRoot: Fiber,
|
|
) {
|
|
while (nextEffect !== null) {
|
|
const fiber = nextEffect;
|
|
const sibling = fiber.sibling;
|
|
const returnFiber = fiber.return;
|
|
|
|
if (deletedTreeCleanUpLevel >= 2) {
|
|
// Recursively traverse the entire deleted tree and clean up fiber fields.
|
|
// This is more aggressive than ideal, and the long term goal is to only
|
|
// have to detach the deleted tree at the root.
|
|
detachFiberAfterEffects(fiber);
|
|
if (fiber === deletedSubtreeRoot) {
|
|
nextEffect = null;
|
|
return;
|
|
}
|
|
} else {
|
|
// This is the default branch (level 0). We do not recursively clear all
|
|
// the fiber fields. Only the root of the deleted subtree.
|
|
if (fiber === deletedSubtreeRoot) {
|
|
detachFiberAfterEffects(fiber);
|
|
nextEffect = null;
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (sibling !== null) {
|
|
ensureCorrectReturnPointer(sibling, returnFiber);
|
|
nextEffect = sibling;
|
|
return;
|
|
}
|
|
|
|
nextEffect = returnFiber;
|
|
}
|
|
}
|
|
|
|
function commitPassiveUnmountInsideDeletedTreeOnFiber(
|
|
current: Fiber,
|
|
nearestMountedAncestor: Fiber | null,
|
|
): void {
|
|
switch (current.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
if (
|
|
enableProfilerTimer &&
|
|
enableProfilerCommitHooks &&
|
|
current.mode & ProfileMode
|
|
) {
|
|
startPassiveEffectTimer();
|
|
commitHookEffectListUnmount(
|
|
HookPassive,
|
|
current,
|
|
nearestMountedAncestor,
|
|
);
|
|
recordPassiveEffectDuration(current);
|
|
} else {
|
|
commitHookEffectListUnmount(
|
|
HookPassive,
|
|
current,
|
|
nearestMountedAncestor,
|
|
);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
let didWarnWrongReturnPointer = false;
|
|
function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
|
|
if (__DEV__) {
|
|
if (!didWarnWrongReturnPointer && fiber.return !== expectedReturnFiber) {
|
|
didWarnWrongReturnPointer = true;
|
|
console.error(
|
|
'Internal React error: Return pointer is inconsistent ' +
|
|
'with parent.',
|
|
);
|
|
}
|
|
}
|
|
|
|
// TODO: Remove this assignment once we're confident that it won't break
|
|
// anything, by checking the warning logs for the above invariant
|
|
fiber.return = expectedReturnFiber;
|
|
}
|
|
|
|
function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
|
|
if (__DEV__ && enableStrictEffects) {
|
|
// We don't need to re-check StrictEffectsMode here.
|
|
// This function is only called if that check has already passed.
|
|
switch (fiber.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitHookEffectListMount,
|
|
null,
|
|
HookLayout | HookHasEffect,
|
|
fiber,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const mountError = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, mountError);
|
|
}
|
|
break;
|
|
}
|
|
case ClassComponent: {
|
|
const instance = fiber.stateNode;
|
|
invokeGuardedCallback(null, instance.componentDidMount, instance);
|
|
if (hasCaughtError()) {
|
|
const mountError = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, mountError);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function invokePassiveEffectMountInDEV(fiber: Fiber): void {
|
|
if (__DEV__ && enableStrictEffects) {
|
|
// We don't need to re-check StrictEffectsMode here.
|
|
// This function is only called if that check has already passed.
|
|
switch (fiber.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitHookEffectListMount,
|
|
null,
|
|
HookPassive | HookHasEffect,
|
|
fiber,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const mountError = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, mountError);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
|
|
if (__DEV__ && enableStrictEffects) {
|
|
// We don't need to re-check StrictEffectsMode here.
|
|
// This function is only called if that check has already passed.
|
|
switch (fiber.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitHookEffectListUnmount,
|
|
null,
|
|
HookLayout | HookHasEffect,
|
|
fiber,
|
|
fiber.return,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const unmountError = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, unmountError);
|
|
}
|
|
break;
|
|
}
|
|
case ClassComponent: {
|
|
const instance = fiber.stateNode;
|
|
if (typeof instance.componentWillUnmount === 'function') {
|
|
invokeGuardedCallback(
|
|
null,
|
|
safelyCallComponentWillUnmount,
|
|
null,
|
|
fiber,
|
|
fiber.return,
|
|
instance,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const unmountError = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, unmountError);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
|
|
if (__DEV__ && enableStrictEffects) {
|
|
// We don't need to re-check StrictEffectsMode here.
|
|
// This function is only called if that check has already passed.
|
|
switch (fiber.tag) {
|
|
case FunctionComponent:
|
|
case ForwardRef:
|
|
case SimpleMemoComponent: {
|
|
invokeGuardedCallback(
|
|
null,
|
|
commitHookEffectListUnmount,
|
|
null,
|
|
HookPassive | HookHasEffect,
|
|
fiber,
|
|
fiber.return,
|
|
);
|
|
if (hasCaughtError()) {
|
|
const unmountError = clearCaughtError();
|
|
captureCommitPhaseError(fiber, fiber.return, unmountError);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export {
|
|
commitResetTextContent,
|
|
commitPlacement,
|
|
commitDeletion,
|
|
commitWork,
|
|
commitAttachRef,
|
|
commitDetachRef,
|
|
invokeLayoutEffectMountInDEV,
|
|
invokeLayoutEffectUnmountInDEV,
|
|
invokePassiveEffectMountInDEV,
|
|
invokePassiveEffectUnmountInDEV,
|
|
};
|