@office-iss/react-native-win32 0.67.0-preview.2 → 0.68.0-preview.2

package/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js

@@ -7,14 +7,25 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<e138d52a3cd55cb99fd1f36b574256a6>>
+ * @generated SignedSource<<3ab224d749aabfd2af41824a03d0c6ce>>
  */
 
 'use strict';
 
 if (__DEV__) {
   (function() {
-"use strict";
+
+          'use strict';
+
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+}
+          "use strict";
 
 var React = require("react");
 require("react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore");
@@ -145,7 +156,7 @@ var invokeGuardedCallbackImpl = invokeGuardedCallbackProd;
       // when we call document.createEvent(). However this can cause confusing
       // errors: https://github.com/facebook/create-react-app/issues/3482
       // So we preemptively throw with a better message instead.
-      if (typeof document === "undefined") {
+      if (typeof document === "undefined" || document === null) {
         throw new Error(
           "The `document` global was defined when React was initialized, but is not " +
             "defined anymore. This can happen in a test environment if a component " +
@@ -2887,7 +2898,6 @@ var REACT_SUSPENSE_LIST_TYPE = 0xead8;
 var REACT_MEMO_TYPE = 0xead3;
 var REACT_LAZY_TYPE = 0xead4;
 var REACT_SCOPE_TYPE = 0xead7;
-var REACT_OPAQUE_ID_TYPE = 0xeae0;
 var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
 var REACT_OFFSCREEN_TYPE = 0xeae2;
 var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
@@ -2908,7 +2918,6 @@ if (typeof Symbol === "function" && Symbol.for) {
   REACT_MEMO_TYPE = symbolFor("react.memo");
   REACT_LAZY_TYPE = symbolFor("react.lazy");
   REACT_SCOPE_TYPE = symbolFor("react.scope");
-  REACT_OPAQUE_ID_TYPE = symbolFor("react.opaque.id");
   REACT_DEBUG_TRACING_MODE_TYPE = symbolFor("react.debug_trace_mode");
   REACT_OFFSCREEN_TYPE = symbolFor("react.offscreen");
   REACT_LEGACY_HIDDEN_TYPE = symbolFor("react.legacy_hidden");
@@ -3141,12 +3150,13 @@ function getComponentNameFromFiber(fiber) {
 
 var enablePersistentOffscreenHostContainer =
   dynamicFlags.enablePersistentOffscreenHostContainer; // The rest of the flags are static for better dead code elimination.
-var enableSchedulingProfiler = false;
+var enableSchedulingProfiler = true;
 var enableProfilerTimer = true;
 var enableProfilerCommitHooks = true;
 var enableLazyElements = false;
 var warnAboutStringRefs = false;
 var warnOnSubscriptionInsideStartTransition = false;
+var enableSuspenseAvoidThisFallback = false;
 var enableNewReconciler = false;
 var enableLazyContextPropagation = false;
 
@@ -3179,6 +3189,9 @@ var Callback =
 var DidCapture =
   /*                   */
   128;
+var ForceClientRender =
+  /*            */
+  256;
 var Ref =
   /*                          */
   512;
@@ -3216,6 +3229,9 @@ var ShouldCapture =
 var ForceUpdateForLegacySuspense =
   /* */
   131072;
+var Forked =
+  /*                       */
+  1048576; // Static tags describe aspects of a fiber that are not specific to a render,
 // e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
 // This enables us to defer more work in the unmount case,
 // since we can defer traversing the tree during layout to look for Passive effects,
@@ -3223,22 +3239,22 @@ var ForceUpdateForLegacySuspense =
 
 var RefStatic =
   /*                    */
-  1048576;
+  2097152;
 var LayoutStatic =
   /*                 */
-  2097152;
+  4194304;
 var PassiveStatic =
   /*                */
-  4194304; // These flags allow us to traverse to fibers that have effects on mount
+  8388608; // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
 
 var MountLayoutDev =
   /*               */
-  8388608;
+  16777216;
 var MountPassiveDev =
   /*              */
-  16777216; // Groups of flags that are used in the commit phase to skip over trees that
+  33554432; // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
 
 var BeforeMutationMask = // TODO: Remove Update flag from before mutation phase by re-landing Visibility
@@ -4236,6 +4252,7 @@ function reenableLogs() {
 
 var rendererID = null;
 var injectedHook = null;
+var injectedProfilingHooks = null;
 var hasLoggedError = false;
 var isDevToolsPresent = typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined";
 function injectInternals(internals) {
@@ -4266,7 +4283,12 @@ function injectInternals(internals) {
   }
 
   try {
-    rendererID = hook.inject(internals); // We have successfully injected, so now it is safe to set up hooks.
+    rendererID = hook.inject(
+      Object.assign({}, internals, {
+        getLaneLabelMap: getLaneLabelMap,
+        injectProfilingHooks: injectProfilingHooks
+      })
+    ); // We have successfully injected, so now it is safe to set up hooks.
 
     injectedHook = hook;
   } catch (err) {
@@ -4393,6 +4415,272 @@ function setIsStrictModeForDevtools(newIsStrictMode) {
       reenableLogs();
     }
   }
+} // Profiler API hooks
+
+function injectProfilingHooks(profilingHooks) {
+  injectedProfilingHooks = profilingHooks;
+}
+
+function getLaneLabelMap() {
+  var map = new Map();
+  var lane = 1;
+
+  for (var index = 0; index < TotalLanes; index++) {
+    var label = getLabelForLane(lane);
+    map.set(lane, label);
+    lane *= 2;
+  }
+
+  return map;
+}
+
+function markCommitStarted(lanes) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markCommitStarted === "function"
+    ) {
+      injectedProfilingHooks.markCommitStarted(lanes);
+    }
+  }
+}
+function markCommitStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markCommitStopped === "function"
+    ) {
+      injectedProfilingHooks.markCommitStopped();
+    }
+  }
+}
+function markComponentRenderStarted(fiber) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentRenderStarted === "function"
+    ) {
+      injectedProfilingHooks.markComponentRenderStarted(fiber);
+    }
+  }
+}
+function markComponentRenderStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentRenderStopped === "function"
+    ) {
+      injectedProfilingHooks.markComponentRenderStopped();
+    }
+  }
+}
+function markComponentPassiveEffectMountStarted(fiber) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectMountStarted ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectMountStarted(fiber);
+    }
+  }
+}
+function markComponentPassiveEffectMountStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectMountStopped ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectMountStopped();
+    }
+  }
+}
+function markComponentPassiveEffectUnmountStarted(fiber) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectUnmountStarted ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectUnmountStarted(fiber);
+    }
+  }
+}
+function markComponentPassiveEffectUnmountStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentPassiveEffectUnmountStopped ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentPassiveEffectUnmountStopped();
+    }
+  }
+}
+function markComponentLayoutEffectMountStarted(fiber) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectMountStarted ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectMountStarted(fiber);
+    }
+  }
+}
+function markComponentLayoutEffectMountStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectMountStopped ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectMountStopped();
+    }
+  }
+}
+function markComponentLayoutEffectUnmountStarted(fiber) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectUnmountStarted ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectUnmountStarted(fiber);
+    }
+  }
+}
+function markComponentLayoutEffectUnmountStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentLayoutEffectUnmountStopped ===
+        "function"
+    ) {
+      injectedProfilingHooks.markComponentLayoutEffectUnmountStopped();
+    }
+  }
+}
+function markComponentErrored(fiber, thrownValue, lanes) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentErrored === "function"
+    ) {
+      injectedProfilingHooks.markComponentErrored(fiber, thrownValue, lanes);
+    }
+  }
+}
+function markComponentSuspended(fiber, wakeable, lanes) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markComponentSuspended === "function"
+    ) {
+      injectedProfilingHooks.markComponentSuspended(fiber, wakeable, lanes);
+    }
+  }
+}
+function markLayoutEffectsStarted(lanes) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markLayoutEffectsStarted === "function"
+    ) {
+      injectedProfilingHooks.markLayoutEffectsStarted(lanes);
+    }
+  }
+}
+function markLayoutEffectsStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markLayoutEffectsStopped === "function"
+    ) {
+      injectedProfilingHooks.markLayoutEffectsStopped();
+    }
+  }
+}
+function markPassiveEffectsStarted(lanes) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markPassiveEffectsStarted === "function"
+    ) {
+      injectedProfilingHooks.markPassiveEffectsStarted(lanes);
+    }
+  }
+}
+function markPassiveEffectsStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markPassiveEffectsStopped === "function"
+    ) {
+      injectedProfilingHooks.markPassiveEffectsStopped();
+    }
+  }
+}
+function markRenderStarted(lanes) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderStarted === "function"
+    ) {
+      injectedProfilingHooks.markRenderStarted(lanes);
+    }
+  }
+}
+function markRenderYielded() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderYielded === "function"
+    ) {
+      injectedProfilingHooks.markRenderYielded();
+    }
+  }
+}
+function markRenderStopped() {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderStopped === "function"
+    ) {
+      injectedProfilingHooks.markRenderStopped();
+    }
+  }
+}
+function markRenderScheduled(lane) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markRenderScheduled === "function"
+    ) {
+      injectedProfilingHooks.markRenderScheduled(lane);
+    }
+  }
+}
+function markForceUpdateScheduled(fiber, lane) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markForceUpdateScheduled === "function"
+    ) {
+      injectedProfilingHooks.markForceUpdateScheduled(fiber, lane);
+    }
+  }
+}
+function markStateUpdateScheduled(fiber, lane) {
+  {
+    if (
+      injectedProfilingHooks !== null &&
+      typeof injectedProfilingHooks.markStateUpdateScheduled === "function"
+    ) {
+      injectedProfilingHooks.markStateUpdateScheduled(fiber, lane);
+    }
+  }
 }
 
 var NoMode =
