react-dom 17.0.0-rc.2 → 17.0.2

package/umd/react-dom.development.js

@@ -1,4 +1,4 @@
-/** @license React v17.0.0-rc.2
+/** @license React v17.0.2
  * react-dom.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -4148,7 +4148,7 @@
 
   // Don't change these two values. They're used by React Dev Tools.
   var NoFlags =
-  /*                     */
+  /*                      */
   0;
   var PerformedWork =
   /*                */
@@ -4184,6 +4184,10 @@
   var Passive =
   /*                      */
   512; // TODO (effects) Remove this bit once the new reconciler is synced to the old.
+
+  var PassiveUnmountPendingDev =
+  /*     */
+  8192;
   var Hydrating =
   /*                    */
   1024;
@@ -4208,33 +4212,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 ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
   function getNearestMountedFiber(fiber) {
@@ -5790,7 +5767,15 @@
     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
@@ -5831,9 +5816,6 @@
   function markRootPinged(root, pingedLanes, eventTime) {
     root.pingedLanes |= root.suspendedLanes & pingedLanes;
   }
-  function markRootExpired(root, expiredLanes) {
-    root.expiredLanes |= expiredLanes & root.pendingLanes;
-  }
   function markDiscreteUpdatesExpired(root) {
     root.expiredLanes |= InputDiscreteLanes & root.pendingLanes;
   }
@@ -6179,136 +6161,144 @@
     return 0;
   }
 
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-  var EventInterface = {
-    eventPhase: 0,
-    bubbles: 0,
-    cancelable: 0,
-    timeStamp: function (event) {
-      return event.timeStamp || Date.now();
-    },
-    defaultPrevented: 0,
-    isTrusted: 0
-  };
-
   function functionThatReturnsTrue() {
     return true;
   }
 
   function functionThatReturnsFalse() {
     return false;
-  }
-  /**
-   * Synthetic events are dispatched by event plugins, typically in response to a
-   * top-level event delegation handler.
-   *
-   * These systems should generally use pooling to reduce the frequency of garbage
-   * collection. The system should check `isPersistent` to determine whether the
-   * event should be released into the pool after being dispatched. Users that
-   * need a persisted event should invoke `persist`.
-   *
-   * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
-   * normalizing browser quirks. Subclasses do not necessarily have to implement a
-   * DOM interface; custom application-specific events can also subclass this.
-   */
+  } // This is intentionally a factory so that we have different returned constructors.
+  // If we had a single constructor, it would be megamorphic and engines would deopt.
 
 
-  function SyntheticEvent(reactName, reactEventType, targetInst, nativeEvent, nativeEventTarget) {
-    var Interface = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : EventInterface;
-    this._reactName = reactName;
-    this._targetInst = targetInst;
-    this.type = reactEventType;
-    this.nativeEvent = nativeEvent;
-    this.target = nativeEventTarget;
-    this.currentTarget = null;
+  function createSyntheticEvent(Interface) {
+    /**
+     * Synthetic events are dispatched by event plugins, typically in response to a
+     * top-level event delegation handler.
+     *
+     * These systems should generally use pooling to reduce the frequency of garbage
+     * collection. The system should check `isPersistent` to determine whether the
+     * event should be released into the pool after being dispatched. Users that
+     * need a persisted event should invoke `persist`.
+     *
+     * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
+     * normalizing browser quirks. Subclasses do not necessarily have to implement a
+     * DOM interface; custom application-specific events can also subclass this.
+     */
+    function SyntheticBaseEvent(reactName, reactEventType, targetInst, nativeEvent, nativeEventTarget) {
+      this._reactName = reactName;
+      this._targetInst = targetInst;
+      this.type = reactEventType;
+      this.nativeEvent = nativeEvent;
+      this.target = nativeEventTarget;
+      this.currentTarget = null;
+
+      for (var _propName in Interface) {
+        if (!Interface.hasOwnProperty(_propName)) {
+          continue;
+        }
+
+        var normalize = Interface[_propName];
 
-    for (var _propName in Interface) {
-      if (!Interface.hasOwnProperty(_propName)) {
-        continue;
+        if (normalize) {
+          this[_propName] = normalize(nativeEvent);
+        } else {
+          this[_propName] = nativeEvent[_propName];
+        }
       }
 
-      var normalize = Interface[_propName];
+      var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;
 
-      if (normalize) {
-        this[_propName] = normalize(nativeEvent);
+      if (defaultPrevented) {
+        this.isDefaultPrevented = functionThatReturnsTrue;
       } else {
-        this[_propName] = nativeEvent[_propName];
+        this.isDefaultPrevented = functionThatReturnsFalse;
       }
+
+      this.isPropagationStopped = functionThatReturnsFalse;
+      return this;
     }
 
-    var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;
+    _assign(SyntheticBaseEvent.prototype, {
+      preventDefault: function () {
+        this.defaultPrevented = true;
+        var event = this.nativeEvent;
 
-    if (defaultPrevented) {
-      this.isDefaultPrevented = functionThatReturnsTrue;
-    } else {
-      this.isDefaultPrevented = functionThatReturnsFalse;
-    }
+        if (!event) {
+          return;
+        }
 
-    this.isPropagationStopped = functionThatReturnsFalse;
-    return this;
-  }
+        if (event.preventDefault) {
+          event.preventDefault(); // $FlowFixMe - flow is not aware of `unknown` in IE
+        } else if (typeof event.returnValue !== 'unknown') {
+          event.returnValue = false;
+        }
 
-  _assign(SyntheticEvent.prototype, {
-    preventDefault: function () {
-      this.defaultPrevented = true;
-      var event = this.nativeEvent;
+        this.isDefaultPrevented = functionThatReturnsTrue;
+      },
+      stopPropagation: function () {
+        var event = this.nativeEvent;
 
-      if (!event) {
-        return;
-      }
+        if (!event) {
+          return;
+        }
 
-      if (event.preventDefault) {
-        event.preventDefault(); // $FlowFixMe - flow is not aware of `unknown` in IE
-      } else if (typeof event.returnValue !== 'unknown') {
-        event.returnValue = false;
-      }
+        if (event.stopPropagation) {
+          event.stopPropagation(); // $FlowFixMe - flow is not aware of `unknown` in IE
+        } else if (typeof event.cancelBubble !== 'unknown') {
+          // The ChangeEventPlugin registers a "propertychange" event for
+          // IE. This event does not support bubbling or cancelling, and
+          // any references to cancelBubble throw "Member not found".  A
+          // typeof check of "unknown" circumvents this issue (and is also
+          // IE specific).
+          event.cancelBubble = true;
+        }
 
-      this.isDefaultPrevented = functionThatReturnsTrue;
-    },
-    stopPropagation: function () {
-      var event = this.nativeEvent;
+        this.isPropagationStopped = functionThatReturnsTrue;
+      },
 
-      if (!event) {
-        return;
-      }
+      /**
+       * We release all dispatched `SyntheticEvent`s after each event loop, adding
+       * them back into the pool. This allows a way to hold onto a reference that
+       * won't be added back into the pool.
+       */
+      persist: function () {// Modern event system doesn't use pooling.
+      },
 
-      if (event.stopPropagation) {
-        event.stopPropagation(); // $FlowFixMe - flow is not aware of `unknown` in IE
-      } else if (typeof event.cancelBubble !== 'unknown') {
-        // The ChangeEventPlugin registers a "propertychange" event for
-        // IE. This event does not support bubbling or cancelling, and
-        // any references to cancelBubble throw "Member not found".  A
-        // typeof check of "unknown" circumvents this issue (and is also
-        // IE specific).
-        event.cancelBubble = true;
-      }
+      /**
+       * Checks if this event should be released back into the pool.
+       *
+       * @return {boolean} True if this should not be released, false otherwise.
+       */
+      isPersistent: functionThatReturnsTrue
+    });
 
-      this.isPropagationStopped = functionThatReturnsTrue;
-    },
+    return SyntheticBaseEvent;
+  }
+  /**
+   * @interface Event
+   * @see http://www.w3.org/TR/DOM-Level-3-Events/
+   */
 
-    /**
-     * We release all dispatched `SyntheticEvent`s after each event loop, adding
-     * them back into the pool. This allows a way to hold onto a reference that
-     * won't be added back into the pool.
-     */
-    persist: function () {// Modern event system doesn't use pooling.
-    },
 
-    /**
-     * Checks if this event should be released back into the pool.
-     *
-     * @return {boolean} True if this should not be released, false otherwise.
-     */
-    isPersistent: functionThatReturnsTrue
-  });
+  var EventInterface = {
+    eventPhase: 0,
+    bubbles: 0,
+    cancelable: 0,
+    timeStamp: function (event) {
+      return event.timeStamp || Date.now();
+    },
+    defaultPrevented: 0,
+    isTrusted: 0
+  };
+  var SyntheticEvent = createSyntheticEvent(EventInterface);
 
   var UIEventInterface = _assign({}, EventInterface, {
     view: 0,
     detail: 0
   });
+
+  var SyntheticUIEvent = createSyntheticEvent(UIEventInterface);
   var lastMovementX;
   var lastMovementY;
   var lastMouseEvent;
@@ -6369,6 +6359,8 @@
       return lastMovementY;
     }
   });
