react-reconciler 0.26.0-rc.2 → 0.26.2

package/cjs/react-reconciler.development.js

@@ -1,4 +1,4 @@
-/** @license React v0.26.0-rc.2
+/** @license React v0.26.2
  * react-reconciler.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -268,7 +268,7 @@ function getComponentName(type) {
 
 // Don't change these two values. They're used by React Dev Tools.
 var NoFlags =
-/*                     */
+/*                      */
 0;
 var PerformedWork =
 /*                */
@@ -304,6 +304,10 @@ var Snapshot =
 var Passive =
 /*                      */
 512; // TODO (effects) Remove this bit once the new reconciler is synced to the old.
+
+var PassiveUnmountPendingDev =
+/*     */
+8192;
 var Hydrating =
 /*                    */
 1024;
@@ -328,33 +332,6 @@ var ShouldCapture =
 var ForceUpdateForLegacySuspense =
 /* */
 16384; // Static tags describe aspects of a fiber that are not specific to a render,
-// e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
-// This enables us to defer more work in the unmount case,
-// since we can defer traversing the tree during layout to look for Passive effects,
-// and instead rely on the static flag as a signal that there may be cleanup work.
-
-var PassiveStatic =
-/*                */
-32768; // Union of side effect groupings as pertains to subtreeFlags
-
-var BeforeMutationMask =
-/*           */
-778;
-var MutationMask =
-/*                 */
-1182;
-var LayoutMask =
-/*                   */
-164;
-var PassiveMask =
-/*                  */
-520; // Union of tags that don't get reset on clones.
-// This allows certain concepts to persist without recalculting them,
-// e.g. whether a subtree contains passive effects or portals.
-
-var StaticMask =
-/*                   */
-32768;
 
 // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
 
@@ -2295,7 +2272,15 @@ function higherPriorityLane(a, b) {
   return a !== NoLane && a < b ? a : b;
 }
 function createLaneMap(initial) {
-  return new Array(TotalLanes).fill(initial);
+  // Intentionally pushing one by one.
+  // https://v8.dev/blog/elements-kinds#avoid-creating-holes
+  var laneMap = [];
+
+  for (var i = 0; i < TotalLanes; i++) {
+    laneMap.push(initial);
+  }
+
+  return laneMap;
 }
 function markRootUpdated(root, updateLane, eventTime) {
   root.pendingLanes |= updateLane; // TODO: Theoretically, any update to any lane can unblock any other lane. But
@@ -2540,7 +2525,7 @@ function flushSyncCallbackQueue() {
     Scheduler_cancelCallback(node);
   }
 
-  return flushSyncCallbackQueueImpl();
+  flushSyncCallbackQueueImpl();
 }
 
 function flushSyncCallbackQueueImpl() {
@@ -2576,28 +2561,9 @@ function flushSyncCallbackQueueImpl() {
         isFlushingSyncQueue = false;
       }
     }
-
-    return true;
-  } else {
-    return false;
   }
 }
 
-var NoFlags$1 =
-/*  */
-0; // Represents whether effect should fire.
-
-var HasEffect =
-/* */
-1; // Represents the phase in which the effect (not the clean-up) fires.
-
-var Layout =
-/*    */
-2;
-var Passive$1 =
-/*   */
-4;
-
 var NoMode = 0;
 var StrictMode = 1; // TODO: Remove BlockingMode and ConcurrentMode by reading from the root
 // tag instead
@@ -2807,7 +2773,7 @@ var ReactStrictModeWarnings = {
   var didWarnAboutUnsafeLifecycles = new Set();
 
   ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = function (fiber, instance) {
-    // Dedupe strategy: Warn once per component.
+    // Dedup strategy: Warn once per component.
     if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
       return;
     }
@@ -4672,16 +4638,24 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (!shouldTrackSideEffects) {
       // Noop.
       return;
-    }
+    } // Deletions are added in reversed order so we add it to the front.
+    // At this point, the return fiber's effect list is empty except for
+    // 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.
+
 
-    var deletions = returnFiber.deletions;
+    var last = returnFiber.lastEffect;
 
-    if (deletions === null) {
-      returnFiber.deletions = [childToDelete];
-      returnFiber.flags |= Deletion;
+    if (last !== null) {
+      last.nextEffect = childToDelete;
+      returnFiber.lastEffect = childToDelete;
     } else {
-      deletions.push(childToDelete);
+      returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
+
+    childToDelete.nextEffect = null;
+    childToDelete.flags = Deletion;
   }
 
   function deleteRemainingChildren(returnFiber, currentFirstChild) {
@@ -5737,13 +5711,6 @@ function popSuspenseContext(fiber) {
   pop(suspenseStackCursor, fiber);
 }
 
-// A non-null SuspenseState means that it is blocked for one reason or another.
-// - A non-null dehydrated field means it's blocked pending hydration.
-//   - A non-null dehydrated field can use isSuspenseInstancePending or
-//     isSuspenseInstanceFallback to query the reason for being dehydrated.
-// - A null dehydrated field means it's blocked by something suspending and
-//   we're currently showing a fallback instead.
-
 function shouldCaptureSuspense(workInProgress, hasInvisibleParent) {
   // If it was the primary children that just suspended, capture and render the
   // fallback. Otherwise, don't capture and bubble to the next boundary.
@@ -5825,6 +5792,21 @@ function findFirstSuspended(row) {
   return null;
 }
 
+var NoFlags$1 =
+/*  */
+0; // Represents whether effect should fire.
+
+var HasEffect =
+/* */
+1; // Represents the phase in which the effect (not the clean-up) fires.
+
+var Layout =
+/*    */
+2;
+var Passive$1 =
+/*   */
+4;
+
 // This may have been an insertion or a hydration.
 
 var hydrationParentFiber = null;
@@ -5859,14 +5841,17 @@ function deleteHydratableInstance(returnFiber, instance) {
   var childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  var deletions = returnFiber.deletions;
-
-  if (deletions === null) {
-    returnFiber.deletions = [childToDelete]; // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-
-    returnFiber.flags |= Deletion;
+  childToDelete.flags = Deletion; // This might seem like it belongs on progressedFirstDeletion. However,
+  // these children are not part of the reconciliation list of children.
+  // Even if we abort and rereconcile the children, that will try to hydrate
+  // again and the nodes are still in the host tree so these will be
+  // recreated.
+
+  if (returnFiber.lastEffect !== null) {
+    returnFiber.lastEffect.nextEffect = childToDelete;
+    returnFiber.lastEffect = childToDelete;
   } else {
-    deletions.push(childToDelete);
+    returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
 }
 
@@ -7175,7 +7160,7 @@ function mountEffect(create, deps) {
     }
   }
 
-  return mountEffectImpl(Passive | PassiveStatic, Passive$1, create, deps);
+  return mountEffectImpl(Update | Passive, Passive$1, create, deps);
 }
 
 function updateEffect(create, deps) {
@@ -7186,7 +7171,7 @@ function updateEffect(create, deps) {
     }
   }
 
-  return updateEffectImpl(Passive, Passive$1, create, deps);
+  return updateEffectImpl(Update | Passive, Passive$1, create, deps);
 }
 
 function mountLayoutEffect(create, deps) {
@@ -7469,7 +7454,7 @@ function mountOpaqueIdentifier() {
     var setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber$1.mode & BlockingMode) === NoMode) {
-      currentlyRenderingFiber$1.flags |= Passive | PassiveStatic;
+      currentlyRenderingFiber$1.flags |= Update | Passive;
       pushEffect(HasEffect | Passive$1, function () {
         setId(makeId());
       }, undefined, null);
@@ -8745,8 +8730,7 @@ function updateMode(current, workInProgress, renderLanes) {
 
 function updateProfiler(current, workInProgress, renderLanes) {
   {
-    // TODO: Only call onRender et al if subtree has effects
-    workInProgress.flags |= Update | Passive; // Reset effect durations for the next eventual effect phase.
+    workInProgress.flags |= Update; // Reset effect durations for the next eventual effect phase.
     // These are reset during render to allow the DevTools commit hook a chance to read them,
 
     var stateNode = workInProgress.stateNode;
@@ -9407,7 +9391,8 @@ function updateSuspenseOffscreenState(prevOffscreenState, renderLanes) {
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes)
   };
-}
+} // TODO: Probably should inline this back
+
 
 function shouldRemainOnFallback(suspenseContext, current, workInProgress, renderLanes) {
   // If we're already showing a fallback, there are cases where we need to
@@ -9498,17 +9483,41 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       tryToClaimNextHydratableInstance(workInProgress); // This could've been a dehydrated suspense component.
     }
 
+    var nextPrimaryChildren = nextProps.children;
+    var nextFallbackChildren = nextProps.fallback;
+
     if (showFallback) {
-      var nextPrimaryChildren = nextProps.children;
-      var nextFallbackChildren = nextProps.fallback;
       var fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
       var primaryChildFragment = workInProgress.child;
       primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackFragment;
+    } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+      // This is a CPU-bound tree. Skip this tree and show a placeholder to
+      // unblock the surrounding content. Then immediately retry after the
+      // initial commit.
+      var _fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
+
+      var _primaryChildFragment = workInProgress.child;
+      _primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
+      workInProgress.memoizedState = SUSPENDED_MARKER; // Since nothing actually suspended, there will nothing to ping this to
+      // get it started back up to attempt the next item. While in terms of
+      // priority this work has the same priority as this current render, it's
+      // not part of the same transition once the transition has committed. If
+      // it's sync, we still want to yield so that it can be painted.
+      // Conceptually, this is really the same as pinging. We can use any
+      // RetryLane even if it's the one currently rendering since we're leaving
+      // it behind on this node.
+
+      workInProgress.lanes = SomeRetryLane;
+
+      {
+        markSpawnedWork(SomeRetryLane);
+      }
+
+      return _fallbackFragment;
     } else {
-      var _nextPrimaryChildren = nextProps.children;
-      return mountSuspensePrimaryChildren(workInProgress, _nextPrimaryChildren, renderLanes);
+      return mountSuspensePrimaryChildren(workInProgress, nextPrimaryChildren, renderLanes);
     }
   } else {
     // This is an update.
@@ -9520,37 +9529,37 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
       if (showFallback) {
         var _nextFallbackChildren2 = nextProps.fallback;
-        var _nextPrimaryChildren3 = nextProps.children;
+        var _nextPrimaryChildren2 = nextProps.children;
 
-        var _fallbackChildFragment = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren3, _nextFallbackChildren2, renderLanes);
+        var _fallbackChildFragment = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren2, _nextFallbackChildren2, renderLanes);
 
-        var _primaryChildFragment2 = workInProgress.child;
+        var _primaryChildFragment3 = workInProgress.child;
         var prevOffscreenState = current.child.memoizedState;
-        _primaryChildFragment2.memoizedState = prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
-        _primaryChildFragment2.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes);
+        _primaryChildFragment3.memoizedState = prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+        _primaryChildFragment3.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes);
         workInProgress.memoizedState = SUSPENDED_MARKER;
         return _fallbackChildFragment;
       } else {
-        var _nextPrimaryChildren4 = nextProps.children;
+        var _nextPrimaryChildren3 = nextProps.children;
 
-        var _primaryChildFragment3 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren4, renderLanes);
+        var _primaryChildFragment4 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren3, renderLanes);
 
         workInProgress.memoizedState = null;
