react-test-renderer 17.0.0-rc.2 → 17.0.2

package/umd/react-test-renderer.development.js

@@ -1,4 +1,4 @@
-/** @license React v17.0.0-rc.2
+/** @license React v17.0.2
  * react-test-renderer.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -295,7 +295,7 @@
 
   // Don't change these two values. They're used by React Dev Tools.
   var NoFlags =
-  /*                     */
+  /*                      */
   0;
   var PerformedWork =
   /*                */
@@ -331,6 +331,10 @@
   var Passive =
   /*                      */
   512; // TODO (effects) Remove this bit once the new reconciler is synced to the old.
+
+  var PassiveUnmountPendingDev =
+  /*     */
+  8192;
   var Hydrating =
   /*                    */
   1024;
@@ -355,33 +359,6 @@
   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;
 
   var enableProfilerTimer = true;
   var enableFundamentalAPI = false;
@@ -2300,7 +2277,15 @@
     return lane;
   }
   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
@@ -2341,9 +2326,6 @@
   function markRootPinged(root, pingedLanes, eventTime) {
     root.pingedLanes |= root.suspendedLanes & pingedLanes;
   }
-  function markRootExpired(root, expiredLanes) {
-    root.expiredLanes |= expiredLanes & root.pendingLanes;
-  }
   function hasDiscreteLanes(lanes) {
     return (lanes & InputDiscreteLanes) !== NoLanes;
   }
@@ -2542,7 +2524,7 @@
       Scheduler_cancelCallback(node);
     }
 
-    return flushSyncCallbackQueueImpl();
+    flushSyncCallbackQueueImpl();
   }
 
   function flushSyncCallbackQueueImpl() {
@@ -2578,30 +2560,11 @@
           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;
-
   // TODO: this is special because it gets imported during build.
-  var ReactVersion = '17.0.0-rc.2';
+  var ReactVersion = '17.0.2';
 
   var NoMode = 0;
   var StrictMode = 1; // TODO: Remove BlockingMode and ConcurrentMode by reading from the root
@@ -2812,7 +2775,7 @@
     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;
       }
@@ -4608,16 +4571,24 @@
       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;
 
-      if (deletions === null) {
-        returnFiber.deletions = [childToDelete];
-        returnFiber.flags |= Deletion;
+      var last = returnFiber.lastEffect;
+
+      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) {
@@ -5673,13 +5644,6 @@
     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.
@@ -5761,6 +5725,21 @@
     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;
+
   var isHydrating = false;
 
   function enterHydrationState(fiber) {
@@ -6793,7 +6772,7 @@
       }
     }
 
-    return mountEffectImpl(Passive | PassiveStatic, Passive$1, create, deps);
+    return mountEffectImpl(Update | Passive, Passive$1, create, deps);
   }
 
   function updateEffect(create, deps) {
@@ -6804,7 +6783,7 @@
       }
     }
 
-    return updateEffectImpl(Passive, Passive$1, create, deps);
+    return updateEffectImpl(Update | Passive, Passive$1, create, deps);
   }
 
   function mountLayoutEffect(create, deps) {
@@ -8316,8 +8295,7 @@
 
   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;
@@ -8914,7 +8892,8 @@
     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
@@ -9003,17 +8982,41 @@
       // But only if this has a fallback.
       if (nextProps.fallback !== undefined) ;
 
+      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.
@@ -9025,37 +9028,37 @@
 
         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;
@@ -9063,12 +9066,12 @@
         } 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;
         }
       }
     }
@@ -9150,15 +9153,9 @@
 
     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;
@@ -9200,16 +9197,24 @@
         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;
@@ -9412,7 +9417,7 @@
     }
   }
 
-  function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode) {
+  function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode, lastEffectBeforeRendering) {
     var renderState = workInProgress.memoizedState;
 
     if (renderState === null) {
@@ -9422,7 +9427,8 @@
         renderingStartTime: 0,
         last: lastContentRow,
         tail: tail,
-        tailMode: tailMode
+        tailMode: tailMode,
+        lastEffect: lastEffectBeforeRendering
       };
     } else {
       // We can reuse the existing object from previous renders.
@@ -9432,6 +9438,7 @@
       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.
@@ -9496,7 +9503,7 @@
             }
 
             initSuspenseListRenderState(workInProgress, false, // isBackwards
-            tail, lastContentRow, tailMode);
+            tail, lastContentRow, tailMode, workInProgress.lastEffect);
             break;
           }
 