+
+  var SyntheticMouseEvent = createSyntheticEvent(MouseEventInterface);
   /**
    * @interface DragEvent
    * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6377,6 +6369,8 @@
   var DragEventInterface = _assign({}, MouseEventInterface, {
     dataTransfer: 0
   });
+
+  var SyntheticDragEvent = createSyntheticEvent(DragEventInterface);
   /**
    * @interface FocusEvent
    * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6385,6 +6379,8 @@
   var FocusEventInterface = _assign({}, UIEventInterface, {
     relatedTarget: 0
   });
+
+  var SyntheticFocusEvent = createSyntheticEvent(FocusEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
@@ -6396,6 +6392,8 @@
     elapsedTime: 0,
     pseudoElement: 0
   });
+
+  var SyntheticAnimationEvent = createSyntheticEvent(AnimationEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/clipboard-apis/
@@ -6406,6 +6404,8 @@
       return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
     }
   });
+
+  var SyntheticClipboardEvent = createSyntheticEvent(ClipboardEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
@@ -6414,6 +6414,8 @@
   var CompositionEventInterface = _assign({}, EventInterface, {
     data: 0
   });
+
+  var SyntheticCompositionEvent = createSyntheticEvent(CompositionEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
@@ -6421,7 +6423,7 @@
    */
   // Happens to share the same list for now.
 
