diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 662ac5bbe59a2..9ca86babe3e71 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -1110,16 +1110,8 @@ function updateClassComponent( const instance = workInProgress.stateNode; let shouldUpdate; if (instance === null) { - if (current !== null) { - // A class component without an instance only mounts if it suspended - // inside a non-concurrent tree, in an inconsistent state. We want to - // treat it like a new mount, even though an empty version of it already - // committed. Disconnect the alternate pointers. - current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress); + // In the initial pass we might need to construct the instance. constructClassInstance(workInProgress, Component, nextProps); mountClassInstance(workInProgress, Component, nextProps, renderLanes); @@ -1469,16 +1461,7 @@ function mountLazyComponent( elementType, renderLanes, ) { - if (_current !== null) { - // A lazy component only mounts if it suspended inside a non- - // concurrent tree, in an inconsistent state. We want to treat it like - // a new mount, even though an empty version of it already committed. - // Disconnect the alternate pointers. - _current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress); const props = workInProgress.pendingProps; const lazyComponent: LazyComponentType = elementType; @@ -1588,16 +1571,7 @@ function mountIncompleteClassComponent( nextProps, renderLanes, ) { - if (_current !== null) { - // An incomplete component only mounts if it suspended inside a non- - // concurrent tree, in an inconsistent state. We want to treat it like - // a new mount, even though an empty version of it already committed. - // Disconnect the alternate pointers. - _current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress); // Promote the fiber to a class and try rendering again. workInProgress.tag = ClassComponent; @@ -1635,16 +1609,7 @@ function mountIndeterminateComponent( Component, renderLanes, ) { - if (_current !== null) { - // An indeterminate component only mounts if it suspended inside a non- - // concurrent tree, in an inconsistent state. We want to treat it like - // a new mount, even though an empty version of it already committed. - // Disconnect the alternate pointers. - _current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress); const props = workInProgress.pendingProps; let context; @@ -3376,6 +3341,21 @@ export function checkIfWorkInProgressReceivedUpdate() { return didReceiveUpdate; } +function resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress) { + if ((workInProgress.mode & ConcurrentMode) === NoMode) { + if (current !== null) { + // A lazy component only mounts if it suspended inside a non- + // concurrent tree, in an inconsistent state. We want to treat it like + // a new mount, even though an empty version of it already committed. + // Disconnect the alternate pointers. + current.alternate = null; + workInProgress.alternate = null; + // Since this is conceptually a new fiber, schedule a Placement effect + workInProgress.flags |= Placement; + } + } +} + function bailoutOnAlreadyFinishedWork( current: Fiber | null, workInProgress: Fiber, diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 81815280e07ee..32dc0c8e81838 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -1110,16 +1110,8 @@ function updateClassComponent( const instance = workInProgress.stateNode; let shouldUpdate; if (instance === null) { - if (current !== null) { - // A class component without an instance only mounts if it suspended - // inside a non-concurrent tree, in an inconsistent state. We want to - // treat it like a new mount, even though an empty version of it already - // committed. Disconnect the alternate pointers. - current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress); + // In the initial pass we might need to construct the instance. constructClassInstance(workInProgress, Component, nextProps); mountClassInstance(workInProgress, Component, nextProps, renderLanes); @@ -1469,16 +1461,7 @@ function mountLazyComponent( elementType, renderLanes, ) { - if (_current !== null) { - // A lazy component only mounts if it suspended inside a non- - // concurrent tree, in an inconsistent state. We want to treat it like - // a new mount, even though an empty version of it already committed. - // Disconnect the alternate pointers. - _current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress); const props = workInProgress.pendingProps; const lazyComponent: LazyComponentType = elementType; @@ -1588,16 +1571,7 @@ function mountIncompleteClassComponent( nextProps, renderLanes, ) { - if (_current !== null) { - // An incomplete component only mounts if it suspended inside a non- - // concurrent tree, in an inconsistent state. We want to treat it like - // a new mount, even though an empty version of it already committed. - // Disconnect the alternate pointers. - _current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress); // Promote the fiber to a class and try rendering again. workInProgress.tag = ClassComponent; @@ -1635,16 +1609,7 @@ function mountIndeterminateComponent( Component, renderLanes, ) { - if (_current !== null) { - // An indeterminate component only mounts if it suspended inside a non- - // concurrent tree, in an inconsistent state. We want to treat it like - // a new mount, even though an empty version of it already committed. - // Disconnect the alternate pointers. - _current.alternate = null; - workInProgress.alternate = null; - // Since this is conceptually a new fiber, schedule a Placement effect - workInProgress.flags |= Placement; - } + resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress); const props = workInProgress.pendingProps; let context; @@ -3376,6 +3341,21 @@ export function checkIfWorkInProgressReceivedUpdate() { return didReceiveUpdate; } +function resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress) { + if ((workInProgress.mode & ConcurrentMode) === NoMode) { + if (current !== null) { + // A lazy component only mounts if it suspended inside a non- + // concurrent tree, in an inconsistent state. We want to treat it like + // a new mount, even though an empty version of it already committed. + // Disconnect the alternate pointers. + current.alternate = null; + workInProgress.alternate = null; + // Since this is conceptually a new fiber, schedule a Placement effect + workInProgress.flags |= Placement; + } + } +} + function bailoutOnAlreadyFinishedWork( current: Fiber | null, workInProgress: Fiber,