@@ -4418,6 +4706,24 @@ var ConcurrentUpdatesByDefaultMode =
   /* */
   32;
 
+// TODO: This is pretty well supported by browsers. Maybe we can drop it.
+var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback; // Count leading zeros.
+// Based on:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
+
+var log = Math.log;
+var LN2 = Math.LN2;
+
+function clz32Fallback(x) {
+  var asUint = x >>> 0;
+
+  if (asUint === 0) {
+    return 32;
+  }
+
+  return (31 - ((log(asUint) / LN2) | 0)) | 0;
+}
+
 // If those values are changed that package should be rebuilt and redeployed.
 
 var TotalLanes = 31;
@@ -4529,7 +4835,60 @@ var IdleLane =
   536870912;
 var OffscreenLane =
   /*                   */
-  1073741824; // This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+  1073741824; // This function is used for the experimental timeline (react-devtools-timeline)
+// It should be kept in sync with the Lanes values above.
+
+function getLabelForLane(lane) {
+  {
+    if (lane & SyncLane) {
+      return "Sync";
+    }
+
+    if (lane & InputContinuousHydrationLane) {
+      return "InputContinuousHydration";
+    }
+
+    if (lane & InputContinuousLane) {
+      return "InputContinuous";
+    }
+
+    if (lane & DefaultHydrationLane) {
+      return "DefaultHydration";
+    }
+
+    if (lane & DefaultLane) {
+      return "Default";
+    }
+
+    if (lane & TransitionHydrationLane) {
+      return "TransitionHydration";
+    }
+
+    if (lane & TransitionLanes) {
+      return "Transition";
+    }
+
+    if (lane & RetryLanes) {
+      return "Retry";
+    }
+
+    if (lane & SelectiveHydrationLane) {
+      return "SelectiveHydration";
+    }
+
+    if (lane & IdleHydrationLane) {
+      return "IdleHydration";
+    }
+
+    if (lane & IdleLane) {
+      return "Idle";
+    }
+
+    if (lane & OffscreenLane) {
+      return "Offscreen";
+    }
+  }
+}
 var NoTimestamp = -1;
 var nextTransitionLane = TransitionLane1;
 var nextRetryLane = RetryLane1;
@@ -5007,7 +5366,6 @@ function markRootFinished(root, remainingLanes) {
   root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;
   root.entangledLanes &= remainingLanes;
-
   var entanglements = root.entanglements;
   var eventTimes = root.eventTimes;
   var expirationTimes = root.expirationTimes; // Clear the lanes that no longer have pending work
@@ -5096,20 +5454,6 @@ function movePendingFibersToMemoized(root, lanes) {
     lanes &= ~lane;
   }
 }