-  var InputEventInterface = CompositionEventInterface;
+  var SyntheticInputEvent = SyntheticCompositionEvent;
   /**
    * Normalization of deprecated HTML5 `key` values
    * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
@@ -6605,6 +6607,8 @@
       return 0;
     }
   });
+
+  var SyntheticKeyboardEvent = createSyntheticEvent(KeyboardEventInterface);
   /**
    * @interface PointerEvent
    * @see http://www.w3.org/TR/pointerevents/
@@ -6622,6 +6626,8 @@
     pointerType: 0,
     isPrimary: 0
   });
+
+  var SyntheticPointerEvent = createSyntheticEvent(PointerEventInterface);
   /**
    * @interface TouchEvent
    * @see http://www.w3.org/TR/touch-events/
@@ -6637,6 +6643,8 @@
     shiftKey: 0,
     getModifierState: getEventModifierState
   });
+
+  var SyntheticTouchEvent = createSyntheticEvent(TouchEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
@@ -6648,6 +6656,8 @@
     elapsedTime: 0,
     pseudoElement: 0
   });
+
+  var SyntheticTransitionEvent = createSyntheticEvent(TransitionEventInterface);
   /**
    * @interface WheelEvent
    * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6671,6 +6681,8 @@
     deltaMode: 0
   });
 
+  var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
+
   var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
 
   var START_KEYCODE = 229;
@@ -6835,18 +6847,25 @@
       }
     }
 
-    var event = new SyntheticEvent(eventType, domEventName, null, nativeEvent, nativeEventTarget, CompositionEventInterface);
-    accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
+    var listeners = accumulateTwoPhaseListeners(targetInst, eventType);
 
-    if (fallbackData) {
-      // Inject data generated from fallback path into the synthetic event.
-      // This matches the property of native CompositionEventInterface.
-      event.data = fallbackData;
-    } else {
-      var customData = getDataFromCustomEvent(nativeEvent);
+    if (listeners.length > 0) {
+      var event = new SyntheticCompositionEvent(eventType, domEventName, null, nativeEvent, nativeEventTarget);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
 
-      if (customData !== null) {
-        event.data = customData;
+      if (fallbackData) {
+        // Inject data generated from fallback path into the synthetic event.
+        // This matches the property of native CompositionEventInterface.
+        event.data = fallbackData;
+      } else {
+        var customData = getDataFromCustomEvent(nativeEvent);
+
+        if (customData !== null) {
+          event.data = customData;
+        }
       }
     }
   }
@@ -6988,9 +7007,16 @@
       return null;
     }
 
-    var event = new SyntheticEvent('onBeforeInput', 'beforeinput', null, nativeEvent, nativeEventTarget, InputEventInterface);
-    accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
-    event.data = chars;
+    var listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
+
+    if (listeners.length > 0) {
+      var event = new SyntheticInputEvent('onBeforeInput', 'beforeinput', null, nativeEvent, nativeEventTarget);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+      event.data = chars;
+    }
   }
   /**
    * Create an `onBeforeInput` event to match
@@ -7088,10 +7114,17 @@
   }
 
   function createAndAccumulateChangeEvent(dispatchQueue, inst, nativeEvent, target) {
-    var event = new SyntheticEvent('onChange', 'change', null, nativeEvent, target); // Flag this event loop as needing state restore.
-
+    // Flag this event loop as needing state restore.
     enqueueStateRestore(target);
-    accumulateTwoPhaseListeners(inst, dispatchQueue, event);
+    var listeners = accumulateTwoPhaseListeners(inst, 'onChange');
+
+    if (listeners.length > 0) {
+      var event = new SyntheticEvent('onChange', 'change', null, nativeEvent, target);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+    }
   }
   /**
    * For IE shims
@@ -7401,13 +7434,13 @@
       return;
     }
 
-    var eventInterface = MouseEventInterface;
+    var SyntheticEventCtor = SyntheticMouseEvent;
     var leaveEventType = 'onMouseLeave';
     var enterEventType = 'onMouseEnter';
     var eventTypePrefix = 'mouse';
 
     if (domEventName === 'pointerout' || domEventName === 'pointerover') {
-      eventInterface = PointerEventInterface;
+      SyntheticEventCtor = SyntheticPointerEvent;
       leaveEventType = 'onPointerLeave';
       enterEventType = 'onPointerEnter';
       eventTypePrefix = 'pointer';
@@ -7415,7 +7448,7 @@
 
     var fromNode = from == null ? win : getNodeFromInstance(from);
     var toNode = to == null ? win : getNodeFromInstance(to);
-    var leave = new SyntheticEvent(leaveEventType, eventTypePrefix + 'leave', from, nativeEvent, nativeEventTarget, eventInterface);
+    var leave = new SyntheticEventCtor(leaveEventType, eventTypePrefix + 'leave', from, nativeEvent, nativeEventTarget);
     leave.target = fromNode;
     leave.relatedTarget = toNode;
     var enter = null; // We should only process this nativeEvent if we are processing
@@ -7424,7 +7457,7 @@
     var nativeTargetInst = getClosestInstanceFromNode(nativeEventTarget);
 
     if (nativeTargetInst === targetInst) {
-      var enterEvent = new SyntheticEvent(enterEventType, eventTypePrefix + 'enter', to, nativeEvent, nativeEventTarget, eventInterface);
+      var enterEvent = new SyntheticEventCtor(enterEventType, eventTypePrefix + 'enter', to, nativeEvent, nativeEventTarget);
       enterEvent.target = toNode;
       enterEvent.relatedTarget = fromNode;
       enter = enterEvent;
@@ -7957,9 +7990,16 @@
 
     if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
       lastSelection = currentSelection;
-      var syntheticEvent = new SyntheticEvent('onSelect', 'select', null, nativeEvent, nativeEventTarget);
-      syntheticEvent.target = activeElement$1;
-      accumulateTwoPhaseListeners(activeElementInst$1, dispatchQueue, syntheticEvent);
+      var listeners = accumulateTwoPhaseListeners(activeElementInst$1, 'onSelect');
+
+      if (listeners.length > 0) {
+        var event = new SyntheticEvent('onSelect', 'select', null, nativeEvent, nativeEventTarget);
+        dispatchQueue.push({
+          event: event,
+          listeners: listeners
+        });
+        event.target = activeElement$1;
+      }
     }
   }
   /**
@@ -8041,7 +8081,7 @@
       return;
     }
 
-    var EventInterface;
+    var SyntheticEventCtor = SyntheticEvent;
     var reactEventType = domEventName;
 
     switch (domEventName) {
@@ -8057,22 +8097,22 @@
 
       case 'keydown':
       case 'keyup':
-        EventInterface = KeyboardEventInterface;
+        SyntheticEventCtor = SyntheticKeyboardEvent;
         break;
 
       case 'focusin':
         reactEventType = 'focus';
-        EventInterface = FocusEventInterface;
+        SyntheticEventCtor = SyntheticFocusEvent;
         break;
 
       case 'focusout':
         reactEventType = 'blur';
-        EventInterface = FocusEventInterface;
+        SyntheticEventCtor = SyntheticFocusEvent;
         break;
 
       case 'beforeblur':
       case 'afterblur':
-        EventInterface = FocusEventInterface;
+        SyntheticEventCtor = SyntheticFocusEvent;
         break;
 
       case 'click':
@@ -8095,7 +8135,7 @@
       case 'mouseout':
       case 'mouseover':
       case 'contextmenu':
-        EventInterface = MouseEventInterface;
+        SyntheticEventCtor = SyntheticMouseEvent;
         break;
 
       case 'drag':
@@ -8106,38 +8146,38 @@
       case 'dragover':
       case 'dragstart':
       case 'drop':
-        EventInterface = DragEventInterface;
+        SyntheticEventCtor = SyntheticDragEvent;
         break;
 
       case 'touchcancel':
       case 'touchend':
       case 'touchmove':
       case 'touchstart':
-        EventInterface = TouchEventInterface;
+        SyntheticEventCtor = SyntheticTouchEvent;
         break;
 
       case ANIMATION_END:
       case ANIMATION_ITERATION:
       case ANIMATION_START:
-        EventInterface = AnimationEventInterface;
+        SyntheticEventCtor = SyntheticAnimationEvent;
         break;
 
       case TRANSITION_END:
-        EventInterface = TransitionEventInterface;
+        SyntheticEventCtor = SyntheticTransitionEvent;
         break;
 
       case 'scroll':
-        EventInterface = UIEventInterface;
+        SyntheticEventCtor = SyntheticUIEvent;
         break;
 
       case 'wheel':
-        EventInterface = WheelEventInterface;
+        SyntheticEventCtor = SyntheticWheelEvent;
         break;
 
       case 'copy':
       case 'cut':
       case 'paste':
-        EventInterface = ClipboardEventInterface;
+        SyntheticEventCtor = SyntheticClipboardEvent;
         break;
 
       case 'gotpointercapture':
@@ -8148,11 +8188,10 @@
       case 'pointerout':
       case 'pointerover':
       case 'pointerup':
-        EventInterface = PointerEventInterface;
+        SyntheticEventCtor = SyntheticPointerEvent;
         break;
     }
 
-    var event = new SyntheticEvent(reactName, reactEventType, null, nativeEvent, nativeEventTarget, EventInterface);
     var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
 
     {
@@ -8165,7 +8204,18 @@
       // Then we can remove this special list.
       // This is a breaking change that can wait until React 18.
       domEventName === 'scroll';
-      accumulateSinglePhaseListeners(targetInst, dispatchQueue, event, inCapturePhase, accumulateTargetOnly);
+
+      var _listeners = accumulateSinglePhaseListeners(targetInst, reactName, nativeEvent.type, inCapturePhase, accumulateTargetOnly);
+
+      if (_listeners.length > 0) {
+        // Intentionally create event lazily.
+        var _event = new SyntheticEventCtor(reactName, reactEventType, null, nativeEvent, nativeEventTarget);
+
+        dispatchQueue.push({
+          event: _event,
+          listeners: _listeners
+        });
+      }
     }
   }
 
@@ -8497,19 +8547,12 @@
     };
   }
 
-  function createDispatchEntry(event, listeners) {
-    return {
-      event: event,
-      listeners: listeners
-    };
-  }
-
-  function accumulateSinglePhaseListeners(targetFiber, dispatchQueue, event, inCapturePhase, accumulateTargetOnly) {
-    var bubbled = event._reactName;
-    var captured = bubbled !== null ? bubbled + 'Capture' : null;
+  function accumulateSinglePhaseListeners(targetFiber, reactName, nativeEventType, inCapturePhase, accumulateTargetOnly) {
+    var captureName = reactName !== null ? reactName + 'Capture' : null;
+    var reactEventName = inCapturePhase ? captureName : reactName;
     var listeners = [];
     var instance = targetFiber;
-    var targetType = event.nativeEvent.type; // Accumulate all instances and listeners via the target -> root path.
+    var lastHostComponent = null; // Accumulate all instances and listeners via the target -> root path.
 
     while (instance !== null) {
       var _instance2 = instance,
@@ -8517,22 +8560,14 @@
           tag = _instance2.tag; // Handle listeners that are on HostComponents (i.e. <div>)
 
       if (tag === HostComponent && stateNode !== null) {
-        var currentTarget = stateNode;
-
+        lastHostComponent = stateNode; // createEventHandle listeners
 
-        if (captured !== null && inCapturePhase) {
-          var captureListener = getListener(instance, captured);
 
-          if (captureListener != null) {
-            listeners.push(createDispatchListener(instance, captureListener, currentTarget));
-          }
-        }
-
-        if (bubbled !== null && !inCapturePhase) {
-          var bubbleListener = getListener(instance, bubbled);
+        if (reactEventName !== null) {
+          var listener = getListener(instance, reactEventName);
 
-          if (bubbleListener != null) {
-            listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
+          if (listener != null) {
+            listeners.push(createDispatchListener(instance, listener, lastHostComponent));
           }
         }
       } // If we are only accumulating events for the target, then we don't
@@ -8547,9 +8582,7 @@
       instance = instance.return;
     }
 
-    if (listeners.length !== 0) {
-      dispatchQueue.push(createDispatchEntry(event, listeners));
-    }
+    return listeners;
   } // We should only use this function for:
   // - BeforeInputEventPlugin
   // - ChangeEventPlugin
@@ -8558,9 +8591,8 @@
   // in the bubble phase, so we need to accumulate two
   // phase event listeners (via emulation).
 
-  function accumulateTwoPhaseListeners(targetFiber, dispatchQueue, event) {
-    var bubbled = event._reactName;
-    var captured = bubbled !== null ? bubbled + 'Capture' : null;
+  function accumulateTwoPhaseListeners(targetFiber, reactName) {
+    var captureName = reactName + 'Capture';
     var listeners = [];
     var instance = targetFiber; // Accumulate all instances and listeners via the target -> root path.
 
@@ -8570,31 +8602,24 @@
           tag = _instance3.tag; // Handle listeners that are on HostComponents (i.e. <div>)
 
       if (tag === HostComponent && stateNode !== null) {
-        var currentTarget = stateNode; // Standard React on* listeners, i.e. onClick prop
-
-        if (captured !== null) {
-          var captureListener = getListener(instance, captured);
+        var currentTarget = stateNode;
+        var captureListener = getListener(instance, captureName);
 
-          if (captureListener != null) {
-            listeners.unshift(createDispatchListener(instance, captureListener, currentTarget));
-          }
+        if (captureListener != null) {
+          listeners.unshift(createDispatchListener(instance, captureListener, currentTarget));
         }
 
-        if (bubbled !== null) {
-          var bubbleListener = getListener(instance, bubbled);
+        var bubbleListener = getListener(instance, reactName);
 
-          if (bubbleListener != null) {
-            listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
-          }
+        if (bubbleListener != null) {
+          listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
         }
       }
 
       instance = instance.return;
     }
 
-    if (listeners.length !== 0) {
-      dispatchQueue.push(createDispatchEntry(event, listeners));
-    }
+    return listeners;
   }
 
   function getParent(inst) {
@@ -8705,7 +8730,10 @@
     }
 
     if (listeners.length !== 0) {
-      dispatchQueue.push(createDispatchEntry(event, listeners));
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
     }
   } // We should only use this function for:
   // - EnterLeaveEventPlugin
@@ -8751,11 +8779,6 @@
 
   {
     warnedUnknownTags = {
-      // Chrome is the only major browser not shipping <time>. But as of July
-      // 2017 it intends to ship it due to widespread usage. We intentionally
-      // *don't* warn for <time> even if it's unrecognized by Chrome because
-      // it soon will be, and many apps have been using it anyway.
-      time: true,
       // There are working polyfills for <dialog>. Let people use it.
       dialog: true,
       // Electron ships a custom <webview> tag to display external web content in
@@ -11313,7 +11336,7 @@
       Scheduler_cancelCallback(node);
     }
 
-    return flushSyncCallbackQueueImpl();
+    flushSyncCallbackQueueImpl();
   }
 
   function flushSyncCallbackQueueImpl() {
@@ -11349,30 +11372,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
@@ -11431,7 +11435,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;
       }
@@ -13283,16 +13287,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;
+      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) {
@@ -14348,13 +14360,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.
@@ -14436,6 +14441,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;
+
   // This may have been an insertion or a hydration.
 
   var hydrationParentFiber = null;
@@ -14467,14 +14487,17 @@
     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;
     }
   }
 
@@ -15740,7 +15763,7 @@
       }
     }
 
-    return mountEffectImpl(Passive | PassiveStatic, Passive$1, create, deps);
+    return mountEffectImpl(Update | Passive, Passive$1, create, deps);
   }
 
   function updateEffect(create, deps) {
@@ -15751,7 +15774,7 @@
       }
     }
 
-    return updateEffectImpl(Passive, Passive$1, create, deps);
+    return updateEffectImpl(Update | Passive, Passive$1, create, deps);
   }
 
   function mountLayoutEffect(create, deps) {
@@ -16034,7 +16057,7 @@
       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);
@@ -17310,8 +17333,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;
@@ -17972,7 +17994,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
@@ -18063,17 +18086,41 @@
         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.
@@ -18085,37 +18132,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;
@@ -18123,12 +18170,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;
         }
       }
     }
@@ -18210,15 +18257,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;
@@ -18260,16 +18301,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;
@@ -18472,7 +18521,7 @@
     }
   }
 
-  function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode) {
+  function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode, lastEffectBeforeRendering) {
     var renderState = workInProgress.memoizedState;
 
     if (renderState === null) {
@@ -18482,7 +18531,8 @@
         renderingStartTime: 0,
         last: lastContentRow,
         tail: tail,
-        tailMode: tailMode
+        tailMode: tailMode,
+        lastEffect: lastEffectBeforeRendering
       };
     } else {
       // We can reuse the existing object from previous renders.
@@ -18492,6 +18542,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.
@@ -18556,7 +18607,7 @@
             }
 
             initSuspenseListRenderState(workInProgress, false, // isBackwards
-            tail, lastContentRow, tailMode);
+            tail, lastContentRow, tailMode, workInProgress.lastEffect);
             break;
           }
 
@@ -18588,7 +18639,7 @@
 
             initSuspenseListRenderState(workInProgress, true, // isBackwards
             _tail, null, // last
-            tailMode);
+            tailMode, workInProgress.lastEffect);
             break;
           }
 
@@ -18597,7 +18648,7 @@
             initSuspenseListRenderState(workInProgress, false, // isBackwards
             null, // tail
             null, // last
-            undefined);
+            undefined, workInProgress.lastEffect);
             break;
           }
 
@@ -18803,16 +18854,17 @@
       // 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;
@@ -18878,11 +18930,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,
 
@@ -18966,6 +19017,7 @@
                 // update in the past but didn't complete it.
                 renderState.rendering = null;
                 renderState.tail = null;
+                renderState.lastEffect = null;
               }
 
               pushSuspenseContext(workInProgress, suspenseStackCursor.current);
@@ -19217,7 +19269,7 @@
       }
     };
 
-    updateHostContainer = function (current, workInProgress) {// Noop
+    updateHostContainer = function (workInProgress) {// Noop
     };
 
     updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
@@ -19338,92 +19390,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;
 
@@ -19438,7 +19404,6 @@
       case Profiler:
       case ContextConsumer:
       case MemoComponent:
-        bubbleProperties(workInProgress);
         return null;
 
       case ClassComponent:
@@ -19449,7 +19414,6 @@
             popContext(workInProgress);
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -19483,8 +19447,7 @@
             }
           }
 
-          updateHostContainer(current, workInProgress);
-          bubbleProperties(workInProgress);
+          updateHostContainer(workInProgress);
           return null;
         }
 
@@ -19509,7 +19472,6 @@
               } // This can happen when we abort work.
 
 
-              bubbleProperties(workInProgress);
               return null;
             }
 
@@ -19546,7 +19508,6 @@
             }
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -19584,7 +19545,6 @@
             }
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -19599,8 +19559,7 @@
 
             if ( (workInProgress.mode & ProfileMode) !== NoMode) {
               transferActualDuration(workInProgress);
-            } // Don't bubble properties in this case.
-
+            }
 
             return workInProgress;
           }
@@ -19657,40 +19616,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:
@@ -19703,7 +19644,6 @@
             popContext(workInProgress);
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -19715,7 +19655,6 @@
           if (renderState === null) {
             // We're running in the default, "independent" mode.
             // We don't do anything in this mode.
-            bubbleProperties(workInProgress);
             return null;
           }
 
@@ -19765,15 +19704,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;
                   }
 
@@ -19827,8 +19770,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
@@ -19841,16 +19792,19 @@
                 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.
-
-                workInProgress.lanes = SomeRetryLane;
-
-                {
-                  markSpawnedWork(SomeRetryLane);
-                }
+                // 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);
+                }
               }
             }
 
@@ -19881,6 +19835,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
@@ -19895,12 +19850,10 @@
             }
 
             pushSuspenseContext(workInProgress, suspenseContext); // Do a pass over the next row.
-            // Don't bubble properties in this case.
 
             return next;
           }
 
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -19924,21 +19877,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;
@@ -20292,7 +20240,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.
@@ -20495,18 +20445,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) {
@@ -20516,7 +20466,7 @@
 
           if (hasCaughtError()) {
             var refError = clearCaughtError();
-            captureCommitPhaseError(current, nearestMountedAncestor, refError);
+            captureCommitPhaseError(current, refError);
           }
         }
       } else {
@@ -20525,13 +20475,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);
       }
     }
   }
@@ -20614,7 +20564,7 @@
     }
   }
 
-  function commitHookEffectListUnmount(tag, finishedWork, nearestMountedAncestor) {
+  function commitHookEffectListUnmount(tag, finishedWork) {
     var updateQueue = finishedWork.updateQueue;
     var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
@@ -20629,45 +20579,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) {
@@ -20708,14 +20626,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) {
@@ -20723,27 +20635,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;
@@ -20766,10 +20664,7 @@
             commitHookEffectListMount(Layout | HasEffect, finishedWork);
           }
 
-          if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags) {
-            schedulePassiveEffectCallback();
-          }
-
+          schedulePassiveEffects(finishedWork);
           return;
         }
 
@@ -21035,7 +20930,7 @@
   // interrupt deletion, so it's okay
 
 
-  function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+  function commitUnmount(finishedRoot, current, renderPriorityLevel) {
     onCommitUnmount(current);
 
     switch (current.tag) {
@@ -21055,14 +20950,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);
                     }
                   }
                 }
@@ -21077,11 +20974,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;
@@ -21089,7 +20986,7 @@
 
       case HostComponent:
         {
-          safelyDetachRef(current, nearestMountedAncestor);
+          safelyDetachRef(current);
           return;
         }
 
@@ -21099,7 +20996,7 @@
           // We are also not using this parent because
           // the portal will get pushed immediately.
           {
-            unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+            unmountHostComponents(finishedRoot, current);
           }
 
           return;
@@ -21125,7 +21022,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
@@ -21134,7 +21031,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.
@@ -21163,26 +21060,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) {
@@ -21364,7 +21268,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
@@ -21413,7 +21317,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) {
@@ -21434,7 +21338,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;
@@ -21466,11 +21370,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;
@@ -21496,7 +21400,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;
@@ -21712,42 +21616,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;
@@ -21858,6 +21726,7 @@
   function getRenderTargetTime() {
     return workInProgressRootRenderTargetTime;
   }
+  var nextEffect = null;
   var hasUncaughtError = false;
   var firstUncaughtError = null;
   var legacyErrorBoundariesThatAlreadyFailed = null;
@@ -21865,6 +21734,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;
@@ -22187,7 +22058,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;
@@ -22223,18 +22094,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);
@@ -22995,6 +22854,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,
@@ -23028,10 +22927,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;
         }
       }
 
@@ -23055,6 +22953,68 @@
     }
   }
 
+  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$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
@@ -23118,17 +23078,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 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;
@@ -23143,7 +23114,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;
 
@@ -23154,7 +23144,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
@@ -23162,21 +23171,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();
 
@@ -23205,6 +23225,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
 
 
@@ -23264,9 +23300,9 @@
 
     if (hasUncaughtError) {
       hasUncaughtError = false;
-      var error = firstUncaughtError;
+      var _error3 = firstUncaughtError;
       firstUncaughtError = null;
-      throw error;
+      throw _error3;
     }
 
     if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
@@ -23284,255 +23320,151 @@
     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;
+          }
+        } 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);
-    }
-
-    if (flags & Ref) {
-      var current = fiber.alternate;
+  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 (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() {
@@ -23548,87 +23480,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() {
@@ -23659,9 +23545,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.
 
-    flushPassiveUnmountEffects(root.current);
-    flushPassiveMountEffects(root, root.current);
+
+    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);
@@ -23714,7 +23688,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.
@@ -23722,11 +23696,7 @@
       return;
     }
 
-    var fiber = null;
-
-    {
-      fiber = nearestMountedAncestor;
-    }
+    var fiber = sourceFiber.return;
 
     while (fiber !== null) {
       if (fiber.tag === HostRoot) {
@@ -23747,6 +23717,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;
@@ -23929,29 +23913,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 (updateQueue !== null) {
-          var lastEffect = updateQueue.lastEffect;
+      } // If there are pending passive effects unmounts for this Fiber,
+      // we can assume that they would have prevented this update.
 
-          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.
 
@@ -24306,21 +24273,8 @@
   var actingUpdatesScopeDepth = 0;
 
   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.
@@ -24760,8 +24714,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;
@@ -24878,9 +24833,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.
@@ -24890,11 +24849,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;
@@ -24950,7 +24906,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) {
@@ -24958,7 +24918,6 @@
       workInProgress.childLanes = NoLanes;
       workInProgress.lanes = renderLanes;
       workInProgress.child = null;
-      workInProgress.subtreeFlags = NoFlags;
       workInProgress.memoizedProps = null;
       workInProgress.memoizedState = null;
       workInProgress.updateQueue = null;
@@ -24976,8 +24935,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.
@@ -25298,8 +25255,9 @@
     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;