Migrate passive phase to depth first traversal

Because the passive phase happens after paint, I expect it's least
likely to cause a performance regression.

In terms of implementation complexity, however, it's probably the
riskiest. Ideally, for this initial step, we would change nothing except
the traversal logic. However, the old implementation is pretty weird; it
doesn't really use the effect list in the normal way that the other
phases do. Instead, it pushes effects into a pair global arrays (one for
mount effects, one for unmount effects) during the layout phase.

For those reasons, I think it makes sense to split this phase out
into its own step.

There's also potential for upside since we're removing code from the
layout phase.

The other phases are hard to justify migrating one at a time because
the overhead of doing a depth-first search while also keeping track of
an effect list is larger than if we just migrate them all at once.

Author: acdlite

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

@@ -13,7 +13,12 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane';
 
 import getComponentName from 'shared/getComponentName';
-import {Deletion, ChildDeletion, Placement} from './ReactFiberFlags';
+import {
+  Deletion,
+  ChildDeletion,
+  Placement,
+  StaticMask,
+} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -269,7 +274,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
     childToDelete.nextEffect = null;
-    childToDelete.flags = Deletion;
+    childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
     let deletions = returnFiber.deletions;
     if (deletions === null) {
@@ -353,15 +358,15 @@ function ChildReconciler(shouldTrackSideEffects) {
       const oldIndex = current.index;
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.flags = Placement;
+        newFiber.flags |= Placement;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
         return oldIndex;
       }
     } else {
       // This is an insertion.
-      newFiber.flags = Placement;
+      newFiber.flags |= Placement;
       return lastPlacedIndex;
     }
   }
@@ -370,7 +375,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // This is simpler for the single child case. We only need to do a
     // placement for inserting new children.
     if (shouldTrackSideEffects && newFiber.alternate === null) {
-      newFiber.flags = Placement;
+      newFiber.flags |= Placement;
     }
     return newFiber;
   }

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

@@ -2007,7 +2007,8 @@ function updateSuspensePrimaryChildren(
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
     currentFallbackChildFragment.nextEffect = null;
-    currentFallbackChildFragment.flags = Deletion;
+    currentFallbackChildFragment.flags =
+      (currentFallbackChildFragment.flags & StaticMask) | Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
     let deletions = workInProgress.deletions;
     if (deletions === null) {
@@ -2998,7 +2999,7 @@ function remountFiber(
       returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
     current.nextEffect = null;
-    current.flags = Deletion;
+    current.flags = (current.flags & StaticMask) | Deletion;
 
     let deletions = returnFiber.deletions;
     if (deletions === null) {