react-dom 17.0.0-rc.2 → 17.0.2

package/cjs/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.
@@ -4130,7 +4130,7 @@ function set(key, value) {
 
 // Don't change these two values. They're used by React Dev Tools.
 var NoFlags =
-/*                     */
+/*                      */
 0;
 var PerformedWork =
 /*                */
@@ -4166,6 +4166,10 @@ var Snapshot =
 var Passive =
 /*                      */
 512; // TODO (effects) Remove this bit once the new reconciler is synced to the old.
+
+var PassiveUnmountPendingDev =
+/*     */
+8192;
 var Hydrating =
 /*                    */
 1024;
@@ -4190,33 +4194,6 @@ var ShouldCapture =
 var ForceUpdateForLegacySuspense =
 /* */
 16384; // Static tags describe aspects of a fiber that are not specific to a render,
-// e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
-// This enables us to defer more work in the unmount case,
-// since we can defer traversing the tree during layout to look for Passive effects,
-// and instead rely on the static flag as a signal that there may be cleanup work.
-
-var PassiveStatic =
-/*                */
-32768; // Union of side effect groupings as pertains to subtreeFlags
-
-var BeforeMutationMask =
-/*           */
-778;
-var MutationMask =
-/*                 */
-1182;
-var LayoutMask =
-/*                   */
-164;
-var PassiveMask =
-/*                  */
-520; // Union of tags that don't get reset on clones.
-// This allows certain concepts to persist without recalculting them,
-// e.g. whether a subtree contains passive effects or portals.
-
-var StaticMask =
-/*                   */
-32768;
 
 var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 function getNearestMountedFiber(fiber) {
@@ -5760,7 +5737,15 @@ function higherPriorityLane(a, b) {
   return a !== NoLane && a < b ? a : b;
 }
 function createLaneMap(initial) {
-  return new Array(TotalLanes).fill(initial);
+  // Intentionally pushing one by one.
+  // https://v8.dev/blog/elements-kinds#avoid-creating-holes
+  var laneMap = [];
+
+  for (var i = 0; i < TotalLanes; i++) {
+    laneMap.push(initial);
+  }
+
+  return laneMap;
 }
 function markRootUpdated(root, updateLane, eventTime) {
   root.pendingLanes |= updateLane; // TODO: Theoretically, any update to any lane can unblock any other lane. But
@@ -5801,9 +5786,6 @@ function markRootSuspended(root, suspendedLanes) {
 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;
 }
@@ -6149,136 +6131,144 @@ function getEventCharCode(nativeEvent) {
   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;
@@ -6339,6 +6329,8 @@ var MouseEventInterface = _assign({}, UIEventInterface, {
     return lastMovementY;
   }
 });
+
+var SyntheticMouseEvent = createSyntheticEvent(MouseEventInterface);
 /**
  * @interface DragEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6347,6 +6339,8 @@ var MouseEventInterface = _assign({}, UIEventInterface, {
 var DragEventInterface = _assign({}, MouseEventInterface, {
   dataTransfer: 0
 });
+
+var SyntheticDragEvent = createSyntheticEvent(DragEventInterface);
 /**
  * @interface FocusEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6355,6 +6349,8 @@ var DragEventInterface = _assign({}, MouseEventInterface, {
 var FocusEventInterface = _assign({}, UIEventInterface, {
   relatedTarget: 0
 });
+
+var SyntheticFocusEvent = createSyntheticEvent(FocusEventInterface);
 /**
  * @interface Event
  * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
@@ -6366,6 +6362,8 @@ var AnimationEventInterface = _assign({}, EventInterface, {
   elapsedTime: 0,
   pseudoElement: 0
 });
+
+var SyntheticAnimationEvent = createSyntheticEvent(AnimationEventInterface);
 /**
  * @interface Event
  * @see http://www.w3.org/TR/clipboard-apis/
@@ -6376,6 +6374,8 @@ var ClipboardEventInterface = _assign({}, EventInterface, {
     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
@@ -6384,6 +6384,8 @@ var ClipboardEventInterface = _assign({}, EventInterface, {
 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
@@ -6391,7 +6393,7 @@ var CompositionEventInterface = _assign({}, EventInterface, {
  */
 // 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
@@ -6575,6 +6577,8 @@ var KeyboardEventInterface = _assign({}, UIEventInterface, {
     return 0;
   }
 });
+
+var SyntheticKeyboardEvent = createSyntheticEvent(KeyboardEventInterface);
 /**
  * @interface PointerEvent
  * @see http://www.w3.org/TR/pointerevents/
@@ -6592,6 +6596,8 @@ var PointerEventInterface = _assign({}, MouseEventInterface, {
   pointerType: 0,
   isPrimary: 0
 });
+
+var SyntheticPointerEvent = createSyntheticEvent(PointerEventInterface);
 /**
  * @interface TouchEvent
  * @see http://www.w3.org/TR/touch-events/
@@ -6607,6 +6613,8 @@ var TouchEventInterface = _assign({}, UIEventInterface, {
   shiftKey: 0,
   getModifierState: getEventModifierState
 });
+
+var SyntheticTouchEvent = createSyntheticEvent(TouchEventInterface);
 /**
  * @interface Event
  * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
@@ -6618,6 +6626,8 @@ var TransitionEventInterface = _assign({}, EventInterface, {
   elapsedTime: 0,
   pseudoElement: 0
 });
+
+var SyntheticTransitionEvent = createSyntheticEvent(TransitionEventInterface);
 /**
  * @interface WheelEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6641,6 +6651,8 @@ var WheelEventInterface = _assign({}, MouseEventInterface, {
   deltaMode: 0
 });
 
+var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
+
 var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
 
 var START_KEYCODE = 229;
@@ -6805,18 +6817,25 @@ function extractCompositionEvent(dispatchQueue, domEventName, targetInst, native
     }
   }
 
-  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;
+      }
     }
   }
 }
@@ -6958,9 +6977,16 @@ function extractBeforeInputEvent(dispatchQueue, domEventName, targetInst, native
     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
@@ -7058,10 +7084,17 @@ function registerEvents$1() {
 }
 
 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
@@ -7371,13 +7404,13 @@ function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, n
     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';
@@ -7385,7 +7418,7 @@ function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, n
 
   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
@@ -7394,7 +7427,7 @@ function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, n
   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;
@@ -7927,9 +7960,16 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
 
   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;
+    }
   }
 }
 /**
@@ -8011,7 +8051,7 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     return;
   }
 
-  var EventInterface;
+  var SyntheticEventCtor = SyntheticEvent;
   var reactEventType = domEventName;
 
   switch (domEventName) {
@@ -8027,22 +8067,22 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
 
     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':
@@ -8065,7 +8105,7 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     case 'mouseout':
     case 'mouseover':
     case 'contextmenu':
-      EventInterface = MouseEventInterface;
+      SyntheticEventCtor = SyntheticMouseEvent;
       break;
 
     case 'drag':
@@ -8076,38 +8116,38 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     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':
@@ -8118,11 +8158,10 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     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;
 
   {
@@ -8135,7 +8174,18 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     // 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
+      });
+    }
   }
 }
 
@@ -8467,19 +8517,12 @@ function createDispatchListener(instance, listener, currentTarget) {
   };
 }
 
-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,
@@ -8487,22 +8530,14 @@ function accumulateSinglePhaseListeners(targetFiber, dispatchQueue, event, inCap
         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
@@ -8517,9 +8552,7 @@ function accumulateSinglePhaseListeners(targetFiber, dispatchQueue, event, inCap
     instance = instance.return;
   }
 
-  if (listeners.length !== 0) {
-    dispatchQueue.push(createDispatchEntry(event, listeners));
-  }
+  return listeners;
 } // We should only use this function for:
 // - BeforeInputEventPlugin
 // - ChangeEventPlugin
@@ -8528,9 +8561,8 @@ function accumulateSinglePhaseListeners(targetFiber, dispatchQueue, event, inCap
 // 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.
 
@@ -8540,31 +8572,24 @@ function accumulateTwoPhaseListeners(targetFiber, dispatchQueue, event) {
         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) {
@@ -8675,7 +8700,10 @@ function accumulateEnterLeaveListenersForEvent(dispatchQueue, event, target, com
   }
 
   if (listeners.length !== 0) {
-    dispatchQueue.push(createDispatchEntry(event, listeners));
+    dispatchQueue.push({
+      event: event,
+      listeners: listeners
+    });
   }
 } // We should only use this function for:
 // - EnterLeaveEventPlugin
@@ -8721,11 +8749,6 @@ var normalizeHTML;
 
 {
   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
@@ -11283,7 +11306,7 @@ function flushSyncCallbackQueue() {
     Scheduler_cancelCallback(node);
   }
 
-  return flushSyncCallbackQueueImpl();
+  flushSyncCallbackQueueImpl();
 }
 
 function flushSyncCallbackQueueImpl() {
@@ -11319,30 +11342,11 @@ function flushSyncCallbackQueueImpl() {
         isFlushingSyncQueue = false;
       }
     }
-
-    return true;
-  } else {
-    return false;
   }
 }
 
-var NoFlags$1 =
-/*  */
-0; // Represents whether effect should fire.
-
-var HasEffect =
-/* */
-1; // Represents the phase in which the effect (not the clean-up) fires.
-
-var Layout =
-/*    */
-2;
-var Passive$1 =
-/*   */
-4;
-
 // 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
@@ -11401,7 +11405,7 @@ var ReactStrictModeWarnings = {
   var didWarnAboutUnsafeLifecycles = new Set();
 
   ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = function (fiber, instance) {
-    // Dedupe strategy: Warn once per component.
+    // Dedup strategy: Warn once per component.
     if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
       return;
     }
@@ -13253,16 +13257,24 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (!shouldTrackSideEffects) {
       // Noop.
       return;
-    }
+    } // Deletions are added in reversed order so we add it to the front.
+    // At this point, the return fiber's effect list is empty except for
+    // deletions, so we can just append the deletion to the list. The remaining
+    // effects aren't added until the complete phase. Once we implement
+    // resuming, this may not be true.
+
 
-    var deletions = returnFiber.deletions;
+    var last = returnFiber.lastEffect;
 
-    if (deletions === null) {
-      returnFiber.deletions = [childToDelete];
-      returnFiber.flags |= Deletion;
+    if (last !== null) {
+      last.nextEffect = childToDelete;
+      returnFiber.lastEffect = childToDelete;
     } else {
-      deletions.push(childToDelete);
+      returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
+
+    childToDelete.nextEffect = null;
+    childToDelete.flags = Deletion;
   }
 
   function deleteRemainingChildren(returnFiber, currentFirstChild) {
@@ -14318,13 +14330,6 @@ function popSuspenseContext(fiber) {
   pop(suspenseStackCursor, fiber);
 }
 
-// A non-null SuspenseState means that it is blocked for one reason or another.
-// - A non-null dehydrated field means it's blocked pending hydration.
-//   - A non-null dehydrated field can use isSuspenseInstancePending or
-//     isSuspenseInstanceFallback to query the reason for being dehydrated.
-// - A null dehydrated field means it's blocked by something suspending and
-//   we're currently showing a fallback instead.
-
 function shouldCaptureSuspense(workInProgress, hasInvisibleParent) {
   // If it was the primary children that just suspended, capture and render the
   // fallback. Otherwise, don't capture and bubble to the next boundary.
@@ -14406,6 +14411,21 @@ function findFirstSuspended(row) {
   return null;
 }
 
+var NoFlags$1 =
+/*  */
+0; // Represents whether effect should fire.
+
+var HasEffect =
+/* */
+1; // Represents the phase in which the effect (not the clean-up) fires.
+
+var Layout =
+/*    */
+2;
+var Passive$1 =
+/*   */
+4;
+
 // This may have been an insertion or a hydration.
 
 var hydrationParentFiber = null;
@@ -14437,14 +14457,17 @@ function deleteHydratableInstance(returnFiber, instance) {
   var childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  var deletions = returnFiber.deletions;
-
-  if (deletions === null) {
-    returnFiber.deletions = [childToDelete]; // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-
-    returnFiber.flags |= Deletion;
+  childToDelete.flags = Deletion; // This might seem like it belongs on progressedFirstDeletion. However,
+  // these children are not part of the reconciliation list of children.
+  // Even if we abort and rereconcile the children, that will try to hydrate
+  // again and the nodes are still in the host tree so these will be
+  // recreated.
+
+  if (returnFiber.lastEffect !== null) {
+    returnFiber.lastEffect.nextEffect = childToDelete;
+    returnFiber.lastEffect = childToDelete;
   } else {
-    deletions.push(childToDelete);
+    returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
 }
 
@@ -15710,7 +15733,7 @@ function mountEffect(create, deps) {
     }
   }
 
-  return mountEffectImpl(Passive | PassiveStatic, Passive$1, create, deps);
+  return mountEffectImpl(Update | Passive, Passive$1, create, deps);
 }
 
 function updateEffect(create, deps) {
@@ -15721,7 +15744,7 @@ function updateEffect(create, deps) {
     }
   }
 
-  return updateEffectImpl(Passive, Passive$1, create, deps);
+  return updateEffectImpl(Update | Passive, Passive$1, create, deps);
 }
 
 function mountLayoutEffect(create, deps) {
@@ -16004,7 +16027,7 @@ function mountOpaqueIdentifier() {
     var setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber$1.mode & BlockingMode) === NoMode) {
-      currentlyRenderingFiber$1.flags |= Passive | PassiveStatic;
+      currentlyRenderingFiber$1.flags |= Update | Passive;
       pushEffect(HasEffect | Passive$1, function () {
         setId(makeId());
       }, undefined, null);
@@ -17280,8 +17303,7 @@ function updateMode(current, workInProgress, renderLanes) {
 
 function updateProfiler(current, workInProgress, renderLanes) {
   {
-    // TODO: Only call onRender et al if subtree has effects
-    workInProgress.flags |= Update | Passive; // Reset effect durations for the next eventual effect phase.
+    workInProgress.flags |= Update; // Reset effect durations for the next eventual effect phase.
     // These are reset during render to allow the DevTools commit hook a chance to read them,
 
     var stateNode = workInProgress.stateNode;
@@ -17942,7 +17964,8 @@ function updateSuspenseOffscreenState(prevOffscreenState, renderLanes) {
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes)
   };
-}
+} // TODO: Probably should inline this back
+
 
 function shouldRemainOnFallback(suspenseContext, current, workInProgress, renderLanes) {
   // If we're already showing a fallback, there are cases where we need to
@@ -18033,17 +18056,41 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       tryToClaimNextHydratableInstance(workInProgress); // This could've been a dehydrated suspense component.
     }
 
+    var nextPrimaryChildren = nextProps.children;
+    var nextFallbackChildren = nextProps.fallback;
+
     if (showFallback) {
-      var nextPrimaryChildren = nextProps.children;
-      var nextFallbackChildren = nextProps.fallback;
       var fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
       var primaryChildFragment = workInProgress.child;
       primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackFragment;
+    } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+      // This is a CPU-bound tree. Skip this tree and show a placeholder to
+      // unblock the surrounding content. Then immediately retry after the
+      // initial commit.
+      var _fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
+
+      var _primaryChildFragment = workInProgress.child;
+      _primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
+      workInProgress.memoizedState = SUSPENDED_MARKER; // Since nothing actually suspended, there will nothing to ping this to
+      // get it started back up to attempt the next item. While in terms of
+      // priority this work has the same priority as this current render, it's
+      // not part of the same transition once the transition has committed. If
+      // it's sync, we still want to yield so that it can be painted.
+      // Conceptually, this is really the same as pinging. We can use any
+      // RetryLane even if it's the one currently rendering since we're leaving
+      // it behind on this node.
+
+      workInProgress.lanes = SomeRetryLane;
+
+      {
+        markSpawnedWork(SomeRetryLane);
+      }
+
+      return _fallbackFragment;
     } else {
-      var _nextPrimaryChildren = nextProps.children;
-      return mountSuspensePrimaryChildren(workInProgress, _nextPrimaryChildren, renderLanes);
+      return mountSuspensePrimaryChildren(workInProgress, nextPrimaryChildren, renderLanes);
     }
   } else {
     // This is an update.
@@ -18055,37 +18102,37 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
       if (showFallback) {
         var _nextFallbackChildren2 = nextProps.fallback;
-        var _nextPrimaryChildren3 = nextProps.children;
+        var _nextPrimaryChildren2 = nextProps.children;
 
-        var _fallbackChildFragment = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren3, _nextFallbackChildren2, renderLanes);
+        var _fallbackChildFragment = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren2, _nextFallbackChildren2, renderLanes);
 
-        var _primaryChildFragment2 = workInProgress.child;
+        var _primaryChildFragment3 = workInProgress.child;
         var prevOffscreenState = current.child.memoizedState;
-        _primaryChildFragment2.memoizedState = prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
-        _primaryChildFragment2.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes);
+        _primaryChildFragment3.memoizedState = prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+        _primaryChildFragment3.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes);
         workInProgress.memoizedState = SUSPENDED_MARKER;
         return _fallbackChildFragment;
       } else {
-        var _nextPrimaryChildren4 = nextProps.children;
+        var _nextPrimaryChildren3 = nextProps.children;
 
-        var _primaryChildFragment3 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren4, renderLanes);
+        var _primaryChildFragment4 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren3, renderLanes);
 
         workInProgress.memoizedState = null;