@@ -9528,7 +9535,7 @@
 
             initSuspenseListRenderState(workInProgress, true, // isBackwards
             _tail, null, // last
-            tailMode);
+            tailMode, workInProgress.lastEffect);
             break;
           }
 
@@ -9537,7 +9544,7 @@
             initSuspenseListRenderState(workInProgress, false, // isBackwards
             null, // tail
             null, // last
-            undefined);
+            undefined, workInProgress.lastEffect);
             break;
           }
 
@@ -9743,16 +9750,17 @@
       // Since the old fiber is disconnected, we have to schedule it manually.
 
 
-      var deletions = returnFiber.deletions;
-
-      if (deletions === null) {
-        returnFiber.deletions = [current]; // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
+      var last = returnFiber.lastEffect;
 
-        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;
@@ -9817,11 +9825,10 @@
           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,
 
@@ -9905,6 +9912,7 @@
                 // update in the past but didn't complete it.
                 renderState.rendering = null;
                 renderState.tail = null;
+                renderState.lastEffect = null;
               }
 
               pushSuspenseContext(workInProgress, suspenseStackCursor.current);
@@ -10156,7 +10164,7 @@
       }
     };
 
-    updateHostContainer = function (current, workInProgress) {// Noop
+    updateHostContainer = function (workInProgress) {// Noop
     };
 
     updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
@@ -10272,92 +10280,6 @@
     }
   }
 
-  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;
 
@@ -10372,7 +10294,6 @@
       case Profiler:
       case ContextConsumer:
       case MemoComponent:
-        bubbleProperties(workInProgress);
         return null;
 
       case ClassComponent:
@@ -10383,7 +10304,6 @@
             popContext(workInProgress);
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -10417,8 +10337,7 @@
             }
           }
 
-          updateHostContainer(current, workInProgress);
-          bubbleProperties(workInProgress);
+          updateHostContainer(workInProgress);
           return null;
         }
 
@@ -10443,7 +10362,6 @@
               } // This can happen when we abort work.
 
 
-              bubbleProperties(workInProgress);
               return null;
             }
 
@@ -10474,7 +10392,6 @@
             }
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -10512,7 +10429,6 @@
             }
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -10527,8 +10443,7 @@
 
             if ( (workInProgress.mode & ProfileMode) !== NoMode) {
               transferActualDuration(workInProgress);
-            } // Don't bubble properties in this case.
-
+            }
 
             return workInProgress;
           }
@@ -10583,40 +10498,22 @@
             }
           }
 
-          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:
@@ -10629,7 +10526,6 @@
             popContext(workInProgress);
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -10641,7 +10537,6 @@
           if (renderState === null) {
             // We're running in the default, "independent" mode.
             // We don't do anything in this mode.
-            bubbleProperties(workInProgress);
             return null;
           }
 
@@ -10691,15 +10586,19 @@
                       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;
                   }
 
@@ -10753,8 +10652,16 @@
 
                 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
@@ -10767,10 +10674,13 @@
                 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;
 
@@ -10807,6 +10717,7 @@
             var next = renderState.tail;
             renderState.rendering = next;
             renderState.tail = next.sibling;
+            renderState.lastEffect = workInProgress.lastEffect;
             renderState.renderingStartTime = now();
             next.sibling = null; // Restore the context.
             // TODO: We can probably just avoid popping it instead and only
@@ -10821,12 +10732,10 @@
             }
 
             pushSuspenseContext(workInProgress, suspenseContext); // Do a pass over the next row.
-            // Don't bubble properties in this case.
 
             return next;
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -10850,21 +10759,16 @@
       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;
@@ -11218,7 +11122,9 @@
 
   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.
@@ -11636,18 +11542,18 @@
   }; // 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) {
@@ -11657,7 +11563,7 @@
 
           if (hasCaughtError()) {
             var refError = clearCaughtError();
-            captureCommitPhaseError(current, nearestMountedAncestor, refError);
+            captureCommitPhaseError(current, refError);
           }
         }
       } else {
@@ -11666,13 +11572,13 @@
     }
   }
 
-  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);
       }
     }
   }
@@ -11755,7 +11661,7 @@
     }
   }
 
