react-dom 17.0.0-rc.1 → 17.0.1

package/umd/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.
@@ -110,6 +110,7 @@
    * Mapping from registration name to event name
    */
 
+
   var registrationNameDependencies = {};
   /**
    * Mapping from lowercase registration names to the properly cased version,
@@ -142,10 +143,8 @@
       }
     }
 
-    {
-      for (var i = 0; i < dependencies.length; i++) {
-        allNativeEvents.add(dependencies[i]);
-      }
+    for (var i = 0; i < dependencies.length; i++) {
+      allNativeEvents.add(dependencies[i]);
     }
   }
 
@@ -1180,7 +1179,7 @@
         return 'Portal';
 
       case REACT_PROFILER_TYPE:
-        return "Profiler";
+        return 'Profiler';
 
       case REACT_STRICT_MODE_TYPE:
         return 'StrictMode';
@@ -4148,8 +4147,8 @@
   }
 
   // Don't change these two values. They're used by React Dev Tools.
-  var NoEffect =
-  /*                     */
+  var NoFlags =
+  /*                      */
   0;
   var PerformedWork =
   /*                */
@@ -4227,7 +4226,7 @@
       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.
@@ -5519,7 +5518,21 @@
 
     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 {
@@ -5754,7 +5767,15 @@
     return a !== NoLane && a < b ? a : b;
   }
   function createLaneMap(initial) {
-    return new Array(TotalLanes).fill(initial);
+    // Intentionally pushing one by one.
+    // https://v8.dev/blog/elements-kinds#avoid-creating-holes
+    var laneMap = [];
+
+    for (var i = 0; i < TotalLanes; i++) {
+      laneMap.push(initial);
+    }
+
+    return laneMap;
   }
   function markRootUpdated(root, updateLane, eventTime) {
     root.pendingLanes |= updateLane; // TODO: Theoretically, any update to any lane can unblock any other lane. But
@@ -5868,8 +5889,8 @@
   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) {
@@ -6037,9 +6058,6 @@
     });
     return listener;
   }