-        return _primaryChildFragment3;
+        return _primaryChildFragment4;
       }
     } else {
       // The current tree is not already showing a fallback.
       if (showFallback) {
         // Timed out.
         var _nextFallbackChildren3 = nextProps.fallback;
-        var _nextPrimaryChildren5 = nextProps.children;
+        var _nextPrimaryChildren4 = nextProps.children;
 
-        var _fallbackChildFragment2 = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren5, _nextFallbackChildren3, renderLanes);
+        var _fallbackChildFragment2 = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren4, _nextFallbackChildren3, renderLanes);
 
-        var _primaryChildFragment4 = workInProgress.child;
+        var _primaryChildFragment5 = workInProgress.child;
         var _prevOffscreenState = current.child.memoizedState;
-        _primaryChildFragment4.memoizedState = _prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(_prevOffscreenState, renderLanes);
-        _primaryChildFragment4.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes); // Skip the primary children, and continue working on the
+        _primaryChildFragment5.memoizedState = _prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(_prevOffscreenState, renderLanes);
+        _primaryChildFragment5.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes); // Skip the primary children, and continue working on the
         // fallback children.
 
         workInProgress.memoizedState = SUSPENDED_MARKER;
@@ -18093,12 +18140,12 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       } else {
         // Still haven't timed out. Continue rendering the children, like we
         // normally do.
-        var _nextPrimaryChildren6 = nextProps.children;
+        var _nextPrimaryChildren5 = nextProps.children;
 
-        var _primaryChildFragment5 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren6, renderLanes);
+        var _primaryChildFragment6 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren5, renderLanes);
 
         workInProgress.memoizedState = null;
