Effects list refactor continued: did-bailout flag

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -367,7 +367,14 @@ describe('ReactDOMServerPartialHydration', () => {
     const span2 = container.getElementsByTagName('span')[0];
     // This is a new node.
     expect(span).not.toBe(span2);
-    expect(ref.current).toBe(span2);
+
+    if (gate(flags => flags.new)) {
+      // The effects list refactor causes this to be null because the Suspense Offscreen's child
+      // is null. However, since we can't hydrate Suspense in legacy this change in behavior is ok
+      expect(ref.current).toBe(null);
+    } else {
+      expect(ref.current).toBe(span2);
+    }
 
     // Resolving the promise should render the final content.
     suspend = false;

packages/react-reconciler/src/ReactChildFiber.new.js

@@ -280,13 +280,21 @@ function ChildReconciler(shouldTrackSideEffects) {
     // deletions, so we can just append the deletion to the list. The remaining
     // effects aren't added until the complete phase. Once we implement
     // resuming, this may not be true.
+    // TODO (effects) Get rid of effects list update here.
     const last = returnFiber.lastEffect;
     if (last !== null) {
       last.nextEffect = childToDelete;
       returnFiber.lastEffect = childToDelete;
     } else {
       returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
+    if (returnFiber.deletions === null) {
+      returnFiber.deletions = [childToDelete];
+    } else {
+      returnFiber.deletions.push(childToDelete);
+    }
+    // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
+    returnFiber.effectTag |= Deletion;
     childToDelete.nextEffect = null;
     childToDelete.effectTag = Deletion;
   }

packages/react-reconciler/src/ReactFiber.new.js

@@ -30,6 +30,7 @@ import {
   enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoEffect, Placement} from './ReactSideEffectTags';
+import {NoEffect as NoSubtreeEffect} from './ReactSubtreeTags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
@@ -144,6 +145,8 @@ function FiberNode(
 
   // Effects
   this.effectTag = NoEffect;
+  this.subtreeTag = NoSubtreeEffect;
+  this.deletions = null;
   this.nextEffect = null;
 
   this.firstEffect = null;
@@ -287,6 +290,8 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     // We already have an alternate.
     // Reset the effect tag.
     workInProgress.effectTag = NoEffect;
+    workInProgress.subtreeTag = NoSubtreeEffect;
+    workInProgress.deletions = null;
 
     // The effect list is no longer valid.
     workInProgress.nextEffect = null;
@@ -826,6 +831,8 @@ export function assignFiberPropertiesInDEV(
   target.dependencies = source.dependencies;
   target.mode = source.mode;
   target.effectTag = source.effectTag;
+  target.subtreeTag = source.subtreeTag;
+  target.deletions = source.deletions;
   target.nextEffect = source.nextEffect;
   target.firstEffect = source.firstEffect;
   target.lastEffect = source.lastEffect;

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -65,6 +65,7 @@ import {
   Deletion,
   ForceUpdateForLegacySuspense,
 } from './ReactSideEffectTags';
+import {DidBailout} from './ReactSubtreeTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
@@ -2066,6 +2067,13 @@ function updateSuspensePrimaryChildren(
     currentFallbackChildFragment.nextEffect = null;
     currentFallbackChildFragment.effectTag = Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
+    if (workInProgress.deletions === null) {
+      workInProgress.deletions = [currentFallbackChildFragment];
+    } else {
+      workInProgress.deletions.push(currentFallbackChildFragment);
+    }
+    // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
+    workInProgress.effectTag |= Deletion;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -2131,9 +2139,11 @@ function updateSuspenseFallbackChildren(
       workInProgress.firstEffect = primaryChildFragment.firstEffect;
       workInProgress.lastEffect = progressedLastEffect;
       progressedLastEffect.nextEffect = null;
+      workInProgress.deletions = null;
     } else {
       // TODO: Reset this somewhere else? Lol legacy mode is so weird.
       workInProgress.firstEffect = workInProgress.lastEffect = null;
+      workInProgress.deletions = null;
     }
   } else {
     primaryChildFragment = createWorkInProgressOffscreenFiber(
@@ -2980,6 +2990,12 @@ function bailoutOnAlreadyFinishedWork(
 
   // Check if the children have any pending work.
   if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
+    // TODO (effects)  The case we are trying to handle is an error thrown during commit,
+    // and we replay the work, even though we skip render phase (by bailing out)
+    // we don't want to bailout on commit effects too.
+    // However, this check seems overly aggressive in some cases.
+    workInProgress.subtreeTag = DidBailout;
+
     // The children don't have any work either. We can skip them.
     // TODO: Once we add back resuming, we should check if the children are
     // a work-in-progress set. If so, we need to transfer their effects.
@@ -3040,6 +3056,13 @@ function remountFiber(
     } else {
       returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
+    if (returnFiber.deletions === null) {
+      returnFiber.deletions = [current];
+    } else {
+      returnFiber.deletions.push(current);
+    }
+    // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
+    returnFiber.effectTag |= Deletion;
     current.nextEffect = null;
     current.effectTag = Deletion;
 

packages/react-reconciler/src/ReactFiberCompleteWork.new.js

@@ -1062,6 +1062,12 @@ function completeWork(
                 // Reset the effect list before doing the second pass since that's now invalid.
                 if (renderState.lastEffect === null) {
                   workInProgress.firstEffect = null;
+                  workInProgress.subtreeTag = NoEffect;
+                  let child = workInProgress.child;
+                  while (child !== null) {
+                    child.deletions = null;
+                    child = child.sibling;
+                  }
                 }
                 workInProgress.lastEffect = renderState.lastEffect;
                 // Reset the child fibers to their original state.

packages/react-reconciler/src/ReactFiberHydrationContext.new.js

@@ -24,7 +24,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {Deletion, Placement, Hydrating} from './ReactSideEffectTags';
+import {Deletion, Hydrating, Placement} from './ReactSideEffectTags';
 import invariant from 'shared/invariant';
 
 import {
@@ -125,6 +125,13 @@ function deleteHydratableInstance(
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
   childToDelete.effectTag = Deletion;
+  if (returnFiber.deletions === null) {
+    returnFiber.deletions = [childToDelete];
+  } else {
+    returnFiber.deletions.push(childToDelete);
+  }
+  // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
+  returnFiber.effectTag |= Deletion;
 
   // This might seem like it belongs on progressedFirstDeletion. However,
   // these children are not part of the reconciliation list of children.