-  function removeEventListener(target, eventType, listener, capture) {
-    target.removeEventListener(eventType, listener, capture);
-  }
 
   /**
    * These variables store information about text content of a target node,
@@ -6143,136 +6161,144 @@
     return 0;
   }
 
-  /**
-   * @interface Event
-   * @see http://www.w3.org/TR/DOM-Level-3-Events/
-   */
-  var EventInterface = {
-    eventPhase: 0,
-    bubbles: 0,
-    cancelable: 0,
-    timeStamp: function (event) {
-      return event.timeStamp || Date.now();
-    },
-    defaultPrevented: 0,
-    isTrusted: 0
-  };
-
   function functionThatReturnsTrue() {
     return true;
   }
 
   function functionThatReturnsFalse() {
     return false;
-  }
-  /**
-   * Synthetic events are dispatched by event plugins, typically in response to a
-   * top-level event delegation handler.
-   *
-   * These systems should generally use pooling to reduce the frequency of garbage
-   * collection. The system should check `isPersistent` to determine whether the
-   * event should be released into the pool after being dispatched. Users that
-   * need a persisted event should invoke `persist`.
-   *
-   * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
-   * normalizing browser quirks. Subclasses do not necessarily have to implement a
-   * DOM interface; custom application-specific events can also subclass this.
-   */
+  } // This is intentionally a factory so that we have different returned constructors.
+  // If we had a single constructor, it would be megamorphic and engines would deopt.
 
 
-  function SyntheticEvent(reactName, reactEventType, targetInst, nativeEvent, nativeEventTarget) {
-    var Interface = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : EventInterface;
-    this._reactName = reactName;
-    this._targetInst = targetInst;
-    this.type = reactEventType;
-    this.nativeEvent = nativeEvent;
-    this.target = nativeEventTarget;
-    this.currentTarget = null;
+  function createSyntheticEvent(Interface) {
+    /**
+     * Synthetic events are dispatched by event plugins, typically in response to a
+     * top-level event delegation handler.
+     *
+     * These systems should generally use pooling to reduce the frequency of garbage
+     * collection. The system should check `isPersistent` to determine whether the
+     * event should be released into the pool after being dispatched. Users that
+     * need a persisted event should invoke `persist`.
+     *
+     * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
+     * normalizing browser quirks. Subclasses do not necessarily have to implement a
+     * DOM interface; custom application-specific events can also subclass this.
+     */
+    function SyntheticBaseEvent(reactName, reactEventType, targetInst, nativeEvent, nativeEventTarget) {
+      this._reactName = reactName;
+      this._targetInst = targetInst;
+      this.type = reactEventType;
+      this.nativeEvent = nativeEvent;
+      this.target = nativeEventTarget;
+      this.currentTarget = null;
+
+      for (var _propName in Interface) {
+        if (!Interface.hasOwnProperty(_propName)) {
+          continue;
+        }
 
-    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;
@@ -6333,6 +6359,8 @@
       return lastMovementY;
     }
   });
+
+  var SyntheticMouseEvent = createSyntheticEvent(MouseEventInterface);
   /**
    * @interface DragEvent
    * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6341,6 +6369,8 @@
   var DragEventInterface = _assign({}, MouseEventInterface, {
     dataTransfer: 0
   });
+
+  var SyntheticDragEvent = createSyntheticEvent(DragEventInterface);
   /**
    * @interface FocusEvent
    * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6349,6 +6379,8 @@
   var FocusEventInterface = _assign({}, UIEventInterface, {
     relatedTarget: 0
   });
+
+  var SyntheticFocusEvent = createSyntheticEvent(FocusEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
@@ -6360,6 +6392,8 @@
     elapsedTime: 0,
     pseudoElement: 0
   });
+
+  var SyntheticAnimationEvent = createSyntheticEvent(AnimationEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/clipboard-apis/
@@ -6370,6 +6404,8 @@
       return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
     }
   });
+
+  var SyntheticClipboardEvent = createSyntheticEvent(ClipboardEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
@@ -6378,6 +6414,8 @@
   var CompositionEventInterface = _assign({}, EventInterface, {
     data: 0
   });
+
+  var SyntheticCompositionEvent = createSyntheticEvent(CompositionEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
@@ -6385,7 +6423,7 @@
    */
   // Happens to share the same list for now.
 
-  var InputEventInterface = CompositionEventInterface;
+  var SyntheticInputEvent = SyntheticCompositionEvent;
   /**
    * Normalization of deprecated HTML5 `key` values
    * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
@@ -6569,6 +6607,8 @@
       return 0;
     }
   });
+
+  var SyntheticKeyboardEvent = createSyntheticEvent(KeyboardEventInterface);
   /**
    * @interface PointerEvent
    * @see http://www.w3.org/TR/pointerevents/
@@ -6586,6 +6626,8 @@
     pointerType: 0,
     isPrimary: 0
   });
+
+  var SyntheticPointerEvent = createSyntheticEvent(PointerEventInterface);
   /**
    * @interface TouchEvent
    * @see http://www.w3.org/TR/touch-events/
@@ -6601,6 +6643,8 @@
     shiftKey: 0,
     getModifierState: getEventModifierState
   });
+
+  var SyntheticTouchEvent = createSyntheticEvent(TouchEventInterface);
   /**
    * @interface Event
    * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
@@ -6612,6 +6656,8 @@
     elapsedTime: 0,
     pseudoElement: 0
   });
+
+  var SyntheticTransitionEvent = createSyntheticEvent(TransitionEventInterface);
   /**
    * @interface WheelEvent
    * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -6635,6 +6681,8 @@
     deltaMode: 0
   });
 
+  var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
+
   var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
 
   var START_KEYCODE = 229;
@@ -6799,18 +6847,25 @@
       }
     }
 
-    var event = new SyntheticEvent(eventType, domEventName, null, nativeEvent, nativeEventTarget, CompositionEventInterface);
-    accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
+    var listeners = accumulateTwoPhaseListeners(targetInst, eventType);
 
-    if (fallbackData) {
-      // Inject data generated from fallback path into the synthetic event.
-      // This matches the property of native CompositionEventInterface.
-      event.data = fallbackData;
-    } else {
-      var customData = getDataFromCustomEvent(nativeEvent);
+    if (listeners.length > 0) {
+      var event = new SyntheticCompositionEvent(eventType, domEventName, null, nativeEvent, nativeEventTarget);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
 
-      if (customData !== null) {
-        event.data = customData;
+      if (fallbackData) {
+        // Inject data generated from fallback path into the synthetic event.
+        // This matches the property of native CompositionEventInterface.
+        event.data = fallbackData;
+      } else {
+        var customData = getDataFromCustomEvent(nativeEvent);
+
+        if (customData !== null) {
+          event.data = customData;
+        }
       }
     }
   }
@@ -6952,9 +7007,16 @@
       return null;
     }
 
-    var event = new SyntheticEvent('onBeforeInput', 'beforeinput', null, nativeEvent, nativeEventTarget, InputEventInterface);
-    accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
-    event.data = chars;
+    var listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
+
+    if (listeners.length > 0) {
+      var event = new SyntheticInputEvent('onBeforeInput', 'beforeinput', null, nativeEvent, nativeEventTarget);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+      event.data = chars;
+    }
   }
   /**
    * Create an `onBeforeInput` event to match
@@ -7052,10 +7114,17 @@
   }
 
   function createAndAccumulateChangeEvent(dispatchQueue, inst, nativeEvent, target) {
-    var event = new SyntheticEvent('onChange', 'change', null, nativeEvent, target); // Flag this event loop as needing state restore.
-
+    // Flag this event loop as needing state restore.
     enqueueStateRestore(target);
-    accumulateTwoPhaseListeners(inst, dispatchQueue, event);
+    var listeners = accumulateTwoPhaseListeners(inst, 'onChange');
+
+    if (listeners.length > 0) {
+      var event = new SyntheticEvent('onChange', 'change', null, nativeEvent, target);
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
+    }
   }
   /**
    * For IE shims
@@ -7365,13 +7434,13 @@
       return;
     }
 
-    var eventInterface = MouseEventInterface;
+    var SyntheticEventCtor = SyntheticMouseEvent;
     var leaveEventType = 'onMouseLeave';
     var enterEventType = 'onMouseEnter';
     var eventTypePrefix = 'mouse';
 
     if (domEventName === 'pointerout' || domEventName === 'pointerover') {
-      eventInterface = PointerEventInterface;
+      SyntheticEventCtor = SyntheticPointerEvent;
       leaveEventType = 'onPointerLeave';
       enterEventType = 'onPointerEnter';
       eventTypePrefix = 'pointer';
@@ -7379,7 +7448,7 @@
 
     var fromNode = from == null ? win : getNodeFromInstance(from);
     var toNode = to == null ? win : getNodeFromInstance(to);
-    var leave = new SyntheticEvent(leaveEventType, eventTypePrefix + 'leave', from, nativeEvent, nativeEventTarget, eventInterface);
+    var leave = new SyntheticEventCtor(leaveEventType, eventTypePrefix + 'leave', from, nativeEvent, nativeEventTarget);
     leave.target = fromNode;
     leave.relatedTarget = toNode;
     var enter = null; // We should only process this nativeEvent if we are processing
@@ -7388,7 +7457,7 @@
     var nativeTargetInst = getClosestInstanceFromNode(nativeEventTarget);
 
     if (nativeTargetInst === targetInst) {
-      var enterEvent = new SyntheticEvent(enterEventType, eventTypePrefix + 'enter', to, nativeEvent, nativeEventTarget, eventInterface);
+      var enterEvent = new SyntheticEventCtor(enterEventType, eventTypePrefix + 'enter', to, nativeEvent, nativeEventTarget);
       enterEvent.target = toNode;
       enterEvent.relatedTarget = fromNode;
       enter = enterEvent;
@@ -7921,9 +7990,16 @@
 
     if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
       lastSelection = currentSelection;
-      var syntheticEvent = new SyntheticEvent('onSelect', 'select', null, nativeEvent, nativeEventTarget);
-      syntheticEvent.target = activeElement$1;
-      accumulateTwoPhaseListeners(activeElementInst$1, dispatchQueue, syntheticEvent);
+      var listeners = accumulateTwoPhaseListeners(activeElementInst$1, 'onSelect');
+
+      if (listeners.length > 0) {
+        var event = new SyntheticEvent('onSelect', 'select', null, nativeEvent, nativeEventTarget);
+        dispatchQueue.push({
+          event: event,
+          listeners: listeners
+        });
+        event.target = activeElement$1;
+      }
     }
   }
   /**
@@ -8005,7 +8081,7 @@
       return;
     }
 
-    var EventInterface;
+    var SyntheticEventCtor = SyntheticEvent;
     var reactEventType = domEventName;
 
     switch (domEventName) {
@@ -8021,22 +8097,22 @@
 
       case 'keydown':
       case 'keyup':
-        EventInterface = KeyboardEventInterface;
+        SyntheticEventCtor = SyntheticKeyboardEvent;
         break;
 
       case 'focusin':
         reactEventType = 'focus';
-        EventInterface = FocusEventInterface;
+        SyntheticEventCtor = SyntheticFocusEvent;
         break;
 
       case 'focusout':
         reactEventType = 'blur';
-        EventInterface = FocusEventInterface;
+        SyntheticEventCtor = SyntheticFocusEvent;
         break;
 
       case 'beforeblur':
       case 'afterblur':
-        EventInterface = FocusEventInterface;
+        SyntheticEventCtor = SyntheticFocusEvent;
         break;
 
       case 'click':
@@ -8059,7 +8135,7 @@
       case 'mouseout':
       case 'mouseover':
       case 'contextmenu':
-        EventInterface = MouseEventInterface;
+        SyntheticEventCtor = SyntheticMouseEvent;
         break;
 
       case 'drag':
@@ -8070,38 +8146,38 @@
       case 'dragover':
       case 'dragstart':
       case 'drop':
-        EventInterface = DragEventInterface;
+        SyntheticEventCtor = SyntheticDragEvent;
         break;
 
       case 'touchcancel':
       case 'touchend':
       case 'touchmove':
       case 'touchstart':
-        EventInterface = TouchEventInterface;
+        SyntheticEventCtor = SyntheticTouchEvent;
         break;
 
       case ANIMATION_END:
       case ANIMATION_ITERATION:
       case ANIMATION_START:
-        EventInterface = AnimationEventInterface;
+        SyntheticEventCtor = SyntheticAnimationEvent;
         break;
 
       case TRANSITION_END:
-        EventInterface = TransitionEventInterface;
+        SyntheticEventCtor = SyntheticTransitionEvent;
         break;
 
       case 'scroll':
-        EventInterface = UIEventInterface;
+        SyntheticEventCtor = SyntheticUIEvent;
         break;
 
       case 'wheel':
-        EventInterface = WheelEventInterface;
+        SyntheticEventCtor = SyntheticWheelEvent;
         break;
 
       case 'copy':
       case 'cut':
       case 'paste':
-        EventInterface = ClipboardEventInterface;
+        SyntheticEventCtor = SyntheticClipboardEvent;
         break;
 
       case 'gotpointercapture':
@@ -8112,11 +8188,10 @@
       case 'pointerout':
       case 'pointerover':
       case 'pointerup':
-        EventInterface = PointerEventInterface;
+        SyntheticEventCtor = SyntheticPointerEvent;
         break;
     }
 
-    var event = new SyntheticEvent(reactName, reactEventType, null, nativeEvent, nativeEventTarget, EventInterface);
     var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
 
     {
@@ -8124,16 +8199,23 @@
       // 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
+        });
+      }
     }
   }
 
@@ -8247,22 +8329,14 @@
     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);
@@ -8286,26 +8360,14 @@
       });
     }
   }
-  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
@@ -8330,42 +8392,42 @@
       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);
@@ -8379,8 +8441,6 @@
         unsubscribeListener = addEventBubbleListener(targetContainer, domEventName, listener);
       }
     }
-
-    return unsubscribeListener;
   }
 
   function isMatchingRootContainer(grandContainer, targetContainer) {
@@ -8487,19 +8547,12 @@
     };
   }
 
-  function createDispatchEntry(event, listeners) {
-    return {
-      event: event,
-      listeners: listeners
-    };
-  }
-
-  function accumulateSinglePhaseListeners(targetFiber, dispatchQueue, event, inCapturePhase, accumulateTargetOnly) {
-    var bubbled = event._reactName;
-    var captured = bubbled !== null ? bubbled + 'Capture' : null;
+  function accumulateSinglePhaseListeners(targetFiber, reactName, nativeEventType, inCapturePhase, accumulateTargetOnly) {
+    var captureName = reactName !== null ? reactName + 'Capture' : null;
+    var reactEventName = inCapturePhase ? captureName : reactName;
     var listeners = [];
     var instance = targetFiber;
-    var targetType = event.nativeEvent.type; // Accumulate all instances and listeners via the target -> root path.
+    var lastHostComponent = null; // Accumulate all instances and listeners via the target -> root path.
 
     while (instance !== null) {
       var _instance2 = instance,
@@ -8507,22 +8560,14 @@
           tag = _instance2.tag; // Handle listeners that are on HostComponents (i.e. <div>)
 
       if (tag === HostComponent && stateNode !== null) {
-        var currentTarget = stateNode;
-
+        lastHostComponent = stateNode; // createEventHandle listeners
 
-        if (captured !== null && inCapturePhase) {
-          var captureListener = getListener(instance, captured);
 
-          if (captureListener != null) {
-            listeners.push(createDispatchListener(instance, captureListener, currentTarget));
-          }
-        }
+        if (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
@@ -8537,9 +8582,7 @@
       instance = instance.return;
     }
 
-    if (listeners.length !== 0) {
-      dispatchQueue.push(createDispatchEntry(event, listeners));
-    }
+    return listeners;
   } // We should only use this function for:
   // - BeforeInputEventPlugin
   // - ChangeEventPlugin
@@ -8548,9 +8591,8 @@
   // in the bubble phase, so we need to accumulate two
   // phase event listeners (via emulation).
 
-  function accumulateTwoPhaseListeners(targetFiber, dispatchQueue, event) {
-    var bubbled = event._reactName;
-    var captured = bubbled !== null ? bubbled + 'Capture' : null;
+  function accumulateTwoPhaseListeners(targetFiber, reactName) {
+    var captureName = reactName + 'Capture';
     var listeners = [];
     var instance = targetFiber; // Accumulate all instances and listeners via the target -> root path.
 
@@ -8560,31 +8602,24 @@
           tag = _instance3.tag; // Handle listeners that are on HostComponents (i.e. <div>)
 
       if (tag === HostComponent && stateNode !== null) {
-        var currentTarget = stateNode; // Standard React on* listeners, i.e. onClick prop
-
-        if (captured !== null) {
-          var captureListener = getListener(instance, captured);
+        var currentTarget = stateNode;
+        var captureListener = getListener(instance, captureName);
 
-          if (captureListener != null) {
-            listeners.unshift(createDispatchListener(instance, captureListener, currentTarget));
-          }
+        if (captureListener != null) {
+          listeners.unshift(createDispatchListener(instance, captureListener, currentTarget));
         }
 
-        if (bubbled !== null) {
-          var bubbleListener = getListener(instance, bubbled);
+        var bubbleListener = getListener(instance, reactName);
 
-          if (bubbleListener != null) {
-            listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
-          }
+        if (bubbleListener != null) {
+          listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
         }
       }
 
       instance = instance.return;
     }
 
-    if (listeners.length !== 0) {
-      dispatchQueue.push(createDispatchEntry(event, listeners));
-    }
+    return listeners;
   }
 
   function getParent(inst) {
@@ -8695,7 +8730,10 @@
     }
 
     if (listeners.length !== 0) {
-      dispatchQueue.push(createDispatchEntry(event, listeners));
+      dispatchQueue.push({
+        event: event,
+        listeners: listeners
+      });
     }
   } // We should only use this function for:
   // - EnterLeaveEventPlugin
@@ -8715,7 +8753,7 @@
       accumulateEnterLeaveListenersForEvent(dispatchQueue, enterEvent, to, common, true);
     }
   }
-  function getListenerMapKey(domEventName, capture) {
+  function getListenerSetKey(domEventName, capture) {
     return domEventName + "__" + (capture ? 'capture' : 'bubble');
   }
 
@@ -8741,11 +8779,6 @@
 
   {
     warnedUnknownTags = {
-      // Chrome is the only major browser not shipping <time>. But as of July
-      // 2017 it intends to ship it due to widespread usage. We intentionally
-      // *don't* warn for <time> even if it's unrecognized by Chrome because
-      // it soon will be, and many apps have been using it anyway.
-      time: true,
       // There are working polyfills for <dialog>. Let people use it.
       dialog: true,
       // Electron ships a custom <webview> tag to display external web content in
@@ -9556,6 +9589,10 @@
           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') {
@@ -10689,14 +10726,14 @@
   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 = {};
@@ -11124,7 +11161,7 @@
   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);
@@ -11339,7 +11376,7 @@
   }
 
   // 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
@@ -11350,6 +11387,12 @@
   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 () {},
@@ -12071,7 +12114,7 @@
 
       case CaptureUpdate:
         {
-          workInProgress.effectTag = workInProgress.effectTag & ~ShouldCapture | DidCapture;
+          workInProgress.flags = workInProgress.flags & ~ShouldCapture | DidCapture;
         }
       // Intentional fallthrough
 
@@ -12238,7 +12281,7 @@
           var callback = update.callback;
 
           if (callback !== null) {
-            workInProgress.effectTag |= Callback;
+            workInProgress.flags |= Callback;
             var effects = queue.effects;
 
             if (effects === null) {
@@ -12329,11 +12372,6 @@
     }
   }
 
-  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.
@@ -12443,8 +12481,7 @@
     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;
 
@@ -12462,8 +12499,7 @@
     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;
@@ -12482,8 +12518,7 @@
     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;
 
@@ -12878,7 +12913,7 @@
     }
 
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.effectTag |= Update;
+      workInProgress.flags |= Update;
     }
   }
 
@@ -12920,7 +12955,7 @@
       // 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;
@@ -12947,13 +12982,13 @@
       }
 
       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.
 
@@ -13013,13 +13048,13 @@
       // 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;
         }
       }
 
@@ -13047,24 +13082,24 @@
       }
 
       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.
@@ -13269,7 +13304,7 @@
       }
 
       childToDelete.nextEffect = null;
-      childToDelete.effectTag = Deletion;
+      childToDelete.flags = Deletion;
     }
 
     function deleteRemainingChildren(returnFiber, currentFirstChild) {
@@ -13334,7 +13369,7 @@
 
         if (oldIndex < lastPlacedIndex) {
           // This is a move.
-          newFiber.effectTag = Placement;
+          newFiber.flags = Placement;
           return lastPlacedIndex;
         } else {
           // This item can stay in place.
@@ -13342,7 +13377,7 @@
         }
       } else {
         // This is an insertion.
-        newFiber.effectTag = Placement;
+        newFiber.flags = Placement;
         return lastPlacedIndex;
       }
     }
@@ -13351,7 +13386,7 @@
       // 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;
@@ -14325,13 +14360,6 @@
     pop(suspenseStackCursor, fiber);
   }
 
-  // A non-null SuspenseState means that it is blocked for one reason or another.
-  // - A non-null dehydrated field means it's blocked pending hydration.
-  //   - A non-null dehydrated field can use isSuspenseInstancePending or
-  //     isSuspenseInstanceFallback to query the reason for being dehydrated.
-  // - A null dehydrated field means it's blocked by something suspending and
-  //   we're currently showing a fallback instead.
-
   function shouldCaptureSuspense(workInProgress, hasInvisibleParent) {
     // If it was the primary children that just suspended, capture and render the
     // fallback. Otherwise, don't capture and bubble to the next boundary.
@@ -14383,7 +14411,7 @@
       } 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;
@@ -14413,7 +14441,7 @@
     return null;
   }
 
-  var NoEffect$1 =
+  var NoFlags$1 =
   /*  */
   0; // Represents whether effect should fire.
 
@@ -14459,7 +14487,7 @@
     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
@@ -14474,7 +14502,7 @@
   }
 
   function insertNonHydratedInstance(returnFiber, fiber) {
-    fiber.effectTag = fiber.effectTag & ~Hydrating | Placement;
+    fiber.flags = fiber.flags & ~Hydrating | Placement;
 
     {
       switch (returnFiber.tag) {
@@ -15057,7 +15085,7 @@
   }
   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() {
@@ -15528,8 +15556,7 @@
 
         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.
@@ -15548,8 +15575,7 @@
         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.
@@ -15699,14 +15725,14 @@
     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;
@@ -15719,14 +15745,14 @@
         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) {
@@ -15873,61 +15899,61 @@
     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();
 
     {
@@ -15935,43 +15961,46 @@
         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];
   }
 
@@ -16028,7 +16057,7 @@
       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);
@@ -16061,8 +16090,7 @@
     }
 
     var eventTime = requestEventTime();