-        return _primaryChildFragment5;
+        return _primaryChildFragment6;
       }
     }
   }
@@ -18180,15 +18227,9 @@ function updateSuspensePrimaryChildren(current, workInProgress, primaryChildren,
 
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
-    var deletions = workInProgress.deletions;
-
-    if (deletions === null) {
-      workInProgress.deletions = [currentFallbackChildFragment]; // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-
-      workInProgress.flags |= Deletion;
-    } else {
-      deletions.push(currentFallbackChildFragment);
-    }
+    currentFallbackChildFragment.nextEffect = null;
+    currentFallbackChildFragment.flags = Deletion;
+    workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -18230,16 +18271,24 @@ function updateSuspenseFallbackChildren(current, workInProgress, primaryChildren
       primaryChildFragment.treeBaseDuration = currentPrimaryChildFragment.treeBaseDuration;
     } // The fallback fiber was added as a deletion effect during the first pass.
     // However, since we're going to remain on the fallback, we no longer want
-    // to delete it.
+    // to delete it. So we need to remove it from the list. Deletions are stored
+    // on the same list as effects. We want to keep the effects from the primary
+    // tree. So we copy the primary child fragment's effect list, which does not
+    // include the fallback deletion effect.
 
 
-    workInProgress.deletions = null;
-  } else {
-    primaryChildFragment = createWorkInProgressOffscreenFiber(currentPrimaryChildFragment, primaryChildProps); // Since we're reusing a current tree, we need to reuse the flags, too.
-    // (We don't do this in legacy mode, because in legacy mode we don't re-use
-    // the current tree; see previous branch.)
+    var progressedLastEffect = primaryChildFragment.lastEffect;
 
-    primaryChildFragment.subtreeFlags = currentPrimaryChildFragment.subtreeFlags & StaticMask;
+    if (progressedLastEffect !== null) {
+      workInProgress.firstEffect = primaryChildFragment.firstEffect;
+      workInProgress.lastEffect = progressedLastEffect;
+      progressedLastEffect.nextEffect = null;
+    } else {
+      // TODO: Reset this somewhere else? Lol legacy mode is so weird.
+      workInProgress.firstEffect = workInProgress.lastEffect = null;
+    }
+  } else {
+    primaryChildFragment = createWorkInProgressOffscreenFiber(currentPrimaryChildFragment, primaryChildProps);
   }
 
   var fallbackChildFragment;
@@ -18442,7 +18491,7 @@ function validateSuspenseListChildren(children, revealOrder) {
   }
 }
 
-function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode) {
+function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastContentRow, tailMode, lastEffectBeforeRendering) {
   var renderState = workInProgress.memoizedState;
 
   if (renderState === null) {
@@ -18452,7 +18501,8 @@ function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastCont
       renderingStartTime: 0,
       last: lastContentRow,
       tail: tail,
-      tailMode: tailMode
+      tailMode: tailMode,
+      lastEffect: lastEffectBeforeRendering
     };
   } else {
     // We can reuse the existing object from previous renders.
@@ -18462,6 +18512,7 @@ function initSuspenseListRenderState(workInProgress, isBackwards, tail, lastCont
     renderState.last = lastContentRow;
     renderState.tail = tail;
     renderState.tailMode = tailMode;
+    renderState.lastEffect = lastEffectBeforeRendering;
   }
 } // This can end up rendering this component multiple passes.
 // The first pass splits the children fibers into two sets. A head and tail.
@@ -18526,7 +18577,7 @@ function updateSuspenseListComponent(current, workInProgress, renderLanes) {
           }
 
           initSuspenseListRenderState(workInProgress, false, // isBackwards
-          tail, lastContentRow, tailMode);
+          tail, lastContentRow, tailMode, workInProgress.lastEffect);
           break;
         }
 
@@ -18558,7 +18609,7 @@ function updateSuspenseListComponent(current, workInProgress, renderLanes) {
 
           initSuspenseListRenderState(workInProgress, true, // isBackwards
           _tail, null, // last
-          tailMode);
+          tailMode, workInProgress.lastEffect);
           break;
         }
 
@@ -18567,7 +18618,7 @@ function updateSuspenseListComponent(current, workInProgress, renderLanes) {
           initSuspenseListRenderState(workInProgress, false, // isBackwards
           null, // tail
           null, // last
-          undefined);
+          undefined, workInProgress.lastEffect);
           break;
         }
 