-        return _primaryChildFragment3;
+        return _primaryChildFragment4;
       }
     } else {
       // The current tree is not already showing a fallback.
       if (showFallback) {
         // Timed out.
         var _nextFallbackChildren3 = nextProps.fallback;
-        var _nextPrimaryChildren5 = nextProps.children;
+        var _nextPrimaryChildren4 = nextProps.children;
 
-        var _fallbackChildFragment2 = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren5, _nextFallbackChildren3, renderLanes);
+        var _fallbackChildFragment2 = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren4, _nextFallbackChildren3, renderLanes);
 
-        var _primaryChildFragment4 = workInProgress.child;
+        var _primaryChildFragment5 = workInProgress.child;
         var _prevOffscreenState = current.child.memoizedState;
-        _primaryChildFragment4.memoizedState = _prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(_prevOffscreenState, renderLanes);
-        _primaryChildFragment4.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes); // Skip the primary children, and continue working on the
+        _primaryChildFragment5.memoizedState = _prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(_prevOffscreenState, renderLanes);
+        _primaryChildFragment5.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes); // Skip the primary children, and continue working on the
         // fallback children.
 
         workInProgress.memoizedState = SUSPENDED_MARKER;
@@ -9558,12 +9567,12 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       } else {
         // Still haven't timed out. Continue rendering the children, like we
         // normally do.
-        var _nextPrimaryChildren6 = nextProps.children;
+        var _nextPrimaryChildren5 = nextProps.children;
 
-        var _primaryChildFragment5 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren6, renderLanes);
+        var _primaryChildFragment6 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren5, renderLanes);
 
         workInProgress.memoizedState = null;
-        return _primaryChildFragment5;
+        return _primaryChildFragment6;
       }
     }
   }
@@ -9645,15 +9654,9 @@ function updateSuspensePrimaryChildren(current, workInProgress, primaryChildren,
 
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
-    var deletions = workInProgress.deletions;
-
-    if (deletions === null) {
-      workInProgress.deletions = [currentFallbackChildFragment]; // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-
-      workInProgress.flags |= Deletion;
-    } else {
-      deletions.push(currentFallbackChildFragment);
-    }
+    currentFallbackChildFragment.nextEffect = null;
+    currentFallbackChildFragment.flags = Deletion;
+    workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -9695,16 +9698,24 @@ function updateSuspenseFallbackChildren(current, workInProgress, primaryChildren
       primaryChildFragment.treeBaseDuration = currentPrimaryChildFragment.treeBaseDuration;
     } // The fallback fiber was added as a deletion effect during the first pass.
     // However, since we're going to remain on the fallback, we no longer want
-    // to delete it.
+    // to delete it. So we need to remove it from the list. Deletions are stored
+    // on the same list as effects. We want to keep the effects from the primary
+    // tree. So we copy the primary child fragment's effect list, which does not
+    // include the fallback deletion effect.
 
 
-    workInProgress.deletions = null;
-  } else {
-    primaryChildFragment = createWorkInProgressOffscreenFiber(currentPrimaryChildFragment, primaryChildProps); // Since we're reusing a current tree, we need to reuse the flags, too.
-    // (We don't do this in legacy mode, because in legacy mode we don't re-use
-    // the current tree; see previous branch.)
+    var progressedLastEffect = primaryChildFragment.lastEffect;
 
-    primaryChildFragment.subtreeFlags = currentPrimaryChildFragment.subtreeFlags & StaticMask;
+    if (progressedLastEffect !== null) {
+      workInProgress.firstEffect = primaryChildFragment.firstEffect;
+      workInProgress.lastEffect = progressedLastEffect;
+      progressedLastEffect.nextEffect = null;
+    } else {
+      // TODO: Reset this somewhere else? Lol legacy mode is so weird.
+      workInProgress.firstEffect = workInProgress.lastEffect = null;
+    }
+  } else {
+    primaryChildFragment = createWorkInProgressOffscreenFiber(currentPrimaryChildFragment, primaryChildProps);
   }
 
   var fallbackChildFragment;
@@ -9907,7 +9918,7 @@ function validateSuspenseListChildren(children, revealOrder) {
   }
 }
 
-function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode) {
+function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode, lastEffectBeforeRendering) {
   var renderState = workInProgress.memoizedState;
 
   if (renderState === null) {
@@ -9917,7 +9928,8 @@ function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastCont
       renderingStartTime: 0,
       last: lastContentRow,
       tail: tail,
-      tailMode: tailMode
+      tailMode: tailMode,
+      lastEffect: lastEffectBeforeRendering
     };
   } else {
     // We can reuse the existing object from previous renders.
@@ -9927,6 +9939,7 @@ function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastCont
     renderState.last = lastContentRow;
     renderState.tail = tail;
     renderState.tailMode = tailMode;
+    renderState.lastEffect = lastEffectBeforeRendering;
   }
 } // This can end up rendering this component multiple passes.
 // The first pass splits the children fibers into two sets. A head and tail.
@@ -9991,7 +10004,7 @@ function updateSuspenseListComponent(current, workInProgress, renderLanes) {
           }
 
           initSuspenseListRenderState(workInProgress, false, // isBackwards
-          tail, lastContentRow, tailMode);
+          tail, lastContentRow, tailMode, workInProgress.lastEffect);
           break;
         }
 
@@ -10023,7 +10036,7 @@ function updateSuspenseListComponent(current, workInProgress, renderLanes) {
 
           initSuspenseListRenderState(workInProgress, true, // isBackwards
           _tail, null, // last
-          tailMode);
+          tailMode, workInProgress.lastEffect);
           break;
         }
 
@@ -10032,7 +10045,7 @@ function updateSuspenseListComponent(current, workInProgress, renderLanes) {
           initSuspenseListRenderState(workInProgress, false, // isBackwards
           null, // tail
           null, // last
-          undefined);
+          undefined, workInProgress.lastEffect);
           break;
         }
 