-    var suspenseConfig = requestCurrentSuspenseConfig();
-    var lane = requestUpdateLane(fiber, suspenseConfig);
+    var lane = requestUpdateLane(fiber);
     var update = {
       lane: lane,
       action: action,
@@ -16257,15 +16285,15 @@
         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';
@@ -16354,15 +16382,15 @@
         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';
@@ -16451,15 +16479,15 @@
         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';
@@ -16548,15 +16576,15 @@
         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';
@@ -16656,17 +16684,17 @@
         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';
@@ -16768,17 +16796,17 @@
         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';
@@ -16880,17 +16908,17 @@
         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';
@@ -17064,7 +17092,7 @@
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
+    workInProgress.flags |= PerformedWork;
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
@@ -17140,7 +17168,7 @@
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
+    workInProgress.flags |= PerformedWork;
     var newChild = createWorkInProgress(currentChild, nextProps);
     newChild.ref = workInProgress.ref;
     newChild.return = workInProgress;
@@ -17206,7 +17234,7 @@
           // 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;
@@ -17305,7 +17333,7 @@
 
   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;
@@ -17324,7 +17352,7 @@
 
     if (current === null && ref !== null || current !== null && current.ref !== ref) {
       // Schedule a Ref effect
-      workInProgress.effectTag |= Ref;
+      workInProgress.flags |= Ref;
     }
   }
 