@@ -18773,16 +18824,17 @@ function remountFiber(current, oldWorkInProgress, newWorkInProgress) {
     // Since the old fiber is disconnected, we have to schedule it manually.
 
 
-    var deletions = returnFiber.deletions;
+    var last = returnFiber.lastEffect;
 
-    if (deletions === null) {
-      returnFiber.deletions = [current]; // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-
-      returnFiber.flags |= Deletion;
+    if (last !== null) {
+      last.nextEffect = current;
+      returnFiber.lastEffect = current;
     } else {
-      deletions.push(current);
+      returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
 
+    current.nextEffect = null;
+    current.flags = Deletion;
     newWorkInProgress.flags |= Placement; // Restart work from the new fiber.
 
     return newWorkInProgress;
@@ -18848,11 +18900,10 @@ function beginWork(current, workInProgress, renderLanes) {
         case Profiler:
           {
             // Profiler should only call onRender when one of its descendants actually rendered.
-            // TODO: Only call onRender et al if subtree has effects
             var hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
 
             if (hasChildWork) {
-              workInProgress.flags |= Passive | Update;
+              workInProgress.flags |= Update;
             } // Reset effect durations for the next eventual effect phase.
             // These are reset during render to allow the DevTools commit hook a chance to read them,
 
@@ -18936,6 +18987,7 @@ function beginWork(current, workInProgress, renderLanes) {
               // update in the past but didn't complete it.
               renderState.rendering = null;
               renderState.tail = null;
+              renderState.lastEffect = null;
             }
 
             pushSuspenseContext(workInProgress, suspenseStackCursor.current);
@@ -19187,7 +19239,7 @@ var updateHostText$1;
     }
   };
 
-  updateHostContainer = function (current, workInProgress) {// Noop
+  updateHostContainer = function (workInProgress) {// Noop
   };
 
   updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
@@ -19308,92 +19360,6 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
   }
 }
 
-function bubbleProperties(completedWork) {
-  var didBailout = completedWork.alternate !== null && completedWork.alternate.child === completedWork.child;
-  var newChildLanes = NoLanes;
-  var subtreeFlags = NoFlags;
-
-  if (!didBailout) {
-    // Bubble up the earliest expiration time.
-    if ( (completedWork.mode & ProfileMode) !== NoMode) {
-      // In profiling mode, resetChildExpirationTime is also used to reset
-      // profiler durations.
-      var actualDuration = completedWork.actualDuration;
-      var treeBaseDuration = completedWork.selfBaseDuration;
-      var child = completedWork.child;
-
-      while (child !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(child.lanes, child.childLanes));
-        subtreeFlags |= child.subtreeFlags;
-        subtreeFlags |= child.flags; // When a fiber is cloned, its actualDuration is reset to 0. This value will
-        // only be updated if work is done on the fiber (i.e. it doesn't bailout).
-        // When work is done, it should bubble to the parent's actualDuration. If
-        // the fiber has not been cloned though, (meaning no work was done), then
-        // this value will reflect the amount of time spent working on a previous
-        // render. In that case it should not bubble. We determine whether it was
-        // cloned by comparing the child pointer.
-
-        actualDuration += child.actualDuration;
-        treeBaseDuration += child.treeBaseDuration;
-        child = child.sibling;
-      }
-
-      completedWork.actualDuration = actualDuration;
-      completedWork.treeBaseDuration = treeBaseDuration;
-    } else {
-      var _child = completedWork.child;
-
-      while (_child !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child.lanes, _child.childLanes));
-        subtreeFlags |= _child.subtreeFlags;
-        subtreeFlags |= _child.flags;
-        _child = _child.sibling;
-      }
-    }
-
-    completedWork.subtreeFlags |= subtreeFlags;
-  } else {
-    // Bubble up the earliest expiration time.
-    if ( (completedWork.mode & ProfileMode) !== NoMode) {
-      // In profiling mode, resetChildExpirationTime is also used to reset
-      // profiler durations.
-      var _treeBaseDuration = completedWork.selfBaseDuration;
-      var _child2 = completedWork.child;
-
-      while (_child2 !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child2.lanes, _child2.childLanes)); // "Static" flags share the lifetime of the fiber/hook they belong to,
-        // so we should bubble those up even during a bailout. All the other
-        // flags have a lifetime only of a single render + commit, so we should
-        // ignore them.
-
-        subtreeFlags |= _child2.subtreeFlags & StaticMask;
-        subtreeFlags |= _child2.flags & StaticMask;
-        _treeBaseDuration += _child2.treeBaseDuration;
-        _child2 = _child2.sibling;
-      }
-
-      completedWork.treeBaseDuration = _treeBaseDuration;
-    } else {
-      var _child3 = completedWork.child;
-
-      while (_child3 !== null) {
-        newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child3.lanes, _child3.childLanes)); // "Static" flags share the lifetime of the fiber/hook they belong to,
-        // so we should bubble those up even during a bailout. All the other
-        // flags have a lifetime only of a single render + commit, so we should
-        // ignore them.
-
-        subtreeFlags |= _child3.subtreeFlags & StaticMask;
-        subtreeFlags |= _child3.flags & StaticMask;
-        _child3 = _child3.sibling;
-      }
-    }
-
-    completedWork.subtreeFlags |= subtreeFlags;
-  }
-
-  completedWork.childLanes = newChildLanes;
-}
-
 function completeWork(current, workInProgress, renderLanes) {
   var newProps = workInProgress.pendingProps;
 
@@ -19408,7 +19374,6 @@ function completeWork(current, workInProgress, renderLanes) {
     case Profiler:
     case ContextConsumer:
     case MemoComponent:
-      bubbleProperties(workInProgress);
       return null;
 
     case ClassComponent:
@@ -19419,7 +19384,6 @@ function completeWork(current, workInProgress, renderLanes) {
           popContext(workInProgress);
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -19453,8 +19417,7 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        updateHostContainer(current, workInProgress);
-        bubbleProperties(workInProgress);
+        updateHostContainer(workInProgress);
         return null;
       }
 
@@ -19479,7 +19442,6 @@ function completeWork(current, workInProgress, renderLanes) {
             } // This can happen when we abort work.
 
 
-            bubbleProperties(workInProgress);
             return null;
           }
 
@@ -19516,7 +19478,6 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -19554,7 +19515,6 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -19569,8 +19529,7 @@ function completeWork(current, workInProgress, renderLanes) {
 
           if ( (workInProgress.mode & ProfileMode) !== NoMode) {
             transferActualDuration(workInProgress);
-          } // Don't bubble properties in this case.
-
+          }
 
           return workInProgress;
         }
@@ -19627,40 +19586,22 @@ function completeWork(current, workInProgress, renderLanes) {
           }
         }
 
-        bubbleProperties(workInProgress);
-
-        {
-          if ((workInProgress.mode & ProfileMode) !== NoMode) {
-            if (nextDidTimeout) {
-              // Don't count time spent in a timed out Suspense subtree as part of the base duration.
-              var _primaryChildFragment2 = workInProgress.child;
-
-              if (_primaryChildFragment2 !== null) {
-                // $FlowFixMe Flow doens't support type casting in combiation with the -= operator
-                workInProgress.treeBaseDuration -= _primaryChildFragment2.treeBaseDuration;
-              }
-            }
-          }
-        }
-
         return null;
       }
 
     case HostPortal:
       popHostContainer(workInProgress);
-      updateHostContainer(current, workInProgress);
+      updateHostContainer(workInProgress);
 
       if (current === null) {
         preparePortalMount(workInProgress.stateNode.containerInfo);
       }
 
-      bubbleProperties(workInProgress);
       return null;
 
     case ContextProvider:
       // Pop provider fiber
       popProvider(workInProgress);
-      bubbleProperties(workInProgress);
       return null;
 
     case IncompleteClassComponent:
@@ -19673,7 +19614,6 @@ function completeWork(current, workInProgress, renderLanes) {
           popContext(workInProgress);
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -19685,7 +19625,6 @@ function completeWork(current, workInProgress, renderLanes) {
         if (renderState === null) {
           // We're running in the default, "independent" mode.
           // We don't do anything in this mode.
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -19735,15 +19674,19 @@ function completeWork(current, workInProgress, renderLanes) {
                     workInProgress.flags |= Update;
                   } // Rerender the whole list, but this time, we'll force fallbacks
                   // to stay in place.
-                  // Reset the child fibers to their original state.
+                  // Reset the effect list before doing the second pass since that's now invalid.
+
 
+                  if (renderState.lastEffect === null) {
+                    workInProgress.firstEffect = null;
+                  }
+
+                  workInProgress.lastEffect = renderState.lastEffect; // Reset the child fibers to their original state.
 
-                  workInProgress.subtreeFlags = NoFlags;
                   resetChildFibers(workInProgress, renderLanes); // Set up the Suspense Context to force suspense and immediately
                   // rerender the children.
 
-                  pushSuspenseContext(workInProgress, setShallowSuspenseContext(suspenseStackCursor.current, ForceSuspenseFallback)); // Don't bubble properties in this case.
-
+                  pushSuspenseContext(workInProgress, setShallowSuspenseContext(suspenseStackCursor.current, ForceSuspenseFallback));
                   return workInProgress.child;
                 }
 
@@ -19797,8 +19740,16 @@ function completeWork(current, workInProgress, renderLanes) {
 
               if (renderState.tail === null && renderState.tailMode === 'hidden' && !renderedTail.alternate && !getIsHydrating() // We don't cut it if we're hydrating.
               ) {
-                  // We're done.
-                  bubbleProperties(workInProgress);
+                  // We need to delete the row we just rendered.
+                  // Reset the effect list to what it was before we rendered this
+                  // child. The nested children have already appended themselves.
+                  var lastEffect = workInProgress.lastEffect = renderState.lastEffect; // Remove any effects that were appended after this point.
+
+                  if (lastEffect !== null) {
+                    lastEffect.nextEffect = null;
+                  } // We're done.
+
+
                   return null;
                 }
             } else if ( // The time it took to render last row is greater than the remaining
@@ -19811,16 +19762,19 @@ function completeWork(current, workInProgress, renderLanes) {
               workInProgress.flags |= DidCapture;
               didSuspendAlready = true;
               cutOffTailIfNeeded(renderState, false); // Since nothing actually suspended, there will nothing to ping this
-              // to get it started back up to attempt the next item. If we can show
-              // them, then they really have the same priority as this render.
-              // So we'll pick it back up the very next render pass once we've had
-              // an opportunity to yield for paint.
-
-              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);
+              }
             }
           }
 
