react-dom 17.0.0-rc.1 → 17.0.1

package/cjs/react-dom.development.js

@@ -1,4 +1,4 @@
-/** @license React v0.0.0-2d131d782
+/** @license React v17.0.1
  * react-dom.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -116,6 +116,7 @@ var allNativeEvents = new Set();
  * Mapping from registration name to event name
  */
 
+
 var registrationNameDependencies = {};
 /**
  * Mapping from lowercase registration names to the properly cased version,
@@ -148,10 +149,8 @@ function registerDirectEvent(registrationName, dependencies) {
     }
   }
 
-  {
-    for (var i = 0; i < dependencies.length; i++) {
-      allNativeEvents.add(dependencies[i]);
-    }
+  for (var i = 0; i < dependencies.length; i++) {
+    allNativeEvents.add(dependencies[i]);
   }
 }
 
@@ -1183,7 +1182,7 @@ function getComponentName(type) {
       return 'Portal';
 
     case REACT_PROFILER_TYPE:
-      return "Profiler";
+      return 'Profiler';
 
     case REACT_STRICT_MODE_TYPE:
       return 'StrictMode';
@@ -4130,8 +4129,8 @@ function set(key, value) {
 }
 
 // Don't change these two values. They're used by React Dev Tools.
-var NoEffect =
-/*                     */
+var NoFlags =
+/*                      */
 0;
 var PerformedWork =
 /*                */