@@ -17376,7 +17404,7 @@
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
+    workInProgress.flags |= PerformedWork;
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
@@ -17420,7 +17448,7 @@
         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.
 
 
@@ -17454,7 +17482,7 @@
   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
@@ -17501,7 +17529,7 @@
     } // 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
@@ -17592,7 +17620,7 @@
         // 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 {
@@ -17627,7 +17655,7 @@
     } 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);
@@ -17654,7 +17682,7 @@
       _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;
@@ -17746,7 +17774,7 @@
       _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.
 
 
@@ -17779,7 +17807,7 @@
       _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;
@@ -17815,7 +17843,7 @@
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
+    workInProgress.flags |= PerformedWork;
 
     {
       // Support for module components is deprecated and is removed behind a flag.
@@ -17966,7 +17994,8 @@
     return {
       baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes)
     };
-  }
+  } // TODO: Probably should inline this back
+
 
   function shouldRemainOnFallback(suspenseContext, current, workInProgress, renderLanes) {
     // If we're already showing a fallback, there are cases where we need to
@@ -17998,19 +18027,19 @@
 
     {
       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) {
@@ -18057,17 +18086,41 @@
         tryToClaimNextHydratableInstance(workInProgress); // This could've been a dehydrated suspense component.
       }
 
+      var nextPrimaryChildren = nextProps.children;
+      var nextFallbackChildren = nextProps.fallback;
+
       if (showFallback) {
-        var nextPrimaryChildren = nextProps.children;
-        var nextFallbackChildren = nextProps.fallback;
         var fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
         var primaryChildFragment = workInProgress.child;
         primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
         workInProgress.memoizedState = SUSPENDED_MARKER;
         return fallbackFragment;
+      } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+        // This is a CPU-bound tree. Skip this tree and show a placeholder to
+        // unblock the surrounding content. Then immediately retry after the
+        // initial commit.
+        var _fallbackFragment = mountSuspenseFallbackChildren(workInProgress, nextPrimaryChildren, nextFallbackChildren, renderLanes);
+
+        var _primaryChildFragment = workInProgress.child;
+        _primaryChildFragment.memoizedState = mountSuspenseOffscreenState(renderLanes);
+        workInProgress.memoizedState = SUSPENDED_MARKER; // Since nothing actually suspended, there will nothing to ping this to
+        // get it started back up to attempt the next item. While in terms of
+        // priority this work has the same priority as this current render, it's
+        // not part of the same transition once the transition has committed. If
+        // it's sync, we still want to yield so that it can be painted.
+        // Conceptually, this is really the same as pinging. We can use any
+        // RetryLane even if it's the one currently rendering since we're leaving
+        // it behind on this node.
+
+        workInProgress.lanes = SomeRetryLane;
+
+        {
+          markSpawnedWork(SomeRetryLane);
+        }
+
+        return _fallbackFragment;
       } else {
-        var _nextPrimaryChildren = nextProps.children;
-        return mountSuspensePrimaryChildren(workInProgress, _nextPrimaryChildren, renderLanes);
+        return mountSuspensePrimaryChildren(workInProgress, nextPrimaryChildren, renderLanes);
       }
     } else {
       // This is an update.
@@ -18079,37 +18132,37 @@
 
         if (showFallback) {
           var _nextFallbackChildren2 = nextProps.fallback;
-          var _nextPrimaryChildren3 = nextProps.children;
+          var _nextPrimaryChildren2 = nextProps.children;
 
-          var _fallbackChildFragment = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren3, _nextFallbackChildren2, renderLanes);
+          var _fallbackChildFragment = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren2, _nextFallbackChildren2, renderLanes);
 