@@ -10238,16 +10251,17 @@ function remountFiber(current, oldWorkInProgress, newWorkInProgress) {
     // Since the old fiber is disconnected, we have to schedule it manually.
 
 
-    var deletions = returnFiber.deletions;
+    var last = returnFiber.lastEffect;
 
-    if (deletions === null) {
-      returnFiber.deletions = [current]; // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-
-      returnFiber.flags |= Deletion;
+    if (last !== null) {
+      last.nextEffect = current;
+      returnFiber.lastEffect = current;
     } else {
-      deletions.push(current);
+      returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
 
+    current.nextEffect = null;
+    current.flags = Deletion;
     newWorkInProgress.flags |= Placement; // Restart work from the new fiber.
 
     return newWorkInProgress;
@@ -10313,11 +10327,10 @@ function beginWork(current, workInProgress, renderLanes) {
         case Profiler:
           {
             // Profiler should only call onRender when one of its descendants actually rendered.
-            // TODO: Only call onRender et al if subtree has effects
             var hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
 
             if (hasChildWork) {
-              workInProgress.flags |= Passive | Update;
+              workInProgress.flags |= Update;
             } // Reset effect durations for the next eventual effect phase.
             // These are reset during render to allow the DevTools commit hook a chance to read them,
 
@@ -10401,6 +10414,7 @@ function beginWork(current, workInProgress, renderLanes) {
               // update in the past but didn't complete it.
               renderState.rendering = null;
               renderState.tail = null;
+              renderState.lastEffect = null;
             }
 
             pushSuspenseContext(workInProgress, suspenseStackCursor.current);
@@ -10614,30 +10628,6 @@ function markRef$1(workInProgress) {
   workInProgress.flags |= Ref;
 }
 
-function hadNoMutationsEffects(current, completedWork) {
-  var didBailout = current !== null && current.child === completedWork.child;
-
-  if (didBailout) {
-    return true;
-  }
-
-  var child = completedWork.child;
-
-  while (child !== null) {
-    if ((child.flags & MutationMask) !== NoFlags) {
-      return false;
-    }
-
-    if ((child.subtreeFlags & MutationMask) !== NoFlags) {
-      return false;
-    }
-
-    child = child.sibling;
-  }
-
-  return true;
-}
-
 var appendAllChildren;
 var updateHostContainer;
 var updateHostComponent$1;
@@ -10676,7 +10666,7 @@ if (supportsMutation) {
     }
   };
 
-  updateHostContainer = function (current, workInProgress) {// Noop
+  updateHostContainer = function (workInProgress) {// Noop
   };
 
   updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
@@ -10888,9 +10878,9 @@ if (supportsMutation) {
     }
   };
 
-  updateHostContainer = function (current, workInProgress) {
+  updateHostContainer = function (workInProgress) {
     var portalOrRoot = workInProgress.stateNode;
-    var childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
+    var childrenUnchanged = workInProgress.firstEffect === null;
 
     if (childrenUnchanged) ; else {
       var container = portalOrRoot.containerInfo;
@@ -10909,7 +10899,7 @@ if (supportsMutation) {
     var oldProps = current.memoizedProps; // If there are no effects associated with this node, then none of our children had any updates.
     // This guarantees that we can reuse all of them.
 
-    var childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
+    var childrenUnchanged = workInProgress.firstEffect === null;
 
     if (childrenUnchanged && oldProps === newProps) {
       // No changes, just reuse the existing instance.
@@ -10967,7 +10957,7 @@ if (supportsMutation) {
   };
 } else {
   // No host operations
-  updateHostContainer = function (current, workInProgress) {// Noop
+  updateHostContainer = function (workInProgress) {// Noop
   };
 
   updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {// Noop
@@ -11057,92 +11047,6 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
   }
 }
 
-function bubbleProperties(completedWork) {
-  var didBailout = completedWork.alternate !== null && completedWork.alternate.child === completedWork.child;
-  var newChildLanes = NoLanes;
-  var subtreeFlags = NoFlags;
-
-  if (!didBailout) {
-    // Bubble up the earliest expiration time.
-    if ( (completedWork.mode & ProfileMode) !== NoMode) {
-      // In profiling mode, resetChildExpirationTime is also used to reset
-      // profiler durations.
-      var actualDuration = completedWork.actualDuration;
-      var treeBaseDuration = completedWork.selfBaseDuration;
-      var child = completedWork.child;
-
-      while (child !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(child.lanes, child.childLanes));
-        subtreeFlags |= child.subtreeFlags;
-        subtreeFlags |= child.flags; // When a fiber is cloned, its actualDuration is reset to 0. This value will
-        // only be updated if work is done on the fiber (i.e. it doesn't bailout).
-        // When work is done, it should bubble to the parent's actualDuration. If
-        // the fiber has not been cloned though, (meaning no work was done), then
-        // this value will reflect the amount of time spent working on a previous
-        // render. In that case it should not bubble. We determine whether it was
-        // cloned by comparing the child pointer.
-
-        actualDuration += child.actualDuration;
-        treeBaseDuration += child.treeBaseDuration;
-        child = child.sibling;
-      }
-
-      completedWork.actualDuration = actualDuration;
-      completedWork.treeBaseDuration = treeBaseDuration;
-    } else {
-      var _child = completedWork.child;
-
-      while (_child !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child.lanes, _child.childLanes));
-        subtreeFlags |= _child.subtreeFlags;
-        subtreeFlags |= _child.flags;
-        _child = _child.sibling;
-      }
-    }
-
-    completedWork.subtreeFlags |= subtreeFlags;
-  } else {
-    // Bubble up the earliest expiration time.
-    if ( (completedWork.mode & ProfileMode) !== NoMode) {
-      // In profiling mode, resetChildExpirationTime is also used to reset
-      // profiler durations.
-      var _treeBaseDuration = completedWork.selfBaseDuration;
-      var _child2 = completedWork.child;
-
-      while (_child2 !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child2.lanes, _child2.childLanes)); // "Static" flags share the lifetime of the fiber/hook they belong to,
-        // so we should bubble those up even during a bailout. All the other
-        // flags have a lifetime only of a single render + commit, so we should
-        // ignore them.
-
-        subtreeFlags |= _child2.subtreeFlags & StaticMask;
-        subtreeFlags |= _child2.flags & StaticMask;
-        _treeBaseDuration += _child2.treeBaseDuration;
-        _child2 = _child2.sibling;
-      }
-
-      completedWork.treeBaseDuration = _treeBaseDuration;
-    } else {
-      var _child3 = completedWork.child;
-
-      while (_child3 !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child3.lanes, _child3.childLanes)); // "Static" flags share the lifetime of the fiber/hook they belong to,
-        // so we should bubble those up even during a bailout. All the other
-        // flags have a lifetime only of a single render + commit, so we should
-        // ignore them.
-
-        subtreeFlags |= _child3.subtreeFlags & StaticMask;
-        subtreeFlags |= _child3.flags & StaticMask;
-        _child3 = _child3.sibling;
-      }
-    }
-
-    completedWork.subtreeFlags |= subtreeFlags;
-  }
-
-  completedWork.childLanes = newChildLanes;
-}
-
 function completeWork(current, workInProgress, renderLanes) {
   var newProps = workInProgress.pendingProps;
 
@@ -11157,7 +11061,6 @@ function completeWork(current, workInProgress, renderLanes) {
     case Profiler:
     case ContextConsumer:
     case MemoComponent:
-      bubbleProperties(workInProgress);
       return null;
 
     case ClassComponent:
@@ -11168,7 +11071,6 @@ function completeWork(current, workInProgress, renderLanes) {
           popContext(workInProgress);
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -11202,8 +11104,7 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        updateHostContainer(current, workInProgress);
-        bubbleProperties(workInProgress);
+        updateHostContainer(workInProgress);
         return null;
       }
 
@@ -11228,7 +11129,6 @@ function completeWork(current, workInProgress, renderLanes) {
             } // This can happen when we abort work.
 
 
-            bubbleProperties(workInProgress);
             return null;
           }
 
@@ -11265,7 +11165,6 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -11303,7 +11202,6 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -11318,8 +11216,7 @@ function completeWork(current, workInProgress, renderLanes) {
 
           if ( (workInProgress.mode & ProfileMode) !== NoMode) {
             transferActualDuration(workInProgress);
-          } // Don't bubble properties in this case.
-
+          }
 
           return workInProgress;
         }
@@ -11386,40 +11283,22 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        bubbleProperties(workInProgress);
-
-        {
-          if ((workInProgress.mode & ProfileMode) !== NoMode) {
-            if (nextDidTimeout) {
-              // Don't count time spent in a timed out Suspense subtree as part of the base duration.
-              var _primaryChildFragment2 = workInProgress.child;
-
-              if (_primaryChildFragment2 !== null) {
-                // $FlowFixMe Flow doens't support type casting in combiation with the -= operator
-                workInProgress.treeBaseDuration -= _primaryChildFragment2.treeBaseDuration;
-              }
-            }
-          }
-        }
-
         return null;
       }
 
     case HostPortal:
       popHostContainer(workInProgress);
-      updateHostContainer(current, workInProgress);
+      updateHostContainer(workInProgress);
 
       if (current === null) {
         preparePortalMount(workInProgress.stateNode.containerInfo);
       }
 
-      bubbleProperties(workInProgress);
       return null;
 
     case ContextProvider:
       // Pop provider fiber
       popProvider(workInProgress);
-      bubbleProperties(workInProgress);
       return null;
 
     case IncompleteClassComponent:
@@ -11432,7 +11311,6 @@ function completeWork(current, workInProgress, renderLanes) {
           popContext(workInProgress);
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -11444,7 +11322,6 @@ function completeWork(current, workInProgress, renderLanes) {
         if (renderState === null) {
           // We're running in the default, "independent" mode.
           // We don't do anything in this mode.
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -11494,15 +11371,19 @@ function completeWork(current, workInProgress, renderLanes) {
                     workInProgress.flags |= Update;
                   } // Rerender the whole list, but this time, we'll force fallbacks
                   // to stay in place.
-                  // Reset the child fibers to their original state.
+                  // Reset the effect list before doing the second pass since that's now invalid.
+
+
+                  if (renderState.lastEffect === null) {
+                    workInProgress.firstEffect = null;
+                  }
 
+                  workInProgress.lastEffect = renderState.lastEffect; // Reset the child fibers to their original state.
 
-                  workInProgress.subtreeFlags = NoFlags;
                   resetChildFibers(workInProgress, renderLanes); // Set up the Suspense Context to force suspense and immediately
                   // rerender the children.
 
-                  pushSuspenseContext(workInProgress, setShallowSuspenseContext(suspenseStackCursor.current, ForceSuspenseFallback)); // Don't bubble properties in this case.
-
+                  pushSuspenseContext(workInProgress, setShallowSuspenseContext(suspenseStackCursor.current, ForceSuspenseFallback));
                   return workInProgress.child;
                 }
 
@@ -11556,8 +11437,16 @@ function completeWork(current, workInProgress, renderLanes) {
 
               if (renderState.tail === null && renderState.tailMode === 'hidden' && !renderedTail.alternate && !getIsHydrating() // We don't cut it if we're hydrating.
               ) {
-                  // We're done.
-                  bubbleProperties(workInProgress);
+                  // We need to delete the row we just rendered.
+                  // Reset the effect list to what it was before we rendered this
+                  // child. The nested children have already appended themselves.
+                  var lastEffect = workInProgress.lastEffect = renderState.lastEffect; // Remove any effects that were appended after this point.
+
+                  if (lastEffect !== null) {
+                    lastEffect.nextEffect = null;
+                  } // We're done.
+
+
                   return null;
                 }
             } else if ( // The time it took to render last row is greater than the remaining
@@ -11570,10 +11459,13 @@ function completeWork(current, workInProgress, renderLanes) {
               workInProgress.flags |= DidCapture;
               didSuspendAlready = true;
               cutOffTailIfNeeded(renderState, false); // Since nothing actually suspended, there will nothing to ping this
-              // to get it started back up to attempt the next item. If we can show
-              // them, then they really have the same priority as this render.
-              // So we'll pick it back up the very next render pass once we've had
-              // an opportunity to yield for paint.
+              // to get it started back up to attempt the next item. While in terms
+              // of priority this work has the same priority as this current render,
+              // it's not part of the same transition once the transition has
+              // committed. If it's sync, we still want to yield so that it can be
+              // painted. Conceptually, this is really the same as pinging.
+              // We can use any RetryLane even if it's the one currently rendering
+              // since we're leaving it behind on this node.
 
               workInProgress.lanes = SomeRetryLane;
 
@@ -11610,6 +11502,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var next = renderState.tail;
           renderState.rendering = next;
           renderState.tail = next.sibling;
+          renderState.lastEffect = workInProgress.lastEffect;
           renderState.renderingStartTime = now$1();
           next.sibling = null; // Restore the context.
           // TODO: We can probably just avoid popping it instead and only
@@ -11624,12 +11517,10 @@ function completeWork(current, workInProgress, renderLanes) {
           }
 
           pushSuspenseContext(workInProgress, suspenseContext); // Do a pass over the next row.
-          // Don't bubble properties in this case.
 
           return next;
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -11653,21 +11544,16 @@ function completeWork(current, workInProgress, renderLanes) {
     case LegacyHiddenComponent:
       {
         popRenderLanes(workInProgress);
-        var _nextState = workInProgress.memoizedState;
-        var nextIsHidden = _nextState !== null;
 
         if (current !== null) {
+          var _nextState = workInProgress.memoizedState;
           var _prevState = current.memoizedState;
           var prevIsHidden = _prevState !== null;
+          var nextIsHidden = _nextState !== null;
 
           if (prevIsHidden !== nextIsHidden && newProps.mode !== 'unstable-defer-without-hiding') {
             workInProgress.flags |= Update;
           }
-        } // Don't bubble properties for hidden children.
-
-
-        if (!nextIsHidden || includesSomeLane(subtreeRenderLanes, OffscreenLane) || (workInProgress.mode & ConcurrentMode) === NoMode) {
-          bubbleProperties(workInProgress);
         }
 
         return null;
@@ -12021,7 +11907,9 @@ function attachPingListener(root, wakeable, lanes) {
 
 function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes) {
   // The source fiber did not complete.
-  sourceFiber.flags |= Incomplete;
+  sourceFiber.flags |= Incomplete; // Its effect list is no longer valid.
+
+  sourceFiber.firstEffect = sourceFiber.lastEffect = null;
 
   if (value !== null && typeof value === 'object' && typeof value.then === 'function') {
     // This is a wakeable.
@@ -12439,18 +12327,18 @@ var callComponentWillUnmountWithTimer = function (current, instance) {
 }; // Capture errors so they don't interrupt unmounting.
 
 
-function safelyCallComponentWillUnmount(current, instance, nearestMountedAncestor) {
+function safelyCallComponentWillUnmount(current, instance) {
   {
     invokeGuardedCallback(null, callComponentWillUnmountWithTimer, null, current, instance);
 
     if (hasCaughtError()) {
       var unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+      captureCommitPhaseError(current, unmountError);
     }
   }
 }
 
-function safelyDetachRef(current, nearestMountedAncestor) {
+function safelyDetachRef(current) {
   var ref = current.ref;
 
   if (ref !== null) {
@@ -12460,7 +12348,7 @@ function safelyDetachRef(current, nearestMountedAncestor) {
 
         if (hasCaughtError()) {
           var refError = clearCaughtError();
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
+          captureCommitPhaseError(current, refError);
         }
       }
     } else {
@@ -12469,13 +12357,13 @@ function safelyDetachRef(current, nearestMountedAncestor) {
   }
 }
 
-function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
+function safelyCallDestroy(current, destroy) {
   {
     invokeGuardedCallback(null, destroy, null);
 
     if (hasCaughtError()) {
       var error = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
+      captureCommitPhaseError(current, error);
     }
   }
 }
@@ -12558,7 +12446,7 @@ function commitBeforeMutationLifeCycles(current, finishedWork) {
   }
 }
 
-function commitHookEffectListUnmount(tag, finishedWork, nearestMountedAncestor) {
+function commitHookEffectListUnmount(tag, finishedWork) {
   var updateQueue = finishedWork.updateQueue;
   var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
@@ -12573,45 +12461,13 @@ function commitHookEffectListUnmount(tag, finishedWork, nearestMountedAncestor)
         effect.destroy = undefined;
 
         if (destroy !== undefined) {
-          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+          destroy();
         }
       }
 
       effect = effect.next;
     } while (effect !== firstEffect);
   }
-} // TODO: Remove this duplication.
-
-
-function commitHookEffectListUnmount2( // Tags to check for when deciding whether to unmount. e.g. to skip over layout effects
-hookFlags, fiber, nearestMountedAncestor) {
-  var updateQueue = fiber.updateQueue;
-  var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
-
-  if (lastEffect !== null) {
-    var firstEffect = lastEffect.next;
-    var effect = firstEffect;
-
-    do {
-      var _effect = effect,
-          next = _effect.next,
-          tag = _effect.tag;
-
-      if ((tag & hookFlags) === hookFlags) {
-        var destroy = effect.destroy;
-
-        if (destroy !== undefined) {
-          effect.destroy = undefined;
-
-          {
-            safelyCallDestroy(fiber, nearestMountedAncestor, destroy);
-          }
-        }
-      }
-
-      effect = next;
-    } while (effect !== firstEffect);
-  }
 }
 
 function commitHookEffectListMount(tag, finishedWork) {
@@ -12652,14 +12508,8 @@ function commitHookEffectListMount(tag, finishedWork) {
   }
 }
 
-function invokePassiveEffectCreate(effect) {
-  var create = effect.create;
-  effect.destroy = create();
-} // TODO: Remove this duplication.
-
-
-function commitHookEffectListMount2(fiber) {
-  var updateQueue = fiber.updateQueue;
+function schedulePassiveEffects(finishedWork) {
+  var updateQueue = finishedWork.updateQueue;
   var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
   if (lastEffect !== null) {
@@ -12667,27 +12517,13 @@ function commitHookEffectListMount2(fiber) {
     var effect = firstEffect;
 
     do {
-      var _effect2 = effect,
-          next = _effect2.next,
-          tag = _effect2.tag;
+      var _effect = effect,
+          next = _effect.next,
+          tag = _effect.tag;
 
       if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
-        {
-          {
-            invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
-          }
-
-          if (hasCaughtError()) {
-            if (!(fiber !== null)) {
-              {
-                throw Error( "Should be working on an effect." );
-              }
-            }
-
-            var error = clearCaughtError();
-            captureCommitPhaseError(fiber, fiber.return, error);
-          }
-        }
+        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
+        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
       }
 
       effect = next;
@@ -12710,10 +12546,7 @@ function commitLifeCycles(finishedRoot, current, finishedWork, committedLanes) {
           commitHookEffectListMount(Layout | HasEffect, finishedWork);
         }
 
-        if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags) {
-          schedulePassiveEffectCallback();
-        }
-
+        schedulePassiveEffects(finishedWork);
         return;
       }
 
@@ -12979,7 +12812,7 @@ function commitDetachRef(current) {
 // interrupt deletion, so it's okay
 
 
-function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+function commitUnmount(finishedRoot, current, renderPriorityLevel) {
   onCommitUnmount(current);
 
   switch (current.tag) {
@@ -12999,14 +12832,16 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
             var effect = firstEffect;
 
             do {
-              var _effect3 = effect,
-                  destroy = _effect3.destroy,
-                  tag = _effect3.tag;
+              var _effect2 = effect,
+                  destroy = _effect2.destroy,
+                  tag = _effect2.tag;
 
               if (destroy !== undefined) {
-                if ((tag & Layout) !== NoFlags$1) {
+                if ((tag & Passive$1) !== NoFlags$1) {
+                  enqueuePendingPassiveHookEffectUnmount(current, effect);
+                } else {
                   {
-                    safelyCallDestroy(current, nearestMountedAncestor, destroy);
+                    safelyCallDestroy(current, destroy);
                   }
                 }
               }
@@ -13021,11 +12856,11 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
 
     case ClassComponent:
       {
-        safelyDetachRef(current, nearestMountedAncestor);
+        safelyDetachRef(current);
         var instance = current.stateNode;
 
         if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(current, instance, nearestMountedAncestor);
+          safelyCallComponentWillUnmount(current, instance);
         }
 
         return;
@@ -13033,7 +12868,7 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
 
     case HostComponent:
       {
-        safelyDetachRef(current, nearestMountedAncestor);
+        safelyDetachRef(current);
         return;
       }
 
@@ -13043,7 +12878,7 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
         // We are also not using this parent because
         // the portal will get pushed immediately.
         if (supportsMutation) {
-          unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+          unmountHostComponents(finishedRoot, current);
         } else if (supportsPersistence) {
           emptyPortalContainer(current);
         }
@@ -13071,7 +12906,7 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
   }
 }
 
-function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor, renderPriorityLevel) {
+function commitNestedUnmounts(finishedRoot, root, renderPriorityLevel) {
   // While we're inside a removed host node we don't want to call
   // removeChild on the inner nodes because they're removed by the top
   // call anyway. We also want to call componentWillUnmount on all
@@ -13080,7 +12915,7 @@ function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor, render
   var node = root;
 
   while (true) {
-    commitUnmount(finishedRoot, node, nearestMountedAncestor); // Visit children because they may contain more composite or host nodes.
+    commitUnmount(finishedRoot, node); // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
 
     if (node.child !== null && ( // If we use mutation we drill down into portals using commitUnmount above.
@@ -13109,26 +12944,33 @@ function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor, render
 }
 
 function detachFiberMutation(fiber) {
-  // Cut off the return pointer to disconnect it from the tree.
-  // This enables us to detect and warn against state updates on an unmounted component.
-  // It also prevents events from bubbling from within disconnected components.
-  //
-  // Ideally, we should also clear the child pointer of the parent alternate to let this
+  // 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
   // 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.
+  // 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.
+  // Note: we cannot null out sibling here, otherwise it can cause issues
+  // with findDOMNode and how it requires the sibling field to carry out
+  // traversal in a later effect. See PR #16820. We now clear the sibling
+  // field after effects, see: detachFiberAfterEffects.
   //
-  // Note that we can't clear child or sibling pointers yet.
-  // They're needed for passive effects and for findDOMNode.
-  // We defer those fields, and all other cleanup, to the passive phase (see detachFiberAfterEffects).
-  var alternate = fiber.alternate;
+  // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.
+  // It may be required if the current component is an error boundary,
+  // and one of its descendants throws while unmounting a passive effect.
+  fiber.alternate = null;
+  fiber.child = null;
+  fiber.dependencies = null;
+  fiber.firstEffect = null;
+  fiber.lastEffect = null;
+  fiber.memoizedProps = null;
+  fiber.memoizedState = null;
+  fiber.pendingProps = null;
+  fiber.return = null;
+  fiber.updateQueue = null;
 
-  if (alternate !== null) {
-    alternate.return = null;
-    fiber.alternate = null;
+  {
+    fiber._debugOwner = null;
   }
-
-  fiber.return = null;
 }
 
 function emptyPortalContainer(current) {
@@ -13356,7 +13198,7 @@ function insertOrAppendPlacementNode(node, before, parent) {
   }
 }
 
-function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+function unmountHostComponents(finishedRoot, current, renderPriorityLevel) {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
   var node = current; // Each iteration, currentParent is populated with node's host parent if not
@@ -13405,7 +13247,7 @@ function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, re
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor); // After all the children have unmounted, it is now safe to remove the
+      commitNestedUnmounts(finishedRoot, node); // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
 
       if (currentParentIsContainer) {
@@ -13426,7 +13268,7 @@ function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, re
         continue;
       }
     } else {
-      commitUnmount(finishedRoot, node, nearestMountedAncestor); // Visit children because we may find more host components below.
+      commitUnmount(finishedRoot, node); // Visit children because we may find more host components below.
 
       if (node.child !== null) {
         node.child.return = node;
@@ -13458,14 +13300,14 @@ function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, re
   }
 }
 
-function commitDeletion(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+function commitDeletion(finishedRoot, current, renderPriorityLevel) {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+    unmountHostComponents(finishedRoot, current);
   } else {
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(finishedRoot, current, nearestMountedAncestor);
+    commitNestedUnmounts(finishedRoot, current);
   }
 
   var alternate = current.alternate;
@@ -13491,7 +13333,7 @@ function commitWork(current, finishedWork) {
           // e.g. a destroy function in one component should never override a ref set
           // by a create function in another component during the same commit.
           {
-            commitHookEffectListUnmount(Layout | HasEffect, finishedWork, finishedWork.return);
+            commitHookEffectListUnmount(Layout | HasEffect, finishedWork);
           }
 
           return;
@@ -13554,7 +13396,7 @@ function commitWork(current, finishedWork) {
         // e.g. a destroy function in one component should never override a ref set
         // by a create function in another component during the same commit.
         {
-          commitHookEffectListUnmount(Layout | HasEffect, finishedWork, finishedWork.return);
+          commitHookEffectListUnmount(Layout | HasEffect, finishedWork);
         }
 
         return;
@@ -13776,42 +13618,6 @@ function commitResetTextContent(current) {
   resetTextContent(current.stateNode);
 }
 
-function commitPassiveWork(finishedWork) {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent:
-    case Block:
-      {
-        commitHookEffectListUnmount2(Passive$1 | HasEffect, finishedWork, finishedWork.return);
-        break;
-      }
-  }
-}
-
-function commitPassiveUnmount(current, nearestMountedAncestor) {
-  switch (current.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent:
-    case Block:
-      commitHookEffectListUnmount2(Passive$1, current, nearestMountedAncestor);
-  }
-}
-
-function commitPassiveLifeCycles(finishedRoot, finishedWork) {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent:
-    case Block:
-      {
-        commitHookEffectListMount2(finishedWork);
-        break;
-      }
-  }
-}
-
 var COMPONENT_TYPE = 0;
 var HAS_PSEUDO_CLASS_TYPE = 1;
 var ROLE_TYPE = 2;
@@ -14418,6 +14224,7 @@ function resetRenderTimer() {
 function getRenderTargetTime() {
   return workInProgressRootRenderTargetTime;
 }
+var nextEffect = null;
 var hasUncaughtError = false;
 var firstUncaughtError = null;
 var legacyErrorBoundariesThatAlreadyFailed = null;
@@ -14425,6 +14232,8 @@ var rootDoesHavePassiveEffects = false;
 var rootWithPendingPassiveEffects = null;
 var pendingPassiveEffectsRenderPriority = NoPriority$1;
 var pendingPassiveEffectsLanes = NoLanes;
+var pendingPassiveHookEffectsMount = [];
+var pendingPassiveHookEffectsUnmount = [];
 var rootsWithPendingDiscreteUpdates = null; // Use these to prevent an infinite loop of nested updates
 
 var NESTED_UPDATE_LIMIT = 50;
@@ -14747,7 +14556,7 @@ function ensureRootIsScheduled(root, currentTime) {
 // goes through Scheduler.
 
 
-function performConcurrentWorkOnRoot(root, didTimeout) {
+function performConcurrentWorkOnRoot(root) {
   // Since we know we're in a React event, we can clear the current
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
@@ -14783,18 +14592,6 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   if (lanes === NoLanes) {
     // Defensive coding. This is never expected to happen.
     return null;
-  } // TODO: We only check `didTimeout` defensively, to account for a Scheduler
-  // bug we're still investigating. Once the bug in Scheduler is fixed,
-  // we can remove this, since we track expiration ourselves.
-
-
-  if ( didTimeout) {
-    // Something expired. Flush synchronously until there's no expired
-    // work left.
-    markRootExpired(root, lanes); // This will schedule a synchronous callback.
-
-    ensureRootIsScheduled(root, now$1());
-    return null;
   }
 
   var exitStatus = renderRootConcurrent(root, lanes);
@@ -15588,19 +15385,59 @@ function completeUnitOfWork(unitOfWork) {
         workInProgress = next;
         return;
       }
-    } else {
-      // This fiber did not complete because something threw. Pop values off
-      // the stack without entering the complete phase. If this is a boundary,
-      // capture values if possible.
-      var _next = unwindWork(completedWork); // Because this fiber did not complete, don't reset its expiration time.
 
+      resetChildLanes(completedWork);
 
-      if (_next !== null) {
-        // If completing this work spawned new work, do that next. We'll come
-        // back here again.
-        // Since we're restarting, remove anything that is not a host effect
-        // from the effect tag.
-        _next.flags &= HostEffectMask;
+      if (returnFiber !== null && // Do not append effects to parents if a sibling failed to complete
+      (returnFiber.flags & Incomplete) === NoFlags) {
+        // Append all the effects of the subtree and this fiber onto the effect
+        // list of the parent. The completion order of the children affects the
+        // side-effect order.
+        if (returnFiber.firstEffect === null) {
+          returnFiber.firstEffect = completedWork.firstEffect;
+        }
+
+        if (completedWork.lastEffect !== null) {
+          if (returnFiber.lastEffect !== null) {
+            returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
+          }
+
+          returnFiber.lastEffect = completedWork.lastEffect;
+        } // If this fiber had side-effects, we append it AFTER the children's
+        // side-effects. We can perform certain side-effects earlier if needed,
+        // by doing multiple passes over the effect list. We don't want to
+        // schedule our own side-effect on our own list because if end up
+        // reusing children we'll schedule this effect onto itself since we're
+        // at the end.
+
+
+        var flags = completedWork.flags; // Skip both NoWork and PerformedWork tags when creating the effect
+        // list. PerformedWork effect is read by React DevTools but shouldn't be
+        // committed.
+
+        if (flags > PerformedWork) {
+          if (returnFiber.lastEffect !== null) {
+            returnFiber.lastEffect.nextEffect = completedWork;
+          } else {
+            returnFiber.firstEffect = completedWork;
+          }
+
+          returnFiber.lastEffect = completedWork;
+        }
+      }
+    } else {
+      // This fiber did not complete because something threw. Pop values off
+      // the stack without entering the complete phase. If this is a boundary,
+      // capture values if possible.
+      var _next = unwindWork(completedWork); // Because this fiber did not complete, don't reset its expiration time.
+
+
+      if (_next !== null) {
+        // If completing this work spawned new work, do that next. We'll come
+        // back here again.
+        // Since we're restarting, remove anything that is not a host effect
+        // from the effect tag.
+        _next.flags &= HostEffectMask;
         workInProgress = _next;
         return;
       }
@@ -15621,10 +15458,9 @@ function completeUnitOfWork(unitOfWork) {
       }
 
       if (returnFiber !== null) {
-        // Mark the parent fiber as incomplete
+        // Mark the parent fiber as incomplete and clear its effect list.
+        returnFiber.firstEffect = returnFiber.lastEffect = null;
         returnFiber.flags |= Incomplete;
-        returnFiber.subtreeFlags = NoFlags;
-        returnFiber.deletions = null;
       }
     }
 
@@ -15648,6 +15484,68 @@ function completeUnitOfWork(unitOfWork) {
   }
 }
 
+function resetChildLanes(completedWork) {
+  if ( // TODO: Move this check out of the hot path by moving `resetChildLanes`
+  // to switch statement in `completeWork`.
+  (completedWork.tag === LegacyHiddenComponent || completedWork.tag === OffscreenComponent) && completedWork.memoizedState !== null && !includesSomeLane(subtreeRenderLanes, OffscreenLane) && (completedWork.mode & ConcurrentMode) !== NoLanes) {
+    // The children of this component are hidden. Don't bubble their
+    // expiration times.
+    return;
+  }
+
+  var newChildLanes = NoLanes; // Bubble up the earliest expiration time.
+
+  if ( (completedWork.mode & ProfileMode) !== NoMode) {
+    // In profiling mode, resetChildExpirationTime is also used to reset
+    // profiler durations.
+    var actualDuration = completedWork.actualDuration;
+    var treeBaseDuration = completedWork.selfBaseDuration; // When a fiber is cloned, its actualDuration is reset to 0. This value will
+    // only be updated if work is done on the fiber (i.e. it doesn't bailout).
+    // When work is done, it should bubble to the parent's actualDuration. If
+    // the fiber has not been cloned though, (meaning no work was done), then
+    // this value will reflect the amount of time spent working on a previous
+    // render. In that case it should not bubble. We determine whether it was
+    // cloned by comparing the child pointer.
+
+    var shouldBubbleActualDurations = completedWork.alternate === null || completedWork.child !== completedWork.alternate.child;
+    var child = completedWork.child;
+
+    while (child !== null) {
+      newChildLanes = mergeLanes(newChildLanes, mergeLanes(child.lanes, child.childLanes));
+
+      if (shouldBubbleActualDurations) {
+        actualDuration += child.actualDuration;
+      }
+
+      treeBaseDuration += child.treeBaseDuration;
+      child = child.sibling;
+    }
+
+    var isTimedOutSuspense = completedWork.tag === SuspenseComponent && completedWork.memoizedState !== null;
+
+    if (isTimedOutSuspense) {
+      // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+      var primaryChildFragment = completedWork.child;
+
+      if (primaryChildFragment !== null) {
+        treeBaseDuration -= primaryChildFragment.treeBaseDuration;
+      }
+    }
+
+    completedWork.actualDuration = actualDuration;
+    completedWork.treeBaseDuration = treeBaseDuration;
+  } else {
+    var _child = completedWork.child;
+
+    while (_child !== null) {
+      newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child.lanes, _child.childLanes));
+      _child = _child.sibling;
+    }
+  }
+
+  completedWork.childLanes = newChildLanes;
+}
+
 function commitRoot(root) {
   var renderPriorityLevel = getCurrentPriorityLevel();
   runWithPriority(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
@@ -15711,17 +15609,28 @@ function commitRootImpl(root, renderPriorityLevel) {
     workInProgressRoot = null;
     workInProgress = null;
     workInProgressRootRenderLanes = NoLanes;
-  } // Check if there are any effects in the whole tree.
-  // TODO: This is left over from the effect list implementation, where we had
-  // to check for the existence of `firstEffect` to satsify Flow. I think the
-  // only other reason this optimization exists is because it affects profiling.
-  // Reconsider whether this is necessary.
+  } // Get the list of effects.
 
 
-  var subtreeHasEffects = (finishedWork.subtreeFlags & (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !== NoFlags;
-  var rootHasEffect = (finishedWork.flags & (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !== NoFlags;
+  var firstEffect;
 
-  if (subtreeHasEffects || rootHasEffect) {
+  if (finishedWork.flags > PerformedWork) {
+    // A fiber's effect list consists only of its children, not itself. So if
+    // the root has an effect, we need to add it to the end of the list. The
+    // resulting list is the set that would belong to the root's parent, if it
+    // had one; that is, all the effects in the tree including the root.
+    if (finishedWork.lastEffect !== null) {
+      finishedWork.lastEffect.nextEffect = finishedWork;
+      firstEffect = finishedWork.firstEffect;
+    } else {
+      firstEffect = finishedWork;
+    }
+  } else {
+    // There is no effect on the root.
+    firstEffect = finishedWork.firstEffect;
+  }
+
+  if (firstEffect !== null) {
 
     var prevExecutionContext = executionContext;
     executionContext |= CommitContext;
@@ -15736,7 +15645,26 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     focusedInstanceHandle = prepareForCommit(root.containerInfo);
     shouldFireAfterActiveInstanceBlur = false;
-    commitBeforeMutationEffects(finishedWork); // We no longer need to track the active instance fiber
+    nextEffect = firstEffect;
+
+    do {
+      {
+        invokeGuardedCallback(null, commitBeforeMutationEffects, null);
+
+        if (hasCaughtError()) {
+          if (!(nextEffect !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var error = clearCaughtError();
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      }
+    } while (nextEffect !== null); // We no longer need to track the active instance fiber
+
 
     focusedInstanceHandle = null;
 
@@ -15747,7 +15675,26 @@ function commitRootImpl(root, renderPriorityLevel) {
     } // The next phase is the mutation phase, where we mutate the host tree.
 
 
-    commitMutationEffects(finishedWork, root, renderPriorityLevel);
+    nextEffect = firstEffect;
+
+    do {
+      {
+        invokeGuardedCallback(null, commitMutationEffects, null, root, renderPriorityLevel);
+
+        if (hasCaughtError()) {
+          if (!(nextEffect !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var _error = clearCaughtError();
+
+          captureCommitPhaseError(nextEffect, _error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      }
+    } while (nextEffect !== null);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -15759,21 +15706,32 @@ function commitRootImpl(root, renderPriorityLevel) {
     // work is current during componentDidMount/Update.
 
     root.current = finishedWork; // The next phase is the layout phase, where we call effects that read
+    // the host tree after it's been mutated. The idiomatic use case for this is
+    // layout, but class component lifecycles also fire here for legacy reasons.
 
-    commitLayoutEffects(finishedWork, root, lanes);
+    nextEffect = firstEffect;
 
+    do {
+      {
+        invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
 
-    if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags || (finishedWork.flags & PassiveMask) !== NoFlags) {
-      if (!rootDoesHavePassiveEffects) {
-        rootDoesHavePassiveEffects = true;
-        scheduleCallback(NormalPriority$1, function () {
-          flushPassiveEffects();
-          return null;
-        });
+        if (hasCaughtError()) {
+          if (!(nextEffect !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var _error2 = clearCaughtError();
+
+          captureCommitPhaseError(nextEffect, _error2);
+          nextEffect = nextEffect.nextEffect;
+        }
       }
-    } // Tell Scheduler to yield at the end of the frame, so the browser has an
-    // opportunity to paint.
+    } while (nextEffect !== null);
 
+    nextEffect = null; // Tell Scheduler to yield at the end of the frame, so the browser has an
+    // opportunity to paint.
 
     requestPaint();
 
@@ -15802,6 +15760,22 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
     pendingPassiveEffectsRenderPriority = renderPriorityLevel;
+  } else {
+    // We are done with the effect chain at this point so let's clear the
+    // nextEffect pointers to assist with GC. If we have passive effects, we'll
+    // clear this in flushPassiveEffects.
+    nextEffect = firstEffect;
+
+    while (nextEffect !== null) {
+      var nextNextEffect = nextEffect.nextEffect;
+      nextEffect.nextEffect = null;
+
+      if (nextEffect.flags & Deletion) {
+        detachFiberAfterEffects(nextEffect);
+      }
+
+      nextEffect = nextNextEffect;
+    }
   } // Read this again, since an effect might have updated it
 
 
@@ -15861,9 +15835,9 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   if (hasUncaughtError) {
     hasUncaughtError = false;
-    var error = firstUncaughtError;
+    var _error3 = firstUncaughtError;
     firstUncaughtError = null;
-    throw error;
+    throw _error3;
   }
 
   if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
@@ -15881,257 +15855,153 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
-function commitBeforeMutationEffects(firstChild) {
-  var fiber = firstChild;
-
-  while (fiber !== null) {
-    if (fiber.deletions !== null) {
-      commitBeforeMutationEffectsDeletions(fiber.deletions);
-    }
-
-    if (fiber.child !== null) {
-      var primarySubtreeFlags = fiber.subtreeFlags & BeforeMutationMask;
+function commitBeforeMutationEffects() {
+  while (nextEffect !== null) {
+    var current = nextEffect.alternate;
 
-      if (primarySubtreeFlags !== NoFlags) {
-        commitBeforeMutationEffects(fiber.child);
+    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
+      if ((nextEffect.flags & Deletion) !== NoFlags) {
+        if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
+          shouldFireAfterActiveInstanceBlur = true;
+          beforeActiveInstanceBlur();
+        }
+      } else {
+        // TODO: Move this out of the hot path using a dedicated effect tag.
+        if (nextEffect.tag === SuspenseComponent && isSuspenseBoundaryBeingHidden(current, nextEffect) && doesFiberContain(nextEffect, focusedInstanceHandle)) {
+          shouldFireAfterActiveInstanceBlur = true;
+          beforeActiveInstanceBlur();
+        }
       }
     }
 
-    {
-      setCurrentFiber(fiber);
-      invokeGuardedCallback(null, commitBeforeMutationEffectsImpl, null, fiber);
-
-      if (hasCaughtError()) {
-        var error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
+    var flags = nextEffect.flags;
 
+    if ((flags & Snapshot) !== NoFlags) {
+      setCurrentFiber(nextEffect);
+      commitBeforeMutationLifeCycles(current, nextEffect);
       resetCurrentFiber();
     }
 
-    fiber = fiber.sibling;
-  }
-}
-
-function commitBeforeMutationEffectsImpl(fiber) {
-  var current = fiber.alternate;
-  var flags = fiber.flags;
-
-  if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
-    // Check to see if the focused element was inside of a hidden (Suspense) subtree.
-    // TODO: Move this out of the hot path using a dedicated effect tag.
-    if (fiber.tag === SuspenseComponent && isSuspenseBoundaryBeingHidden(current, fiber) && doesFiberContain(fiber, focusedInstanceHandle)) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur();
-    }
-  }
-
-  if ((flags & Snapshot) !== NoFlags) {
-    setCurrentFiber(fiber);
-    commitBeforeMutationLifeCycles(current, fiber);
-    resetCurrentFiber();
-  }
-
-  if ((flags & Passive) !== NoFlags) {
-    // If there are passive effects, schedule a callback to flush at
-    // the earliest opportunity.
-    if (!rootDoesHavePassiveEffects) {
-      rootDoesHavePassiveEffects = true;
-      scheduleCallback(NormalPriority$1, function () {
-        flushPassiveEffects();
-        return null;
-      });
-    }
-  }
-}
-
-function commitBeforeMutationEffectsDeletions(deletions) {
-  for (var i = 0; i < deletions.length; i++) {
-    var fiber = deletions[i]; // TODO (effects) It would be nice to avoid calling doesFiberContain()
-    // Maybe we can repurpose one of the subtreeFlags positions for this instead?
-    // Use it to store which part of the tree the focused instance is in?
-    // This assumes we can safely determine that instance during the "render" phase.
-
-    if (doesFiberContain(fiber, focusedInstanceHandle)) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur();
-    }
-  }
-}
-
-function commitMutationEffects(firstChild, root, renderPriorityLevel) {
-  var fiber = firstChild;
-
-  while (fiber !== null) {
-    var deletions = fiber.deletions;
-
-    if (deletions !== null) {
-      commitMutationEffectsDeletions(deletions, fiber, root, renderPriorityLevel);
-    }
-
-    if (fiber.child !== null) {
-      var mutationFlags = fiber.subtreeFlags & MutationMask;
-
-      if (mutationFlags !== NoFlags) {
-        commitMutationEffects(fiber.child, root, renderPriorityLevel);
-      }
-    }
-
-    {
-      setCurrentFiber(fiber);
-      invokeGuardedCallback(null, commitMutationEffectsImpl, null, fiber, root, renderPriorityLevel);
-
-      if (hasCaughtError()) {
-        var error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
+    if ((flags & Passive) !== NoFlags) {
+      // If there are passive effects, schedule a callback to flush at
+      // the earliest opportunity.
+      if (!rootDoesHavePassiveEffects) {
+        rootDoesHavePassiveEffects = true;
+        scheduleCallback(NormalPriority$1, function () {
+          flushPassiveEffects();
+          return null;
+        });
       }
-
-      resetCurrentFiber();
     }
 
-    fiber = fiber.sibling;
+    nextEffect = nextEffect.nextEffect;
   }
 }
 
-function commitMutationEffectsImpl(fiber, root, renderPriorityLevel) {
-  var flags = fiber.flags;
-
-  if (flags & ContentReset) {
-    commitResetTextContent(fiber);
-  }
+function commitMutationEffects(root, renderPriorityLevel) {
+  // TODO: Should probably move the bulk of this function to commitWork.
+  while (nextEffect !== null) {
+    setCurrentFiber(nextEffect);
+    var flags = nextEffect.flags;
 
-  if (flags & Ref) {
-    var current = fiber.alternate;
-
-    if (current !== null) {
-      commitDetachRef(current);
+    if (flags & ContentReset) {
+      commitResetTextContent(nextEffect);
     }
-  } // The following switch statement is only concerned about placement,
-  // updates, and deletions. To avoid needing to add a case for every possible
-  // bitmap value, we remove the secondary effects from the effect tag and
-  // switch on that value.
 
+    if (flags & Ref) {
+      var current = nextEffect.alternate;
 
-  var primaryFlags = flags & (Placement | Update | Hydrating);
+      if (current !== null) {
+        commitDetachRef(current);
+      }
+    } // The following switch statement is only concerned about placement,
+    // updates, and deletions. To avoid needing to add a case for every possible
+    // bitmap value, we remove the secondary effects from the effect tag and
+    // switch on that value.
 
-  switch (primaryFlags) {
-    case Placement:
-      {
-        commitPlacement(fiber); // Clear the "placement" from effect tag so that we know that this is
-        // inserted, before any life-cycles like componentDidMount gets called.
-        // TODO: findDOMNode doesn't rely on this any more but isMounted does
-        // and isMounted is deprecated anyway so we should be able to kill this.
 
-        fiber.flags &= ~Placement;
-        break;
-      }
+    var primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
 
-    case PlacementAndUpdate:
-      {
-        // Placement
-        commitPlacement(fiber); // Clear the "placement" from effect tag so that we know that this is
-        // inserted, before any life-cycles like componentDidMount gets called.
+    switch (primaryFlags) {
+      case Placement:
+        {
+          commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is
+          // inserted, before any life-cycles like componentDidMount gets called.
+          // TODO: findDOMNode doesn't rely on this any more but isMounted does
+          // and isMounted is deprecated anyway so we should be able to kill this.
 
-        fiber.flags &= ~Placement; // Update
+          nextEffect.flags &= ~Placement;
+          break;
+        }
 
-        var _current = fiber.alternate;
-        commitWork(_current, fiber);
-        break;
-      }
+      case PlacementAndUpdate:
+        {
+          // Placement
+          commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is
+          // inserted, before any life-cycles like componentDidMount gets called.
 
-    case Hydrating:
-      {
-        fiber.flags &= ~Hydrating;
-        break;
-      }
+          nextEffect.flags &= ~Placement; // Update
 
-    case HydratingAndUpdate:
-      {
-        fiber.flags &= ~Hydrating; // Update
+          var _current = nextEffect.alternate;
+          commitWork(_current, nextEffect);
+          break;
+        }
 
-        var _current2 = fiber.alternate;
-        commitWork(_current2, fiber);
-        break;
-      }
+      case Hydrating:
+        {
+          nextEffect.flags &= ~Hydrating;
+          break;
+        }
 
-    case Update:
-      {
-        var _current3 = fiber.alternate;
-        commitWork(_current3, fiber);
-        break;
-      }
-  }
-}
+      case HydratingAndUpdate:
+        {
+          nextEffect.flags &= ~Hydrating; // Update
 
-function commitMutationEffectsDeletions(deletions, nearestMountedAncestor, root, renderPriorityLevel) {
-  for (var i = 0; i < deletions.length; i++) {
-    var childToDelete = deletions[i];
+          var _current2 = nextEffect.alternate;
+          commitWork(_current2, nextEffect);
+          break;
+        }
 
-    {
-      invokeGuardedCallback(null, commitDeletion, null, root, childToDelete, nearestMountedAncestor, renderPriorityLevel);
+      case Update:
+        {
+          var _current3 = nextEffect.alternate;
+          commitWork(_current3, nextEffect);
+          break;
+        }
 
-      if (hasCaughtError()) {
-        var error = clearCaughtError();
-        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);
-      }
+      case Deletion:
+        {
+          commitDeletion(root, nextEffect);
+          break;
+        }
     }
-  }
-}
 
-function schedulePassiveEffectCallback() {
-  if (!rootDoesHavePassiveEffects) {
-    rootDoesHavePassiveEffects = true;
-    scheduleCallback(NormalPriority$1, function () {
-      flushPassiveEffects();
-      return null;
-    });
+    resetCurrentFiber();
+    nextEffect = nextEffect.nextEffect;
   }
 }
 
-function commitLayoutEffects(firstChild, root, committedLanes) {
-  var fiber = firstChild;
+function commitLayoutEffects(root, committedLanes) {
 
-  while (fiber !== null) {
-    if (fiber.child !== null) {
-      var primarySubtreeFlags = fiber.subtreeFlags & LayoutMask;
 
-      if (primarySubtreeFlags !== NoFlags) {
-        commitLayoutEffects(fiber.child, root, committedLanes);
-      }
+  while (nextEffect !== null) {
+    setCurrentFiber(nextEffect);
+    var flags = nextEffect.flags;
+
+    if (flags & (Update | Callback)) {
+      var current = nextEffect.alternate;
+      commitLifeCycles(root, current, nextEffect);
     }
 
     {
-      setCurrentFiber(fiber);
-      invokeGuardedCallback(null, commitLayoutEffectsImpl, null, fiber, root, committedLanes);
-
-      if (hasCaughtError()) {
-        var error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
+      if (flags & Ref) {
+        commitAttachRef(nextEffect);
       }
-
-      resetCurrentFiber();
     }
 
-    fiber = fiber.sibling;
-  }
-}
-
-function commitLayoutEffectsImpl(fiber, root, committedLanes) {
-  var flags = fiber.flags;
-  setCurrentFiber(fiber);
-
-  if (flags & (Update | Callback)) {
-    var current = fiber.alternate;
-    commitLifeCycles(root, current, fiber);
-  }
-
-  {
-    if (flags & Ref) {
-      commitAttachRef(fiber);
-    }
+    resetCurrentFiber();
+    nextEffect = nextEffect.nextEffect;
   }
-
-  resetCurrentFiber();
 }
 
 function flushPassiveEffects() {
@@ -16147,87 +16017,41 @@ function flushPassiveEffects() {
 
   return false;
 }
+function enqueuePendingPassiveHookEffectMount(fiber, effect) {
+  pendingPassiveHookEffectsMount.push(effect, fiber);
 
-function flushPassiveMountEffects(root, firstChild) {
-  var fiber = firstChild;
-
-  while (fiber !== null) {
-    var primarySubtreeFlags = fiber.subtreeFlags & PassiveMask;
-
-    if (fiber.child !== null && primarySubtreeFlags !== NoFlags) {
-      flushPassiveMountEffects(root, fiber.child);
-    }
-
-    if ((fiber.flags & Passive) !== NoFlags) {
-      setCurrentFiber(fiber);
-      commitPassiveLifeCycles(root, fiber);
-      resetCurrentFiber();
-    }
-
-    fiber = fiber.sibling;
+  if (!rootDoesHavePassiveEffects) {
+    rootDoesHavePassiveEffects = true;
+    scheduleCallback(NormalPriority$1, function () {
+      flushPassiveEffects();
+      return null;
+    });
   }
 }
+function enqueuePendingPassiveHookEffectUnmount(fiber, effect) {
+  pendingPassiveHookEffectsUnmount.push(effect, fiber);
 
-function flushPassiveUnmountEffects(firstChild) {
-  var fiber = firstChild;
-
-  while (fiber !== null) {
-    var deletions = fiber.deletions;
-
-    if (deletions !== null) {
-      for (var i = 0; i < deletions.length; i++) {
-        var fiberToDelete = deletions[i];
-        flushPassiveUnmountEffectsInsideOfDeletedTree(fiberToDelete, fiber); // Now that passive effects have been processed, it's safe to detach lingering pointers.
-
-        detachFiberAfterEffects(fiberToDelete);
-      }
-    }
-
-    var child = fiber.child;
-
-    if (child !== null) {
-      // If any children have passive effects then traverse the subtree.
-      // Note that this requires checking subtreeFlags of the current Fiber,
-      // rather than the subtreeFlags/effectsTag of the first child,
-      // since that would not cover passive effects in siblings.
-      var passiveFlags = fiber.subtreeFlags & PassiveMask;
-
-      if (passiveFlags !== NoFlags) {
-        flushPassiveUnmountEffects(child);
-      }
-    }
-
-    var primaryFlags = fiber.flags & Passive;
+  {
+    fiber.flags |= PassiveUnmountPendingDev;
+    var alternate = fiber.alternate;
 
-    if (primaryFlags !== NoFlags) {
-      setCurrentFiber(fiber);
-      commitPassiveWork(fiber);
-      resetCurrentFiber();
+    if (alternate !== null) {
+      alternate.flags |= PassiveUnmountPendingDev;
     }
-
-    fiber = fiber.sibling;
   }
-}
-
-function flushPassiveUnmountEffectsInsideOfDeletedTree(fiberToDelete, nearestMountedAncestor) {
-  if ((fiberToDelete.subtreeFlags & PassiveStatic) !== NoFlags) {
-    // If any children have passive effects then traverse the subtree.
-    // Note that this requires checking subtreeFlags of the current Fiber,
-    // rather than the subtreeFlags/effectsTag of the first child,
-    // since that would not cover passive effects in siblings.
-    var child = fiberToDelete.child;
 
-    while (child !== null) {
-      flushPassiveUnmountEffectsInsideOfDeletedTree(child, nearestMountedAncestor);
-      child = child.sibling;
-    }
+  if (!rootDoesHavePassiveEffects) {
+    rootDoesHavePassiveEffects = true;
+    scheduleCallback(NormalPriority$1, function () {
+      flushPassiveEffects();
+      return null;
+    });
   }
+}
 
-  if ((fiberToDelete.flags & PassiveStatic) !== NoFlags) {
-    setCurrentFiber(fiberToDelete);
-    commitPassiveUnmount(fiberToDelete, nearestMountedAncestor);
-    resetCurrentFiber();
-  }
+function invokePassiveEffectCreate(effect) {
+  var create = effect.create;
+  effect.destroy = create();
 }
 
 function flushPassiveEffectsImpl() {
@@ -16258,9 +16082,97 @@ function flushPassiveEffectsImpl() {
   // e.g. a destroy function in one component may unintentionally override a ref
   // value set by a create function in another component.
   // Layout effects have the same constraint.
+  // First pass: Destroy stale passive effects.
+
+  var unmountEffects = pendingPassiveHookEffectsUnmount;
+  pendingPassiveHookEffectsUnmount = [];
+
+  for (var i = 0; i < unmountEffects.length; i += 2) {
+    var _effect = unmountEffects[i];
+    var fiber = unmountEffects[i + 1];
+    var destroy = _effect.destroy;
+    _effect.destroy = undefined;
+
+    {
+      fiber.flags &= ~PassiveUnmountPendingDev;
+      var alternate = fiber.alternate;
+
+      if (alternate !== null) {
+        alternate.flags &= ~PassiveUnmountPendingDev;
+      }
+    }
+
+    if (typeof destroy === 'function') {
+      {
+        setCurrentFiber(fiber);
+
+        {
+          invokeGuardedCallback(null, destroy, null);
+        }
 
-  flushPassiveUnmountEffects(root.current);
-  flushPassiveMountEffects(root, root.current);
+        if (hasCaughtError()) {
+          if (!(fiber !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var error = clearCaughtError();
+          captureCommitPhaseError(fiber, error);
+        }
+
+        resetCurrentFiber();
+      }
+    }
+  } // Second pass: Create new passive effects.
+
+
+  var mountEffects = pendingPassiveHookEffectsMount;
+  pendingPassiveHookEffectsMount = [];
+
+  for (var _i = 0; _i < mountEffects.length; _i += 2) {
+    var _effect2 = mountEffects[_i];
+    var _fiber = mountEffects[_i + 1];
+
+    {
+      setCurrentFiber(_fiber);
+
+      {
+        invokeGuardedCallback(null, invokePassiveEffectCreate, null, _effect2);
+      }
+
+      if (hasCaughtError()) {
+        if (!(_fiber !== null)) {
+          {
+            throw Error( "Should be working on an effect." );
+          }
+        }
+
+        var _error4 = clearCaughtError();
+
+        captureCommitPhaseError(_fiber, _error4);
+      }
+
+      resetCurrentFiber();
+    }
+  } // Note: This currently assumes there are no passive effects on the root fiber
+  // because the root is not part of its own effect list.
+  // This could change in the future.
+
+
+  var effect = root.current.firstEffect;
+
+  while (effect !== null) {
+    var nextNextEffect = effect.nextEffect; // Remove nextEffect pointer to assist GC
+
+    effect.nextEffect = null;
+
+    if (effect.flags & Deletion) {
+      detachFiberAfterEffects(effect);
+    }
+
+    effect = nextNextEffect;
+  }
 
   {
     popInteractions(prevInteractions);
@@ -16313,7 +16225,7 @@ function captureCommitPhaseErrorOnRoot(rootFiber, sourceFiber, error) {
   }
 }
 
-function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
+function captureCommitPhaseError(sourceFiber, error) {
   if (sourceFiber.tag === HostRoot) {
     // Error was thrown at the root. There is no parent, so the root
     // itself should capture it.
@@ -16321,11 +16233,7 @@ function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
     return;
   }
 
-  var fiber = null;
-
-  {
-    fiber = nearestMountedAncestor;
-  }
+  var fiber = sourceFiber.return;
 
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
@@ -16346,6 +16254,20 @@ function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
           markRootUpdated(root, SyncLane, eventTime);
           ensureRootIsScheduled(root, eventTime);
           schedulePendingInteractions(root, SyncLane);
+        } else {
+          // This component has already been unmounted.
+          // We can't schedule any follow up work for the root because the fiber is already unmounted,
+          // but we can still call the log-only boundary so the error isn't swallowed.
+          //
+          // TODO This is only a temporary bandaid for the old reconciler fork.
+          // We can delete this special case once the new fork is merged.
+          if (typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {
+            try {
+              instance.componentDidCatch(error, errorInfo);
+            } catch (errorToIgnore) {// TODO Ignore this error? Rethrow it?
+              // This is kind of an edge case.
+            }
+          }
         }
 
         return;
@@ -16528,29 +16450,12 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
     if (tag !== HostRoot && tag !== ClassComponent && tag !== FunctionComponent && tag !== ForwardRef && tag !== MemoComponent && tag !== SimpleMemoComponent && tag !== Block) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;
-    }
-
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      var updateQueue = fiber.updateQueue;
+    } // If there are pending passive effects unmounts for this Fiber,
+    // we can assume that they would have prevented this update.
 
-      if (updateQueue !== null) {
-        var lastEffect = updateQueue.lastEffect;
 
-        if (lastEffect !== null) {
-          var firstEffect = lastEffect.next;
-          var effect = firstEffect;
-
-          do {
-            if (effect.destroy !== undefined) {
-              if ((effect.tag & Passive$1) !== NoFlags$1) {
-                return;
-              }
-            }
-
-            effect = effect.next;
-          } while (effect !== firstEffect);
-        }
-      }
+    if ((fiber.flags & PassiveUnmountPendingDev) !== NoFlags) {
+      return;
     } // We show the whole stack but dedupe on the top component's name because
     // the problematic code almost always lies inside that component.
 
@@ -17057,21 +16962,8 @@ function act(callback) {
 }
 
 function detachFiberAfterEffects(fiber) {
-  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
-  // Note that we already cleared the return pointer in detachFiberMutation().
-  fiber.child = null;
-  fiber.deletions = null;
-  fiber.dependencies = null;
-  fiber.memoizedProps = null;
-  fiber.memoizedState = null;
-  fiber.pendingProps = null;
   fiber.sibling = null;
   fiber.stateNode = null;
-  fiber.updateQueue = null;
-
-  {
-    fiber._debugOwner = null;
-  }
 }
 
 var resolveFamily = null; // $FlowFixMe Flow gets confused by a WeakSet feature check below.
@@ -17511,8 +17403,9 @@ function FiberNode(tag, pendingProps, key, mode) {
   this.mode = mode; // Effects
 
   this.flags = NoFlags;
-  this.subtreeFlags = NoFlags;
-  this.deletions = null;
+  this.nextEffect = null;
+  this.firstEffect = null;
+  this.lastEffect = null;
   this.lanes = NoLanes;
   this.childLanes = NoLanes;
   this.alternate = null;
@@ -17629,9 +17522,13 @@ function createWorkInProgress(current, pendingProps) {
     workInProgress.pendingProps = pendingProps; // Needed because Blocks store data on type.
 
     workInProgress.type = current.type; // We already have an alternate.
+    // Reset the effect tag.
+
+    workInProgress.flags = NoFlags; // The effect list is no longer valid.
 
-    workInProgress.subtreeFlags = NoFlags;
-    workInProgress.deletions = null;
+    workInProgress.nextEffect = null;
+    workInProgress.firstEffect = null;
+    workInProgress.lastEffect = null;
 
     {
       // We intentionally reset, rather than copy, actualDuration & actualStartTime.
@@ -17641,11 +17538,8 @@ function createWorkInProgress(current, pendingProps) {
       workInProgress.actualDuration = 0;
       workInProgress.actualStartTime = -1;
     }
-  } // Reset all effects except static ones.
-  // Static effects are not specific to a render.
-
+  }
 
-  workInProgress.flags = current.flags & StaticMask;
   workInProgress.childLanes = current.childLanes;
   workInProgress.lanes = current.lanes;
   workInProgress.child = current.child;
@@ -17701,7 +17595,11 @@ function resetWorkInProgress(workInProgress, renderLanes) {
   // avoid doing another reconciliation.
   // Reset the effect tag but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
-  workInProgress.flags &= Placement;
+  workInProgress.flags &= Placement; // The effect list is no longer valid.
+
+  workInProgress.nextEffect = null;
+  workInProgress.firstEffect = null;
+  workInProgress.lastEffect = null;
   var current = workInProgress.alternate;
 
   if (current === null) {
@@ -17709,7 +17607,6 @@ function resetWorkInProgress(workInProgress, renderLanes) {
     workInProgress.childLanes = NoLanes;
     workInProgress.lanes = renderLanes;
     workInProgress.child = null;
-    workInProgress.subtreeFlags = NoFlags;
     workInProgress.memoizedProps = null;
     workInProgress.memoizedState = null;
     workInProgress.updateQueue = null;
@@ -17727,8 +17624,6 @@ function resetWorkInProgress(workInProgress, renderLanes) {
     workInProgress.childLanes = current.childLanes;
     workInProgress.lanes = current.lanes;
     workInProgress.child = current.child;
-    workInProgress.subtreeFlags = current.subtreeFlags;
-    workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
     workInProgress.memoizedState = current.memoizedState;
     workInProgress.updateQueue = current.updateQueue; // Needed because Blocks store data on type.
@@ -18049,8 +17944,9 @@ function assignFiberPropertiesInDEV(target, source) {
   target.dependencies = source.dependencies;
   target.mode = source.mode;
   target.flags = source.flags;
-  target.subtreeFlags = source.subtreeFlags;
-  target.deletions = source.deletions;
+  target.nextEffect = source.nextEffect;
+  target.firstEffect = source.firstEffect;
+  target.lastEffect = source.lastEffect;
   target.lanes = source.lanes;
   target.childLanes = source.childLanes;
   target.alternate = source.alternate;