Only treat updates to lazy as a new mount in legacy mode (#24530)
* Only treat updates to lazy as a new mount in legacy mode * Update name and swap current check * Flip order back
Ricky committed
May 12, 2022 at 08:51 UTC
34da5aa69b0694348fee9c3cd1351ecc70cd5bb1
2 files changed
+40
-80
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+20
-40
@@ -1110,16 +1110,8 @@ function updateClassComponent(
1110
const instance = workInProgress.stateNode;
1111
let shouldUpdate;
1112
if (instance === null) {
1113
- if (current !== null) {
1114
- // A class component without an instance only mounts if it suspended
1115
- // inside a non-concurrent tree, in an inconsistent state. We want to
1116
- // treat it like a new mount, even though an empty version of it already
1117
- // committed. Disconnect the alternate pointers.
1118
- current.alternate = null;
1119
- workInProgress.alternate = null;
1120
- // Since this is conceptually a new fiber, schedule a Placement effect
1121
- workInProgress.flags |= Placement;
1122
- }
1113
+ resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress);
1114
+
1115
// In the initial pass we might need to construct the instance.
1116
constructClassInstance(workInProgress, Component, nextProps);
1117
mountClassInstance(workInProgress, Component, nextProps, renderLanes);
@@ -1469,16 +1461,7 @@ function mountLazyComponent(
1461
elementType,
1462
renderLanes,
1463
) {
1472
- if (_current !== null) {
1473
- // A lazy component only mounts if it suspended inside a non-
1474
- // concurrent tree, in an inconsistent state. We want to treat it like
1475
- // a new mount, even though an empty version of it already committed.
1476
- // Disconnect the alternate pointers.
1477
- _current.alternate = null;
1478
- workInProgress.alternate = null;
1479
- // Since this is conceptually a new fiber, schedule a Placement effect
1480
- workInProgress.flags |= Placement;
1481
- }
1464
+ resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
1465
1466
const props = workInProgress.pendingProps;
1467
const lazyComponent: LazyComponentType<any, any> = elementType;
@@ -1588,16 +1571,7 @@ function mountIncompleteClassComponent(
1571
nextProps,
1572
renderLanes,
1573
) {
1591
- if (_current !== null) {
1592
- // An incomplete component only mounts if it suspended inside a non-
1593
- // concurrent tree, in an inconsistent state. We want to treat it like
1594
- // a new mount, even though an empty version of it already committed.
1595
- // Disconnect the alternate pointers.
1596
- _current.alternate = null;
1597
- workInProgress.alternate = null;
1598
- // Since this is conceptually a new fiber, schedule a Placement effect
1599
- workInProgress.flags |= Placement;
1600
- }
1574
+ resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
1575
1576
// Promote the fiber to a class and try rendering again.
1577
workInProgress.tag = ClassComponent;
@@ -1635,16 +1609,7 @@ function mountIndeterminateComponent(
1609
Component,
1610
renderLanes,
1611
) {
1638
- if (_current !== null) {
1639
- // An indeterminate component only mounts if it suspended inside a non-
1640
- // concurrent tree, in an inconsistent state. We want to treat it like
1641
- // a new mount, even though an empty version of it already committed.
1642
- // Disconnect the alternate pointers.
1643
- _current.alternate = null;
1644
- workInProgress.alternate = null;
1645
- // Since this is conceptually a new fiber, schedule a Placement effect
1646
- workInProgress.flags |= Placement;
1647
- }
1612
+ resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
1613
1614
const props = workInProgress.pendingProps;
1615
let context;
@@ -3376,6 +3341,21 @@ export function checkIfWorkInProgressReceivedUpdate() {
3341
return didReceiveUpdate;
3342
}
3343
3344
+function resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress) {
3345
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
3346
+ if (current !== null) {
3347
+ // A lazy component only mounts if it suspended inside a non-
3348
+ // concurrent tree, in an inconsistent state. We want to treat it like
3349
+ // a new mount, even though an empty version of it already committed.
3350
+ // Disconnect the alternate pointers.
3351
+ current.alternate = null;
3352
+ workInProgress.alternate = null;
3353
+ // Since this is conceptually a new fiber, schedule a Placement effect
3354
+ workInProgress.flags |= Placement;
3355
+ }
3356
+ }
3357
+}
3358
+
3359
function bailoutOnAlreadyFinishedWork(
3360
current: Fiber | null,
3361
workInProgress: Fiber,
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+20
-40
@@ -1110,16 +1110,8 @@ function updateClassComponent(
1110
const instance = workInProgress.stateNode;
1111
let shouldUpdate;
1112
if (instance === null) {
1113
- if (current !== null) {
1114
- // A class component without an instance only mounts if it suspended
1115
- // inside a non-concurrent tree, in an inconsistent state. We want to
1116
- // treat it like a new mount, even though an empty version of it already
1117
- // committed. Disconnect the alternate pointers.
1118
- current.alternate = null;
1119
- workInProgress.alternate = null;
1120
- // Since this is conceptually a new fiber, schedule a Placement effect
1121
- workInProgress.flags |= Placement;
1122
- }
1113
+ resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress);
1114
+
1115
// In the initial pass we might need to construct the instance.
1116
constructClassInstance(workInProgress, Component, nextProps);
1117
mountClassInstance(workInProgress, Component, nextProps, renderLanes);
@@ -1469,16 +1461,7 @@ function mountLazyComponent(
1461
elementType,
1462
renderLanes,
1463
) {
1472
- if (_current !== null) {
1473
- // A lazy component only mounts if it suspended inside a non-
1474
- // concurrent tree, in an inconsistent state. We want to treat it like
1475
- // a new mount, even though an empty version of it already committed.
1476
- // Disconnect the alternate pointers.
1477
- _current.alternate = null;
1478
- workInProgress.alternate = null;
1479
- // Since this is conceptually a new fiber, schedule a Placement effect
1480
- workInProgress.flags |= Placement;
1481
- }
1464
+ resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
1465
1466
const props = workInProgress.pendingProps;
1467
const lazyComponent: LazyComponentType<any, any> = elementType;
@@ -1588,16 +1571,7 @@ function mountIncompleteClassComponent(
1571
nextProps,
1572
renderLanes,
1573
) {
1591
- if (_current !== null) {
1592
- // An incomplete component only mounts if it suspended inside a non-
1593
- // concurrent tree, in an inconsistent state. We want to treat it like
1594
- // a new mount, even though an empty version of it already committed.
1595
- // Disconnect the alternate pointers.
1596
- _current.alternate = null;
1597
- workInProgress.alternate = null;
1598
- // Since this is conceptually a new fiber, schedule a Placement effect
1599
- workInProgress.flags |= Placement;
1600
- }
1574
+ resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
1575
1576
// Promote the fiber to a class and try rendering again.
1577
workInProgress.tag = ClassComponent;
@@ -1635,16 +1609,7 @@ function mountIndeterminateComponent(
1609
Component,
1610
renderLanes,
1611
) {
1638
- if (_current !== null) {
1639
- // An indeterminate component only mounts if it suspended inside a non-
1640
- // concurrent tree, in an inconsistent state. We want to treat it like
1641
- // a new mount, even though an empty version of it already committed.
1642
- // Disconnect the alternate pointers.
1643
- _current.alternate = null;
1644
- workInProgress.alternate = null;
1645
- // Since this is conceptually a new fiber, schedule a Placement effect
1646
- workInProgress.flags |= Placement;
1647
- }
1612
+ resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
1613
1614
const props = workInProgress.pendingProps;
1615
let context;
@@ -3376,6 +3341,21 @@ export function checkIfWorkInProgressReceivedUpdate() {
3341
return didReceiveUpdate;
3342
}
3343
3344
+function resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress) {
3345
+ if ((workInProgress.mode & ConcurrentMode) === NoMode) {
3346
+ if (current !== null) {
3347
+ // A lazy component only mounts if it suspended inside a non-
3348
+ // concurrent tree, in an inconsistent state. We want to treat it like
3349
+ // a new mount, even though an empty version of it already committed.
3350
+ // Disconnect the alternate pointers.
3351
+ current.alternate = null;
3352
+ workInProgress.alternate = null;
3353
+ // Since this is conceptually a new fiber, schedule a Placement effect
3354
+ workInProgress.flags |= Placement;
3355
+ }
3356
+ }
3357
+}
3358
+
3359
function bailoutOnAlreadyFinishedWork(
3360
current: Fiber | null,
3361
workInProgress: Fiber,