-          var _primaryChildFragment2 = workInProgress.child;
+          var _primaryChildFragment3 = workInProgress.child;
           var prevOffscreenState = current.child.memoizedState;
-          _primaryChildFragment2.memoizedState = prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
-          _primaryChildFragment2.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes);
+          _primaryChildFragment3.memoizedState = prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+          _primaryChildFragment3.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes);
           workInProgress.memoizedState = SUSPENDED_MARKER;
           return _fallbackChildFragment;
         } else {
-          var _nextPrimaryChildren4 = nextProps.children;
+          var _nextPrimaryChildren3 = nextProps.children;
 
-          var _primaryChildFragment3 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren4, renderLanes);
+          var _primaryChildFragment4 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren3, renderLanes);
 
           workInProgress.memoizedState = null;
-          return _primaryChildFragment3;
+          return _primaryChildFragment4;
         }
       } else {
         // The current tree is not already showing a fallback.
         if (showFallback) {
           // Timed out.
           var _nextFallbackChildren3 = nextProps.fallback;
-          var _nextPrimaryChildren5 = nextProps.children;
+          var _nextPrimaryChildren4 = nextProps.children;
 
-          var _fallbackChildFragment2 = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren5, _nextFallbackChildren3, renderLanes);
+          var _fallbackChildFragment2 = updateSuspenseFallbackChildren(current, workInProgress, _nextPrimaryChildren4, _nextFallbackChildren3, renderLanes);
 
-          var _primaryChildFragment4 = workInProgress.child;
+          var _primaryChildFragment5 = workInProgress.child;
           var _prevOffscreenState = current.child.memoizedState;
-          _primaryChildFragment4.memoizedState = _prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(_prevOffscreenState, renderLanes);
-          _primaryChildFragment4.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes); // Skip the primary children, and continue working on the
+          _primaryChildFragment5.memoizedState = _prevOffscreenState === null ? mountSuspenseOffscreenState(renderLanes) : updateSuspenseOffscreenState(_prevOffscreenState, renderLanes);
+          _primaryChildFragment5.childLanes = getRemainingWorkInPrimaryTree(current, renderLanes); // Skip the primary children, and continue working on the
           // fallback children.
 
           workInProgress.memoizedState = SUSPENDED_MARKER;