-  function commitHookEffectListUnmount(tag, finishedWork, nearestMountedAncestor) {
+  function commitHookEffectListUnmount(tag, finishedWork) {
     var updateQueue = finishedWork.updateQueue;
     var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
@@ -11770,45 +11676,13 @@
           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) {
@@ -11849,14 +11723,8 @@
     }
   }
 
-  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) {
@@ -11864,27 +11732,13 @@
       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;
@@ -11907,10 +11761,7 @@
             commitHookEffectListMount(Layout | HasEffect, finishedWork);
           }
 
-          if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags) {
-            schedulePassiveEffectCallback();
-          }
-
+          schedulePassiveEffects(finishedWork);
           return;
         }
 
@@ -12174,7 +12025,7 @@
   // interrupt deletion, so it's okay
 
 
-  function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+  function commitUnmount(finishedRoot, current, renderPriorityLevel) {
     onCommitUnmount(current);
 
     switch (current.tag) {
@@ -12194,14 +12045,16 @@
               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);
                     }
                   }
                 }
@@ -12216,11 +12069,11 @@
 
       case ClassComponent:
         {
-          safelyDetachRef(current, nearestMountedAncestor);
+          safelyDetachRef(current);
           var instance = current.stateNode;
 
           if (typeof instance.componentWillUnmount === 'function') {
-            safelyCallComponentWillUnmount(current, instance, nearestMountedAncestor);
+            safelyCallComponentWillUnmount(current, instance);
           }
 
           return;
@@ -12228,7 +12081,7 @@
 
       case HostComponent:
         {
-          safelyDetachRef(current, nearestMountedAncestor);
+          safelyDetachRef(current);
           return;
         }
 
@@ -12238,7 +12091,7 @@
           // We are also not using this parent because
           // the portal will get pushed immediately.
           {
-            unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+            unmountHostComponents(finishedRoot, current);
           }
 
           return;
@@ -12264,7 +12117,7 @@
     }
   }
 
-  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
@@ -12273,7 +12126,7 @@
     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.
@@ -12302,26 +12155,33 @@
   }
 
   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 getHostParentFiber(fiber) {
@@ -12501,7 +12361,7 @@
     }
   }
 
-  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
@@ -12550,7 +12410,7 @@
       }
 
       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) {
@@ -12571,7 +12431,7 @@
           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;
@@ -12603,11 +12463,11 @@
     }
   }
 
-  function commitDeletion(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+  function commitDeletion(finishedRoot, current, renderPriorityLevel) {
     {
       // Recursively delete all host nodes from the parent.
       // Detach refs and call componentWillUnmount() on the whole subtree.
-      unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+      unmountHostComponents(finishedRoot, current);
     }
 
     var alternate = current.alternate;
@@ -12633,7 +12493,7 @@
           // 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;
@@ -12819,42 +12679,6 @@
     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;
@@ -12991,6 +12815,7 @@
   function getRenderTargetTime() {
     return workInProgressRootRenderTargetTime;
   }
+  var nextEffect = null;
   var hasUncaughtError = false;
   var firstUncaughtError = null;
   var legacyErrorBoundariesThatAlreadyFailed = null;
@@ -12998,6 +12823,8 @@
   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;
@@ -13320,7 +13147,7 @@
   // 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;
@@ -13356,18 +13183,6 @@
     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());
-      return null;
     }
 
     var exitStatus = renderRootConcurrent(root, lanes);
@@ -14038,6 +13853,46 @@
           workInProgress = next;
           return;
         }
+
+        resetChildLanes(completedWork);
+
+        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,
@@ -14071,10 +13926,9 @@
         }
 
         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;
         }
       }
 
@@ -14098,22 +13952,84 @@
     }
   }
 
-  function commitRoot(root) {
-    var renderPriorityLevel = getCurrentPriorityLevel();
-    runWithPriority(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
-    return null;
-  }
+  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;
+    }
 