@@ -19851,6 +19805,7 @@ function completeWork(current, workInProgress, renderLanes) {
           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
@@ -19865,12 +19820,10 @@ function completeWork(current, workInProgress, renderLanes) {
           }
 
           pushSuspenseContext(workInProgress, suspenseContext); // Do a pass over the next row.
-          // Don't bubble properties in this case.
 
           return next;
         }
 
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -19894,21 +19847,16 @@ function completeWork(current, workInProgress, renderLanes) {
     case LegacyHiddenComponent:
       {
         popRenderLanes(workInProgress);
-        var _nextState = workInProgress.memoizedState;
-        var nextIsHidden = _nextState !== null;
 
         if (current !== null) {
+          var _nextState = workInProgress.memoizedState;
           var _prevState = current.memoizedState;
           var prevIsHidden = _prevState !== null;
+          var nextIsHidden = _nextState !== null;
 
           if (prevIsHidden !== nextIsHidden && newProps.mode !== 'unstable-defer-without-hiding') {
             workInProgress.flags |= Update;
           }
-        } // Don't bubble properties for hidden children.
-
-
-        if (!nextIsHidden || includesSomeLane(subtreeRenderLanes, OffscreenLane) || (workInProgress.mode & ConcurrentMode) === NoMode) {
-          bubbleProperties(workInProgress);
         }
 
         return null;
@@ -20262,7 +20210,9 @@ function attachPingListener(root, wakeable, lanes) {
 
 function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes) {
   // The source fiber did not complete.
-  sourceFiber.flags |= Incomplete;
+  sourceFiber.flags |= Incomplete; // Its effect list is no longer valid.
+
+  sourceFiber.firstEffect = sourceFiber.lastEffect = null;
 
   if (value !== null && typeof value === 'object' && typeof value.then === 'function') {
     // This is a wakeable.
@@ -20465,18 +20415,18 @@ var callComponentWillUnmountWithTimer = function (current, instance) {
 }; // Capture errors so they don't interrupt unmounting.
 
 
-function safelyCallComponentWillUnmount(current, instance, nearestMountedAncestor) {
+function safelyCallComponentWillUnmount(current, instance) {
   {
     invokeGuardedCallback(null, callComponentWillUnmountWithTimer, null, current, instance);
 
     if (hasCaughtError()) {
       var unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+      captureCommitPhaseError(current, unmountError);
     }
   }
 }
 
-function safelyDetachRef(current, nearestMountedAncestor) {
+function safelyDetachRef(current) {
   var ref = current.ref;
 
   if (ref !== null) {
@@ -20486,7 +20436,7 @@ function safelyDetachRef(current, nearestMountedAncestor) {
 
         if (hasCaughtError()) {
           var refError = clearCaughtError();
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
+          captureCommitPhaseError(current, refError);
         }
       }
     } else {
@@ -20495,13 +20445,13 @@ function safelyDetachRef(current, nearestMountedAncestor) {
   }
 }
 
-function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
+function safelyCallDestroy(current, destroy) {
   {
     invokeGuardedCallback(null, destroy, null);
 
     if (hasCaughtError()) {
       var error = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
+      captureCommitPhaseError(current, error);
     }
   }
 }
@@ -20584,7 +20534,7 @@ function commitBeforeMutationLifeCycles(current, finishedWork) {
   }
 }
 
-function commitHookEffectListUnmount(tag, finishedWork, nearestMountedAncestor) {
+function commitHookEffectListUnmount(tag, finishedWork) {
   var updateQueue = finishedWork.updateQueue;
   var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
@@ -20599,45 +20549,13 @@ function commitHookEffectListUnmount(tag, finishedWork, nearestMountedAncestor)
         effect.destroy = undefined;
 
         if (destroy !== undefined) {
-          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+          destroy();
         }
       }
 
       effect = effect.next;
     } while (effect !== firstEffect);
   }
-} // TODO: Remove this duplication.
-
-
-function commitHookEffectListUnmount2( // Tags to check for when deciding whether to unmount. e.g. to skip over layout effects
-hookFlags, fiber, nearestMountedAncestor) {
-  var updateQueue = fiber.updateQueue;
-  var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
-
-  if (lastEffect !== null) {
-    var firstEffect = lastEffect.next;
-    var effect = firstEffect;
-
-    do {
-      var _effect = effect,
-          next = _effect.next,
-          tag = _effect.tag;
-
-      if ((tag & hookFlags) === hookFlags) {
-        var destroy = effect.destroy;
-
-        if (destroy !== undefined) {
-          effect.destroy = undefined;
-
-          {
-            safelyCallDestroy(fiber, nearestMountedAncestor, destroy);
-          }
-        }
-      }
-
-      effect = next;
-    } while (effect !== firstEffect);
-  }
 }
 
 function commitHookEffectListMount(tag, finishedWork) {
@@ -20678,14 +20596,8 @@ function commitHookEffectListMount(tag, finishedWork) {
   }
 }
 
-function invokePassiveEffectCreate(effect) {
-  var create = effect.create;
-  effect.destroy = create();
-} // TODO: Remove this duplication.
-
-
-function commitHookEffectListMount2(fiber) {
-  var updateQueue = fiber.updateQueue;
+function schedulePassiveEffects(finishedWork) {
+  var updateQueue = finishedWork.updateQueue;
   var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
   if (lastEffect !== null) {
@@ -20693,27 +20605,13 @@ function commitHookEffectListMount2(fiber) {
     var effect = firstEffect;
 
     do {
-      var _effect2 = effect,
-          next = _effect2.next,
-          tag = _effect2.tag;
+      var _effect = effect,
+          next = _effect.next,
+          tag = _effect.tag;
 
       if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
-        {
-          {
-            invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
-          }
-
-          if (hasCaughtError()) {
-            if (!(fiber !== null)) {
-              {
-                throw Error( "Should be working on an effect." );
-              }
-            }
-
-            var error = clearCaughtError();
-            captureCommitPhaseError(fiber, fiber.return, error);
-          }
-        }
+        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
+        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
       }
 
       effect = next;
@@ -20736,10 +20634,7 @@ function commitLifeCycles(finishedRoot, current, finishedWork, committedLanes) {
           commitHookEffectListMount(Layout | HasEffect, finishedWork);
         }
 
-        if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags) {
-          schedulePassiveEffectCallback();
-        }
-
+        schedulePassiveEffects(finishedWork);
         return;
       }
 
@@ -21005,7 +20900,7 @@ function commitDetachRef(current) {
 // interrupt deletion, so it's okay
 
 
-function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+function commitUnmount(finishedRoot, current, renderPriorityLevel) {
   onCommitUnmount(current);
 
   switch (current.tag) {
@@ -21025,14 +20920,16 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
             var effect = firstEffect;
 
             do {
-              var _effect3 = effect,
-                  destroy = _effect3.destroy,
-                  tag = _effect3.tag;
+              var _effect2 = effect,
+                  destroy = _effect2.destroy,
+                  tag = _effect2.tag;
 
               if (destroy !== undefined) {
-                if ((tag & Layout) !== NoFlags$1) {
+                if ((tag & Passive$1) !== NoFlags$1) {
+                  enqueuePendingPassiveHookEffectUnmount(current, effect);
+                } else {
                   {
-                    safelyCallDestroy(current, nearestMountedAncestor, destroy);
+                    safelyCallDestroy(current, destroy);
                   }
                 }
               }
@@ -21047,11 +20944,11 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
 
     case ClassComponent:
       {
-        safelyDetachRef(current, nearestMountedAncestor);
+        safelyDetachRef(current);
         var instance = current.stateNode;
 
         if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(current, instance, nearestMountedAncestor);
+          safelyCallComponentWillUnmount(current, instance);
         }
 
         return;
@@ -21059,7 +20956,7 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
 
     case HostComponent:
       {
-        safelyDetachRef(current, nearestMountedAncestor);
+        safelyDetachRef(current);
         return;
       }
 
@@ -21069,7 +20966,7 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
         // We are also not using this parent because
         // the portal will get pushed immediately.
         {
-          unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+          unmountHostComponents(finishedRoot, current);
         }
 
         return;
@@ -21095,7 +20992,7 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
   }
 }
 
-function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor, renderPriorityLevel) {
+function commitNestedUnmounts(finishedRoot, root, renderPriorityLevel) {
   // While we're inside a removed host node we don't want to call
   // removeChild on the inner nodes because they're removed by the top
   // call anyway. We also want to call componentWillUnmount on all
@@ -21104,7 +21001,7 @@ function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor, render
   var node = root;
 
   while (true) {
-    commitUnmount(finishedRoot, node, nearestMountedAncestor); // Visit children because they may contain more composite or host nodes.
+    commitUnmount(finishedRoot, node); // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
 
     if (node.child !== null && ( // If we use mutation we drill down into portals using commitUnmount above.
@@ -21133,26 +21030,33 @@ function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor, render
 }
 
 function detachFiberMutation(fiber) {
-  // Cut off the return pointer to disconnect it from the tree.
-  // This enables us to detect and warn against state updates on an unmounted component.
-  // It also prevents events from bubbling from within disconnected components.
-  //
-  // Ideally, we should also clear the child pointer of the parent alternate to let this
+  // Cut off the return pointers to disconnect it from the tree. Ideally, we
+  // should clear the child pointer of the parent alternate to let this
   // get GC:ed but we don't know which for sure which parent is the current
-  // one so we'll settle for GC:ing the subtree of this child.
-  // This child itself will be GC:ed when the parent updates the next time.
+  // one so we'll settle for GC:ing the subtree of this child. This child
+  // itself will be GC:ed when the parent updates the next time.
+  // Note: we cannot null out sibling here, otherwise it can cause issues
+  // with findDOMNode and how it requires the sibling field to carry out
+  // traversal in a later effect. See PR #16820. We now clear the sibling
+  // field after effects, see: detachFiberAfterEffects.
   //
-  // Note that we can't clear child or sibling pointers yet.
-  // They're needed for passive effects and for findDOMNode.
-  // We defer those fields, and all other cleanup, to the passive phase (see detachFiberAfterEffects).
-  var alternate = fiber.alternate;
+  // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.
+  // It may be required if the current component is an error boundary,
+  // and one of its descendants throws while unmounting a passive effect.
+  fiber.alternate = null;
+  fiber.child = null;
+  fiber.dependencies = null;
+  fiber.firstEffect = null;
+  fiber.lastEffect = null;
+  fiber.memoizedProps = null;
+  fiber.memoizedState = null;
+  fiber.pendingProps = null;
+  fiber.return = null;
+  fiber.updateQueue = null;
 
-  if (alternate !== null) {
-    alternate.return = null;
-    fiber.alternate = null;
+  {
+    fiber._debugOwner = null;
   }
-
-  fiber.return = null;
 }
 
 function getHostParentFiber(fiber) {
@@ -21334,7 +21238,7 @@ function insertOrAppendPlacementNode(node, before, parent) {
   }
 }
 
-function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+function unmountHostComponents(finishedRoot, current, renderPriorityLevel) {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
   var node = current; // Each iteration, currentParent is populated with node's host parent if not
@@ -21383,7 +21287,7 @@ function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, re
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor); // After all the children have unmounted, it is now safe to remove the
+      commitNestedUnmounts(finishedRoot, node); // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
 
       if (currentParentIsContainer) {
@@ -21404,7 +21308,7 @@ function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, re
         continue;
       }
     } else {
-      commitUnmount(finishedRoot, node, nearestMountedAncestor); // Visit children because we may find more host components below.
+      commitUnmount(finishedRoot, node); // Visit children because we may find more host components below.
 
       if (node.child !== null) {
         node.child.return = node;
@@ -21436,11 +21340,11 @@ function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, re
   }
 }
 
-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;
@@ -21466,7 +21370,7 @@ function commitWork(current, finishedWork) {
         // e.g. a destroy function in one component should never override a ref set
         // by a create function in another component during the same commit.
         {
-          commitHookEffectListUnmount(Layout | HasEffect, finishedWork, finishedWork.return);
+          commitHookEffectListUnmount(Layout | HasEffect, finishedWork);
         }
 
         return;
@@ -21682,42 +21586,6 @@ function commitResetTextContent(current) {
   resetTextContent(current.stateNode);
 }
 
-function commitPassiveWork(finishedWork) {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent:
-    case Block:
-      {
-        commitHookEffectListUnmount2(Passive$1 | HasEffect, finishedWork, finishedWork.return);
-        break;
-      }
-  }
-}
-
-function commitPassiveUnmount(current, nearestMountedAncestor) {
-  switch (current.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent:
-    case Block:
-      commitHookEffectListUnmount2(Passive$1, current, nearestMountedAncestor);
-  }
-}
-
-function commitPassiveLifeCycles(finishedRoot, finishedWork) {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent:
-    case Block:
-      {
-        commitHookEffectListMount2(finishedWork);
-        break;
-      }
-  }
-}
-
 var COMPONENT_TYPE = 0;
 var HAS_PSEUDO_CLASS_TYPE = 1;
 var ROLE_TYPE = 2;
@@ -21828,6 +21696,7 @@ function resetRenderTimer() {
 function getRenderTargetTime() {
   return workInProgressRootRenderTargetTime;
 }
+var nextEffect = null;
 var hasUncaughtError = false;
 var firstUncaughtError = null;
 var legacyErrorBoundariesThatAlreadyFailed = null;
@@ -21835,6 +21704,8 @@ var rootDoesHavePassiveEffects = false;
 var rootWithPendingPassiveEffects = null;
 var pendingPassiveEffectsRenderPriority = NoPriority$1;
 var pendingPassiveEffectsLanes = NoLanes;
+var pendingPassiveHookEffectsMount = [];
+var pendingPassiveHookEffectsUnmount = [];
 var rootsWithPendingDiscreteUpdates = null; // Use these to prevent an infinite loop of nested updates
 
 var NESTED_UPDATE_LIMIT = 50;
@@ -22157,7 +22028,7 @@ function ensureRootIsScheduled(root, currentTime) {
 // goes through Scheduler.
 
 
-function performConcurrentWorkOnRoot(root, didTimeout) {
+function performConcurrentWorkOnRoot(root) {
   // Since we know we're in a React event, we can clear the current
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
@@ -22193,18 +22064,6 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   if (lanes === NoLanes) {
     // Defensive coding. This is never expected to happen.
     return null;
-  } // TODO: We only check `didTimeout` defensively, to account for a Scheduler
-  // bug we're still investigating. Once the bug in Scheduler is fixed,
-  // we can remove this, since we track expiration ourselves.
-
-
-  if ( didTimeout) {
-    // Something expired. Flush synchronously until there's no expired
-    // work left.
-    markRootExpired(root, lanes); // This will schedule a synchronous callback.
-
-    ensureRootIsScheduled(root, now());
-    return null;
   }
 
   var exitStatus = renderRootConcurrent(root, lanes);
@@ -22965,6 +22824,46 @@ function completeUnitOfWork(unitOfWork) {
         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,
@@ -22998,10 +22897,9 @@ function completeUnitOfWork(unitOfWork) {
       }
 
       if (returnFiber !== null) {
-        // Mark the parent fiber as incomplete
+        // Mark the parent fiber as incomplete and clear its effect list.
+        returnFiber.firstEffect = returnFiber.lastEffect = null;
         returnFiber.flags |= Incomplete;
-        returnFiber.subtreeFlags = NoFlags;
-        returnFiber.deletions = null;
       }
     }
 
@@ -23025,6 +22923,68 @@ function completeUnitOfWork(unitOfWork) {
   }
 }
 
+function resetChildLanes(completedWork) {
+  if ( // TODO: Move this check out of the hot path by moving `resetChildLanes`
+  // to switch statement in `completeWork`.
+  (completedWork.tag === LegacyHiddenComponent || completedWork.tag === OffscreenComponent) && completedWork.memoizedState !== null && !includesSomeLane(subtreeRenderLanes, OffscreenLane) && (completedWork.mode & ConcurrentMode) !== NoLanes) {
+    // The children of this component are hidden. Don't bubble their
+    // expiration times.
+    return;
+  }
+
+  var newChildLanes = NoLanes; // Bubble up the earliest expiration time.
+
+  if ( (completedWork.mode & ProfileMode) !== NoMode) {
+    // In profiling mode, resetChildExpirationTime is also used to reset
+    // profiler durations.
+    var actualDuration = completedWork.actualDuration;
+    var treeBaseDuration = completedWork.selfBaseDuration; // When a fiber is cloned, its actualDuration is reset to 0. This value will
+    // only be updated if work is done on the fiber (i.e. it doesn't bailout).
+    // When work is done, it should bubble to the parent's actualDuration. If
+    // the fiber has not been cloned though, (meaning no work was done), then
+    // this value will reflect the amount of time spent working on a previous
+    // render. In that case it should not bubble. We determine whether it was
+    // cloned by comparing the child pointer.
+
+    var shouldBubbleActualDurations = completedWork.alternate === null || completedWork.child !== completedWork.alternate.child;
+    var child = completedWork.child;
+
+    while (child !== null) {
+      newChildLanes = mergeLanes(newChildLanes, mergeLanes(child.lanes, child.childLanes));
+
+      if (shouldBubbleActualDurations) {
+        actualDuration += child.actualDuration;
+      }
+
+      treeBaseDuration += child.treeBaseDuration;
+      child = child.sibling;
+    }
+
+    var isTimedOutSuspense = completedWork.tag === SuspenseComponent && completedWork.memoizedState !== null;
+
+    if (isTimedOutSuspense) {
+      // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+      var primaryChildFragment = completedWork.child;
+
+      if (primaryChildFragment !== null) {
+        treeBaseDuration -= primaryChildFragment.treeBaseDuration;
+      }
+    }
+
+    completedWork.actualDuration = actualDuration;
+    completedWork.treeBaseDuration = treeBaseDuration;
+  } else {
+    var _child = completedWork.child;
+
+    while (_child !== null) {
+      newChildLanes = mergeLanes(newChildLanes, mergeLanes(_child.lanes, _child.childLanes));
+      _child = _child.sibling;
+    }
+  }
+
+  completedWork.childLanes = newChildLanes;
+}
+
 function commitRoot(root) {
   var renderPriorityLevel = getCurrentPriorityLevel();
   runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
@@ -23088,17 +23048,28 @@ function commitRootImpl(root, renderPriorityLevel) {
     workInProgressRoot = null;
     workInProgress = null;
     workInProgressRootRenderLanes = NoLanes;
-  } // Check if there are any effects in the whole tree.
-  // TODO: This is left over from the effect list implementation, where we had
-  // to check for the existence of `firstEffect` to satsify Flow. I think the
-  // only other reason this optimization exists is because it affects profiling.
-  // Reconsider whether this is necessary.
+  } // Get the list of effects.
 
 
-  var subtreeHasEffects = (finishedWork.subtreeFlags & (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !== NoFlags;
-  var rootHasEffect = (finishedWork.flags & (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !== NoFlags;
+  var firstEffect;
 
-  if (subtreeHasEffects || rootHasEffect) {
+  if (finishedWork.flags > PerformedWork) {
+    // A fiber's effect list consists only of its children, not itself. So if
+    // the root has an effect, we need to add it to the end of the list. The
+    // resulting list is the set that would belong to the root's parent, if it
+    // had one; that is, all the effects in the tree including the root.
+    if (finishedWork.lastEffect !== null) {
+      finishedWork.lastEffect.nextEffect = finishedWork;
+      firstEffect = finishedWork.firstEffect;
+    } else {
+      firstEffect = finishedWork;
+    }
+  } else {
+    // There is no effect on the root.
+    firstEffect = finishedWork.firstEffect;
+  }
+
+  if (firstEffect !== null) {
 
     var prevExecutionContext = executionContext;
     executionContext |= CommitContext;
@@ -23113,7 +23084,26 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     focusedInstanceHandle = prepareForCommit(root.containerInfo);
     shouldFireAfterActiveInstanceBlur = false;
-    commitBeforeMutationEffects(finishedWork); // We no longer need to track the active instance fiber
+    nextEffect = firstEffect;
+
+    do {
+      {
+        invokeGuardedCallback(null, commitBeforeMutationEffects, null);
+
+        if (hasCaughtError()) {
+          if (!(nextEffect !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var error = clearCaughtError();
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      }
+    } while (nextEffect !== null); // We no longer need to track the active instance fiber
+
 
     focusedInstanceHandle = null;
 
@@ -23124,7 +23114,26 @@ function commitRootImpl(root, renderPriorityLevel) {
     } // The next phase is the mutation phase, where we mutate the host tree.
 
 
-    commitMutationEffects(finishedWork, root, renderPriorityLevel);
+    nextEffect = firstEffect;
+
+    do {
+      {
+        invokeGuardedCallback(null, commitMutationEffects, null, root, renderPriorityLevel);
+
+        if (hasCaughtError()) {
+          if (!(nextEffect !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var _error = clearCaughtError();
+
+          captureCommitPhaseError(nextEffect, _error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      }
+    } while (nextEffect !== null);
 
     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
@@ -23132,21 +23141,32 @@ function commitRootImpl(root, renderPriorityLevel) {
     // work is current during componentDidMount/Update.
 
     root.current = finishedWork; // The next phase is the layout phase, where we call effects that read
+    // the host tree after it's been mutated. The idiomatic use case for this is
+    // layout, but class component lifecycles also fire here for legacy reasons.
 
-    commitLayoutEffects(finishedWork, root, lanes);
+    nextEffect = firstEffect;
 
+    do {
+      {
+        invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
 
-    if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags || (finishedWork.flags & PassiveMask) !== NoFlags) {
-      if (!rootDoesHavePassiveEffects) {
-        rootDoesHavePassiveEffects = true;
-        scheduleCallback(NormalPriority$1, function () {
-          flushPassiveEffects();
-          return null;
-        });
+        if (hasCaughtError()) {
+          if (!(nextEffect !== null)) {
+            {
+              throw Error( "Should be working on an effect." );
+            }
+          }
+
+          var _error2 = clearCaughtError();
+
+          captureCommitPhaseError(nextEffect, _error2);
+          nextEffect = nextEffect.nextEffect;
+        }
       }
-    } // Tell Scheduler to yield at the end of the frame, so the browser has an
-    // opportunity to paint.
+    } while (nextEffect !== null);
 
+    nextEffect = null; // Tell Scheduler to yield at the end of the frame, so the browser has an
+    // opportunity to paint.
 
     requestPaint();
 
@@ -23175,6 +23195,22 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
     pendingPassiveEffectsRenderPriority = renderPriorityLevel;
+  } else {
+    // We are done with the effect chain at this point so let's clear the
+    // nextEffect pointers to assist with GC. If we have passive effects, we'll
+    // clear this in flushPassiveEffects.
+    nextEffect = firstEffect;
+
+    while (nextEffect !== null) {
+      var nextNextEffect = nextEffect.nextEffect;
+      nextEffect.nextEffect = null;
+
+      if (nextEffect.flags & Deletion) {
+        detachFiberAfterEffects(nextEffect);
+      }
+
+      nextEffect = nextNextEffect;
+    }
   } // Read this again, since an effect might have updated it
 
 
@@ -23234,9 +23270,9 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   if (hasUncaughtError) {
     hasUncaughtError = false;
-    var error = firstUncaughtError;
+    var _error3 = firstUncaughtError;
     firstUncaughtError = null;
-    throw error;
+    throw _error3;
   }
 
   if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
@@ -23254,255 +23290,151 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
-function commitBeforeMutationEffects(firstChild) {
-  var fiber = firstChild;
-
-  while (fiber !== null) {
-    if (fiber.deletions !== null) {
-      commitBeforeMutationEffectsDeletions(fiber.deletions);
-    }
-
-    if (fiber.child !== null) {
-      var primarySubtreeFlags = fiber.subtreeFlags & BeforeMutationMask;
+function commitBeforeMutationEffects() {
+  while (nextEffect !== null) {
+    var current = nextEffect.alternate;
 
-      if (primarySubtreeFlags !== NoFlags) {
-        commitBeforeMutationEffects(fiber.child);
+    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
+      if ((nextEffect.flags & Deletion) !== NoFlags) {
+        if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
+          shouldFireAfterActiveInstanceBlur = true;
+        }
+      } 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() {
@@ -23518,87 +23450,41 @@ function flushPassiveEffects() {
 
   return false;
 }
+function enqueuePendingPassiveHookEffectMount(fiber, effect) {
+  pendingPassiveHookEffectsMount.push(effect, fiber);
 
-function flushPassiveMountEffects(root, firstChild) {
-  var fiber = firstChild;
-
-  while (fiber !== null) {
-    var primarySubtreeFlags = fiber.subtreeFlags & PassiveMask;
-
-    if (fiber.child !== null && primarySubtreeFlags !== NoFlags) {
-      flushPassiveMountEffects(root, fiber.child);
-    }
-
-    if ((fiber.flags & Passive) !== NoFlags) {
-      setCurrentFiber(fiber);
-      commitPassiveLifeCycles(root, fiber);
-      resetCurrentFiber();
-    }
-
-    fiber = fiber.sibling;
+  if (!rootDoesHavePassiveEffects) {
+    rootDoesHavePassiveEffects = true;
+    scheduleCallback(NormalPriority$1, function () {
+      flushPassiveEffects();
+      return null;
+    });
   }
 }
+function enqueuePendingPassiveHookEffectUnmount(fiber, effect) {
+  pendingPassiveHookEffectsUnmount.push(effect, fiber);
 
-function flushPassiveUnmountEffects(firstChild) {
-  var fiber = firstChild;
-
-  while (fiber !== null) {
-    var deletions = fiber.deletions;
-
-    if (deletions !== null) {
-      for (var i = 0; i < deletions.length; i++) {
-        var fiberToDelete = deletions[i];
-        flushPassiveUnmountEffectsInsideOfDeletedTree(fiberToDelete, fiber); // Now that passive effects have been processed, it's safe to detach lingering pointers.
-
-        detachFiberAfterEffects(fiberToDelete);
-      }
-    }
-
-    var child = fiber.child;
-
-    if (child !== null) {
-      // If any children have passive effects then traverse the subtree.
-      // Note that this requires checking subtreeFlags of the current Fiber,
-      // rather than the subtreeFlags/effectsTag of the first child,
-      // since that would not cover passive effects in siblings.
-      var passiveFlags = fiber.subtreeFlags & PassiveMask;
-
-      if (passiveFlags !== NoFlags) {
-        flushPassiveUnmountEffects(child);
-      }
-    }
-
-    var primaryFlags = fiber.flags & Passive;
+  {
+    fiber.flags |= PassiveUnmountPendingDev;
+    var alternate = fiber.alternate;
 
-    if (primaryFlags !== NoFlags) {
-      setCurrentFiber(fiber);
-      commitPassiveWork(fiber);
-      resetCurrentFiber();
+    if (alternate !== null) {
+      alternate.flags |= PassiveUnmountPendingDev;
     }
-
-    fiber = fiber.sibling;
   }
-}
-
-function flushPassiveUnmountEffectsInsideOfDeletedTree(fiberToDelete, nearestMountedAncestor) {
-  if ((fiberToDelete.subtreeFlags & PassiveStatic) !== NoFlags) {
-    // If any children have passive effects then traverse the subtree.
-    // Note that this requires checking subtreeFlags of the current Fiber,
-    // rather than the subtreeFlags/effectsTag of the first child,
-    // since that would not cover passive effects in siblings.
-    var child = fiberToDelete.child;
 
-    while (child !== null) {
-      flushPassiveUnmountEffectsInsideOfDeletedTree(child, nearestMountedAncestor);
-      child = child.sibling;
-    }
+  if (!rootDoesHavePassiveEffects) {
+    rootDoesHavePassiveEffects = true;
+    scheduleCallback(NormalPriority$1, function () {
+      flushPassiveEffects();
+      return null;
+    });
   }
+}
 
-  if ((fiberToDelete.flags & PassiveStatic) !== NoFlags) {
-    setCurrentFiber(fiberToDelete);
-    commitPassiveUnmount(fiberToDelete, nearestMountedAncestor);
-    resetCurrentFiber();
-  }
+function invokePassiveEffectCreate(effect) {
+  var create = effect.create;
+  effect.destroy = create();
 }
 
 function flushPassiveEffectsImpl() {
@@ -23629,9 +23515,97 @@ function flushPassiveEffectsImpl() {
   // e.g. a destroy function in one component may unintentionally override a ref
   // value set by a create function in another component.
   // Layout effects have the same constraint.
+  // First pass: Destroy stale passive effects.
+
+  var unmountEffects = pendingPassiveHookEffectsUnmount;
+  pendingPassiveHookEffectsUnmount = [];
+
+  for (var i = 0; i < unmountEffects.length; i += 2) {
+    var _effect = unmountEffects[i];
+    var fiber = unmountEffects[i + 1];
+    var destroy = _effect.destroy;
+    _effect.destroy = undefined;
+
+    {
+      fiber.flags &= ~PassiveUnmountPendingDev;
+      var alternate = fiber.alternate;
+
+      if (alternate !== null) {
+        alternate.flags &= ~PassiveUnmountPendingDev;
+      }
+    }
+
+    if (typeof destroy === 'function') {
+      {
+        setCurrentFiber(fiber);
+
+        {
+          invokeGuardedCallback(null, destroy, null);
+        }
+
+        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);
@@ -23684,7 +23658,7 @@ function captureCommitPhaseErrorOnRoot(rootFiber, sourceFiber, error) {
   }
 }
 
-function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
+function captureCommitPhaseError(sourceFiber, error) {
   if (sourceFiber.tag === HostRoot) {
     // Error was thrown at the root. There is no parent, so the root
     // itself should capture it.
@@ -23692,11 +23666,7 @@ function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
     return;
   }
 
-  var fiber = null;
-
-  {
-    fiber = nearestMountedAncestor;
-  }
+  var fiber = sourceFiber.return;
 
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
@@ -23717,6 +23687,20 @@ function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
           markRootUpdated(root, SyncLane, eventTime);
           ensureRootIsScheduled(root, eventTime);
           schedulePendingInteractions(root, SyncLane);
+        } else {
+          // This component has already been unmounted.
+          // We can't schedule any follow up work for the root because the fiber is already unmounted,
+          // but we can still call the log-only boundary so the error isn't swallowed.
+          //
+          // TODO This is only a temporary bandaid for the old reconciler fork.
+          // We can delete this special case once the new fork is merged.
+          if (typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {
+            try {
+              instance.componentDidCatch(error, errorInfo);
+            } catch (errorToIgnore) {// TODO Ignore this error? Rethrow it?
+              // This is kind of an edge case.
+            }
+          }
         }
 
         return;
@@ -23899,29 +23883,12 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
     if (tag !== HostRoot && tag !== ClassComponent && tag !== FunctionComponent && tag !== ForwardRef && tag !== MemoComponent && tag !== SimpleMemoComponent && tag !== Block) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;
-    }
-
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      var updateQueue = fiber.updateQueue;
-
-      if (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.
 
@@ -24276,21 +24243,8 @@ function shouldForceFlushFallbacksInDEV() {
 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.
@@ -24730,8 +24684,9 @@ function FiberNode(tag, pendingProps, key, mode) {
   this.mode = mode; // Effects
 
   this.flags = NoFlags;
-  this.subtreeFlags = NoFlags;
-  this.deletions = null;
+  this.nextEffect = null;
+  this.firstEffect = null;
+  this.lastEffect = null;
   this.lanes = NoLanes;
   this.childLanes = NoLanes;
   this.alternate = null;
@@ -24848,9 +24803,13 @@ function createWorkInProgress(current, pendingProps) {
     workInProgress.pendingProps = pendingProps; // Needed because Blocks store data on type.
 
     workInProgress.type = current.type; // We already have an alternate.
+    // Reset the effect tag.
+
+    workInProgress.flags = NoFlags; // The effect list is no longer valid.
 
-    workInProgress.subtreeFlags = NoFlags;
-    workInProgress.deletions = null;
+    workInProgress.nextEffect = null;
+    workInProgress.firstEffect = null;
+    workInProgress.lastEffect = null;
 
     {
       // We intentionally reset, rather than copy, actualDuration & actualStartTime.
@@ -24860,11 +24819,8 @@ function createWorkInProgress(current, pendingProps) {
       workInProgress.actualDuration = 0;
       workInProgress.actualStartTime = -1;
     }
-  } // Reset all effects except static ones.
-  // Static effects are not specific to a render.
-
+  }
 
-  workInProgress.flags = current.flags & StaticMask;
   workInProgress.childLanes = current.childLanes;
   workInProgress.lanes = current.lanes;
   workInProgress.child = current.child;
@@ -24920,7 +24876,11 @@ function resetWorkInProgress(workInProgress, renderLanes) {
   // avoid doing another reconciliation.
   // Reset the effect tag but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
-  workInProgress.flags &= Placement;
+  workInProgress.flags &= Placement; // The effect list is no longer valid.
+
+  workInProgress.nextEffect = null;
+  workInProgress.firstEffect = null;
+  workInProgress.lastEffect = null;
   var current = workInProgress.alternate;
 
   if (current === null) {
@@ -24928,7 +24888,6 @@ function resetWorkInProgress(workInProgress, renderLanes) {
     workInProgress.childLanes = NoLanes;
     workInProgress.lanes = renderLanes;
     workInProgress.child = null;
-    workInProgress.subtreeFlags = NoFlags;
     workInProgress.memoizedProps = null;
     workInProgress.memoizedState = null;
     workInProgress.updateQueue = null;
@@ -24946,8 +24905,6 @@ function resetWorkInProgress(workInProgress, renderLanes) {
     workInProgress.childLanes = current.childLanes;
     workInProgress.lanes = current.lanes;
     workInProgress.child = current.child;
-    workInProgress.subtreeFlags = current.subtreeFlags;
-    workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
     workInProgress.memoizedState = current.memoizedState;
     workInProgress.updateQueue = current.updateQueue; // Needed because Blocks store data on type.
@@ -25268,8 +25225,9 @@ function assignFiberPropertiesInDEV(target, source) {
   target.dependencies = source.dependencies;
   target.mode = source.mode;
   target.flags = source.flags;
-  target.subtreeFlags = source.subtreeFlags;
-  target.deletions = source.deletions;
+  target.nextEffect = source.nextEffect;
+  target.firstEffect = source.firstEffect;
+  target.lastEffect = source.lastEffect;
   target.lanes = source.lanes;
   target.childLanes = source.childLanes;
   target.alternate = source.alternate;