@@ -18117,12 +18170,12 @@
         } else {
           // Still haven't timed out. Continue rendering the children, like we
           // normally do.
-          var _nextPrimaryChildren6 = nextProps.children;
+          var _nextPrimaryChildren5 = nextProps.children;
 
-          var _primaryChildFragment5 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren6, renderLanes);
+          var _primaryChildFragment6 = updateSuspensePrimaryChildren(current, workInProgress, _nextPrimaryChildren5, renderLanes);
 
           workInProgress.memoizedState = null;
-          return _primaryChildFragment5;
+          return _primaryChildFragment6;
         }
       }
     }
@@ -18205,7 +18258,7 @@
     if (currentFallbackChildFragment !== null) {
       // Delete the fallback child fragment
       currentFallbackChildFragment.nextEffect = null;
-      currentFallbackChildFragment.effectTag = Deletion;
+      currentFallbackChildFragment.flags = Deletion;
       workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
     }
 
@@ -18276,7 +18329,7 @@
       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;
@@ -18514,9 +18567,9 @@
 
     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
@@ -18726,7 +18779,7 @@
     } // React DevTools reads this flag.
 
 
-    workInProgress.effectTag |= PerformedWork;
+    workInProgress.flags |= PerformedWork;
     reconcileChildren(current, workInProgress, newChildren, renderLanes);
     return workInProgress.child;
   }
@@ -18811,8 +18864,8 @@
       }
 
       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;
     }
@@ -18880,7 +18933,7 @@
               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,
 
@@ -18934,7 +18987,7 @@
 
           case SuspenseListComponent:
             {
-              var didSuspendBefore = (current.effectTag & DidCapture) !== NoEffect;
+              var didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
 
               var _hasChildWork = includesSomeLane(renderLanes, workInProgress.childLanes);
 
@@ -18951,7 +19004,7 @@
                 // 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.
@@ -18997,7 +19050,7 @@
 
         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;
@@ -19171,11 +19224,11 @@
   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;
@@ -19390,7 +19443,7 @@
               // 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;
             }
           }
 
@@ -19500,7 +19553,7 @@
           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.
 
@@ -19559,7 +19612,7 @@
               // 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;
             }
           }
 
@@ -19605,7 +19658,7 @@
             return null;
           }
 
-          var didSuspendAlready = (workInProgress.effectTag & DidCapture) !== NoEffect;
+          var didSuspendAlready = (workInProgress.flags & DidCapture) !== NoFlags;
           var renderedTail = renderState.rendering;
 
           if (renderedTail === null) {
@@ -19620,7 +19673,7 @@
               // 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;
@@ -19630,7 +19683,7 @@
 
                   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
@@ -19648,7 +19701,7 @@
 
                     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.
@@ -19675,7 +19728,7 @@
                 // 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
@@ -19702,7 +19755,7 @@
               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.
 
@@ -19710,7 +19763,7 @@
 
                 if (_newThennables !== null) {
                   workInProgress.updateQueue = _newThennables;
-                  workInProgress.effectTag |= Update;
+                  workInProgress.flags |= Update;
                 }
 
                 cutOffTailIfNeeded(renderState, true); // This might have been modified.
@@ -19736,7 +19789,7 @@
                 // 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
@@ -19832,7 +19885,7 @@
             var nextIsHidden = _nextState !== null;
 
             if (prevIsHidden !== nextIsHidden && newProps.mode !== 'unstable-defer-without-hiding') {
-              workInProgress.effectTag |= Update;
+              workInProgress.flags |= Update;
             }
           }
 
@@ -19857,10 +19910,10 @@
             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);
@@ -19877,15 +19930,15 @@
           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;
         }
 
@@ -19900,10 +19953,10 @@
         {
           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);
@@ -20187,7 +20240,7 @@
 
   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;
 
@@ -20238,12 +20291,12 @@
 
 
           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;
@@ -20293,8 +20346,8 @@
           // 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,
@@ -20311,7 +20364,7 @@
 
 
           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
@@ -20338,7 +20391,7 @@
         case HostRoot:
           {
             var _errorInfo = value;
-            workInProgress.effectTag |= ShouldCapture;
+            workInProgress.flags |= ShouldCapture;
             var lane = pickArbitraryLane(rootRenderLanes);
             workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
 
@@ -20354,8 +20407,8 @@
           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);
 
@@ -20392,18 +20445,18 @@
   }; // Capture errors so they don't interrupt unmounting.
 
 