-  function commitRootImpl(root, renderPriorityLevel) {
-    do {
-      // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which
-      // means `flushPassiveEffects` will sometimes result in additional
-      // passive effects. So we need to keep flushing in a loop until there are
-      // no more pending effects.
-      // TODO: Might be better if `flushPassiveEffects` did not automatically
-      // flush synchronous work at the end, to avoid factoring hazards like this.
-      flushPassiveEffects();
-    } while (rootWithPendingPassiveEffects !== null);
+    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));
+    return null;
+  }
+
+  function commitRootImpl(root, renderPriorityLevel) {
+    do {
+      // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which
+      // means `flushPassiveEffects` will sometimes result in additional
+      // passive effects. So we need to keep flushing in a loop until there are
+      // no more pending effects.
+      // TODO: Might be better if `flushPassiveEffects` did not automatically
+      // flush synchronous work at the end, to avoid factoring hazards like this.
+      flushPassiveEffects();
+    } while (rootWithPendingPassiveEffects !== null);
 
     flushRenderPhaseStrictModeWarningsInDEV();
 
@@ -14161,17 +14077,28 @@
       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 firstEffect;
 
-    var subtreeHasEffects = (finishedWork.subtreeFlags & (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !== NoFlags;
-    var rootHasEffect = (finishedWork.flags & (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !== NoFlags;
+    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 (subtreeHasEffects || rootHasEffect) {
+    if (firstEffect !== null) {
 
       var prevExecutionContext = executionContext;
       executionContext |= CommitContext;
@@ -14186,7 +14113,26 @@
 
       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;
 
@@ -14197,7 +14143,26 @@
       } // 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);
 
       resetAfterCommit(root.containerInfo); // The work-in-progress tree is now the current tree. This must come after
       // the mutation phase, so that the previous tree is still current during
@@ -14205,21 +14170,32 @@
       // 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();
 
@@ -14248,6 +14224,22 @@
       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
 
 
@@ -14303,9 +14295,9 @@
 
     if (hasUncaughtError) {
       hasUncaughtError = false;
-      var error = firstUncaughtError;
+      var _error3 = firstUncaughtError;
       firstUncaughtError = null;
-      throw error;
+      throw _error3;
     }
 
     if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
@@ -14323,255 +14315,151 @@
     return null;
   }
 
-  function commitBeforeMutationEffects(firstChild) {
-    var fiber = firstChild;
+  function commitBeforeMutationEffects() {
+    while (nextEffect !== null) {
+      var current = nextEffect.alternate;
 
-    while (fiber !== null) {
-      if (fiber.deletions !== null) {
-        commitBeforeMutationEffectsDeletions(fiber.deletions);
-      }
-
-      if (fiber.child !== null) {
-        var primarySubtreeFlags = fiber.subtreeFlags & BeforeMutationMask;
-
-        if (primarySubtreeFlags !== NoFlags) {
-          commitBeforeMutationEffects(fiber.child);
+      if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
+        if ((nextEffect.flags & Deletion) !== NoFlags) {
+          if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
+            shouldFireAfterActiveInstanceBlur = true;
+          }
+        } 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;
+          }
         }
       }
 
-      {
-        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;
-      }
-    }
-
-    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;
-      }
-    }
-  }
-
-  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() {
@@ -14587,87 +14475,41 @@
 
     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() {
@@ -14698,9 +14540,97 @@
     // 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);
+          }
+
+          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." );
+            }
+          }
 
-    flushPassiveUnmountEffects(root.current);
-    flushPassiveMountEffects(root, root.current);
+          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);
@@ -14753,7 +14683,7 @@
     }
   }
 
-  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.
@@ -14761,11 +14691,7 @@
       return;
     }
 
-    var fiber = null;
-
-    {
-      fiber = sourceFiber.return;
-    }
+    var fiber = sourceFiber.return;
 
     while (fiber !== null) {
       if (fiber.tag === HostRoot) {
@@ -14786,6 +14712,20 @@
             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;
@@ -14968,29 +14908,12 @@
       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.
 
@@ -15450,21 +15373,8 @@
   }
 
   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.
@@ -15904,8 +15814,9 @@
     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;
@@ -16022,9 +15933,13 @@
       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.
@@ -16034,11 +15949,8 @@
         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;
@@ -16094,7 +16006,11 @@
     // 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) {
@@ -16102,7 +16018,6 @@
       workInProgress.childLanes = NoLanes;
       workInProgress.lanes = renderLanes;
       workInProgress.child = null;
-      workInProgress.subtreeFlags = NoFlags;
       workInProgress.memoizedProps = null;
       workInProgress.memoizedState = null;
       workInProgress.updateQueue = null;
@@ -16120,8 +16035,6 @@
       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.