@@ -4209,7 +4208,7 @@ function getNearestMountedFiber(fiber) {
     do {
       node = nextNode;
 
-      if ((node.effectTag & (Placement | Hydrating)) !== NoEffect) {
+      if ((node.flags & (Placement | Hydrating)) !== NoFlags) {
         // This is an insertion or in-progress hydration. The nearest possible
         // mounted fiber is the parent but we need to continue to figure out
         // if that one is still mounted.
@@ -5489,7 +5488,21 @@ function computeExpirationTime(lane, currentTime) {
 
   if (priority >= InputContinuousLanePriority) {
     // User interactions should expire slightly more quickly.
-    return currentTime + 1000;
+    //
+    // NOTE: This is set to the corresponding constant as in Scheduler.js. When
+    // we made it larger, a product metric in www regressed, suggesting there's
+    // a user interaction that's being starved by a series of synchronous
+    // updates. If that theory is correct, the proper solution is to fix the
+    // starvation. However, this scenario supports the idea that expiration
+    // times are an important safeguard when starvation does happen.
+    //
+    // Also note that, in the case of user input specifically, this will soon no
+    // longer be an issue because we plan to make user input synchronous by
+    // default (until you enter `startTransition`, of course.)
+    //
+    // If weren't planning to make these updates synchronous soon anyway, I
+    // would probably make this number a configurable parameter.
+    return currentTime + 250;
   } else if (priority >= TransitionPriority) {
     return currentTime + 5000;
   } else {
@@ -5724,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
@@ -5838,8 +5859,8 @@ function setEnabled(enabled) {
 function isEnabled() {
   return _enabled;
 }
-function createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags, priority) {
-  var eventPriority = priority === undefined ? getEventPriorityForPluginSystem(domEventName) : priority;
+function createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags) {
+  var eventPriority = getEventPriorityForPluginSystem(domEventName);
   var listenerWrapper;
 
   switch (eventPriority) {
@@ -6007,9 +6028,6 @@ function addEventBubbleListenerWithPassiveFlag(target, eventType, listener, pass
   });
   return listener;
 }
-function removeEventListener(target, eventType, listener, capture) {
-  target.removeEventListener(eventType, listener, capture);
-}
 
 /**
  * These variables store information about text content of a target node,
@@ -6113,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;
+      }
 
-  for (var _propName in Interface) {
-    if (!Interface.hasOwnProperty(_propName)) {
-      continue;
+      var normalize = Interface[_propName];
+
+      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;
@@ -6303,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/
@@ -6311,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/
@@ -6319,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
@@ -6330,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/
@@ -6340,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
@@ -6348,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
@@ -6355,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
@@ -6539,6 +6577,8 @@ var KeyboardEventInterface = _assign({}, UIEventInterface, {
     return 0;
   }
 });
+
+var SyntheticKeyboardEvent = createSyntheticEvent(KeyboardEventInterface);
 /**
  * @interface PointerEvent
  * @see http://www.w3.org/TR/pointerevents/
@@ -6556,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/
@@ -6571,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-
@@ -6582,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/
@@ -6605,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;
@@ -6769,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;
+      }
     }
   }
 }
@@ -6922,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
@@ -7022,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
@@ -7335,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';
@@ -7349,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
@@ -7358,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;
@@ -7891,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;
+    }
   }
 }
 /**
@@ -7975,7 +8051,7 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     return;
   }
 
-  var EventInterface;
+  var SyntheticEventCtor = SyntheticEvent;
   var reactEventType = domEventName;
 
   switch (domEventName) {
@@ -7991,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':
@@ -8029,7 +8105,7 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     case 'mouseout':
     case 'mouseover':
     case 'contextmenu':
-      EventInterface = MouseEventInterface;
+      SyntheticEventCtor = SyntheticMouseEvent;
       break;
 
     case 'drag':
@@ -8040,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':
@@ -8082,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;
 
   {
@@ -8094,16 +8169,23 @@ function extractEvents$4(dispatchQueue, domEventName, targetInst, nativeEvent, n
     // In the past, React has always bubbled them, but this can be surprising.
     // We're going to try aligning closer to the browser behavior by not bubbling
     // them in React either. We'll start by not bubbling onScroll, and then expand.
-    var accumulateTargetOnly = false;
+    var accumulateTargetOnly = !inCapturePhase && // TODO: ideally, we'd eventually add all events from
+    // nonDelegatedEvents list in DOMPluginEventSystem.
+    // Then we can remove this special list.
+    // This is a breaking change that can wait until React 18.
+    domEventName === 'scroll';
 
-    {
-      accumulateTargetOnly = !inCapturePhase && // TODO: ideally, we'd eventually add all events from
-      // nonDelegatedEvents list in DOMPluginEventSystem.
-      // Then we can remove this special list.
-      domEventName === 'scroll';
-    }
+    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);
 
-    accumulateSinglePhaseListeners(targetInst, dispatchQueue, event, inCapturePhase, accumulateTargetOnly);
+      dispatchQueue.push({
+        event: _event,
+        listeners: _listeners
+      });
+    }
   }
 }
 
@@ -8217,22 +8299,14 @@ function dispatchEventsForPlugins(domEventName, eventSystemFlags, nativeEvent, t
   processDispatchQueue(dispatchQueue, eventSystemFlags);
 }
 
-function shouldUpgradeListener(listenerEntry, passive) {
-  return listenerEntry !== undefined && listenerEntry.passive === true && !passive;
-}
-
 function listenToNonDelegatedEvent(domEventName, targetElement) {
   var isCapturePhaseListener = false;
-  var listenerMap = getEventListenerMap(targetElement);
-  var listenerMapKey = getListenerMapKey(domEventName, isCapturePhaseListener);
-  var listenerEntry = listenerMap.get(listenerMapKey);
-
-  if (listenerEntry === undefined) {
-    var listener = addTrappedEventListener(targetElement, domEventName, IS_NON_DELEGATED, isCapturePhaseListener);
-    listenerMap.set(listenerMapKey, {
-      passive: false,
-      listener: listener
-    });
+  var listenerSet = getEventListenerSet(targetElement);
+  var listenerSetKey = getListenerSetKey(domEventName, isCapturePhaseListener);
+
+  if (!listenerSet.has(listenerSetKey)) {
+    addTrappedEventListener(targetElement, domEventName, IS_NON_DELEGATED, isCapturePhaseListener);
+    listenerSet.add(listenerSetKey);
   }
 }
 var listeningMarker = '_reactListening' + Math.random().toString(36).slice(2);
@@ -8256,26 +8330,14 @@ function listenToAllSupportedEvents(rootContainerElement) {
     });
   }
 }
-function listenToNativeEvent(domEventName, isCapturePhaseListener, rootContainerElement, targetElement, isPassiveListener, listenerPriority) {
-  var eventSystemFlags = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+function listenToNativeEvent(domEventName, isCapturePhaseListener, rootContainerElement, targetElement) {
+  var eventSystemFlags = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   var target = rootContainerElement; // selectionchange needs to be attached to the document
   // otherwise it won't capture incoming events that are only
   // triggered on the document directly.
 
   if (domEventName === 'selectionchange' && rootContainerElement.nodeType !== DOCUMENT_NODE) {
     target = rootContainerElement.ownerDocument;
-  }
-
-  if ( isPassiveListener === undefined) {
-    // Browsers introduced an intervention, making these events
-    // passive by default on document. React doesn't bind them
-    // to document anymore, but changing this now would undo
-    // the performance wins from the change. So we emulate
-    // the existing behavior manually on the roots now.
-    // https://github.com/facebook/react/issues/19651
-    if (domEventName === 'touchstart' || domEventName === 'touchmove' || domEventName === 'wheel') {
-      isPassiveListener = true;
-    }
   } // If the event can be delegated (or is capture phase), we can
   // register it to the root container. Otherwise, we should
   // register the event to the target element and mark it as
@@ -8300,42 +8362,42 @@ function listenToNativeEvent(domEventName, isCapturePhaseListener, rootContainer
     target = targetElement;
   }
 
-  var listenerMap = getEventListenerMap(target);
-  var listenerMapKey = getListenerMapKey(domEventName, isCapturePhaseListener);
-  var listenerEntry = listenerMap.get(listenerMapKey);
-  var shouldUpgrade = shouldUpgradeListener(listenerEntry, isPassiveListener); // If the listener entry is empty or we should upgrade, then
+  var listenerSet = getEventListenerSet(target);
+  var listenerSetKey = getListenerSetKey(domEventName, isCapturePhaseListener); // If the listener entry is empty or we should upgrade, then
   // we need to trap an event listener onto the target.
 
-  if (listenerEntry === undefined || shouldUpgrade) {
-    // If we should upgrade, then we need to remove the existing trapped
-    // event listener for the target container.
-    if (shouldUpgrade) {
-      removeEventListener(target, domEventName, listenerEntry.listener, isCapturePhaseListener);
-    }
-
+  if (!listenerSet.has(listenerSetKey)) {
     if (isCapturePhaseListener) {
       eventSystemFlags |= IS_CAPTURE_PHASE;
     }
 
-    var listener = addTrappedEventListener(target, domEventName, eventSystemFlags, isCapturePhaseListener, false, isPassiveListener, listenerPriority);
-    listenerMap.set(listenerMapKey, {
-      passive: isPassiveListener,
-      listener: listener
-    });
+    addTrappedEventListener(target, domEventName, eventSystemFlags, isCapturePhaseListener);
+    listenerSet.add(listenerSetKey);
   }
 }
 
-function addTrappedEventListener(targetContainer, domEventName, eventSystemFlags, isCapturePhaseListener, isDeferredListenerForLegacyFBSupport, isPassiveListener, listenerPriority) {
-  var listener = createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags, listenerPriority); // If passive option is not supported, then the event will be
+function addTrappedEventListener(targetContainer, domEventName, eventSystemFlags, isCapturePhaseListener, isDeferredListenerForLegacyFBSupport) {
+  var listener = createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags); // If passive option is not supported, then the event will be
   // active and not passive.
 
-  if (isPassiveListener === true && !passiveBrowserEventsSupported) {
-    isPassiveListener = false;
+  var isPassiveListener = undefined;
+
+  if (passiveBrowserEventsSupported) {
+    // Browsers introduced an intervention, making these events
+    // passive by default on document. React doesn't bind them
+    // to document anymore, but changing this now would undo
+    // the performance wins from the change. So we emulate
+    // the existing behavior manually on the roots now.
+    // https://github.com/facebook/react/issues/19651
+    if (domEventName === 'touchstart' || domEventName === 'touchmove' || domEventName === 'wheel') {
+      isPassiveListener = true;
+    }
   }
 
   targetContainer =  targetContainer;
   var unsubscribeListener; // When legacyFBSupport is enabled, it's for when we
 
+
   if (isCapturePhaseListener) {
     if (isPassiveListener !== undefined) {
       unsubscribeListener = addEventCaptureListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener);
@@ -8349,8 +8411,6 @@ function addTrappedEventListener(targetContainer, domEventName, eventSystemFlags
       unsubscribeListener = addEventBubbleListener(targetContainer, domEventName, listener);
     }
   }
-
-  return unsubscribeListener;
 }
 
 function isMatchingRootContainer(grandContainer, targetContainer) {
@@ -8457,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,
@@ -8477,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 (reactEventName !== null) {
+        var listener = getListener(instance, reactEventName);
 
-      if (bubbled !== null && !inCapturePhase) {
-        var bubbleListener = getListener(instance, bubbled);
-
-        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
@@ -8507,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
@@ -8518,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.
 
@@ -8530,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) {
@@ -8665,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
@@ -8685,7 +8723,7 @@ function accumulateEnterLeaveTwoPhaseListeners(dispatchQueue, leaveEvent, enterE
     accumulateEnterLeaveListenersForEvent(dispatchQueue, enterEvent, to, common, true);
   }
 }
-function getListenerMapKey(domEventName, capture) {
+function getListenerSetKey(domEventName, capture) {
   return domEventName + "__" + (capture ? 'capture' : 'bubble');
 }
 
@@ -8711,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
@@ -9526,6 +9559,10 @@ function diffHydratedProperties(domElement, tag, rawProps, parentNamespace, root
         if ( typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
         }
+
+        if (propKey === 'onScroll') {
+          listenToNonDelegatedEvent('scroll', domElement);
+        }
       }
     } else if ( // Convince Flow we've calculated it (it's DEV-only in this method.)
     typeof isCustomComponentTag === 'boolean') {
@@ -10659,14 +10696,14 @@ function getFiberCurrentPropsFromNode(node) {
 function updateFiberProps(node, props) {
   node[internalPropsKey] = props;
 }
-function getEventListenerMap(node) {
-  var elementListenerMap = node[internalEventHandlersKey];
+function getEventListenerSet(node) {
+  var elementListenerSet = node[internalEventHandlersKey];
 
-  if (elementListenerMap === undefined) {
-    elementListenerMap = node[internalEventHandlersKey] = new Map();
+  if (elementListenerSet === undefined) {
+    elementListenerSet = node[internalEventHandlersKey] = new Set();
   }
 
-  return elementListenerMap;
+  return elementListenerSet;
 }
 
 var loggedTypeFailures = {};
@@ -11094,7 +11131,7 @@ function onScheduleRoot(root, children) {
 function onCommitRoot(root, priorityLevel) {
   if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
     try {
-      var didError = (root.current.effectTag & DidCapture) === DidCapture;
+      var didError = (root.current.flags & DidCapture) === DidCapture;
 
       if (enableProfilerTimer) {
         injectedHook.onCommitFiberRoot(rendererID, root, priorityLevel, didError);
@@ -11309,7 +11346,7 @@ function flushSyncCallbackQueueImpl() {
 }
 
 // TODO: this is special because it gets imported during build.
-var ReactVersion = '17.0.0-alpha.0-2d131d782';
+var ReactVersion = '17.0.1';
 
 var NoMode = 0;
 var StrictMode = 1; // TODO: Remove BlockingMode and ConcurrentMode by reading from the root
@@ -11320,6 +11357,12 @@ var ConcurrentMode = 4;
 var ProfileMode = 8;
 var DebugTracingMode = 16;
 
+var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
+var NoTransition = 0;
+function requestCurrentTransition() {
+  return ReactCurrentBatchConfig.transition;
+}
+
 var ReactStrictModeWarnings = {
   recordUnsafeLifecycleWarnings: function (fiber, instance) {},
   flushPendingUnsafeLifecycleWarnings: function () {},
@@ -12041,7 +12084,7 @@ function getStateFromUpdate(workInProgress, queue, update, prevState, nextProps,
 
     case CaptureUpdate:
       {
-        workInProgress.effectTag = workInProgress.effectTag & ~ShouldCapture | DidCapture;
+        workInProgress.flags = workInProgress.flags & ~ShouldCapture | DidCapture;
       }
     // Intentional fallthrough
 
@@ -12208,7 +12251,7 @@ function processUpdateQueue(workInProgress, props, instance, renderLanes) {
         var callback = update.callback;
 
         if (callback !== null) {
-          workInProgress.effectTag |= Callback;
+          workInProgress.flags |= Callback;
           var effects = queue.effects;
 
           if (effects === null) {
@@ -12299,11 +12342,6 @@ function commitUpdateQueue(finishedWork, finishedQueue, instance) {
   }
 }
 
-var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
-function requestCurrentSuspenseConfig() {
-  return ReactCurrentBatchConfig.suspense;
-}
-
 var fakeInternalInstance = {};
 var isArray = Array.isArray; // React.Component uses a shared frozen object by default.
 // We'll use it to determine whether we need to initialize legacy refs.
@@ -12413,8 +12451,7 @@ var classComponentUpdater = {
   enqueueSetState: function (inst, payload, callback) {
     var fiber = get(inst);
     var eventTime = requestEventTime();
-    var suspenseConfig = requestCurrentSuspenseConfig();
-    var lane = requestUpdateLane(fiber, suspenseConfig);
+    var lane = requestUpdateLane(fiber);
     var update = createUpdate(eventTime, lane);
     update.payload = payload;
 
@@ -12432,8 +12469,7 @@ var classComponentUpdater = {
   enqueueReplaceState: function (inst, payload, callback) {
     var fiber = get(inst);
     var eventTime = requestEventTime();
-    var suspenseConfig = requestCurrentSuspenseConfig();
-    var lane = requestUpdateLane(fiber, suspenseConfig);
+    var lane = requestUpdateLane(fiber);
     var update = createUpdate(eventTime, lane);
     update.tag = ReplaceState;
     update.payload = payload;
@@ -12452,8 +12488,7 @@ var classComponentUpdater = {
   enqueueForceUpdate: function (inst, callback) {
     var fiber = get(inst);
     var eventTime = requestEventTime();
-    var suspenseConfig = requestCurrentSuspenseConfig();
-    var lane = requestUpdateLane(fiber, suspenseConfig);
+    var lane = requestUpdateLane(fiber);
     var update = createUpdate(eventTime, lane);
     update.tag = ForceUpdate;
 
@@ -12848,7 +12883,7 @@ function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    workInProgress.effectTag |= Update;
+    workInProgress.flags |= Update;
   }
 }
 
@@ -12890,7 +12925,7 @@ function resumeMountClassInstance(workInProgress, ctor, newProps, renderLanes) {
     // If an update was already in progress, we should schedule an Update
     // effect even though we're bailing out, so that cWU/cDU are called.
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.effectTag |= Update;
+      workInProgress.flags |= Update;
     }
 
     return false;
@@ -12917,13 +12952,13 @@ function resumeMountClassInstance(workInProgress, ctor, newProps, renderLanes) {
     }
 
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.effectTag |= Update;
+      workInProgress.flags |= Update;
     }
   } else {
     // If an update was already in progress, we should schedule an Update
     // effect even though we're bailing out, so that cWU/cDU are called.
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.effectTag |= Update;
+      workInProgress.flags |= Update;
     } // If shouldComponentUpdate returned false, we should still update the
     // memoized state to indicate that this work can be reused.
 
@@ -12983,13 +13018,13 @@ function updateClassInstance(current, workInProgress, ctor, newProps, renderLane
     // effect even though we're bailing out, so that cWU/cDU are called.
     if (typeof instance.componentDidUpdate === 'function') {
       if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-        workInProgress.effectTag |= Update;
+        workInProgress.flags |= Update;
       }
     }
 
     if (typeof instance.getSnapshotBeforeUpdate === 'function') {
       if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-        workInProgress.effectTag |= Snapshot;
+        workInProgress.flags |= Snapshot;
       }
     }
 
@@ -13017,24 +13052,24 @@ function updateClassInstance(current, workInProgress, ctor, newProps, renderLane
     }
 
     if (typeof instance.componentDidUpdate === 'function') {
-      workInProgress.effectTag |= Update;
+      workInProgress.flags |= Update;
     }
 
     if (typeof instance.getSnapshotBeforeUpdate === 'function') {
-      workInProgress.effectTag |= Snapshot;
+      workInProgress.flags |= Snapshot;
     }
   } else {
     // If an update was already in progress, we should schedule an Update
     // effect even though we're bailing out, so that cWU/cDU are called.
     if (typeof instance.componentDidUpdate === 'function') {
       if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-        workInProgress.effectTag |= Update;
+        workInProgress.flags |= Update;
       }
     }
 
     if (typeof instance.getSnapshotBeforeUpdate === 'function') {
       if (unresolvedOldProps !== current.memoizedProps || oldState !== current.memoizedState) {
-        workInProgress.effectTag |= Snapshot;
+        workInProgress.flags |= Snapshot;
       }
     } // If shouldComponentUpdate returned false, we should still update the
     // memoized props/state to indicate that this work can be reused.
@@ -13239,7 +13274,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     childToDelete.nextEffect = null;
-    childToDelete.effectTag = Deletion;
+    childToDelete.flags = Deletion;
   }
 
   function deleteRemainingChildren(returnFiber, currentFirstChild) {
@@ -13304,7 +13339,7 @@ function ChildReconciler(shouldTrackSideEffects) {
 
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.effectTag = Placement;
+        newFiber.flags = Placement;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
@@ -13312,7 +13347,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       }
     } else {
       // This is an insertion.
-      newFiber.effectTag = Placement;
+      newFiber.flags = Placement;
       return lastPlacedIndex;
     }
   }
@@ -13321,7 +13356,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // This is simpler for the single child case. We only need to do a
     // placement for inserting new children.
     if (shouldTrackSideEffects && newFiber.alternate === null) {
-      newFiber.effectTag = Placement;
+      newFiber.flags = Placement;
     }
 
     return newFiber;
@@ -14295,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.
@@ -14353,7 +14381,7 @@ function findFirstSuspended(row) {
     } else if (node.tag === SuspenseListComponent && // revealOrder undefined can't be trusted because it don't
     // keep track of whether it suspended or not.
     node.memoizedProps.revealOrder !== undefined) {
-      var didSuspend = (node.effectTag & DidCapture) !== NoEffect;
+      var didSuspend = (node.flags & DidCapture) !== NoFlags;
 
       if (didSuspend) {
         return node;
@@ -14383,7 +14411,7 @@ function findFirstSuspended(row) {
   return null;
 }
 
-var NoEffect$1 =
+var NoFlags$1 =
 /*  */
 0; // Represents whether effect should fire.
 
@@ -14429,7 +14457,7 @@ function deleteHydratableInstance(returnFiber, instance) {
   var childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  childToDelete.effectTag = Deletion; // This might seem like it belongs on progressedFirstDeletion. However,
+  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
@@ -14444,7 +14472,7 @@ function deleteHydratableInstance(returnFiber, instance) {
 }
 
 function insertNonHydratedInstance(returnFiber, fiber) {
-  fiber.effectTag = fiber.effectTag & ~Hydrating | Placement;
+  fiber.flags = fiber.flags & ~Hydrating | Placement;
 
   {
     switch (returnFiber.tag) {
@@ -15027,7 +15055,7 @@ function renderWithHooks(current, workInProgress, Component, props, secondArg, n
 }
 function bailoutHooks(current, workInProgress, lanes) {
   workInProgress.updateQueue = current.updateQueue;
-  workInProgress.effectTag &= ~(Passive | Update);
+  workInProgress.flags &= ~(Passive | Update);
   current.lanes = removeLanes(current.lanes, lanes);
 }
 function resetHooksAfterThrow() {
@@ -15498,8 +15526,7 @@ function useMutableSource(hook, source, getSnapshot, subscribe) {
 
       if (!objectIs(snapshot, maybeNewSnapshot)) {
         setSnapshot(maybeNewSnapshot);
-        var suspenseConfig = requestCurrentSuspenseConfig();
-        var lane = requestUpdateLane(fiber, suspenseConfig);
+        var lane = requestUpdateLane(fiber);
         markRootMutableRead(root, lane);
       } // If the source mutated between render and now,
       // there may be state updates already scheduled from the old source.
@@ -15518,8 +15545,7 @@ function useMutableSource(hook, source, getSnapshot, subscribe) {
       try {
         latestSetSnapshot(latestGetSnapshot(source._source)); // Record a pending mutable source update with the same expiration time.
 
-        var suspenseConfig = requestCurrentSuspenseConfig();
-        var lane = requestUpdateLane(fiber, suspenseConfig);
+        var lane = requestUpdateLane(fiber);
         markRootMutableRead(root, lane);
       } catch (error) {
         // A selector might throw after a source mutation.
@@ -15669,14 +15695,14 @@ function updateRef(initialValue) {
   return hook.memoizedState;
 }
 
-function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
+function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
   var hook = mountWorkInProgressHook();
   var nextDeps = deps === undefined ? null : deps;
-  currentlyRenderingFiber$1.effectTag |= fiberEffectTag;
-  hook.memoizedState = pushEffect(HasEffect | hookEffectTag, create, undefined, nextDeps);
+  currentlyRenderingFiber$1.flags |= fiberFlags;
+  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, undefined, nextDeps);
 }
 
-function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
+function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
   var hook = updateWorkInProgressHook();
   var nextDeps = deps === undefined ? null : deps;
   var destroy = undefined;
@@ -15689,14 +15715,14 @@ function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
       var prevDeps = prevEffect.deps;
 
       if (areHookInputsEqual(nextDeps, prevDeps)) {
-        pushEffect(hookEffectTag, create, destroy, nextDeps);
+        pushEffect(hookFlags, create, destroy, nextDeps);
         return;
       }
     }
   }
 
-  currentlyRenderingFiber$1.effectTag |= fiberEffectTag;
-  hook.memoizedState = pushEffect(HasEffect | hookEffectTag, create, destroy, nextDeps);
+  currentlyRenderingFiber$1.flags |= fiberFlags;
+  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
 }
 
 function mountEffect(create, deps) {
@@ -15843,61 +15869,61 @@ function updateMemo(nextCreate, deps) {
   return nextValue;
 }
 
-function mountDeferredValue(value, config) {
+function mountDeferredValue(value) {
   var _mountState = mountState(value),
       prevValue = _mountState[0],
       setValue = _mountState[1];
 
   mountEffect(function () {
-    var previousConfig = ReactCurrentBatchConfig$1.suspense;
-    ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
+    var prevTransition = ReactCurrentBatchConfig$1.transition;
+    ReactCurrentBatchConfig$1.transition = 1;
 
     try {
       setValue(value);
     } finally {
-      ReactCurrentBatchConfig$1.suspense = previousConfig;
+      ReactCurrentBatchConfig$1.transition = prevTransition;
     }
-  }, [value, config]);
+  }, [value]);
   return prevValue;
 }
 
-function updateDeferredValue(value, config) {
+function updateDeferredValue(value) {
   var _updateState = updateState(),
       prevValue = _updateState[0],
       setValue = _updateState[1];
 
   updateEffect(function () {
-    var previousConfig = ReactCurrentBatchConfig$1.suspense;
-    ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
+    var prevTransition = ReactCurrentBatchConfig$1.transition;
+    ReactCurrentBatchConfig$1.transition = 1;
 
     try {
       setValue(value);
     } finally {
-      ReactCurrentBatchConfig$1.suspense = previousConfig;
+      ReactCurrentBatchConfig$1.transition = prevTransition;
     }
-  }, [value, config]);
+  }, [value]);
   return prevValue;
 }
 
-function rerenderDeferredValue(value, config) {
+function rerenderDeferredValue(value) {
   var _rerenderState = rerenderState(),
       prevValue = _rerenderState[0],
       setValue = _rerenderState[1];
 
   updateEffect(function () {
-    var previousConfig = ReactCurrentBatchConfig$1.suspense;
-    ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
+    var prevTransition = ReactCurrentBatchConfig$1.transition;
+    ReactCurrentBatchConfig$1.transition = 1;
 
     try {
       setValue(value);
     } finally {
-      ReactCurrentBatchConfig$1.suspense = previousConfig;
+      ReactCurrentBatchConfig$1.transition = prevTransition;
     }
-  }, [value, config]);
+  }, [value]);
   return prevValue;
 }
 
-function startTransition(setPending, config, callback) {
+function startTransition(setPending, callback) {
   var priorityLevel = getCurrentPriorityLevel();
 
   {
@@ -15905,43 +15931,46 @@ function startTransition(setPending, config, callback) {
       setPending(true);
     });
     runWithPriority$1(priorityLevel > NormalPriority$1 ? NormalPriority$1 : priorityLevel, function () {
-      var previousConfig = ReactCurrentBatchConfig$1.suspense;
-      ReactCurrentBatchConfig$1.suspense = config === undefined ? null : config;
+      var prevTransition = ReactCurrentBatchConfig$1.transition;
+      ReactCurrentBatchConfig$1.transition = 1;
 
       try {
         setPending(false);
         callback();
       } finally {
-        ReactCurrentBatchConfig$1.suspense = previousConfig;
+        ReactCurrentBatchConfig$1.transition = prevTransition;
       }
     });
   }
 }
 
-function mountTransition(config) {
+function mountTransition() {
   var _mountState2 = mountState(false),
       isPending = _mountState2[0],
-      setPending = _mountState2[1];
+      setPending = _mountState2[1]; // The `start` method can be stored on a ref, since `setPending`
+  // never changes.
 
-  var start = mountCallback(startTransition.bind(null, setPending, config), [setPending, config]);
+
+  var start = startTransition.bind(null, setPending);
+  mountRef(start);
   return [start, isPending];
 }
 
-function updateTransition(config) {
+function updateTransition() {
   var _updateState2 = updateState(),
-      isPending = _updateState2[0],
-      setPending = _updateState2[1];
+      isPending = _updateState2[0];
 
-  var start = updateCallback(startTransition.bind(null, setPending, config), [setPending, config]);
+  var startRef = updateRef();
+  var start = startRef.current;
   return [start, isPending];
 }
 
-function rerenderTransition(config) {
+function rerenderTransition() {
   var _rerenderState2 = rerenderState(),
-      isPending = _rerenderState2[0],
-      setPending = _rerenderState2[1];
+      isPending = _rerenderState2[0];
 
-  var start = updateCallback(startTransition.bind(null, setPending, config), [setPending, config]);
+  var startRef = updateRef();
+  var start = startRef.current;
   return [start, isPending];
 }
 
@@ -15998,7 +16027,7 @@ function mountOpaqueIdentifier() {
     var setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber$1.mode & BlockingMode) === NoMode) {
-      currentlyRenderingFiber$1.effectTag |= Update | Passive;
+      currentlyRenderingFiber$1.flags |= Update | Passive;
       pushEffect(HasEffect | Passive$1, function () {
         setId(makeId());
       }, undefined, null);
@@ -16031,8 +16060,7 @@ function dispatchAction(fiber, queue, action) {
   }
 
   var eventTime = requestEventTime();
-  var suspenseConfig = requestCurrentSuspenseConfig();
-  var lane = requestUpdateLane(fiber, suspenseConfig);
+  var lane = requestUpdateLane(fiber);
   var update = {
     lane: lane,
     action: action,
@@ -16227,15 +16255,15 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       mountHookTypesDev();
       return mountDebugValue();
     },
-    useDeferredValue: function (value, config) {
+    useDeferredValue: function (value) {
       currentHookNameInDev = 'useDeferredValue';
       mountHookTypesDev();
-      return mountDeferredValue(value, config);
+      return mountDeferredValue(value);
     },
-    useTransition: function (config) {
+    useTransition: function () {
       currentHookNameInDev = 'useTransition';
       mountHookTypesDev();
-      return mountTransition(config);
+      return mountTransition();
     },
     useMutableSource: function (source, getSnapshot, subscribe) {
       currentHookNameInDev = 'useMutableSource';
@@ -16324,15 +16352,15 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return mountDebugValue();
     },
-    useDeferredValue: function (value, config) {
+    useDeferredValue: function (value) {
       currentHookNameInDev = 'useDeferredValue';
       updateHookTypesDev();
-      return mountDeferredValue(value, config);
+      return mountDeferredValue(value);
     },
-    useTransition: function (config) {
+    useTransition: function () {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
-      return mountTransition(config);
+      return mountTransition();
     },
     useMutableSource: function (source, getSnapshot, subscribe) {
       currentHookNameInDev = 'useMutableSource';
@@ -16421,15 +16449,15 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateDebugValue();
     },
-    useDeferredValue: function (value, config) {
+    useDeferredValue: function (value) {
       currentHookNameInDev = 'useDeferredValue';
       updateHookTypesDev();
-      return updateDeferredValue(value, config);
+      return updateDeferredValue(value);
     },
-    useTransition: function (config) {
+    useTransition: function () {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
-      return updateTransition(config);
+      return updateTransition();
     },
     useMutableSource: function (source, getSnapshot, subscribe) {
       currentHookNameInDev = 'useMutableSource';
@@ -16518,15 +16546,15 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateDebugValue();
     },
-    useDeferredValue: function (value, config) {
+    useDeferredValue: function (value) {
       currentHookNameInDev = 'useDeferredValue';
       updateHookTypesDev();
-      return rerenderDeferredValue(value, config);
+      return rerenderDeferredValue(value);
     },
-    useTransition: function (config) {
+    useTransition: function () {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
-      return rerenderTransition(config);
+      return rerenderTransition();
     },
     useMutableSource: function (source, getSnapshot, subscribe) {
       currentHookNameInDev = 'useMutableSource';
@@ -16626,17 +16654,17 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       mountHookTypesDev();
       return mountDebugValue();
     },
-    useDeferredValue: function (value, config) {
+    useDeferredValue: function (value) {
       currentHookNameInDev = 'useDeferredValue';
       warnInvalidHookAccess();
       mountHookTypesDev();
-      return mountDeferredValue(value, config);
+      return mountDeferredValue(value);
     },
-    useTransition: function (config) {
+    useTransition: function () {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       mountHookTypesDev();
-      return mountTransition(config);
+      return mountTransition();
     },
     useMutableSource: function (source, getSnapshot, subscribe) {
       currentHookNameInDev = 'useMutableSource';
@@ -16738,17 +16766,17 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateDebugValue();
     },
-    useDeferredValue: function (value, config) {
+    useDeferredValue: function (value) {
       currentHookNameInDev = 'useDeferredValue';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return updateDeferredValue(value, config);
+      return updateDeferredValue(value);
     },
-    useTransition: function (config) {
+    useTransition: function () {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return updateTransition(config);
+      return updateTransition();
     },
     useMutableSource: function (source, getSnapshot, subscribe) {
       currentHookNameInDev = 'useMutableSource';
@@ -16850,17 +16878,17 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateDebugValue();
     },
-    useDeferredValue: function (value, config) {
+    useDeferredValue: function (value) {
       currentHookNameInDev = 'useDeferredValue';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return rerenderDeferredValue(value, config);
+      return rerenderDeferredValue(value);
     },
-    useTransition: function (config) {
+    useTransition: function () {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return rerenderTransition(config);
+      return rerenderTransition();
     },
     useMutableSource: function (source, getSnapshot, subscribe) {
       currentHookNameInDev = 'useMutableSource';
@@ -17034,7 +17062,7 @@ function updateForwardRef(current, workInProgress, Component, nextProps, renderL
   } // React DevTools reads this flag.
 
 
-  workInProgress.effectTag |= PerformedWork;
+  workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
 }
@@ -17110,7 +17138,7 @@ function updateMemoComponent(current, workInProgress, Component, nextProps, upda
   } // React DevTools reads this flag.
 
 
-  workInProgress.effectTag |= PerformedWork;
+  workInProgress.flags |= PerformedWork;
   var newChild = createWorkInProgress(currentChild, nextProps);
   newChild.ref = workInProgress.ref;
   newChild.return = workInProgress;
@@ -17176,7 +17204,7 @@ function updateSimpleMemoComponent(current, workInProgress, Component, nextProps
         // this is no longer necessary.
         workInProgress.lanes = current.lanes;
         return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-      } else if ((current.effectTag & ForceUpdateForLegacySuspense) !== NoEffect) {
+      } else if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
         // This is a special case that only exists for legacy mode.
         // See https://github.com/facebook/react/pull/19216.
         didReceiveUpdate = true;
@@ -17275,7 +17303,7 @@ function updateMode(current, workInProgress, renderLanes) {
 
 function updateProfiler(current, workInProgress, renderLanes) {
   {
-    workInProgress.effectTag |= Update; // 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;
@@ -17294,7 +17322,7 @@ function markRef(current, workInProgress) {
 
   if (current === null && ref !== null || current !== null && current.ref !== ref) {
     // Schedule a Ref effect
-    workInProgress.effectTag |= Ref;
+    workInProgress.flags |= Ref;
   }
 }
 
@@ -17346,7 +17374,7 @@ function updateFunctionComponent(current, workInProgress, Component, nextProps,
   } // React DevTools reads this flag.
 
 
-  workInProgress.effectTag |= PerformedWork;
+  workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
 }
@@ -17390,7 +17418,7 @@ function updateClassComponent(current, workInProgress, Component, nextProps, ren
       current.alternate = null;
       workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-      workInProgress.effectTag |= Placement;
+      workInProgress.flags |= Placement;
     } // In the initial pass we might need to construct the instance.
 
 
@@ -17424,7 +17452,7 @@ function updateClassComponent(current, workInProgress, Component, nextProps, ren
 function finishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderLanes) {
   // Refs should update even if shouldComponentUpdate returns false
   markRef(current, workInProgress);
-  var didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;
+  var didCaptureError = (workInProgress.flags & DidCapture) !== NoFlags;
 
   if (!shouldUpdate && !didCaptureError) {
     // Context providers should defer to sCU for rendering
@@ -17471,7 +17499,7 @@ function finishClassComponent(current, workInProgress, Component, shouldUpdate,
   } // React DevTools reads this flag.
 
 
-  workInProgress.effectTag |= PerformedWork;
+  workInProgress.flags |= PerformedWork;
 
   if (current !== null && didCaptureError) {
     // If we're recovering from an error, reconcile without reusing any of
@@ -17562,7 +17590,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       // Conceptually this is similar to Placement in that a new subtree is
       // inserted into the React tree here. It just happens to not need DOM
       // mutations because it already exists.
-      node.effectTag = node.effectTag & ~Placement | Hydrating;
+      node.flags = node.flags & ~Placement | Hydrating;
       node = node.sibling;
     }
   } else {
@@ -17597,7 +17625,7 @@ function updateHostComponent(current, workInProgress, renderLanes) {
   } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
     // If we're switching from a direct text child to a normal child, or to
     // empty, we need to schedule the text content to be reset.
-    workInProgress.effectTag |= ContentReset;
+    workInProgress.flags |= ContentReset;
   }
 
   markRef(current, workInProgress);
@@ -17624,7 +17652,7 @@ function mountLazyComponent(_current, workInProgress, elementType, updateLanes,
     _current.alternate = null;
     workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-    workInProgress.effectTag |= Placement;
+    workInProgress.flags |= Placement;
   }
 
   var props = workInProgress.pendingProps;
@@ -17716,7 +17744,7 @@ function mountIncompleteClassComponent(_current, workInProgress, Component, next
     _current.alternate = null;
     workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-    workInProgress.effectTag |= Placement;
+    workInProgress.flags |= Placement;
   } // Promote the fiber to a class and try rendering again.
 
 
@@ -17749,7 +17777,7 @@ function mountIndeterminateComponent(_current, workInProgress, Component, render
     _current.alternate = null;
     workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect
 
-    workInProgress.effectTag |= Placement;
+    workInProgress.flags |= Placement;
   }
 
   var props = workInProgress.pendingProps;
@@ -17785,7 +17813,7 @@ function mountIndeterminateComponent(_current, workInProgress, Component, render
   } // React DevTools reads this flag.
 
 
-  workInProgress.effectTag |= PerformedWork;
+  workInProgress.flags |= PerformedWork;
 
   {
     // Support for module components is deprecated and is removed behind a flag.
@@ -17936,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
@@ -17968,19 +17997,19 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
   {
     if (shouldSuspend(workInProgress)) {
-      workInProgress.effectTag |= DidCapture;
+      workInProgress.flags |= DidCapture;
     }
   }
 
   var suspenseContext = suspenseStackCursor.current;
   var showFallback = false;
-  var didSuspend = (workInProgress.effectTag & DidCapture) !== NoEffect;
+  var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;
 
   if (didSuspend || shouldRemainOnFallback(suspenseContext, current)) {
     // Something in this boundary's subtree already suspended. Switch to
     // rendering the fallback children.
     showFallback = true;
-    workInProgress.effectTag &= ~DidCapture;
+    workInProgress.flags &= ~DidCapture;
   } else {
     // Attempting the main content
     if (current === null || current.memoizedState !== null) {
@@ -18027,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.
@@ -18049,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;
@@ -18087,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;
       }
     }
   }
@@ -18175,7 +18228,7 @@ function updateSuspensePrimaryChildren(current, workInProgress, primaryChildren,
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
     currentFallbackChildFragment.nextEffect = null;
-    currentFallbackChildFragment.effectTag = Deletion;
+    currentFallbackChildFragment.flags = Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
   }
 
@@ -18246,7 +18299,7 @@ function updateSuspenseFallbackChildren(current, workInProgress, primaryChildren
     fallbackChildFragment = createFiberFromFragment(fallbackChildren, mode, renderLanes, null); // Needs a placement effect because the parent (the Suspense boundary) already
     // mounted but this is a new fiber.
 
-    fallbackChildFragment.effectTag |= Placement;
+    fallbackChildFragment.flags |= Placement;
   }
 
   fallbackChildFragment.return = workInProgress;
@@ -18484,9 +18537,9 @@ function updateSuspenseListComponent(current, workInProgress, renderLanes) {
 
   if (shouldForceFallback) {
     suspenseContext = setShallowSuspenseContext(suspenseContext, ForceSuspenseFallback);
-    workInProgress.effectTag |= DidCapture;
+    workInProgress.flags |= DidCapture;
   } else {
-    var didSuspendBefore = current !== null && (current.effectTag & DidCapture) !== NoEffect;
+    var didSuspendBefore = current !== null && (current.flags & DidCapture) !== NoFlags;
 
     if (didSuspendBefore) {
       // If we previously forced a fallback, we need to schedule work
@@ -18696,7 +18749,7 @@ function updateContextConsumer(current, workInProgress, renderLanes) {
   } // React DevTools reads this flag.
 
 
-  workInProgress.effectTag |= PerformedWork;
+  workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, newChildren, renderLanes);
   return workInProgress.child;
 }
@@ -18781,8 +18834,8 @@ function remountFiber(current, oldWorkInProgress, newWorkInProgress) {
     }
 
     current.nextEffect = null;
-    current.effectTag = Deletion;
-    newWorkInProgress.effectTag |= Placement; // Restart work from the new fiber.
+    current.flags = Deletion;
+    newWorkInProgress.flags |= Placement; // Restart work from the new fiber.
 
     return newWorkInProgress;
   }
@@ -18850,7 +18903,7 @@ function beginWork(current, workInProgress, renderLanes) {
             var hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
 
             if (hasChildWork) {
-              workInProgress.effectTag |= 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,
 
@@ -18904,7 +18957,7 @@ function beginWork(current, workInProgress, renderLanes) {
 
         case SuspenseListComponent:
           {
-            var didSuspendBefore = (current.effectTag & DidCapture) !== NoEffect;
+            var didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
 
             var _hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
 
@@ -18921,7 +18974,7 @@ function beginWork(current, workInProgress, renderLanes) {
               // as before. We can fast bail out.
 
 
-              workInProgress.effectTag |= DidCapture;
+              workInProgress.flags |= DidCapture;
             } // If nothing suspended before and we're rendering the same children,
             // then the tail doesn't matter. Anything new that suspends will work
             // in the "together" mode, so we can continue from the state we had.
@@ -18967,7 +19020,7 @@ function beginWork(current, workInProgress, renderLanes) {
 
       return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     } else {
-      if ((current.effectTag & ForceUpdateForLegacySuspense) !== NoEffect) {
+      if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
         // This is a special case that only exists for legacy mode.
         // See https://github.com/facebook/react/pull/19216.
         didReceiveUpdate = true;
@@ -19141,11 +19194,11 @@ function beginWork(current, workInProgress, renderLanes) {
 function markUpdate(workInProgress) {
   // Tag the fiber with an update effect. This turns a Placement into
   // a PlacementAndUpdate.
-  workInProgress.effectTag |= Update;
+  workInProgress.flags |= Update;
 }
 
 function markRef$1(workInProgress) {
-  workInProgress.effectTag |= Ref;
+  workInProgress.flags |= Ref;
 }
 
 var appendAllChildren;
@@ -19360,7 +19413,7 @@ function completeWork(current, workInProgress, renderLanes) {
             // This handles the case of React rendering into a container with previous children.
             // It's also safe to do for updates too, because current.child would only be null
             // if the previous render was null (so the the container would already be empty).
-            workInProgress.effectTag |= Snapshot;
+            workInProgress.flags |= Snapshot;
           }
         }
 
@@ -19470,7 +19523,7 @@ function completeWork(current, workInProgress, renderLanes) {
         popSuspenseContext(workInProgress);
         var nextState = workInProgress.memoizedState;
 
-        if ((workInProgress.effectTag & DidCapture) !== NoEffect) {
+        if ((workInProgress.flags & DidCapture) !== NoFlags) {
           // Something suspended. Re-render with the fallback children.
           workInProgress.lanes = renderLanes; // Do not reset the effect list.
 
@@ -19529,7 +19582,7 @@ function completeWork(current, workInProgress, renderLanes) {
             // primary children. In mutation mode, we also need the flag to
             // *unhide* children that were previously hidden, so check if this
             // is currently timed out, too.
-            workInProgress.effectTag |= Update;
+            workInProgress.flags |= Update;
           }
         }
 
@@ -19575,7 +19628,7 @@ function completeWork(current, workInProgress, renderLanes) {
           return null;
         }
 
-        var didSuspendAlready = (workInProgress.effectTag & DidCapture) !== NoEffect;
+        var didSuspendAlready = (workInProgress.flags & DidCapture) !== NoFlags;
         var renderedTail = renderState.rendering;
 
         if (renderedTail === null) {
@@ -19590,7 +19643,7 @@ function completeWork(current, workInProgress, renderLanes) {
             // something in the previous committed pass suspended. Otherwise,
             // there's no chance so we can skip the expensive call to
             // findFirstSuspended.
-            var cannotBeSuspended = renderHasNotSuspendedYet() && (current === null || (current.effectTag & DidCapture) === NoEffect);
+            var cannotBeSuspended = renderHasNotSuspendedYet() && (current === null || (current.flags & DidCapture) === NoFlags);
 
             if (!cannotBeSuspended) {
               var row = workInProgress.child;
@@ -19600,7 +19653,7 @@ function completeWork(current, workInProgress, renderLanes) {
 
                 if (suspended !== null) {
                   didSuspendAlready = true;
-                  workInProgress.effectTag |= DidCapture;
+                  workInProgress.flags |= DidCapture;
                   cutOffTailIfNeeded(renderState, false); // If this is a newly suspended tree, it might not get committed as
                   // part of the second pass. In that case nothing will subscribe to
                   // its thennables. Instead, we'll transfer its thennables to the
@@ -19618,7 +19671,7 @@ function completeWork(current, workInProgress, renderLanes) {
 
                   if (newThennables !== null) {
                     workInProgress.updateQueue = newThennables;
-                    workInProgress.effectTag |= Update;
+                    workInProgress.flags |= Update;
                   } // Rerender the whole list, but this time, we'll force fallbacks
                   // to stay in place.
                   // Reset the effect list before doing the second pass since that's now invalid.
@@ -19645,7 +19698,7 @@ function completeWork(current, workInProgress, renderLanes) {
               // We have already passed our CPU deadline but we still have rows
               // left in the tail. We'll just give up further attempts to render
               // the main content and only render fallbacks.
-              workInProgress.effectTag |= DidCapture;
+              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. While in terms
@@ -19672,7 +19725,7 @@ function completeWork(current, workInProgress, renderLanes) {
             var _suspended = findFirstSuspended(renderedTail);
 
             if (_suspended !== null) {
-              workInProgress.effectTag |= DidCapture;
+              workInProgress.flags |= DidCapture;
               didSuspendAlready = true; // Ensure we transfer the update queue to the parent so that it doesn't
               // get lost if this row ends up dropped during a second pass.
 
@@ -19680,7 +19733,7 @@ function completeWork(current, workInProgress, renderLanes) {
 
               if (_newThennables !== null) {
                 workInProgress.updateQueue = _newThennables;
-                workInProgress.effectTag |= Update;
+                workInProgress.flags |= Update;
               }
 
               cutOffTailIfNeeded(renderState, true); // This might have been modified.
@@ -19706,7 +19759,7 @@ function completeWork(current, workInProgress, renderLanes) {
               // We have now passed our CPU deadline and we'll just give up further
               // attempts to render the main content and only render fallbacks.
               // The assumption is that this is usually faster.
-              workInProgress.effectTag |= DidCapture;
+              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. While in terms
@@ -19802,7 +19855,7 @@ function completeWork(current, workInProgress, renderLanes) {
           var nextIsHidden = _nextState !== null;
 
           if (prevIsHidden !== nextIsHidden && newProps.mode !== 'unstable-defer-without-hiding') {
-            workInProgress.effectTag |= Update;
+            workInProgress.flags |= Update;
           }
         }
 
@@ -19827,10 +19880,10 @@ function unwindWork(workInProgress, renderLanes) {
           popContext(workInProgress);
         }
 
-        var effectTag = workInProgress.effectTag;
+        var flags = workInProgress.flags;
 
-        if (effectTag & ShouldCapture) {
-          workInProgress.effectTag = effectTag & ~ShouldCapture | DidCapture;
+        if (flags & ShouldCapture) {
+          workInProgress.flags = flags & ~ShouldCapture | DidCapture;
 
           if ( (workInProgress.mode & ProfileMode) !== NoMode) {
             transferActualDuration(workInProgress);
@@ -19847,15 +19900,15 @@ function unwindWork(workInProgress, renderLanes) {
         popHostContainer(workInProgress);
         popTopLevelContextObject(workInProgress);
         resetWorkInProgressVersions();
-        var _effectTag = workInProgress.effectTag;
+        var _flags = workInProgress.flags;
 
-        if (!((_effectTag & DidCapture) === NoEffect)) {
+        if (!((_flags & DidCapture) === NoFlags)) {
           {
             throw Error( "The root failed to unmount after an error. This is likely a bug in React. Please file an issue." );
           }
         }
 
-        workInProgress.effectTag = _effectTag & ~ShouldCapture | DidCapture;
+        workInProgress.flags = _flags & ~ShouldCapture | DidCapture;
         return workInProgress;
       }
 
@@ -19870,10 +19923,10 @@ function unwindWork(workInProgress, renderLanes) {
       {
         popSuspenseContext(workInProgress);
 
-        var _effectTag2 = workInProgress.effectTag;
+        var _flags2 = workInProgress.flags;
 
-        if (_effectTag2 & ShouldCapture) {
-          workInProgress.effectTag = _effectTag2 & ~ShouldCapture | DidCapture; // Captured a suspense effect. Re-render the boundary.
+        if (_flags2 & ShouldCapture) {
+          workInProgress.flags = _flags2 & ~ShouldCapture | DidCapture; // Captured a suspense effect. Re-render the boundary.
 
           if ( (workInProgress.mode & ProfileMode) !== NoMode) {
             transferActualDuration(workInProgress);
@@ -20157,7 +20210,7 @@ function attachPingListener(root, wakeable, lanes) {
 
 function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes) {
   // The source fiber did not complete.
-  sourceFiber.effectTag |= Incomplete; // Its effect list is no longer valid.
+  sourceFiber.flags |= Incomplete; // Its effect list is no longer valid.
 
   sourceFiber.firstEffect = sourceFiber.lastEffect = null;
 
@@ -20208,12 +20261,12 @@ function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes)
 
 
         if ((_workInProgress.mode & BlockingMode) === NoMode) {
-          _workInProgress.effectTag |= DidCapture;
-          sourceFiber.effectTag |= ForceUpdateForLegacySuspense; // We're going to commit this fiber even though it didn't complete.
+          _workInProgress.flags |= DidCapture;
+          sourceFiber.flags |= ForceUpdateForLegacySuspense; // We're going to commit this fiber even though it didn't complete.
           // But we shouldn't call any lifecycle methods or callbacks. Remove
           // all lifecycle effect tags.
 
-          sourceFiber.effectTag &= ~(LifecycleEffectMask | Incomplete);
+          sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
           if (sourceFiber.tag === ClassComponent) {
             var currentSourceFiber = sourceFiber.alternate;
@@ -20263,8 +20316,8 @@ function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes)
         // that we can show the initial loading state as quickly as possible.
         //
         // If we hit a "Delayed" case, such as when we'd switch from content back into
-        // a fallback, then we should always suspend/restart. SuspenseConfig applies to
-        // this case. If none is defined, JND is used instead.
+        // a fallback, then we should always suspend/restart. Transitions apply
+        // to this case. If none is defined, JND is used instead.
         //
         // If we're already showing a fallback and it gets "retried", allowing us to show
         // another level, but there's still an inner boundary that would show a fallback,
@@ -20281,7 +20334,7 @@ function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes)
 
 
         attachPingListener(root, wakeable, rootRenderLanes);
-        _workInProgress.effectTag |= ShouldCapture;
+        _workInProgress.flags |= ShouldCapture;
         _workInProgress.lanes = rootRenderLanes;
         return;
       } // This boundary already captured during this render. Continue to the next
@@ -20308,7 +20361,7 @@ function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes)
       case HostRoot:
         {
           var _errorInfo = value;
-          workInProgress.effectTag |= ShouldCapture;
+          workInProgress.flags |= ShouldCapture;
           var lane = pickArbitraryLane(rootRenderLanes);
           workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
 
@@ -20324,8 +20377,8 @@ function throwException(root, returnFiber, sourceFiber, value, rootRenderLanes)
         var ctor = workInProgress.type;
         var instance = workInProgress.stateNode;
 
-        if ((workInProgress.effectTag & DidCapture) === NoEffect && (typeof ctor.getDerivedStateFromError === 'function' || instance !== null && typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance))) {
-          workInProgress.effectTag |= ShouldCapture;
+        if ((workInProgress.flags & DidCapture) === NoFlags && (typeof ctor.getDerivedStateFromError === 'function' || instance !== null && typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance))) {
+          workInProgress.flags |= ShouldCapture;
 
           var _lane = pickArbitraryLane(rootRenderLanes);
 
@@ -20362,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) {
@@ -20383,7 +20436,7 @@ function safelyDetachRef(current, nearestMountedAncestor) {
 
         if (hasCaughtError()) {
           var refError = clearCaughtError();
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
+          captureCommitPhaseError(current, refError);
         }
       }
     } else {
@@ -20392,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);
     }
   }
 }
@@ -20415,7 +20468,7 @@ function commitBeforeMutationLifeCycles(current, finishedWork) {
 
     case ClassComponent:
       {
-        if (finishedWork.effectTag & Snapshot) {
+        if (finishedWork.flags & Snapshot) {
           if (current !== null) {
             var prevProps = current.memoizedProps;
             var prevState = current.memoizedState;
@@ -20457,7 +20510,7 @@ function commitBeforeMutationLifeCycles(current, finishedWork) {
     case HostRoot:
       {
         {
-          if (finishedWork.effectTag & Snapshot) {
+          if (finishedWork.flags & Snapshot) {
             var root = finishedWork.stateNode;
             clearContainer(root.containerInfo);
           }
@@ -20556,7 +20609,7 @@ function schedulePassiveEffects(finishedWork) {
           next = _effect.next,
           tag = _effect.tag;
 
-      if ((tag & Passive$1) !== NoEffect$1 && (tag & HasEffect) !== NoEffect$1) {
+      if ((tag & Passive$1) !== NoFlags$1 && (tag & HasEffect) !== NoFlags$1) {
         enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
         enqueuePendingPassiveHookEffectMount(finishedWork, effect);
       }
@@ -20589,7 +20642,7 @@ function commitLifeCycles(finishedRoot, current, finishedWork, committedLanes) {
       {
         var instance = finishedWork.stateNode;
 
-        if (finishedWork.effectTag & Update) {
+        if (finishedWork.flags & Update) {
           if (current === null) {
             // We could update instance props and state here,
             // but instead we rely on them being set during last render.
@@ -20693,7 +20746,7 @@ function commitLifeCycles(finishedRoot, current, finishedWork, committedLanes) {
         // These effects should only be committed when components are first mounted,
         // aka when there is no current/alternate.
 
-        if (current === null && finishedWork.effectTag & Update) {
+        if (current === null && finishedWork.flags & Update) {
           var type = finishedWork.type;
           var props = finishedWork.memoizedProps;
           commitMount(_instance2, type, props);
@@ -20847,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) {
@@ -20872,11 +20925,11 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
                   tag = _effect2.tag;
 
               if (destroy !== undefined) {
-                if ((tag & Passive$1) !== NoEffect$1) {
+                if ((tag & Passive$1) !== NoFlags$1) {
                   enqueuePendingPassiveHookEffectUnmount(current, effect);
                 } else {
                   {
-                    safelyCallDestroy(current, nearestMountedAncestor, destroy);
+                    safelyCallDestroy(current, destroy);
                   }
                 }
               }
@@ -20891,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;
@@ -20903,7 +20956,7 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPrio
 
     case HostComponent:
       {
-        safelyDetachRef(current, nearestMountedAncestor);
+        safelyDetachRef(current);
         return;
       }
 
@@ -20913,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;
@@ -20939,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
@@ -20948,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.
@@ -21053,7 +21106,7 @@ function getHostSibling(fiber) {
     while (node.tag !== HostComponent && node.tag !== HostText && node.tag !== DehydratedFragment) {
       // If it is not host node and, we might have a host node inside it.
       // Try to search down until we find one.
-      if (node.effectTag & Placement) {
+      if (node.flags & Placement) {
         // If we don't have a child, try the siblings instead.
         continue siblings;
       } // If we don't have a child, try the siblings instead.
@@ -21069,7 +21122,7 @@ function getHostSibling(fiber) {
     } // Check if this host node is stable or about to be placed.
 
 
-    if (!(node.effectTag & Placement)) {
+    if (!(node.flags & Placement)) {
       // Found it!
       return node.stateNode;
     }
@@ -21114,11 +21167,11 @@ function commitPlacement(finishedWork) {
 
   }
 
-  if (parentFiber.effectTag & ContentReset) {
+  if (parentFiber.flags & ContentReset) {
     // Reset the text content of the parent before doing any insertions
     resetTextContent(parent); // Clear ContentReset from the effect tag
 
-    parentFiber.effectTag &= ~ContentReset;
+    parentFiber.flags &= ~ContentReset;
   }
 
   var before = getHostSibling(finishedWork); // We only have the top Fiber that was inserted but we need to recurse down its
@@ -21185,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
@@ -21234,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) {
@@ -21255,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;
@@ -21287,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;
@@ -21696,7 +21749,7 @@ function requestEventTime() {
   currentEventTime = now();
   return currentEventTime;
 }
-function requestUpdateLane(fiber, suspenseConfig) {
+function requestUpdateLane(fiber) {
   // Special cases
   var mode = fiber.mode;
 
@@ -21724,10 +21777,9 @@ function requestUpdateLane(fiber, suspenseConfig) {
     currentEventWipLanes = workInProgressRootIncludedLanes;
   }
 
-  if (suspenseConfig !== null) {
-    // Use the size of the timeout as a heuristic to prioritize shorter
-    // transitions over longer ones.
-    // TODO: This will coerce numbers larger than 31 bits to 0.
+  var isTransition = requestCurrentTransition() !== NoTransition;
+
+  if (isTransition) {
     if (currentEventPendingLanes !== NoLanes) {
       currentEventPendingLanes = mostRecentlyUpdatedRoot !== null ? mostRecentlyUpdatedRoot.pendingLanes : NoLanes;
     }
@@ -21881,7 +21933,7 @@ function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
   }
 
   {
-    if (alternate === null && (sourceFiber.effectTag & (Placement | Hydrating)) !== NoEffect) {
+    if (alternate === null && (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags) {
       warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
     }
   } // Walk the parent path to the root and update the child expiration time.
@@ -21898,7 +21950,7 @@ function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
       alternate.childLanes = mergeLanes(alternate.childLanes, lane);
     } else {
       {
-        if ((parent.effectTag & (Placement | Hydrating)) !== NoEffect) {
+        if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
           warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
         }
       }
@@ -22153,7 +22205,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
         if (!shouldForceFlushFallbacksInDEV()) {
           // This is not a transition, but we did trigger an avoided state.
           // Schedule a placeholder to display after a short delay, using the Just
-          // Noticable Difference.
+          // Noticeable Difference.
           // TODO: Is the JND optimization worth the added complexity? If this is
           // the only reason we track the event time, then probably not.
           // Consider removing.
@@ -22752,7 +22804,7 @@ function completeUnitOfWork(unitOfWork) {
     var current = completedWork.alternate;
     var returnFiber = completedWork.return; // Check if the work completed or if something threw.
 
-    if ((completedWork.effectTag & Incomplete) === NoEffect) {
+    if ((completedWork.flags & Incomplete) === NoFlags) {
       setCurrentFiber(completedWork);
       var next = void 0;
 
@@ -22776,7 +22828,7 @@ function completeUnitOfWork(unitOfWork) {
       resetChildLanes(completedWork);
 
       if (returnFiber !== null && // Do not append effects to parents if a sibling failed to complete
-      (returnFiber.effectTag & Incomplete) === NoEffect) {
+      (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.
@@ -22798,11 +22850,11 @@ function completeUnitOfWork(unitOfWork) {
         // at the end.
 
 
-        var effectTag = completedWork.effectTag; // Skip both NoWork and PerformedWork tags when creating the effect
+        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 (effectTag > PerformedWork) {
+        if (flags > PerformedWork) {
           if (returnFiber.lastEffect !== null) {
             returnFiber.lastEffect.nextEffect = completedWork;
           } else {
@@ -22824,7 +22876,7 @@ function completeUnitOfWork(unitOfWork) {
         // back here again.
         // Since we're restarting, remove anything that is not a host effect
         // from the effect tag.
-        _next.effectTag &= HostEffectMask;
+        _next.flags &= HostEffectMask;
         workInProgress = _next;
         return;
       }
@@ -22847,7 +22899,7 @@ function completeUnitOfWork(unitOfWork) {
       if (returnFiber !== null) {
         // Mark the parent fiber as incomplete and clear its effect list.
         returnFiber.firstEffect = returnFiber.lastEffect = null;
-        returnFiber.effectTag |= Incomplete;
+        returnFiber.flags |= Incomplete;
       }
     }
 
@@ -23001,7 +23053,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   var firstEffect;
 
-  if (finishedWork.effectTag > PerformedWork) {
+  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
@@ -23046,7 +23098,7 @@ function commitRootImpl(root, renderPriorityLevel) {
           }
 
           var error = clearCaughtError();
-          captureCommitPhaseError(nextEffect, nextEffect.return, error);
+          captureCommitPhaseError(nextEffect, error);
           nextEffect = nextEffect.nextEffect;
         }
       }
@@ -23077,7 +23129,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
           var _error = clearCaughtError();
 
-          captureCommitPhaseError(nextEffect, nextEffect.return, _error);
+          captureCommitPhaseError(nextEffect, _error);
           nextEffect = nextEffect.nextEffect;
         }
       }
@@ -23107,7 +23159,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
           var _error2 = clearCaughtError();
 
-          captureCommitPhaseError(nextEffect, nextEffect.return, _error2);
+          captureCommitPhaseError(nextEffect, _error2);
           nextEffect = nextEffect.nextEffect;
         }
       }
@@ -23153,7 +23205,7 @@ function commitRootImpl(root, renderPriorityLevel) {
       var nextNextEffect = nextEffect.nextEffect;
       nextEffect.nextEffect = null;
 
-      if (nextEffect.effectTag & Deletion) {
+      if (nextEffect.flags & Deletion) {
         detachFiberAfterEffects(nextEffect);
       }
 
@@ -23243,7 +23295,7 @@ function commitBeforeMutationEffects() {
     var current = nextEffect.alternate;
 
     if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
-      if ((nextEffect.effectTag & Deletion) !== NoEffect) {
+      if ((nextEffect.flags & Deletion) !== NoFlags) {
         if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
           shouldFireAfterActiveInstanceBlur = true;
         }
@@ -23255,15 +23307,15 @@ function commitBeforeMutationEffects() {
       }
     }
 
-    var effectTag = nextEffect.effectTag;
+    var flags = nextEffect.flags;
 
-    if ((effectTag & Snapshot) !== NoEffect) {
+    if ((flags & Snapshot) !== NoFlags) {
       setCurrentFiber(nextEffect);
       commitBeforeMutationLifeCycles(current, nextEffect);
       resetCurrentFiber();
     }
 
-    if ((effectTag & Passive) !== NoEffect) {
+    if ((flags & Passive) !== NoFlags) {
       // If there are passive effects, schedule a callback to flush at
       // the earliest opportunity.
       if (!rootDoesHavePassiveEffects) {
@@ -23283,13 +23335,13 @@ function commitMutationEffects(root, renderPriorityLevel) {
   // TODO: Should probably move the bulk of this function to commitWork.
   while (nextEffect !== null) {
     setCurrentFiber(nextEffect);
-    var effectTag = nextEffect.effectTag;
+    var flags = nextEffect.flags;
 
-    if (effectTag & ContentReset) {
+    if (flags & ContentReset) {
       commitResetTextContent(nextEffect);
     }
 
-    if (effectTag & Ref) {
+    if (flags & Ref) {
       var current = nextEffect.alternate;
 
       if (current !== null) {
@@ -23301,9 +23353,9 @@ function commitMutationEffects(root, renderPriorityLevel) {
     // switch on that value.
 
 
-    var primaryEffectTag = effectTag & (Placement | Update | Deletion | Hydrating);
+    var primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
 
-    switch (primaryEffectTag) {
+    switch (primaryFlags) {
       case Placement:
         {
           commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is
@@ -23311,7 +23363,7 @@ function commitMutationEffects(root, renderPriorityLevel) {
           // 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.
 
-          nextEffect.effectTag &= ~Placement;
+          nextEffect.flags &= ~Placement;
           break;
         }
 
@@ -23321,7 +23373,7 @@ function commitMutationEffects(root, renderPriorityLevel) {
           commitPlacement(nextEffect); // Clear the "placement" from effect tag so that we know that this is
           // inserted, before any life-cycles like componentDidMount gets called.
 
-          nextEffect.effectTag &= ~Placement; // Update
+          nextEffect.flags &= ~Placement; // Update
 
           var _current = nextEffect.alternate;
           commitWork(_current, nextEffect);
@@ -23330,13 +23382,13 @@ function commitMutationEffects(root, renderPriorityLevel) {
 
       case Hydrating:
         {
-          nextEffect.effectTag &= ~Hydrating;
+          nextEffect.flags &= ~Hydrating;
           break;
         }
 
       case HydratingAndUpdate:
         {
-          nextEffect.effectTag &= ~Hydrating; // Update
+          nextEffect.flags &= ~Hydrating; // Update
 
           var _current2 = nextEffect.alternate;
           commitWork(_current2, nextEffect);
@@ -23352,7 +23404,7 @@ function commitMutationEffects(root, renderPriorityLevel) {
 
       case Deletion:
         {
-          commitDeletion(root, nextEffect, nextEffect.return);
+          commitDeletion(root, nextEffect);
           break;
         }
     }
@@ -23367,15 +23419,15 @@ function commitLayoutEffects(root, committedLanes) {
 
   while (nextEffect !== null) {
     setCurrentFiber(nextEffect);
-    var effectTag = nextEffect.effectTag;
+    var flags = nextEffect.flags;
 
-    if (effectTag & (Update | Callback)) {
+    if (flags & (Update | Callback)) {
       var current = nextEffect.alternate;
       commitLifeCycles(root, current, nextEffect);
     }
 
     {
-      if (effectTag & Ref) {
+      if (flags & Ref) {
         commitAttachRef(nextEffect);
       }
     }
@@ -23413,11 +23465,11 @@ function enqueuePendingPassiveHookEffectUnmount(fiber, effect) {
   pendingPassiveHookEffectsUnmount.push(effect, fiber);
 
   {
-    fiber.effectTag |= PassiveUnmountPendingDev;
+    fiber.flags |= PassiveUnmountPendingDev;
     var alternate = fiber.alternate;
 
     if (alternate !== null) {
-      alternate.effectTag |= PassiveUnmountPendingDev;
+      alternate.flags |= PassiveUnmountPendingDev;
     }
   }
 
@@ -23475,11 +23527,11 @@ function flushPassiveEffectsImpl() {
     _effect.destroy = undefined;
 
     {
-      fiber.effectTag &= ~PassiveUnmountPendingDev;
+      fiber.flags &= ~PassiveUnmountPendingDev;
       var alternate = fiber.alternate;
 
       if (alternate !== null) {
-        alternate.effectTag &= ~PassiveUnmountPendingDev;
+        alternate.flags &= ~PassiveUnmountPendingDev;
       }
     }
 
@@ -23499,7 +23551,7 @@ function flushPassiveEffectsImpl() {
           }
 
           var error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
+          captureCommitPhaseError(fiber, error);
         }
 
         resetCurrentFiber();
@@ -23531,7 +23583,7 @@ function flushPassiveEffectsImpl() {
 
         var _error4 = clearCaughtError();
 
-        captureCommitPhaseError(_fiber, _fiber.return, _error4);
+        captureCommitPhaseError(_fiber, _error4);
       }
 
       resetCurrentFiber();
@@ -23548,7 +23600,7 @@ function flushPassiveEffectsImpl() {
 
     effect.nextEffect = null;
 
-    if (effect.effectTag & Deletion) {
+    if (effect.flags & Deletion) {
       detachFiberAfterEffects(effect);
     }
 
@@ -23606,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.
@@ -23614,11 +23666,7 @@ function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
     return;
   }
 
-  var fiber = null;
-
-  {
-    fiber = sourceFiber.return;
-  }
+  var fiber = sourceFiber.return;
 
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
@@ -23839,7 +23887,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
     // we can assume that they would have prevented this update.
 
 
-    if ((fiber.effectTag & PassiveUnmountPendingDev) !== NoEffect) {
+    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.
@@ -24184,27 +24232,15 @@ function finishPendingInteractions(root, committedLanes) {
     });
   }
 } // `act` testing API
-//
-// TODO: This is mostly a copy-paste from the legacy `act`, which does not have
-// access to the same internals that we do here. Some trade offs in the
-// implementation no longer make sense.
-
-
-var isFlushingAct = false;
-var isInsideThisAct = false; // TODO: Yes, this is confusing. See above comment. We'll refactor it.
 
 function shouldForceFlushFallbacksInDEV() {
+  // Never force flush in production. This function should get stripped out.
+  return  actingUpdatesScopeDepth > 0;
+}
+// so we can tell if any async act() calls try to run in parallel.
 
 
-  if (IsThisRendererActing.current) {
-    // `isInsideAct` is only used by the reconciler implementation of `act`.
-    // We don't want to flush suspense fallbacks until the end.
-    return !isInsideThisAct;
-  } // Flush callbacks at the end.
-
-
-  return isFlushingAct;
-}
+var actingUpdatesScopeDepth = 0;
 
 function detachFiberAfterEffects(fiber) {
   fiber.sibling = null;
@@ -24647,7 +24683,7 @@ function FiberNode(tag, pendingProps, key, mode) {
   this.dependencies = null;
   this.mode = mode; // Effects
 
-  this.effectTag = NoEffect;
+  this.flags = NoFlags;
   this.nextEffect = null;
   this.firstEffect = null;
   this.lastEffect = null;
@@ -24769,7 +24805,7 @@ function createWorkInProgress(current, pendingProps) {
     workInProgress.type = current.type; // We already have an alternate.
     // Reset the effect tag.
 
-    workInProgress.effectTag = NoEffect; // The effect list is no longer valid.
+    workInProgress.flags = NoFlags; // The effect list is no longer valid.
 
     workInProgress.nextEffect = null;
     workInProgress.firstEffect = null;
@@ -24840,7 +24876,7 @@ 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.effectTag &= Placement; // The effect list is no longer valid.
+  workInProgress.flags &= Placement; // The effect list is no longer valid.
 
   workInProgress.nextEffect = null;
   workInProgress.firstEffect = null;
@@ -25188,7 +25224,7 @@ function assignFiberPropertiesInDEV(target, source) {
   target.memoizedState = source.memoizedState;
   target.dependencies = source.dependencies;
   target.mode = source.mode;
-  target.effectTag = source.effectTag;
+  target.flags = source.flags;
   target.nextEffect = source.nextEffect;
   target.firstEffect = source.firstEffect;
   target.lastEffect = source.lastEffect;
@@ -25406,8 +25442,7 @@ function updateContainer(element, container, parentComponent, callback) {
     }
   }
 
-  var suspenseConfig = requestCurrentSuspenseConfig();
-  var lane = requestUpdateLane(current$1, suspenseConfig);
+  var lane = requestUpdateLane(current$1);
 
   var context = getContextForSubtree(parentComponent);
 
@@ -25517,7 +25552,7 @@ function attemptHydrationAtCurrentPriority$1(fiber) {
   }
 
   var eventTime = requestEventTime();
-  var lane = requestUpdateLane(fiber, null);
+  var lane = requestUpdateLane(fiber);
   scheduleUpdateOnFiber(fiber, lane, eventTime);
   markRetryLaneIfNotHydrated(fiber, lane);
 }
@@ -25551,29 +25586,96 @@ function shouldSuspend(fiber) {
   return shouldSuspendImpl(fiber);
 }
 var overrideHookState = null;
+var overrideHookStateDeletePath = null;
+var overrideHookStateRenamePath = null;
 var overrideProps = null;
+var overridePropsDeletePath = null;
+var overridePropsRenamePath = null;
 var scheduleUpdate = null;
 var setSuspenseHandler = null;
 
 {
-  var copyWithSetImpl = function (obj, path, idx, value) {
-    if (idx >= path.length) {
+  var copyWithDeleteImpl = function (obj, path, index) {
+    var key = path[index];
+    var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj);
+
+    if (index + 1 === path.length) {
+      if (Array.isArray(updated)) {
+        updated.splice(key, 1);
+      } else {
+        delete updated[key];
+      }
+
+      return updated;
+    } // $FlowFixMe number or string is fine here
+
+
+    updated[key] = copyWithDeleteImpl(obj[key], path, index + 1);
+    return updated;
+  };
+
+  var copyWithDelete = function (obj, path) {
+    return copyWithDeleteImpl(obj, path, 0);
+  };
+
+  var copyWithRenameImpl = function (obj, oldPath, newPath, index) {
+    var oldKey = oldPath[index];
+    var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj);
+
+    if (index + 1 === oldPath.length) {
+      var newKey = newPath[index]; // $FlowFixMe number or string is fine here
+
+      updated[newKey] = updated[oldKey];
+
+      if (Array.isArray(updated)) {
+        updated.splice(oldKey, 1);
+      } else {
+        delete updated[oldKey];
+      }
+    } else {
+      // $FlowFixMe number or string is fine here
+      updated[oldKey] = copyWithRenameImpl( // $FlowFixMe number or string is fine here
+      obj[oldKey], oldPath, newPath, index + 1);
+    }
+
+    return updated;
+  };
+
+  var copyWithRename = function (obj, oldPath, newPath) {
+    if (oldPath.length !== newPath.length) {
+      warn('copyWithRename() expects paths of the same length');
+
+      return;
+    } else {
+      for (var i = 0; i < newPath.length - 1; i++) {
+        if (oldPath[i] !== newPath[i]) {
+          warn('copyWithRename() expects paths to be the same except for the deepest key');
+
+          return;
+        }
+      }
+    }
+
+    return copyWithRenameImpl(obj, oldPath, newPath, 0);
+  };
+
+  var copyWithSetImpl = function (obj, path, index, value) {
+    if (index >= path.length) {
       return value;
     }
 
-    var key = path[idx];
+    var key = path[index];
     var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj); // $FlowFixMe number or string is fine here
 
-    updated[key] = copyWithSetImpl(obj[key], path, idx + 1, value);
+    updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
     return updated;
   };
 
   var copyWithSet = function (obj, path, value) {
     return copyWithSetImpl(obj, path, 0, value);
-  }; // Support DevTools editable values for useState and useReducer.
-
+  };
 
-  overrideHookState = function (fiber, id, path, value) {
+  var findHook = function (fiber, id) {
     // For now, the "id" of stateful hooks is just the stateful hook index.
     // This may change in the future with e.g. nested hooks.
     var currentHook = fiber.memoizedState;
@@ -25583,10 +25685,51 @@ var setSuspenseHandler = null;
       id--;
     }
 
-    if (currentHook !== null) {
-      var newState = copyWithSet(currentHook.memoizedState, path, value);
-      currentHook.memoizedState = newState;
-      currentHook.baseState = newState; // We aren't actually adding an update to the queue,
+    return currentHook;
+  }; // Support DevTools editable values for useState and useReducer.
+
+
+  overrideHookState = function (fiber, id, path, value) {
+    var hook = findHook(fiber, id);
+
+    if (hook !== null) {
+      var newState = copyWithSet(hook.memoizedState, path, value);
+      hook.memoizedState = newState;
+      hook.baseState = newState; // We aren't actually adding an update to the queue,
+      // because there is no update we can add for useReducer hooks that won't trigger an error.
+      // (There's no appropriate action type for DevTools overrides.)
+      // As a result though, React will see the scheduled update as a noop and bailout.
+      // Shallow cloning props works as a workaround for now to bypass the bailout check.
+
+      fiber.memoizedProps = _assign({}, fiber.memoizedProps);
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    }
+  };
+
+  overrideHookStateDeletePath = function (fiber, id, path) {
+    var hook = findHook(fiber, id);
+
+    if (hook !== null) {
+      var newState = copyWithDelete(hook.memoizedState, path);
+      hook.memoizedState = newState;
+      hook.baseState = newState; // We aren't actually adding an update to the queue,
+      // because there is no update we can add for useReducer hooks that won't trigger an error.
+      // (There's no appropriate action type for DevTools overrides.)
+      // As a result though, React will see the scheduled update as a noop and bailout.
+      // Shallow cloning props works as a workaround for now to bypass the bailout check.
+
+      fiber.memoizedProps = _assign({}, fiber.memoizedProps);
+      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    }
+  };
+
+  overrideHookStateRenamePath = function (fiber, id, oldPath, newPath) {
+    var hook = findHook(fiber, id);
+
+    if (hook !== null) {
+      var newState = copyWithRename(hook.memoizedState, oldPath, newPath);
+      hook.memoizedState = newState;
+      hook.baseState = newState; // We aren't actually adding an update to the queue,
       // because there is no update we can add for useReducer hooks that won't trigger an error.
       // (There's no appropriate action type for DevTools overrides.)
       // As a result though, React will see the scheduled update as a noop and bailout.
@@ -25608,6 +25751,26 @@ var setSuspenseHandler = null;
     scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
   };
 
+  overridePropsDeletePath = function (fiber, path) {
+    fiber.pendingProps = copyWithDelete(fiber.memoizedProps, path);
+
+    if (fiber.alternate) {
+      fiber.alternate.pendingProps = fiber.pendingProps;
+    }
+
+    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+  };
+
+  overridePropsRenamePath = function (fiber, oldPath, newPath) {
+    fiber.pendingProps = copyWithRename(fiber.memoizedProps, oldPath, newPath);
+
+    if (fiber.alternate) {
+      fiber.alternate.pendingProps = fiber.pendingProps;
+    }
+
+    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+  };
+
   scheduleUpdate = function (fiber) {
     scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
   };
@@ -25644,7 +25807,11 @@ function injectIntoDevTools(devToolsConfig) {
     rendererPackageName: devToolsConfig.rendererPackageName,
     rendererConfig: devToolsConfig.rendererConfig,
     overrideHookState: overrideHookState,
+    overrideHookStateDeletePath: overrideHookStateDeletePath,
+    overrideHookStateRenamePath: overrideHookStateRenamePath,
     overrideProps: overrideProps,
+    overridePropsDeletePath: overridePropsDeletePath,
+    overridePropsRenamePath: overridePropsRenamePath,
     setSuspenseHandler: setSuspenseHandler,
     scheduleUpdate: scheduleUpdate,
     currentDispatcherRef: ReactCurrentDispatcher,
@@ -26056,7 +26223,8 @@ function unstable_createPortal(children, container) {
 var Internals = {
   // Keep in sync with ReactTestUtils.js, and ReactTestUtilsAct.js.
   // This is an array for better minification.
-  Events: [getInstanceFromNode, getNodeFromInstance, getFiberCurrentPropsFromNode, enqueueStateRestore, restoreStateIfNeeded, flushPassiveEffects, IsThisRendererActing]
+  Events: [getInstanceFromNode, getNodeFromInstance, getFiberCurrentPropsFromNode, enqueueStateRestore, restoreStateIfNeeded, flushPassiveEffects, // TODO: This is related to `act`, not events. Move to separate key?
+  IsThisRendererActing]
 };
 var foundDevTools = injectIntoDevTools({
   findFiberByHostInstance: getClosestInstanceFromNode,