-  function safelyCallComponentWillUnmount(current, instance, nearestMountedAncestor) {
+  function safelyCallComponentWillUnmount(current, instance) {
     {
       invokeGuardedCallback(null, callComponentWillUnmountWithTimer, null, current, instance);
 
       if (hasCaughtError()) {
         var unmountError = clearCaughtError();
-        captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+        captureCommitPhaseError(current, unmountError);
       }
     }
   }
 
-  function safelyDetachRef(current, nearestMountedAncestor) {
+  function safelyDetachRef(current) {
     var ref = current.ref;
 
     if (ref !== null) {
@@ -20413,7 +20466,7 @@
 
           if (hasCaughtError()) {
             var refError = clearCaughtError();
-            captureCommitPhaseError(current, nearestMountedAncestor, refError);
+            captureCommitPhaseError(current, refError);
           }
         }
       } else {
@@ -20422,13 +20475,13 @@
     }
   }
 
-  function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
+  function safelyCallDestroy(current, destroy) {
     {
       invokeGuardedCallback(null, destroy, null);
 
       if (hasCaughtError()) {
         var error = clearCaughtError();
-        captureCommitPhaseError(current, nearestMountedAncestor, error);
+        captureCommitPhaseError(current, error);
       }
     }
   }
@@ -20445,7 +20498,7 @@
 
       case ClassComponent:
         {
-          if (finishedWork.effectTag & Snapshot) {
+          if (finishedWork.flags & Snapshot) {
             if (current !== null) {
               var prevProps = current.memoizedProps;
               var prevState = current.memoizedState;
@@ -20487,7 +20540,7 @@
       case HostRoot:
         {
           {
-            if (finishedWork.effectTag & Snapshot) {
+            if (finishedWork.flags & Snapshot) {
               var root = finishedWork.stateNode;
               clearContainer(root.containerInfo);
             }
@@ -20586,7 +20639,7 @@
             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);
         }
@@ -20619,7 +20672,7 @@
         {
           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.
@@ -20723,7 +20776,7 @@
           // 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);
@@ -20877,7 +20930,7 @@
   // interrupt deletion, so it's okay
 
 
-  function commitUnmount(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+  function commitUnmount(finishedRoot, current, renderPriorityLevel) {
     onCommitUnmount(current);
 
     switch (current.tag) {
@@ -20902,11 +20955,11 @@
                     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);
                     }
                   }
                 }
@@ -20921,11 +20974,11 @@
 
       case ClassComponent:
         {
-          safelyDetachRef(current, nearestMountedAncestor);
+          safelyDetachRef(current);
           var instance = current.stateNode;
 
           if (typeof instance.componentWillUnmount === 'function') {
-            safelyCallComponentWillUnmount(current, instance, nearestMountedAncestor);
+            safelyCallComponentWillUnmount(current, instance);
           }
 
           return;
@@ -20933,7 +20986,7 @@
 
       case HostComponent:
         {
-          safelyDetachRef(current, nearestMountedAncestor);
+          safelyDetachRef(current);
           return;
         }
 
@@ -20943,7 +20996,7 @@
           // We are also not using this parent because
           // the portal will get pushed immediately.
           {
-            unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+            unmountHostComponents(finishedRoot, current);
           }
 
           return;
@@ -20969,7 +21022,7 @@
     }
   }
 
-  function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor, renderPriorityLevel) {
+  function commitNestedUnmounts(finishedRoot, root, renderPriorityLevel) {
     // While we're inside a removed host node we don't want to call
     // removeChild on the inner nodes because they're removed by the top
     // call anyway. We also want to call componentWillUnmount on all
@@ -20978,7 +21031,7 @@
     var node = root;
 
     while (true) {
-      commitUnmount(finishedRoot, node, nearestMountedAncestor); // Visit children because they may contain more composite or host nodes.
+      commitUnmount(finishedRoot, node); // Visit children because they may contain more composite or host nodes.
       // Skip portals because commitUnmount() currently visits them recursively.
 
       if (node.child !== null && ( // If we use mutation we drill down into portals using commitUnmount above.
@@ -21083,7 +21136,7 @@
       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.
@@ -21099,7 +21152,7 @@
       } // 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;
       }
@@ -21144,11 +21197,11 @@
 
     }
 
-    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
@@ -21215,7 +21268,7 @@
     }
   }
 
-  function unmountHostComponents(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+  function unmountHostComponents(finishedRoot, current, renderPriorityLevel) {
     // We only have the top Fiber that was deleted but we need to recurse down its
     // children to find all the terminal nodes.
     var node = current; // Each iteration, currentParent is populated with node's host parent if not
@@ -21264,7 +21317,7 @@
       }
 
       if (node.tag === HostComponent || node.tag === HostText) {
-        commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor); // After all the children have unmounted, it is now safe to remove the
+        commitNestedUnmounts(finishedRoot, node); // After all the children have unmounted, it is now safe to remove the
         // node from the tree.
 
         if (currentParentIsContainer) {
@@ -21285,7 +21338,7 @@
           continue;
         }
       } else {
-        commitUnmount(finishedRoot, node, nearestMountedAncestor); // Visit children because we may find more host components below.
+        commitUnmount(finishedRoot, node); // Visit children because we may find more host components below.
 
         if (node.child !== null) {
           node.child.return = node;
@@ -21317,11 +21370,11 @@
     }
   }
 
-  function commitDeletion(finishedRoot, current, nearestMountedAncestor, renderPriorityLevel) {
+  function commitDeletion(finishedRoot, current, renderPriorityLevel) {
     {
       // Recursively delete all host nodes from the parent.
       // Detach refs and call componentWillUnmount() on the whole subtree.
-      unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
+      unmountHostComponents(finishedRoot, current);
     }
 
     var alternate = current.alternate;
@@ -21726,7 +21779,7 @@
     currentEventTime = now();
     return currentEventTime;
   }
-  function requestUpdateLane(fiber, suspenseConfig) {
+  function requestUpdateLane(fiber) {
     // Special cases
     var mode = fiber.mode;
 
@@ -21754,10 +21807,9 @@
       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;
       }
@@ -21911,7 +21963,7 @@
     }
 
     {
-      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.
@@ -21928,7 +21980,7 @@
         alternate.childLanes = mergeLanes(alternate.childLanes, lane);
       } else {
         {
-          if ((parent.effectTag & (Placement | Hydrating)) !== NoEffect) {
+          if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
             warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
           }
         }
@@ -22183,7 +22235,7 @@
           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.
@@ -22782,7 +22834,7 @@
       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;
 
@@ -22806,7 +22858,7 @@
         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.
@@ -22828,11 +22880,11 @@
           // 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 {
@@ -22854,7 +22906,7 @@
           // 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;
         }
@@ -22877,7 +22929,7 @@
         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;
         }
       }
 
@@ -23031,7 +23083,7 @@
 
     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
@@ -23076,7 +23128,7 @@
             }
 
             var error = clearCaughtError();
-            captureCommitPhaseError(nextEffect, nextEffect.return, error);
+            captureCommitPhaseError(nextEffect, error);
             nextEffect = nextEffect.nextEffect;
           }
         }