-var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback; // Count leading zeros. Only used on lanes, so assume input is an integer.
-// Based on:
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
-
-var log = Math.log;
-var LN2 = Math.LN2;
-
-function clz32Fallback(lanes) {
-  if (lanes === 0) {
-    return 32;
-  }
-
-  return (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
 
 var DiscreteEventPriority = SyncLane;
 var ContinuousEventPriority = InputContinuousLane;
@@ -5535,9 +5879,6 @@ function clearContainer(container) {
 function unhideTextInstance(textInstance, text) {
   throw new Error("Not yet implemented.");
 }
-function makeClientIdInDEV(warnOnAccessInDEV) {
-  throw new Error("Not yet implemented");
-}
 function preparePortalMount(portalInstance) {
   // noop
 }
@@ -6173,13 +6514,6 @@ function flushSyncCallbacks() {
   return null;
 }
 
-var ReactVersion = "18.0.0-afcb9cdc9-20211008";
-
-function markComponentRenderStopped() {}
-function markComponentErrored(fiber, thrownValue, lanes) {}
-
-function markComponentSuspended(fiber, wakeable, lanes) {}
-
 var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
 var NoTransition = 0;
 function requestCurrentTransition() {
@@ -6214,9 +6548,11 @@ function shallowEqual(objA, objB) {
   } // Test for A's keys different from B.
 
   for (var i = 0; i < keysA.length; i++) {
+    var currentKey = keysA[i];
+
     if (
-      !hasOwnProperty.call(objB, keysA[i]) ||
-      !objectIs(objA[keysA[i]], objB[keysA[i]])
+      !hasOwnProperty.call(objB, currentKey) ||
+      !objectIs(objA[currentKey], objB[currentKey])
     ) {
       return false;
     }
@@ -6323,11 +6659,6 @@ function setIsRendering(rendering) {
     isRendering = rendering;
   }
 }
-function getIsRendering() {
-  {
-    return isRendering;
-  }
-}
 
 var ReactStrictModeWarnings = {
   recordUnsafeLifecycleWarnings: function(fiber, instance) {},
@@ -6687,7 +7018,6 @@ var ReactStrictModeWarnings = {
  * of the `value` object).
  */
 // $FlowFixMe only called in DEV, so void return is not possible.
-
 function typeName(value) {
   {
     // toStringTag is needed for namespaced types like Temporal.Instant
@@ -6702,17 +7032,6 @@ function typeName(value) {
 
 function willCoercionThrow(value) {
   {
-    if (
-      value !== null &&
-      typeof value === "object" &&
-      value.$$typeof === REACT_OPAQUE_ID_TYPE
-    ) {
-      // OpaqueID type is expected to throw, so React will handle it. Not sure if
-      // it's expected that string coercion will throw, but we'll assume it's OK.
-      // See https://github.com/facebook/react/issues/20127.
-      return;
-    }
-
     try {
       testStringCoercion(value);
       return false;
@@ -7789,6 +8108,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markStateUpdateScheduled(fiber, lane);
+    }
   },
   enqueueReplaceState: function(inst, payload, callback) {
     var fiber = get(inst);
@@ -7812,6 +8135,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markStateUpdateScheduled(fiber, lane);
+    }
   },
   enqueueForceUpdate: function(inst, callback) {
     var fiber = get(inst);
@@ -7834,6 +8161,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markForceUpdateScheduled(fiber, lane);
+    }
   }
 };
 
@@ -8772,6 +9103,84 @@ function updateClassInstance(
   return shouldUpdate;
 }
 
+// TODO: Use the unified fiber stack module instead of this local one?
+// Intentionally not using it yet to derisk the initial implementation, because
+// the way we push/pop these values is a bit unusual. If there's a mistake, I'd
+// rather the ids be wrong than crash the whole reconciler.
+var forkStack = [];
+var forkStackIndex = 0;
+var treeForkProvider = null;
+var treeForkCount = 0;
+var idStack = [];
+var idStackIndex = 0;
+var treeContextProvider = null;
+var treeContextId = 1;
+var treeContextOverflow = "";
+
+function popTreeContext(workInProgress) {
+  // Restore the previous values.
+  // This is a bit more complicated than other context-like modules in Fiber
+  // because the same Fiber may appear on the stack multiple times and for
+  // different reasons. We have to keep popping until the work-in-progress is
+  // no longer at the top of the stack.
+  while (workInProgress === treeForkProvider) {
+    treeForkProvider = forkStack[--forkStackIndex];
+    forkStack[forkStackIndex] = null;
+    treeForkCount = forkStack[--forkStackIndex];
+    forkStack[forkStackIndex] = null;
+  }
+
+  while (workInProgress === treeContextProvider) {
+    treeContextProvider = idStack[--idStackIndex];
+    idStack[idStackIndex] = null;
+    treeContextOverflow = idStack[--idStackIndex];
+    idStack[idStackIndex] = null;
+    treeContextId = idStack[--idStackIndex];
+    idStack[idStackIndex] = null;
+  }
+}
+
+var isHydrating = false;
+
+function enterHydrationState(fiber) {
+  {
+    return false;
+  }
+}
+
+function prepareToHydrateHostInstance(
+  fiber,
+  rootContainerInstance,
+  hostContext
+) {
+  {
+    throw new Error(
+      "Expected prepareToHydrateHostInstance() to never be called. " +
+        "This error is likely caused by a bug in React. Please file an issue."
+    );
+  }
+}
+
+function prepareToHydrateHostTextInstance(fiber) {
+  {
+    throw new Error(
+      "Expected prepareToHydrateHostTextInstance() to never be called. " +
+        "This error is likely caused by a bug in React. Please file an issue."
+    );
+  }
+  var shouldUpdate = hydrateTextInstance();
+}
+
+function popHydrationState(fiber) {
+  {
+    return false;
+  }
+}
+
+function getIsHydrating() {
+  return isHydrating;
+}
+
 var didWarnAboutMaps;
 var didWarnAboutGenerators;
 var didWarnAboutStringRefs;
@@ -9055,7 +9464,9 @@ function ChildReconciler(shouldTrackSideEffects) {
     newFiber.index = newIndex;
 
     if (!shouldTrackSideEffects) {
-      // Noop.
+      // During hydration, the useId algorithm needs to know which fibers are
+      // part of a list of children (arrays, iterators).
+      newFiber.flags |= Forked;
       return lastPlacedIndex;
     }
 
@@ -9184,7 +9595,10 @@ function ChildReconciler(shouldTrackSideEffects) {
   }
 
   function createChild(returnFiber, newChild, lanes) {
-    if (typeof newChild === "string" || typeof newChild === "number") {
+    if (
+      (typeof newChild === "string" && newChild !== "") ||
+      typeof newChild === "number"
+    ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
@@ -9247,7 +9661,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     // Update the fiber if the keys match, otherwise return null.
     var key = oldFiber !== null ? oldFiber.key : null;
 
-    if (typeof newChild === "string" || typeof newChild === "number") {
+    if (
+      (typeof newChild === "string" && newChild !== "") ||
+      typeof newChild === "number"
+    ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
@@ -9304,7 +9721,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild,
     lanes
   ) {
-    if (typeof newChild === "string" || typeof newChild === "number") {
+    if (
+      (typeof newChild === "string" && newChild !== "") ||
+      typeof newChild === "number"
+    ) {
       // Text nodes don't have keys, so we neither have to check the old nor
       // new node for the key. If both are text nodes, they match.
       var matchedFiber = existingChildren.get(newIdx) || null;
@@ -9495,6 +9915,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (newIdx === newChildren.length) {
       // We've reached the end of the new children. We can delete the rest.
       deleteRemainingChildren(returnFiber, oldFiber);
+
       return resultingFirstChild;
     }
 
@@ -9701,6 +10122,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (step.done) {
       // We've reached the end of the new children. We can delete the rest.
       deleteRemainingChildren(returnFiber, oldFiber);
+
       return resultingFirstChild;
     }
 
@@ -9987,7 +10409,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       throwOnInvalidObjectType(returnFiber, newChild);
     }
 
-    if (typeof newChild === "string" || typeof newChild === "number") {
+    if (
+      (typeof newChild === "string" && newChild !== "") ||
+      typeof newChild === "number"
+    ) {
       return placeSingleChild(
         reconcileSingleTextNode(
           returnFiber,
@@ -10177,16 +10602,9 @@ function shouldCaptureSuspense(workInProgress, hasInvisibleParent) {
 
   var props = workInProgress.memoizedProps; // Regular boundaries always capture.
 
-  if (props.unstable_avoidThisFallback !== true) {
+  {
     return true;
   } // If it's a boundary we should avoid, then we prefer to bubble up to the
-  // parent boundary if it is currently invisible.
-
-  if (hasInvisibleParent) {
-    return false;
-  } // If the parent is not able to handle it, we must handle it.
-
-  return true;
 }
 function findFirstSuspended(row) {
   var node = row;
@@ -10259,47 +10677,6 @@ var Passive$1 =
   /*   */
   8;
 
-var isHydrating = false;
-
-function enterHydrationState(fiber) {
-  {
-    return false;
-  }
-}
-
-function prepareToHydrateHostInstance(
-  fiber,
-  rootContainerInstance,
-  hostContext
-) {
-  {
-    throw new Error(
-      "Expected prepareToHydrateHostInstance() to never be called. " +
-        "This error is likely caused by a bug in React. Please file an issue."
-    );
-  }
-}
-
-function prepareToHydrateHostTextInstance(fiber) {
-  {
-    throw new Error(
-      "Expected prepareToHydrateHostTextInstance() to never be called. " +
-        "This error is likely caused by a bug in React. Please file an issue."
-    );
-  }
-  var shouldUpdate = hydrateTextInstance();
-}
-
-function popHydrationState(fiber) {
-  {
-    return false;
-  }
-}
-
-function getIsHydrating() {
-  return isHydrating;
-}
-
 // and should be reset before starting a new render.
 // This tracks which mutable sources need to be reset after a render.
 
@@ -10361,11 +10738,9 @@ function getSuspendedCachePool() {
 var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
   ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig;
 var didWarnAboutMismatchedHooksForComponent;
-var didWarnAboutUseOpaqueIdentifier;
 var didWarnUncachedGetSnapshot;
 
 {
-  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -10389,7 +10764,13 @@ var didScheduleRenderPhaseUpdate = false; // Where an update was scheduled only
 // TODO: Maybe there's some way to consolidate this with
 // `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.
 
-var didScheduleRenderPhaseUpdateDuringThisPass = false;
+var didScheduleRenderPhaseUpdateDuringThisPass = false; // Counts the number of useId hooks in this component.
+
+var localIdCounter = 0; // Used for ids that are generated completely client-side (i.e. not during
+// hydration). This counter is global, so client ids are not stable across
+// render attempts.
+
+var globalClientIdCounter = 0;
 var RE_RENDER_LIMIT = 25; // In DEV, this is the name of the currently executing primitive hook
 
 var currentHookNameInDev = null; // In DEV, this list ensures that hooks are called in the same order between renders.
@@ -10570,6 +10951,7 @@ function renderWithHooks(
   // currentHook = null;
   // workInProgressHook = null;
   // didScheduleRenderPhaseUpdate = false;
+  // localIdCounter = 0;
   // TODO Warn if no hooks are used at all during mount, then some are used during update.
   // Currently we will identify the update render as a mount because memoizedState === null.
   // This is tricky because it's valid for certain types of components (e.g. React.lazy)
@@ -10601,6 +10983,7 @@ function renderWithHooks(
 
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
+      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -10669,7 +11052,8 @@ function renderWithHooks(
     }
   }
 
-  didScheduleRenderPhaseUpdate = false;
+  didScheduleRenderPhaseUpdate = false; // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -10680,6 +11064,14 @@ function renderWithHooks(
 
   return children;
 }
+function checkDidRenderIdHook() {
+  // This should be called immediately after every renderWithHooks call.
+  // Conceptually, it's part of the return value of renderWithHooks; it's only a
+  // separate function to avoid using an array tuple.
+  var didRenderIdHook = localIdCounter !== 0;
+  localIdCounter = 0;
+  return didRenderIdHook;
+}
 function bailoutHooks(current, workInProgress, lanes) {
   workInProgress.updateQueue = current.updateQueue; // TODO: Don't need to reset the flags here, because they're reset in the
   // complete phase (bubbleProperties).
@@ -10739,6 +11131,7 @@ function resetHooksAfterThrow() {
   }
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
 }
 
 function mountWorkInProgressHook() {
@@ -11640,13 +12033,6 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
 }
 
 function mountEffect(create, deps) {
-  {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ("undefined" !== typeof jest) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1);
-    }
-  }
-
   if ((currentlyRenderingFiber$1.mode & StrictEffectsMode) !== NoMode) {
     return mountEffectImpl(
       MountPassiveDev | Passive | PassiveStatic,
@@ -11660,13 +12046,6 @@ function mountEffect(create, deps) {
 }
 
 function updateEffect(create, deps) {
-  {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ("undefined" !== typeof jest) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1);
-    }
-  }
-
   return updateEffectImpl(Passive, Passive$1, create, deps);
 }
 
@@ -11972,44 +12351,30 @@ function getIsUpdatingOpaqueValueInRenderPhaseInDEV() {
   }
 }
 
-function warnOnOpaqueIdentifierAccessInDEV(fiber) {
-  {
-    // TODO: Should warn in effects and callbacks, too
-    var name = getComponentNameFromFiber(fiber) || "Unknown";
-
-    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
-      error(
-        "The object passed back from useOpaqueIdentifier is meant to be " +
-          "passed through to attributes only. Do not read the " +
-          "value directly."
-      );
+function mountId() {
+  var hook = mountWorkInProgressHook();
+  var root = getWorkInProgressRoot(); // TODO: In Fizz, id generation is specific to each server config. Maybe we
+  // should do this in Fiber, too? Deferring this decision for now because
+  // there's no other place to store the prefix except for an internal field on
+  // the public createRoot object, which the fiber tree does not currently have
+  // a reference to.
 
-      didWarnAboutUseOpaqueIdentifier[name] = true;
-    }
-  }
-}
-
-function mountOpaqueIdentifier() {
-  var makeId = makeClientIdInDEV.bind(
-    null,
-    warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber$1)
-  );
+  var identifierPrefix = root.identifierPrefix;
+  var id;
 
   {
-    var _id = makeId();
-
-    mountState(_id);
-    return _id;
+    // Use a lowercase r prefix for client-generated ids.
+    var globalClientId = globalClientIdCounter++;
+    id = identifierPrefix + "r:" + globalClientId.toString(32);
   }
-}
 
-function updateOpaqueIdentifier() {
-  var id = updateState()[0];
+  hook.memoizedState = id;
   return id;
 }
 
-function rerenderOpaqueIdentifier() {
-  var id = rerenderState()[0];
+function updateId() {
+  var hook = updateWorkInProgressHook();
+  var id = hook.memoizedState;
   return id;
 }
 
@@ -12037,14 +12402,6 @@ function dispatchReducerAction(fiber, queue, action) {
     enqueueRenderPhaseUpdate(queue, update);
   } else {
     enqueueUpdate$1(fiber, queue, update);
-
-    {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ("undefined" !== typeof jest) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
-
     var eventTime = requestEventTime();
     var root = scheduleUpdateOnFiber(fiber, lane, eventTime);
 
@@ -12052,6 +12409,8 @@ function dispatchReducerAction(fiber, queue, action) {
       entangleTransitionUpdate(root, queue, lane);
     }
   }
+
+  markUpdateInDevTools(fiber, lane);
 }
 
 function dispatchSetState(fiber, queue, action) {
@@ -12124,13 +12483,6 @@ function dispatchSetState(fiber, queue, action) {
       }
     }
 
-    {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ("undefined" !== typeof jest) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
-
     var eventTime = requestEventTime();
     var root = scheduleUpdateOnFiber(fiber, lane, eventTime);
 
@@ -12138,6 +12490,8 @@ function dispatchSetState(fiber, queue, action) {
       entangleTransitionUpdate(root, queue, lane);
     }
   }
+
+  markUpdateInDevTools(fiber, lane);
 }
 
 function isRenderPhaseUpdate(fiber) {
@@ -12216,6 +12570,12 @@ function entangleTransitionUpdate(root, queue, lane) {
   }
 }
 
+function markUpdateInDevTools(fiber, lane, action) {
+  {
+    markStateUpdateScheduled(fiber, lane);
+  }
+}
+
 var ContextOnlyDispatcher = {
   readContext: readContext,
   useCallback: throwInvalidHookError,
@@ -12233,7 +12593,7 @@ var ContextOnlyDispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
-  useOpaqueIdentifier: throwInvalidHookError,
+  useId: throwInvalidHookError,
   unstable_isNewReconciler: enableNewReconciler
 };
 
@@ -12370,10 +12730,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot);
     },
-    useOpaqueIdentifier: function() {
-      currentHookNameInDev = "useOpaqueIdentifier";
+    useId: function() {
+      currentHookNameInDev = "useId";
       mountHookTypesDev();
-      return mountOpaqueIdentifier();
+      return mountId();
     },
     unstable_isNewReconciler: enableNewReconciler
   };
@@ -12478,10 +12838,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot);
     },
-    useOpaqueIdentifier: function() {
-      currentHookNameInDev = "useOpaqueIdentifier";
+    useId: function() {
+      currentHookNameInDev = "useId";
       updateHookTypesDev();
-      return mountOpaqueIdentifier();
+      return mountId();
     },
     unstable_isNewReconciler: enableNewReconciler
   };
@@ -12586,10 +12946,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot);
     },
-    useOpaqueIdentifier: function() {
-      currentHookNameInDev = "useOpaqueIdentifier";
+    useId: function() {
+      currentHookNameInDev = "useId";
       updateHookTypesDev();
-      return updateOpaqueIdentifier();
+      return updateId();
     },
     unstable_isNewReconciler: enableNewReconciler
   };
@@ -12694,10 +13054,10 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot);
     },
-    useOpaqueIdentifier: function() {
-      currentHookNameInDev = "useOpaqueIdentifier";
+    useId: function() {
+      currentHookNameInDev = "useId";
       updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
+      return updateId();
     },
     unstable_isNewReconciler: enableNewReconciler
   };
@@ -12818,11 +13178,11 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot);
     },
-    useOpaqueIdentifier: function() {
-      currentHookNameInDev = "useOpaqueIdentifier";
+    useId: function() {
+      currentHookNameInDev = "useId";
       warnInvalidHookAccess();
       mountHookTypesDev();
-      return mountOpaqueIdentifier();
+      return mountId();
     },
     unstable_isNewReconciler: enableNewReconciler
   };
@@ -12943,11 +13303,11 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot);
     },
-    useOpaqueIdentifier: function() {
-      currentHookNameInDev = "useOpaqueIdentifier";
+    useId: function() {
+      currentHookNameInDev = "useId";
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return updateOpaqueIdentifier();
+      return updateId();
     },
     unstable_isNewReconciler: enableNewReconciler
   };
@@ -13068,11 +13428,11 @@ var InvalidNestedHooksDispatcherOnRerenderInDEV = null;
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot);
     },
-    useOpaqueIdentifier: function() {
-      currentHookNameInDev = "useOpaqueIdentifier";
+    useId: function() {
+      currentHookNameInDev = "useId";
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
+      return updateId();
     },
     unstable_isNewReconciler: enableNewReconciler
   };
@@ -13534,137 +13894,133 @@ function resetSuspendedComponent(sourceFiber, rootRenderLanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber,
-  sourceFiber,
-  root,
-  rootRenderLanes
-) {
-  var hasInvisibleParentBoundary = hasSuspenseContext(
-    suspenseStackCursor.current,
-    InvisibleParentSuspenseContext
-  );
-  var node = returnFiber;
-
-  do {
-    if (
-      node.tag === SuspenseComponent &&
-      shouldCaptureSuspense(node, hasInvisibleParentBoundary)
-    ) {
-      // Found the nearest boundary.
-      var suspenseBoundary = node; // This marks a Suspense boundary so that when we're unwinding the stack,
-      // it captures the suspended "exception" and does a second (fallback) pass.
-
-      if ((suspenseBoundary.mode & ConcurrentMode) === NoMode) {
-        // Legacy Mode Suspense
-        //
-        // If the boundary is in legacy mode, we should *not*
-        // suspend the commit. Pretend as if the suspended component rendered
-        // null and keep rendering. When the Suspense boundary completes,
-        // we'll do a second pass to render the fallback.
-        if (suspenseBoundary === returnFiber) {
-          // Special case where we suspended while reconciling the children of
-          // a Suspense boundary's inner Offscreen wrapper fiber. This happens
-          // when a React.lazy component is a direct child of a
-          // Suspense boundary.
-          //
-          // Suspense boundaries are implemented as multiple fibers, but they
-          // are a single conceptual unit. The legacy mode behavior where we
-          // pretend the suspended fiber committed as `null` won't work,
-          // because in this case the "suspended" fiber is the inner
-          // Offscreen wrapper.
-          //
-          // Because the contents of the boundary haven't started rendering
-          // yet (i.e. nothing in the tree has partially rendered) we can
-          // switch to the regular, concurrent mode behavior: mark the
-          // boundary with ShouldCapture and enter the unwind phase.
-          suspenseBoundary.flags |= ShouldCapture;
-        } else {
-          suspenseBoundary.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.flags &= ~(LifecycleEffectMask | Incomplete);
-
-          if (sourceFiber.tag === ClassComponent) {
-            var currentSourceFiber = sourceFiber.alternate;
-
-            if (currentSourceFiber === null) {
-              // This is a new mount. Change the tag so it's not mistaken for a
-              // completed class component. For example, we should not call
-              // componentWillUnmount if it is deleted.
-              sourceFiber.tag = IncompleteClassComponent;
-            } else {
-              // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
-              // prevent a bail out.
-              var update = createUpdate(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update);
-            }
-          } // The source fiber did not complete. Mark it with Sync priority to
-          // indicate that it still has pending work.
-
-          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
-        }
-
-        return suspenseBoundary;
-      } // Confirmed that the boundary is in a concurrent mode tree. Continue
-      // with the normal suspend path.
-      //
-      // After this we'll use a set of heuristics to determine whether this
-      // render pass will run to completion or restart or "suspend" the commit.
-      // The actual logic for this is spread out in different places.
-      //
-      // This first principle is that if we're going to suspend when we complete
-      // a root, then we should also restart if we get an update or ping that
-      // might unsuspend it, and vice versa. The only reason to suspend is
-      // because you think you might want to restart before committing. However,
-      // it doesn't make sense to restart only while in the period we're suspended.
-      //
-      // Restarting too aggressively is also not good because it starves out any
-      // intermediate loading state. So we use heuristics to determine when.
-      // Suspense Heuristics
-      //
-      // If nothing threw a Promise or all the same fallbacks are already showing,
-      // then don't suspend/restart.
-      //
-      // If this is an initial render of a new tree of Suspense boundaries and
-      // those trigger a fallback, then don't suspend/restart. We want to ensure
-      // 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. 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,
-      // then we suspend/restart for 500ms since the last time we showed a fallback
-      // anywhere in the tree. This effectively throttles progressive loading into a
-      // consistent train of commits. This also gives us an opportunity to restart to
-      // get to the completed state slightly earlier.
-      //
-      // If there's ambiguity due to batching it's resolved in preference of:
-      // 1) "delayed", 2) "initial render", 3) "retry".
-      //
-      // We want to ensure that a "busy" state doesn't get force committed. We want to
-      // ensure that new initial loading states can commit as soon as possible.
-
-      suspenseBoundary.flags |= ShouldCapture; // TODO: I think we can remove this, since we now use `DidCapture` in
-      // the begin phase to prevent an early bailout.
+function getNearestSuspenseBoundaryToCapture(returnFiber) {
+  var node = returnFiber;
 
-      suspenseBoundary.lanes = rootRenderLanes;
-      return suspenseBoundary;
+  do {
+    if (node.tag === SuspenseComponent && shouldCaptureSuspense(node)) {
+      return node;
     } // This boundary already captured during this render. Continue to the next
     // boundary.
 
     node = node.return;
-  } while (node !== null); // Could not find a Suspense boundary capable of capturing.
+  } while (node !== null);
 
   return null;
 }
 
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary,
+  returnFiber,
+  sourceFiber,
+  root,
+  rootRenderLanes
+) {
+  // This marks a Suspense boundary so that when we're unwinding the stack,
+  // it captures the suspended "exception" and does a second (fallback) pass.
+  if ((suspenseBoundary.mode & ConcurrentMode) === NoMode) {
+    // Legacy Mode Suspense
+    //
+    // If the boundary is in legacy mode, we should *not*
+    // suspend the commit. Pretend as if the suspended component rendered
+    // null and keep rendering. When the Suspense boundary completes,
+    // we'll do a second pass to render the fallback.
+    if (suspenseBoundary === returnFiber) {
+      // Special case where we suspended while reconciling the children of
+      // a Suspense boundary's inner Offscreen wrapper fiber. This happens
+      // when a React.lazy component is a direct child of a
+      // Suspense boundary.
+      //
+      // Suspense boundaries are implemented as multiple fibers, but they
+      // are a single conceptual unit. The legacy mode behavior where we
+      // pretend the suspended fiber committed as `null` won't work,
+      // because in this case the "suspended" fiber is the inner
+      // Offscreen wrapper.
+      //
+      // Because the contents of the boundary haven't started rendering
+      // yet (i.e. nothing in the tree has partially rendered) we can
+      // switch to the regular, concurrent mode behavior: mark the
+      // boundary with ShouldCapture and enter the unwind phase.
+      suspenseBoundary.flags |= ShouldCapture;
+    } else {
+      suspenseBoundary.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.flags &= ~(LifecycleEffectMask | Incomplete);
+
+      if (sourceFiber.tag === ClassComponent) {
+        var currentSourceFiber = sourceFiber.alternate;
+
+        if (currentSourceFiber === null) {
+          // This is a new mount. Change the tag so it's not mistaken for a
+          // completed class component. For example, we should not call
+          // componentWillUnmount if it is deleted.
+          sourceFiber.tag = IncompleteClassComponent;
+        } else {
+          // When we try rendering again, we should not reuse the current fiber,
+          // since it's known to be in an inconsistent state. Use a force update to
+          // prevent a bail out.
+          var update = createUpdate(NoTimestamp, SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update);
+        }
+      } // The source fiber did not complete. Mark it with Sync priority to
+      // indicate that it still has pending work.
+
+      sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
+    }
+
+    return suspenseBoundary;
+  } // Confirmed that the boundary is in a concurrent mode tree. Continue
+  // with the normal suspend path.
+  //
+  // After this we'll use a set of heuristics to determine whether this
+  // render pass will run to completion or restart or "suspend" the commit.
+  // The actual logic for this is spread out in different places.
+  //
+  // This first principle is that if we're going to suspend when we complete
+  // a root, then we should also restart if we get an update or ping that
+  // might unsuspend it, and vice versa. The only reason to suspend is
+  // because you think you might want to restart before committing. However,
+  // it doesn't make sense to restart only while in the period we're suspended.
+  //
+  // Restarting too aggressively is also not good because it starves out any
+  // intermediate loading state. So we use heuristics to determine when.
+  // Suspense Heuristics
+  //
+  // If nothing threw a Promise or all the same fallbacks are already showing,
+  // then don't suspend/restart.
+  //
+  // If this is an initial render of a new tree of Suspense boundaries and
+  // those trigger a fallback, then don't suspend/restart. We want to ensure
+  // 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. 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,
+  // then we suspend/restart for 500ms since the last time we showed a fallback
+  // anywhere in the tree. This effectively throttles progressive loading into a
+  // consistent train of commits. This also gives us an opportunity to restart to
+  // get to the completed state slightly earlier.
+  //
+  // If there's ambiguity due to batching it's resolved in preference of:
+  // 1) "delayed", 2) "initial render", 3) "retry".
+  //
+  // We want to ensure that a "busy" state doesn't get force committed. We want to
+  // ensure that new initial loading states can commit as soon as possible.
+
+  suspenseBoundary.flags |= ShouldCapture; // TODO: I think we can remove this, since we now use `DidCapture` in
+  // the begin phase to prevent an early bailout.
+
+  suspenseBoundary.lanes = rootRenderLanes;
+  return suspenseBoundary;
+}
+
 function throwException(
   root,
   returnFiber,
@@ -13691,14 +14047,17 @@ function throwException(
     var wakeable = value;
     resetSuspendedComponent(sourceFiber);
 
-    var suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-      returnFiber,
-      sourceFiber,
-      root,
-      rootRenderLanes
-    );
+    var suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
 
     if (suspenseBoundary !== null) {
+      suspenseBoundary.flags &= ~ForceClientRender;
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes
+      );
       attachWakeableListeners(
         suspenseBoundary,
         root,
@@ -14102,7 +14461,12 @@ function completeSuspendedOffscreenHostContainer(current, workInProgress) {
 }
 
 function completeWork(current, workInProgress, renderLanes) {
-  var newProps = workInProgress.pendingProps;
+  var newProps = workInProgress.pendingProps; // Note: This intentionally doesn't check if we're hydrating because comparing
+  // to the current tree provider fiber is just as fast and less error-prone.
+  // Ideally we would have a special version of the work loop only
+  // for hydration.
+
+  popTreeContext(workInProgress);
 
   switch (workInProgress.tag) {
     case IndeterminateComponent:
@@ -14154,7 +14518,7 @@ function completeWork(current, workInProgress, renderLanes) {
           // Schedule an effect to clear this container at the start of the next commit.
           // 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).
+          // if the previous render was null (so the container would already be empty).
           workInProgress.flags |= Snapshot;
         }
       }
@@ -14301,7 +14665,7 @@ function completeWork(current, workInProgress, renderLanes) {
       else {
         var prevState = current.memoizedState;
         prevDidTimeout = prevState !== null;
-      } // If the suspended state of the boundary changes, we need to schedule
+      }
       // an effect to toggle the subtree's visibility. When we switch from
       // fallback -> primary, the inner Offscreen fiber schedules this effect
       // as part of its normal complete phase. But when we switch from
@@ -14314,8 +14678,8 @@ function completeWork(current, workInProgress, renderLanes) {
       // is active that we have to do anything special.
 
       if (nextDidTimeout && !prevDidTimeout) {
-        var offscreenFiber = workInProgress.child;
-        offscreenFiber.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything
+        var _offscreenFiber = workInProgress.child;
+        _offscreenFiber.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
 
@@ -14329,7 +14693,8 @@ function completeWork(current, workInProgress, renderLanes) {
           // should be able to immediately restart from within throwException.
           var hasInvisibleChildContext =
             current === null &&
-            workInProgress.memoizedProps.unstable_avoidThisFallback !== true;
+            (workInProgress.memoizedProps.unstable_avoidThisFallback !== true ||
+              !enableSuspenseAvoidThisFallback);
 
           if (
             hasInvisibleChildContext ||
@@ -14787,8 +15152,13 @@ function updateForwardRef(
   var ref = workInProgress.ref; // The rest is a fork of updateFunctionComponent
 
   var nextChildren;
+  var hasId;
   prepareToReadContext(workInProgress, renderLanes);
 
+  {
+    markComponentRenderStarted(workInProgress);
+  }
+
   {
     ReactCurrentOwner$1.current = workInProgress;
     setIsRendering(true);
@@ -14800,6 +15170,7 @@ function updateForwardRef(
       ref,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
 
     if (workInProgress.mode & StrictLegacyMode) {
       setIsStrictModeForDevtools(true);
@@ -14813,6 +15184,7 @@ function updateForwardRef(
           ref,
           renderLanes
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -14821,10 +15193,14 @@ function updateForwardRef(
     setIsRendering(false);
   }
 
+  {
+    markComponentRenderStopped();
+  }
+
   if (current !== null && !didReceiveUpdate) {
     bailoutHooks(current, workInProgress, renderLanes);
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  } // React DevTools reads this flag.
+  }
 
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -15247,8 +15623,13 @@ function updateFunctionComponent(
   }
 
   var nextChildren;
+  var hasId;
   prepareToReadContext(workInProgress, renderLanes);
 
+  {
+    markComponentRenderStarted(workInProgress);
+  }
+
   {
     ReactCurrentOwner$1.current = workInProgress;
     setIsRendering(true);
@@ -15260,6 +15641,7 @@ function updateFunctionComponent(
       context,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
 
     if (workInProgress.mode & StrictLegacyMode) {
       setIsStrictModeForDevtools(true);
@@ -15273,6 +15655,7 @@ function updateFunctionComponent(
           context,
           renderLanes
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -15281,10 +15664,14 @@ function updateFunctionComponent(
     setIsRendering(false);
   }
 
+  {
+    markComponentRenderStopped();
+  }
+
   if (current !== null && !didReceiveUpdate) {
     bailoutHooks(current, workInProgress, renderLanes);
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  } // React DevTools reads this flag.
+  }
 
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -15468,6 +15855,10 @@ function finishClassComponent(
       stopProfilerTimerIfRunning();
     }
   } else {
+    {
+      markComponentRenderStarted(workInProgress);
+    }
+
     {
       setIsRendering(true);
       nextChildren = instance.render();
@@ -15484,6 +15875,10 @@ function finishClassComponent(
 
       setIsRendering(false);
     }
+
+    {
+      markComponentRenderStopped();
+    }
   } // React DevTools reads this flag.
 
   workInProgress.flags |= PerformedWork;
@@ -15813,6 +16208,11 @@ function mountIndeterminateComponent(
 
   prepareToReadContext(workInProgress, renderLanes);
   var value;
+  var hasId;
+
+  {
+    markComponentRenderStarted(workInProgress);
+  }
 
   {
     if (
@@ -15847,9 +16247,14 @@ function mountIndeterminateComponent(
       context,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
     setIsRendering(false);
   }
 
+  {
+    markComponentRenderStopped();
+  } // React DevTools reads this flag.
+
   workInProgress.flags |= PerformedWork;
 
   {
@@ -15953,6 +16358,7 @@ function mountIndeterminateComponent(
             context,
             renderLanes
           );
+          hasId = checkDidRenderIdHook();
         } finally {
           setIsStrictModeForDevtools(false);
         }
@@ -16040,6 +16446,7 @@ function validateFunctionComponentInDev(workInProgress, Component) {
 
 var SUSPENDED_MARKER = {
   dehydrated: null,
+  treeContext: null,
   retryLane: NoLane
 };
 
@@ -16113,7 +16520,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // Mark this subtree context as having at least one invisible parent that could
       // handle the fallback state.
       // Avoided boundaries are not considered since they cannot handle preferred fallback states.
-      if (nextProps.unstable_avoidThisFallback !== true) {
+      {
         suspenseContext = addSubtreeSuspenseContext(
           suspenseContext,
           InvisibleParentSuspenseContext
@@ -17064,6 +17471,10 @@ function updateContextConsumer(current, workInProgress, renderLanes) {
   prepareToReadContext(workInProgress, renderLanes);
   var newValue = readContext(context);
 
+  {
+    markComponentRenderStarted(workInProgress);
+  }
+
   var newChildren;
 
   {
@@ -17073,6 +17484,10 @@ function updateContextConsumer(current, workInProgress, renderLanes) {
     setIsRendering(false);
   }
 
+  {
+    markComponentRenderStopped();
+  } // React DevTools reads this flag.
+
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, newChildren, renderLanes);
   return workInProgress.child;
@@ -17620,6 +18035,12 @@ function beginWork(current, workInProgress, renderLanes) {
 }
 
 function unwindWork(workInProgress, renderLanes) {
+  // Note: This intentionally doesn't check if we're hydrating because comparing
+  // to the current tree provider fiber is just as fast and less error-prone.
+  // Ideally we would have a special version of the work loop only
+  // for hydration.
+  popTreeContext(workInProgress);
+
   switch (workInProgress.tag) {
     case ClassComponent: {
       var Component = workInProgress.type;
@@ -17715,6 +18136,12 @@ function unwindWork(workInProgress, renderLanes) {
 }
 
 function unwindInterruptedWork(interruptedWork, renderLanes) {
+  // Note: This intentionally doesn't check if we're hydrating because comparing
+  // to the current tree provider fiber is just as fast and less error-prone.
+  // Ideally we would have a special version of the work loop only
+  // for hydration.
+  popTreeContext(interruptedWork);
+
   switch (interruptedWork.tag) {
     case ClassComponent: {
       var childContextTypes = interruptedWork.type.childContextTypes;
@@ -18039,7 +18466,23 @@ function commitHookEffectListUnmount(
         effect.destroy = undefined;
 
         if (destroy !== undefined) {
+          {
+            if ((flags & Passive$1) !== NoFlags$1) {
+              markComponentPassiveEffectUnmountStarted(finishedWork);
+            } else if ((flags & Layout) !== NoFlags$1) {
+              markComponentLayoutEffectUnmountStarted(finishedWork);
+            }
+          }
+
           safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+
+          {
+            if ((flags & Passive$1) !== NoFlags$1) {
+              markComponentPassiveEffectUnmountStopped();
+            } else if ((flags & Layout) !== NoFlags$1) {
+              markComponentLayoutEffectUnmountStopped();
+            }
+          }
         }
       }
 
@@ -18048,7 +18491,7 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag, finishedWork) {
+function commitHookEffectListMount(flags, finishedWork) {
   var updateQueue = finishedWork.updateQueue;
   var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
@@ -18057,11 +18500,26 @@ function commitHookEffectListMount(tag, finishedWork) {
     var effect = firstEffect;
 
     do {
-      if ((effect.tag & tag) === tag) {
-        // Mount
+      if ((effect.tag & flags) === flags) {
+        {
+          if ((flags & Passive$1) !== NoFlags$1) {
+            markComponentPassiveEffectMountStarted(finishedWork);
+          } else if ((flags & Layout) !== NoFlags$1) {
+            markComponentLayoutEffectMountStarted(finishedWork);
+          }
+        } // Mount
+
         var create = effect.create;
         effect.destroy = create();
 
+        {
+          if ((flags & Passive$1) !== NoFlags$1) {
+            markComponentPassiveEffectMountStopped();
+          } else if ((flags & Layout) !== NoFlags$1) {
+            markComponentLayoutEffectMountStopped();
+          }
+        }
+
         {
           var destroy = effect.destroy;
 
@@ -18655,10 +19113,13 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
               tag = _effect.tag;
 
             if (destroy !== undefined) {
-              if (
-                (tag & Insertion) !== NoFlags$1 ||
-                (tag & Layout) !== NoFlags$1
-              ) {
+              if ((tag & Insertion) !== NoFlags$1) {
+                safelyCallDestroy(current, nearestMountedAncestor, destroy);
+              } else if ((tag & Layout) !== NoFlags$1) {
+                {
+                  markComponentLayoutEffectUnmountStarted(current);
+                }
+
                 if (current.mode & ProfileMode) {
                   startLayoutEffectTimer();
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
@@ -18666,6 +19127,10 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
                 } else {
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
+
+                {
+                  markComponentLayoutEffectUnmountStopped();
+                }
               }
             }
 
@@ -19927,11 +20392,46 @@ if (typeof Symbol === "function" && Symbol.for) {
   TEXT_TYPE = symbolFor$1("selector.text");
 }
 
+var ReactCurrentActQueue = ReactSharedInternals.ReactCurrentActQueue;
+function isLegacyActEnvironment(fiber) {
+  {
+    // Legacy mode. We preserve the behavior of React 17's act. It assumes an
+    // act environment whenever `jest` is defined, but you can still turn off
+    // spurious warnings by setting IS_REACT_ACT_ENVIRONMENT explicitly
+    // to false.
+    var isReactActEnvironmentGlobal = // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== "undefined"
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined; // $FlowExpectedError - Flow doesn't know about jest
+
+    var jestIsDefined = typeof jest !== "undefined";
+    return jestIsDefined && isReactActEnvironmentGlobal !== false;
+  }
+}
+function isConcurrentActEnvironment() {
+  {
+    var isReactActEnvironmentGlobal = // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== "undefined"
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    if (!isReactActEnvironmentGlobal && ReactCurrentActQueue.current !== null) {
+      // TODO: Include link to relevant documentation page.
+      error(
+        "The current testing environment is not configured to support " +
+          "act(...)"
+      );
+    }
+
+    return isReactActEnvironmentGlobal;
+  }
+}
+
 var ceil = Math.ceil;
 var ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher,
   ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner,
   ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig,
-  ReactCurrentActQueue = ReactSharedInternals.ReactCurrentActQueue;
+  ReactCurrentActQueue$1 = ReactSharedInternals.ReactCurrentActQueue;
 var NoContext =
   /*             */
   0;
@@ -19984,7 +20484,9 @@ var workInProgressRootIncludedLanes = NoLanes; // The work left over by componen
 
 var workInProgressRootSkippedLanes = NoLanes; // Lanes that were updated (in an interleaved event) during this render.
 
-var workInProgressRootUpdatedLanes = NoLanes; // Lanes that were pinged (in an interleaved event) during this render.
+var workInProgressRootInterleavedUpdatedLanes = NoLanes; // Lanes that were updated during the render phase (*not* an interleaved event).
+
+var workInProgressRootRenderPhaseUpdatedLanes = NoLanes; // Lanes that were pinged (in an interleaved event) during this render.
 
 var workInProgressRootPingedLanes = NoLanes; // The most recent time we committed a fallback. This lets us ensure a train
 // model where we don't commit new loading states in too quick succession.
@@ -20011,7 +20513,7 @@ var legacyErrorBoundariesThatAlreadyFailed = null; // Only used when enableProfi
 var rootDoesHavePassiveEffects = false;
 var rootWithPendingPassiveEffects = null;
 var pendingPassiveEffectsLanes = NoLanes;
-var pendingPassiveProfilerEffects = []; // Use these to prevent an infinite loop of nested updates
+var pendingPassiveProfilerEffects = [];
 
 var NESTED_UPDATE_LIMIT = 50;
 var nestedUpdateCount = 0;
@@ -20116,60 +20618,80 @@ function requestRetryLane(fiber) {
 
 function scheduleUpdateOnFiber(fiber, lane, eventTime) {
   checkForNestedUpdates();
-  warnAboutRenderPhaseUpdatesInDEV(fiber);
   var root = markUpdateLaneFromFiberToRoot(fiber, lane);
 
   if (root === null) {
     return null;
-  }
-
-  {
-    if (isDevToolsPresent) {
-      addFiberToLanesMap(root, fiber, lane);
-    }
   } // Mark that the root has a pending update.
 
   markRootUpdated(root, lane, eventTime);
 
-  if (root === workInProgressRoot) {
-    // Received an update to a tree that's in the middle of rendering. Mark
-    // that there was an interleaved update work on this root. Unless the
-    // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
-    // phase update. In that case, we don't treat render phase updates as if
-    // they were interleaved, for backwards compat reasons.
-    if ((executionContext & RenderContext) === NoContext) {
-      workInProgressRootUpdatedLanes = mergeLanes(
-        workInProgressRootUpdatedLanes,
-        lane
-      );
+  if (
+    (executionContext & RenderContext) !== NoLanes &&
+    root === workInProgressRoot
+  ) {
+    // This update was dispatched during the render phase. This is a mistake
+    // if the update originates from user space (with the exception of local
+    // hook updates, which are handled differently and don't reach this
+    // function), but there are some internal React features that use this as
+    // an implementation detail, like selective hydration.
+    warnAboutRenderPhaseUpdatesInDEV(fiber); // Track lanes that were updated during the render phase
+
+    workInProgressRootRenderPhaseUpdatedLanes = mergeLanes(
+      workInProgressRootRenderPhaseUpdatedLanes,
+      lane
+    );
+  } else {
+    // This is a normal update, scheduled from outside the render phase. For
+    // example, during an input event.
+    {
+      if (isDevToolsPresent) {
+        addFiberToLanesMap(root, fiber, lane);
+      }
     }
 
-    if (workInProgressRootExitStatus === RootSuspendedWithDelay) {
-      // The root already suspended with a delay, which means this render
-      // definitely won't finish. Since we have a new update, let's mark it as
-      // suspended now, right before marking the incoming update. This has the
-      // effect of interrupting the current render and switching to the update.
-      // TODO: Make sure this doesn't override pings that happen while we've
-      // already started rendering.
-      markRootSuspended$1(root, workInProgressRootRenderLanes);
+    warnIfUpdatesNotWrappedWithActDEV(fiber);
+
+    if (root === workInProgressRoot) {
+      // Received an update to a tree that's in the middle of rendering. Mark
+      // that there was an interleaved update work on this root. Unless the
+      // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
+      // phase update. In that case, we don't treat render phase updates as if
+      // they were interleaved, for backwards compat reasons.
+      if ((executionContext & RenderContext) === NoContext) {
+        workInProgressRootInterleavedUpdatedLanes = mergeLanes(
+          workInProgressRootInterleavedUpdatedLanes,
+          lane
+        );
+      }
+
+      if (workInProgressRootExitStatus === RootSuspendedWithDelay) {
+        // The root already suspended with a delay, which means this render
+        // definitely won't finish. Since we have a new update, let's mark it as
+        // suspended now, right before marking the incoming update. This has the
+        // effect of interrupting the current render and switching to the update.
+        // TODO: Make sure this doesn't override pings that happen while we've
+        // already started rendering.
+        markRootSuspended$1(root, workInProgressRootRenderLanes);
+      }
     }
-  }
 
-  ensureRootIsScheduled(root, eventTime);
+    ensureRootIsScheduled(root, eventTime);
 
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode && // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
-    !ReactCurrentActQueue.isBatchingLegacy
-  ) {
-    // Flush the synchronous work now, unless we're already working or inside
-    // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
-    // scheduleCallbackForFiber to preserve the ability to schedule a callback
-    // without immediately flushing it. We only do this for user-initiated
-    // updates, to preserve historical behavior of legacy mode.
-    resetRenderTimer();
-    flushSyncCallbacksOnlyInLegacyMode();
+    if (
+      lane === SyncLane &&
+      executionContext === NoContext &&
+      (fiber.mode & ConcurrentMode) === NoMode && // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      !ReactCurrentActQueue$1.isBatchingLegacy
+    ) {
+      // Flush the synchronous work now, unless we're already working or inside
+      // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
+      // scheduleCallbackForFiber to preserve the ability to schedule a callback
+      // without immediately flushing it. We only do this for user-initiated
+      // updates, to preserve historical behavior of legacy mode.
+      resetRenderTimer();
+      flushSyncCallbacksOnlyInLegacyMode();
+    }
   }
 
   return root;
@@ -20274,7 +20796,7 @@ function ensureRootIsScheduled(root, currentTime) {
     // Scheduler task, rather than an `act` task, cancel it and re-scheduled
     // on the `act` queue.
     !(
-      ReactCurrentActQueue.current !== null &&
+      ReactCurrentActQueue$1.current !== null &&
       existingCallbackNode !== fakeActCallbackNode
     )
   ) {
@@ -20306,8 +20828,8 @@ function ensureRootIsScheduled(root, currentTime) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     if (root.tag === LegacyRoot) {
-      if (ReactCurrentActQueue.isBatchingLegacy !== null) {
-        ReactCurrentActQueue.didScheduleLegacyUpdate = true;
+      if (ReactCurrentActQueue$1.isBatchingLegacy !== null) {
+        ReactCurrentActQueue$1.didScheduleLegacyUpdate = true;
       }
 
       scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -20493,11 +21015,28 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     {
       errorHydratingContainer(root.containerInfo);
     }
+  }
+
+  var exitStatus;
+  var MAX_ERROR_RETRY_ATTEMPTS = 50;
+
+  for (var i = 0; i < MAX_ERROR_RETRY_ATTEMPTS; i++) {
+    exitStatus = renderRootSync(root, errorRetryLanes);
+
+    if (
+      exitStatus === RootErrored &&
+      workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
+    ) {
+      // There was a render phase update during this render. Some internal React
+      // implementation details may use this as a trick to schedule another
+      // render pass. To protect against an inifinite loop, eventually
+      // we'll give up.
+      continue;
+    }
 
-    clearContainer(root.containerInfo);
+    break;
   }
 
-  var exitStatus = renderRootSync(root, errorRetryLanes);
   executionContext = prevExecutionContext;
   return exitStatus;
 }
@@ -20618,7 +21157,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
 
 function isRenderConsistentWithExternalStores(finishedWork) {
   // Search the rendered tree for external store reads, and check whether the
-  // stores were mutated in a concurrent event. Intentionally using a iterative
+  // stores were mutated in a concurrent event. Intentionally using an iterative
   // loop instead of recursion so we can exit early.
   var node = finishedWork;
 
@@ -20684,7 +21223,10 @@ function markRootSuspended$1(root, suspendedLanes) {
   // TODO: Lol maybe there's a better way to factor this besides this
   // obnoxiously named function :)
   suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);
-  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootUpdatedLanes);
+  suspendedLanes = removeLanes(
+    suspendedLanes,
+    workInProgressRootInterleavedUpdatedLanes
+  );
   markRootSuspended(root, suspendedLanes);
 } // This is the entry point for synchronous tasks that don't go
 // through Scheduler
@@ -20710,31 +21252,16 @@ function performSyncWorkOnRoot(root) {
   var exitStatus = renderRootSync(root, lanes);
 
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
-    var prevExecutionContext = executionContext;
-    executionContext |= RetryAfterError; // If an error occurred during hydration,
-    // discard server response and fall back to client side render.
-
-    if (root.isDehydrated) {
-      root.isDehydrated = false;
-
-      {
-        errorHydratingContainer(root.containerInfo);
-      }
-
-      clearContainer(root.containerInfo);
-    } // If something threw an error, try rendering one more time. We'll render
+    // If something threw an error, try rendering one more time. We'll render
     // synchronously to block concurrent data mutations, and we'll includes
     // all pending updates are included. If it still fails after the second
     // attempt, we'll give up and commit the resulting tree.
-
     var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
 
     if (errorRetryLanes !== NoLanes) {
       lanes = errorRetryLanes;
-      exitStatus = renderRootSync(root, lanes);
+      exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
     }
-
-    executionContext = prevExecutionContext;
   }
 
   if (exitStatus === RootFatalErrored) {
@@ -20767,7 +21294,7 @@ function batchedUpdates$1(fn, a) {
 
     if (
       executionContext === NoContext && // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
-      !ReactCurrentActQueue.isBatchingLegacy
+      !ReactCurrentActQueue$1.isBatchingLegacy
     ) {
       resetRenderTimer();
       flushSyncCallbacksOnlyInLegacyMode();
@@ -20855,7 +21382,8 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootExitStatus = RootIncomplete;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
-  workInProgressRootUpdatedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
   enqueueInterleavedUpdates();
 
@@ -20997,7 +21525,7 @@ function renderDidSuspendDelayIfPossible() {
   if (
     workInProgressRoot !== null &&
     (includesNonIdleWork(workInProgressRootSkippedLanes) ||
-      includesNonIdleWork(workInProgressRootUpdatedLanes))
+      includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes))
   ) {
     // Mark the current render as suspended so that we switch to working on
     // the updates that were skipped. Usually we only suspend at the end of
@@ -21048,6 +21576,10 @@ function renderRootSync(root, lanes) {
     prepareFreshStack(root, lanes);
   }
 
+  {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopSync();
@@ -21069,6 +21601,10 @@ function renderRootSync(root, lanes) {
     );
   }
 
+  {
+    markRenderStopped();
+  } // Set this to null to indicate there's no in-progress render.
+
   workInProgressRoot = null;
   workInProgressRootRenderLanes = NoLanes;
   return workInProgressRootExitStatus;
@@ -21110,6 +21646,10 @@ function renderRootConcurrent(root, lanes) {
     prepareFreshStack(root, lanes);
   }
 
+  {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopConcurrent();
@@ -21124,8 +21664,18 @@ function renderRootConcurrent(root, lanes) {
   executionContext = prevExecutionContext;
 
   if (workInProgress !== null) {
+    // Still work remaining.
+    {
+      markRenderYielded();
+    }
+
     return RootIncomplete;
   } else {
+    // Completed the tree.
+    {
+      markRenderStopped();
+    } // Set this to null to indicate there's no in-progress render.
+
     workInProgressRoot = null;
     workInProgressRootRenderLanes = NoLanes; // Return the final exit status.
 
@@ -21297,7 +21847,15 @@ function commitRootImpl(root, renderPriorityLevel) {
   var finishedWork = root.finishedWork;
   var lanes = root.finishedLanes;
 
+  {
+    markCommitStarted(lanes);
+  }
+
   if (finishedWork === null) {
+    {
+      markCommitStopped();
+    }
+
     return null;
   } else {
     {
@@ -21346,7 +21904,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
       scheduleCallback$1(NormalPriority, function() {
-        flushPassiveEffects();
+        flushPassiveEffects(); // This render triggered passive effects: release the root cache pool
+        // *after* passive effects fire to avoid freeing a cache pool that may
+        // be referenced by a node in the tree (HostRoot, Cache boundary etc)
+
         return null;
       });
     }
@@ -21400,7 +21961,15 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     root.current = finishedWork; // The next phase is the layout phase, where we call effects that read
 
+    {
+      markLayoutEffectsStarted(lanes);
+    }
+
     commitLayoutEffects(finishedWork, root, lanes);
+
+    {
+      markLayoutEffectsStopped();
+    }
     // opportunity to paint.
 
     requestPaint();
@@ -21504,6 +22073,10 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   flushSyncCallbacks();
 
+  {
+    markCommitStopped();
+  }
+
   return null;
 }
 
@@ -21526,7 +22099,7 @@ function flushPassiveEffects() {
       return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdatePriority(previousPriority);
-      ReactCurrentBatchConfig$2.transition = prevTransition;
+      ReactCurrentBatchConfig$2.transition = prevTransition; // Once passive effects have run for the tree - giving components a
     }
   }
 
@@ -21552,6 +22125,7 @@ function flushPassiveEffectsImpl() {
   }
 
   var root = rootWithPendingPassiveEffects;
+  var lanes = pendingPassiveEffectsLanes;
   rootWithPendingPassiveEffects = null; // TODO: This is sometimes out of sync with rootWithPendingPassiveEffects.
   // Figure out why and fix it. It's not causing any known issues (probably
   // because it's only used for profiling), but it's a refactor hazard.
@@ -21562,6 +22136,10 @@ function flushPassiveEffectsImpl() {
     throw new Error("Cannot flush passive effects while already rendering.");
   }
 
+  {
+    markPassiveEffectsStarted(lanes);
+  }
+
   var prevExecutionContext = executionContext;
   executionContext |= CommitContext;
   commitPassiveUnmountEffects(root.current);
@@ -21577,6 +22155,10 @@ function flushPassiveEffectsImpl() {
     }
   }
 
+  {
+    markPassiveEffectsStopped();
+  }
+
   {
     commitDoubleInvokeEffectsInDEV(root.current, true);
   }
@@ -21707,6 +22289,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) {
 
   var eventTime = requestEventTime();
   markRootPinged(root, pingedLanes);
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
 
   if (
     workInProgressRoot === root &&
@@ -22032,11 +22615,7 @@ var didWarnAboutUpdateInRenderForAnotherComponent;
 
 function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   {
-    if (
-      isRendering &&
-      (executionContext & RenderContext) !== NoContext &&
-      !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
-    ) {
+    if (isRendering && !getIsUpdatingOpaqueValueInRenderPhaseInDEV()) {
       switch (fiber.tag) {
         case FunctionComponent:
         case ForwardRef:
@@ -22101,7 +22680,7 @@ function scheduleCallback$1(priorityLevel, callback) {
   {
     // If we're currently inside an `act` scope, bypass Scheduler and push to
     // the `act` queue instead.
-    var actQueue = ReactCurrentActQueue.current;
+    var actQueue = ReactCurrentActQueue$1.current;
 
     if (actQueue !== null) {
       actQueue.push(callback);
@@ -22122,48 +22701,41 @@ function cancelCallback$1(callbackNode) {
 
 function shouldForceFlushFallbacksInDEV() {
   // Never force flush in production. This function should get stripped out.
-  return ReactCurrentActQueue.current !== null;
+  return ReactCurrentActQueue$1.current !== null;
 }
 
-function warnIfNotCurrentlyActingEffectsInDEV(fiber) {
+function warnIfUpdatesNotWrappedWithActDEV(fiber) {
   {
-    if (
-      (fiber.mode & StrictLegacyMode) !== NoMode &&
-      ReactCurrentActQueue.current === null && // Our internal tests use a custom implementation of `act` that works by
-      // mocking the Scheduler package. Disable the `act` warning.
-      // TODO: Maybe the warning should be disabled by default, and then turned
-      // on at the testing frameworks layer? Instead of what we do now, which
-      // is check if a `jest` global is defined.
-      ReactCurrentActQueue.disableActWarning === false
-    ) {
-      error(
-        "An update to %s ran an effect, but was not wrapped in act(...).\n\n" +
-          "When testing, code that causes React state updates should be " +
-          "wrapped into act(...):\n\n" +
-          "act(() => {\n" +
-          "  /* fire events that update state */\n" +
-          "});\n" +
-          "/* assert on the output */\n\n" +
-          "This ensures that you're testing the behavior the user would see " +
-          "in the browser." +
-          " Learn more at https://reactjs.org/link/wrap-tests-with-act",
-        getComponentNameFromFiber(fiber)
-      );
+    if (fiber.mode & ConcurrentMode) {
+      if (!isConcurrentActEnvironment()) {
+        // Not in an act environment. No need to warn.
+        return;
+      }
+    } else {
+      // Legacy mode has additional cases where we suppress a warning.
+      if (!isLegacyActEnvironment()) {
+        // Not in an act environment. No need to warn.
+        return;
+      }
+
+      if (executionContext !== NoContext) {
+        // Legacy mode doesn't warn if the update is batched, i.e.
+        // batchedUpdates or flushSync.
+        return;
+      }
+
+      if (
+        fiber.tag !== FunctionComponent &&
+        fiber.tag !== ForwardRef &&
+        fiber.tag !== SimpleMemoComponent
+      ) {
+        // For backwards compatibility with pre-hooks code, legacy mode only
+        // warns for updates that originate from a hook.
+        return;
+      }
     }
-  }
-}
 
-function warnIfNotCurrentlyActingUpdatesInDEV(fiber) {
-  {
-    if (
-      executionContext === NoContext &&
-      ReactCurrentActQueue.current === null && // Our internal tests use a custom implementation of `act` that works by
-      // mocking the Scheduler package. Disable the `act` warning.
-      // TODO: Maybe the warning should be disabled by default, and then turned
-      // on at the testing frameworks layer? Instead of what we do now, which
-      // is check if a `jest` global is defined.
-      ReactCurrentActQueue.disableActWarning === false
-    ) {
+    if (ReactCurrentActQueue$1.current === null) {
       var previousFiber = current;
 
       try {
@@ -22193,7 +22765,29 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber) {
   }
 }
 
-var warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
+function warnIfSuspenseResolutionNotWrappedWithActDEV(root) {
+  {
+    if (
+      root.tag !== LegacyRoot &&
+      isConcurrentActEnvironment() &&
+      ReactCurrentActQueue$1.current === null
+    ) {
+      error(
+        "A suspended resource finished loading inside a test, but the event " +
+          "was not wrapped in act(...).\n\n" +
+          "When testing, code that resolves suspended data should be wrapped " +
+          "into act(...):\n\n" +
+          "act(() => {\n" +
+          "  /* finish loading suspended data */\n" +
+          "});\n" +
+          "/* assert on the output */\n\n" +
+          "This ensures that you're testing the behavior the user would see " +
+          "in the browser." +
+          " Learn more at https://reactjs.org/link/wrap-tests-with-act"
+      );
+    }
+  }
+}
 
 /* eslint-disable react-internal/prod-error-codes */
 var resolveFamily = null; // $FlowFixMe Flow gets confused by a WeakSet feature check below.
@@ -23261,7 +23855,7 @@ function assignFiberPropertiesInDEV(target, source) {
   return target;
 }
 
-function FiberRootNode(containerInfo, tag, hydrate) {
+function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
   this.tag = tag;
   this.containerInfo = containerInfo;
   this.pendingChildren = null;
@@ -23284,6 +23878,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.finishedLanes = NoLanes;
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
+  this.identifierPrefix = identifierPrefix;
 
   {
     this.effectDuration = 0;
@@ -23318,9 +23913,10 @@ function createFiberRoot(
   hydrate,
   hydrationCallbacks,
   isStrictMode,
-  concurrentUpdatesByDefaultOverride
+  concurrentUpdatesByDefaultOverride,
+  identifierPrefix
 ) {
-  var root = new FiberRootNode(containerInfo, tag, hydrate);
+  var root = new FiberRootNode(containerInfo, tag, hydrate, identifierPrefix);
   // stateNode is any.
 
   var uninitializedFiber = createHostRootFiber(
@@ -23342,6 +23938,8 @@ function createFiberRoot(
   return root;
 }
 
+var ReactVersion = "18.0.0-rc.0-51947a14b-20220113";
+
 function createPortal(
   children,
   containerInfo, // TODO: figure out the API for cross-renderer implementation.
@@ -23467,7 +24065,8 @@ function createContainer(
   hydrate,
   hydrationCallbacks,
   isStrictMode,
-  concurrentUpdatesByDefaultOverride
+  concurrentUpdatesByDefaultOverride,
+  identifierPrefix
 ) {
   return createFiberRoot(
     containerInfo,
@@ -23475,7 +24074,8 @@ function createContainer(
     hydrate,
     hydrationCallbacks,
     isStrictMode,
-    concurrentUpdatesByDefaultOverride
+    concurrentUpdatesByDefaultOverride,
+    identifierPrefix
   );
 }
 function updateContainer(element, container, parentComponent, callback) {
@@ -23487,6 +24087,10 @@ function updateContainer(element, container, parentComponent, callback) {
   var eventTime = requestEventTime();
   var lane = requestUpdateLane(current$1);
 
+  {
+    markRenderScheduled(lane);
+  }
+
   var context = getContextForSubtree(parentComponent);
 
   if (container.context === null) {
@@ -24250,7 +24854,15 @@ function render(element, containerTag, callback) {
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
+    root = createContainer(
+      containerTag,
+      LegacyRoot,
+      false,
+      null,
+      false,
+      null,
+      ""
+    );
     roots.set(containerTag, root);
   }
 
@@ -24323,5 +24935,14 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.unmountComponentAtNodeAndRemoveContainer = unmountComponentAtNodeAndRemoveContainer;
 exports.unstable_batchedUpdates = batchedUpdates;
 
+          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+}
+        
   })();
 }