Effects list refactor continued: passive effects traversal

* Adds new Passive subtree tag value.
* Bubbles passive flag to ancestors in the case of an unmount.
* Adds recursive traversal for passive effects (mounts and unmounts).
* Removes pendingPassiveHookEffectsMount and pendingPassiveHookEffectsUnmount arrays from work loop.
* Re-adds sibling and child pointer detaching (temporarily removed in previous PR).
* Addresses some minor TODO comments left over from previous PRs.

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

@@ -68,6 +68,8 @@ import {
   Placement,
   Snapshot,
   Update,
+  Passive,
+  PassiveUnmountPendingDev,
 } from './ReactSideEffectTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -115,9 +117,8 @@ import {
   captureCommitPhaseError,
   resolveRetryWakeable,
   markCommitTimeOfFallback,
-  enqueuePendingPassiveHookEffectMount,
-  enqueuePendingPassiveHookEffectUnmount,
   enqueuePendingPassiveProfilerEffect,
+  schedulePassiveEffectCallback,
 } from './ReactFiberWorkLoop.new';
 import {
   NoEffect as NoHookEffect,
@@ -130,6 +131,10 @@ import {
   updateDeprecatedEventListeners,
   unmountDeprecatedResponderListeners,
 } from './ReactFiberDeprecatedEvents.new';
+import {
+  NoEffect as NoSubtreeTag,
+  Passive as PassiveSubtreeTag,
+} from './ReactSubtreeTags';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -381,26 +386,6 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
   }
 }
 
-function schedulePassiveEffects(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 {
-      const {next, tag} = effect;
-      if (
-        (tag & HookPassive) !== NoHookEffect &&
-        (tag & HookHasEffect) !== NoHookEffect
-      ) {
-        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
-        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
-      }
-      effect = next;
-    } while (effect !== firstEffect);
-  }
-}
-
 export function commitPassiveEffectDurations(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
@@ -486,7 +471,9 @@ function commitLifeCycles(
         commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
       }
 
-      schedulePassiveEffects(finishedWork);
+      if ((finishedWork.subtreeTag & PassiveSubtreeTag) !== NoSubtreeTag) {
+        schedulePassiveEffectCallback();
+      }
       return;
     }
     case ClassComponent: {
@@ -892,7 +879,35 @@ function commitUnmount(
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
               if ((tag & HookPassive) !== NoHookEffect) {
-                enqueuePendingPassiveHookEffectUnmount(current, effect);
+                effect.tag |= HookHasEffect;
+
+                // subtreeTags bubble in resetChildLanes which doens't get called for unmounted subtrees.
+                // So in the case of unmounts, we need to bubble passive effects explicitly.
+                let ancestor = current.return;
+                while (ancestor !== null) {
+                  ancestor.subtreeTag |= PassiveSubtreeTag;
+                  const alternate = ancestor.alternate;
+                  if (alternate !== null) {
+                    alternate.subtreeTag |= PassiveSubtreeTag;
+                  }
+
+                  ancestor = ancestor.return;
+                }
+
+                current.effectTag |= Passive;
+
+                if (__DEV__) {
+                  // This flag is used to avoid warning about an update to an unmounted component
+                  // if the component has a passive unmount scheduled.
+                  // Presumably the listener would be cleaned up by that unmount.
+                  current.effectTag |= PassiveUnmountPendingDev;
+                  const alternate = current.alternate;
+                  if (alternate !== null) {
+                    alternate.effectTag |= PassiveUnmountPendingDev;
+                  }
+                }
+
+                schedulePassiveEffectCallback();
               } else {
                 if (
                   enableProfilerTimer &&
@@ -1013,8 +1028,11 @@ function commitNestedUnmounts(
 }
 
 function detachFiberMutation(fiber: Fiber) {
-  // Cut off the return pointers to disconnect it from the tree. Ideally, we
-  // should clear the child pointer of the parent alternate to let this
+  // Cut off the return pointers to disconnect it from the tree.
+  // Note that we can't clear child or sibling pointers yet,
+  // because they may be required for passive effects.
+  // These pointers will be cleared in a separate pass.
+  // Ideally, we should 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.
@@ -1023,7 +1041,6 @@ function detachFiberMutation(fiber: Fiber) {
   // traversal in a later effect. See PR #16820. We now clear the sibling
   // field after effects, see: detachFiberAfterEffects.
   fiber.alternate = null;
-  fiber.child = null;
   fiber.dependencies = null;
   fiber.firstEffect = null;
   fiber.lastEffect = null;
@@ -1032,7 +1049,6 @@ function detachFiberMutation(fiber: Fiber) {
   fiber.pendingProps = null;
   fiber.return = null;
   fiber.stateNode = null;
-  fiber.updateQueue = null;
   if (__DEV__) {
     fiber._debugOwner = null;
   }

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

@@ -124,7 +124,7 @@ function deleteHydratableInstance(
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  childToDelete.effectTag = Deletion;
+
   const deletions = returnFiber.deletions;
   if (deletions === null) {
     returnFiber.deletions = [childToDelete];