@@ -23107,7 +23159,7 @@
 
             var _error = clearCaughtError();
 
-            captureCommitPhaseError(nextEffect, nextEffect.return, _error);
+            captureCommitPhaseError(nextEffect, _error);
             nextEffect = nextEffect.nextEffect;
           }
         }
@@ -23137,7 +23189,7 @@
 
             var _error2 = clearCaughtError();
 
-            captureCommitPhaseError(nextEffect, nextEffect.return, _error2);
+            captureCommitPhaseError(nextEffect, _error2);
             nextEffect = nextEffect.nextEffect;
           }
         }
@@ -23183,7 +23235,7 @@
         var nextNextEffect = nextEffect.nextEffect;
         nextEffect.nextEffect = null;
 
-        if (nextEffect.effectTag & Deletion) {
+        if (nextEffect.flags & Deletion) {
           detachFiberAfterEffects(nextEffect);
         }
 
@@ -23273,7 +23325,7 @@
       var current = nextEffect.alternate;
 
       if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
-        if ((nextEffect.effectTag & Deletion) !== NoEffect) {
+        if ((nextEffect.flags & Deletion) !== NoFlags) {
           if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
             shouldFireAfterActiveInstanceBlur = true;
           }
@@ -23285,15 +23337,15 @@
         }
       }
 
-      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) {
@@ -23313,13 +23365,13 @@
     // 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) {
@@ -23331,9 +23383,9 @@
       // 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
@@ -23341,7 +23393,7 @@
             // 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;
           }
 
@@ -23351,7 +23403,7 @@
             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);
@@ -23360,13 +23412,13 @@
 
         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);
@@ -23382,7 +23434,7 @@
 
         case Deletion:
           {
-            commitDeletion(root, nextEffect, nextEffect.return);
+            commitDeletion(root, nextEffect);
             break;
           }
       }
@@ -23397,15 +23449,15 @@
 
     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);
         }
       }
@@ -23443,11 +23495,11 @@
     pendingPassiveHookEffectsUnmount.push(effect, fiber);
 
     {
-      fiber.effectTag |= PassiveUnmountPendingDev;
+      fiber.flags |= PassiveUnmountPendingDev;
       var alternate = fiber.alternate;
 
       if (alternate !== null) {
-        alternate.effectTag |= PassiveUnmountPendingDev;
+        alternate.flags |= PassiveUnmountPendingDev;
       }
     }
 
@@ -23505,11 +23557,11 @@
       _effect.destroy = undefined;
 
       {
-        fiber.effectTag &= ~PassiveUnmountPendingDev;
+        fiber.flags &= ~PassiveUnmountPendingDev;
         var alternate = fiber.alternate;
 
         if (alternate !== null) {
-          alternate.effectTag &= ~PassiveUnmountPendingDev;
+          alternate.flags &= ~PassiveUnmountPendingDev;
         }
       }
 
@@ -23529,7 +23581,7 @@
             }
 
             var error = clearCaughtError();
-            captureCommitPhaseError(fiber, fiber.return, error);
+            captureCommitPhaseError(fiber, error);
           }
 
           resetCurrentFiber();
@@ -23561,7 +23613,7 @@
 
           var _error4 = clearCaughtError();
 
-          captureCommitPhaseError(_fiber, _fiber.return, _error4);
+          captureCommitPhaseError(_fiber, _error4);
         }
 
         resetCurrentFiber();
@@ -23578,7 +23630,7 @@
 
       effect.nextEffect = null;
 
-      if (effect.effectTag & Deletion) {
+      if (effect.flags & Deletion) {
         detachFiberAfterEffects(effect);
       }
 
@@ -23636,7 +23688,7 @@
     }
   }
 
-  function captureCommitPhaseError(sourceFiber, nearestMountedAncestor, error) {
+  function captureCommitPhaseError(sourceFiber, error) {
     if (sourceFiber.tag === HostRoot) {
       // Error was thrown at the root. There is no parent, so the root
       // itself should capture it.
@@ -23644,11 +23696,7 @@
       return;
     }
 
-    var fiber = null;
-
-    {
-      fiber = sourceFiber.return;
-    }
+    var fiber = sourceFiber.return;
 
     while (fiber !== null) {
       if (fiber.tag === HostRoot) {
@@ -23869,7 +23917,7 @@
       // 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.
@@ -24214,27 +24262,15 @@
       });
     }
   } // `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;
@@ -24677,7 +24713,7 @@
     this.dependencies = null;
     this.mode = mode; // Effects
 
-    this.effectTag = NoEffect;
+    this.flags = NoFlags;
     this.nextEffect = null;
     this.firstEffect = null;
     this.lastEffect = null;
@@ -24799,7 +24835,7 @@
       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;
@@ -24870,7 +24906,7 @@
     // 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;
@@ -25218,7 +25254,7 @@
     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;
@@ -25436,8 +25472,7 @@
       }
     }
 
-    var suspenseConfig = requestCurrentSuspenseConfig();
-    var lane = requestUpdateLane(current$1, suspenseConfig);
+    var lane = requestUpdateLane(current$1);
 
     var context = getContextForSubtree(parentComponent);
 
@@ -25547,7 +25582,7 @@
     }
 
     var eventTime = requestEventTime();
-    var lane = requestUpdateLane(fiber, null);
+    var lane = requestUpdateLane(fiber);
     scheduleUpdateOnFiber(fiber, lane, eventTime);
     markRetryLaneIfNotHydrated(fiber, lane);
   }
@@ -25581,29 +25616,96 @@
     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;
@@ -25613,10 +25715,51 @@
         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.
@@ -25638,6 +25781,26 @@
       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);
     };
@@ -25674,7 +25837,11 @@
       rendererPackageName: devToolsConfig.rendererPackageName,
       rendererConfig: devToolsConfig.rendererConfig,
       overrideHookState: overrideHookState,
+      overrideHookStateDeletePath: overrideHookStateDeletePath,
+      overrideHookStateRenamePath: overrideHookStateRenamePath,
       overrideProps: overrideProps,
+      overridePropsDeletePath: overridePropsDeletePath,
+      overridePropsRenamePath: overridePropsRenamePath,
       setSuspenseHandler: setSuspenseHandler,
       scheduleUpdate: scheduleUpdate,
       currentDispatcherRef: ReactCurrentDispatcher,
@@ -26086,7 +26253,8 @@
   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,