diff --git a/Libraries/Renderer/REVISION b/Libraries/Renderer/REVISION
index 97d8977a5a38e1..c97986af558a41 100644
--- a/Libraries/Renderer/REVISION
+++ b/Libraries/Renderer/REVISION
@@ -1 +1 @@
-afcb9cdc9343ddc134b03dcf4d7fbc0810b6002b
\ No newline at end of file
+c0c71a868560b3042847722659579418bfe2d7e1
\ No newline at end of file
diff --git a/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
index 6bc84b6f4956f5..2306f9e6656407 100644
--- a/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
+++ b/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
@@ -7,14 +7,25 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<d652a63f09b72c44e6b8e592ebfd0790>>
+ * @generated SignedSource<<86bcbed641a7044e773a303487a93758>>
  */
 
 '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");
@@ -2599,7 +2610,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;
@@ -2620,7 +2630,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");
@@ -2853,7 +2862,7 @@ 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;
@@ -2891,6 +2900,9 @@ var Callback =
 var DidCapture =
   /*                   */
   128;
+var ForceClientRender =
+  /*            */
+  256;
 var Ref =
   /*                          */
   512;
@@ -2928,6 +2940,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,
@@ -2935,22 +2950,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
@@ -4175,6 +4190,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;
@@ -4286,7 +4319,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;
@@ -4764,7 +4850,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
@@ -4853,20 +4938,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;
@@ -5205,6 +5276,8 @@ function getCurrentEventPriority() {
 
   return DefaultEventPriority;
 } // The Fabric renderer is secondary to the existing React Native renderer.
+
+var warnsIfNotActing = false;
 var scheduleTimeout = setTimeout;
 var cancelTimeout = clearTimeout;
 var noTimeout = -1; // -------------------
@@ -5300,9 +5373,6 @@ function appendChildToContainerChildSet(childSet, child) {
 function finalizeContainerChildren(container, newChildren) {
   completeRoot(container, newChildren);
 }
-function makeClientIdInDEV(warnOnAccessInDEV) {
-  throw new Error("Not yet implemented");
-}
 function preparePortalMount(portalInstance) {
   // noop
 }
@@ -5938,12 +6008,357 @@ function flushSyncCallbacks() {
   return null;
 }
 
-var ReactVersion = "18.0.0-afcb9cdc9-20211008";
+var ReactVersion = "18.0.0-c0c71a868-20211112";
+
+var SCHEDULING_PROFILER_VERSION = 1;
+
+var getLabelForLane$1 = getLabelForLane;
+var TotalLanes$1 = TotalLanes;
+/**
+ * If performance exists and supports the subset of the User Timing API that we
+ * require.
+ */
+
+var supportsUserTiming =
+  typeof performance !== "undefined" &&
+  typeof performance.mark === "function" &&
+  typeof performance.clearMarks === "function";
+var supportsUserTimingV3 = false;
+
+{
+  if (supportsUserTiming) {
+    var CHECK_V3_MARK = "__v3";
+    var markOptions = {}; // $FlowFixMe: Ignore Flow complaining about needing a value
+
+    Object.defineProperty(markOptions, "startTime", {
+      get: function() {
+        supportsUserTimingV3 = true;
+        return 0;
+      },
+      set: function() {}
+    });
+
+    try {
+      // $FlowFixMe: Flow expects the User Timing level 2 API.
+      performance.mark(CHECK_V3_MARK, markOptions);
+    } catch (error) {
+      // Ignore
+    } finally {
+      performance.clearMarks(CHECK_V3_MARK);
+    }
+  }
+}
+
+var laneLabels = [];
+function getLaneLabels() {
+  if (laneLabels.length === 0) {
+    var lane = 1;
+
+    for (var index = 0; index < TotalLanes$1; index++) {
+      laneLabels.push(getLabelForLane$1(lane));
+      lane *= 2;
+    }
+  }
+
+  return laneLabels;
+}
+
+function markLaneToLabelMetadata() {
+  getLaneLabels();
+  markAndClear("--react-lane-labels-" + laneLabels.join(","));
+}
+
+function markAndClear(name) {
+  performance.mark(name);
+  performance.clearMarks(name);
+}
+
+function markVersionMetadata() {
+  markAndClear("--react-version-" + ReactVersion);
+  markAndClear("--profiler-version-" + SCHEDULING_PROFILER_VERSION);
+}
+
+function markInternalModuleRanges() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" &&
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === "function"
+  ) {
+    var ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges(); // This check would not be required,
+    // except that it's possible for things to override __REACT_DEVTOOLS_GLOBAL_HOOK__.
+
+    if (isArray(ranges)) {
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+
+        if (isArray(range) && range.length === 2) {
+          var _ranges$i = ranges[i],
+            startStackFrame = _ranges$i[0],
+            stopStackFrame = _ranges$i[1];
+          markAndClear("--react-internal-module-start-" + startStackFrame);
+          markAndClear("--react-internal-module-stop-" + stopStackFrame);
+        }
+      }
+    }
+  }
+}
+
+function markCommitStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--commit-start-" + lanes); // Certain types of metadata should be logged infrequently.
+      // Normally we would log this during module init,
+      // but there's no guarantee a user is profiling at that time.
+      // Commits happen infrequently (less than renders or state updates)
+      // so we log this extra information along with a commit.
+      // It will likely be logged more than once but that's okay.
+      //
+      // TODO Once DevTools supports starting/stopping the profiler,
+      // we can log this data only once (when started) and remove the per-commit logging.
+
+      markVersionMetadata();
+      markLaneToLabelMetadata();
+      markInternalModuleRanges();
+    }
+  }
+}
+function markCommitStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--commit-stop");
+    }
+  }
+}
+function markComponentRenderStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-render-start-" + componentName);
+    }
+  }
+}
+function markComponentRenderStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-render-stop");
+    }
+  }
+}
+function markComponentPassiveEffectMountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-passive-effect-mount-start-" + componentName);
+    }
+  }
+}
+function markComponentPassiveEffectMountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-passive-effect-mount-stop");
+    }
+  }
+}
+function markComponentPassiveEffectUnmountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-passive-effect-unmount-start-" + componentName);
+    }
+  }
+}
+function markComponentPassiveEffectUnmountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-passive-effect-unmount-stop");
+    }
+  }
+}
+function markComponentLayoutEffectMountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-layout-effect-mount-start-" + componentName);
+    }
+  }
+}
+function markComponentLayoutEffectMountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-layout-effect-mount-stop");
+    }
+  }
+}
+function markComponentLayoutEffectUnmountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-layout-effect-unmount-start-" + componentName);
+    }
+  }
+}
+function markComponentLayoutEffectUnmountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-layout-effect-unmount-stop");
+    }
+  }
+}
+function markComponentErrored(fiber, thrownValue, lanes) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown";
+      var phase = fiber.alternate === null ? "mount" : "update";
+      var message = "";
+
+      if (
+        thrownValue !== null &&
+        typeof thrownValue === "object" &&
+        typeof thrownValue.message === "string"
+      ) {
+        message = thrownValue.message;
+      } else if (typeof thrownValue === "string") {
+        message = thrownValue;
+      } // TODO (timeline) Add component stack id
+
+      markAndClear("--error-" + componentName + "-" + phase + "-" + message);
+    }
+  }
+}
+var PossiblyWeakMap$1 = typeof WeakMap === "function" ? WeakMap : Map; // $FlowFixMe: Flow cannot handle polymorphic WeakMaps
+
+var wakeableIDs = new PossiblyWeakMap$1();
+var wakeableID = 0;
+
+function getWakeableID(wakeable) {
+  if (!wakeableIDs.has(wakeable)) {
+    wakeableIDs.set(wakeable, wakeableID++);
+  }
+
+  return wakeableIDs.get(wakeable);
+}
+
+function markComponentSuspended(fiber, wakeable, lanes) {
+  {
+    if (supportsUserTimingV3) {
+      var eventType = wakeableIDs.has(wakeable) ? "resuspend" : "suspend";
+      var id = getWakeableID(wakeable);
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown";
+      var phase = fiber.alternate === null ? "mount" : "update"; // Following the non-standard fn.displayName convention,
+      // frameworks like Relay may also annotate Promises with a displayName,
+      // describing what operation/data the thrown Promise is related to.
+      // When this is available we should pass it along to the Timeline.
+
+      var displayName = wakeable.displayName || ""; // TODO (timeline) Add component stack id
+
+      markAndClear(
+        "--suspense-" +
+          eventType +
+          "-" +
+          id +
+          "-" +
+          componentName +
+          "-" +
+          phase +
+          "-" +
+          lanes +
+          "-" +
+          displayName
+      );
+      wakeable.then(
+        function() {
+          return markAndClear(
+            "--suspense-resolved-" + id + "-" + componentName
+          );
+        },
+        function() {
+          return markAndClear(
+            "--suspense-rejected-" + id + "-" + componentName
+          );
+        }
+      );
+    }
+  }
+}
+function markLayoutEffectsStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--layout-effects-start-" + lanes);
+    }
+  }
+}
+function markLayoutEffectsStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--layout-effects-stop");
+    }
+  }
+}
+function markPassiveEffectsStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--passive-effects-start-" + lanes);
+    }
+  }
+}
+function markPassiveEffectsStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--passive-effects-stop");
+    }
+  }
+}
+function markRenderStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--render-start-" + lanes);
+    }
+  }
+}
+function markRenderYielded() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--render-yield");
+    }
+  }
+}
+function markRenderStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--render-stop");
+    }
+  }
+}
+function markRenderScheduled(lane) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--schedule-render-" + lane);
+    }
+  }
+}
+function markForceUpdateScheduled(fiber, lane) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
 
-function markComponentRenderStopped() {}
-function markComponentErrored(fiber, thrownValue, lanes) {}
+      markAndClear("--schedule-forced-update-" + lane + "-" + componentName);
+    }
+  }
+}
+function markStateUpdateScheduled(fiber, lane) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
 
-function markComponentSuspended(fiber, wakeable, lanes) {}
+      markAndClear("--schedule-state-update-" + lane + "-" + componentName);
+    }
+  }
+}
 
 var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
 var NoTransition = 0;
@@ -5979,9 +6394,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;
     }
@@ -6088,11 +6505,6 @@ function setIsRendering(rendering) {
     isRendering = rendering;
   }
 }
-function getIsRendering() {
-  {
-    return isRendering;
-  }
-}
 
 var ReactStrictModeWarnings = {
   recordUnsafeLifecycleWarnings: function(fiber, instance) {},
@@ -6452,7 +6864,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
@@ -6467,17 +6878,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;
@@ -7554,6 +7954,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markStateUpdateScheduled(fiber, lane);
+    }
   },
   enqueueReplaceState: function(inst, payload, callback) {
     var fiber = get(inst);
@@ -7577,6 +7981,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markStateUpdateScheduled(fiber, lane);
+    }
   },
   enqueueForceUpdate: function(inst, callback) {
     var fiber = get(inst);
@@ -7599,6 +8007,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markForceUpdateScheduled(fiber, lane);
+    }
   }
 };
 
@@ -8537,6 +8949,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;
@@ -8820,7 +9310,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;
     }
 
@@ -9260,6 +9752,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;
     }
 
@@ -9466,6 +9959,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;
     }
 
@@ -10024,47 +10518,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.
 
@@ -10126,11 +10579,9 @@ function getSuspendedCachePool() {
 var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
   ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig;
 var didWarnAboutMismatchedHooksForComponent;
-var didWarnAboutUseOpaqueIdentifier;
 var didWarnUncachedGetSnapshot;
 
 {
-  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -10154,7 +10605,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.
@@ -10335,6 +10792,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)
@@ -10366,6 +10824,7 @@ function renderWithHooks(
 
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
+      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -10434,7 +10893,8 @@ function renderWithHooks(
     }
   }
 
-  didScheduleRenderPhaseUpdate = false;
+  didScheduleRenderPhaseUpdate = false; // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -10445,6 +10905,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).
@@ -10504,6 +10972,7 @@ function resetHooksAfterThrow() {
   }
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
 }
 
 function mountWorkInProgressHook() {
@@ -11723,44 +12192,23 @@ 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."
-      );
-
-      didWarnAboutUseOpaqueIdentifier[name] = true;
-    }
-  }
-}
-
-function mountOpaqueIdentifier() {
-  var makeId = makeClientIdInDEV.bind(
-    null,
-    warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber$1)
-  );
+function mountId() {
+  var hook = mountWorkInProgressHook();
+  var id;
 
   {
-    var _id = makeId();
-
-    mountState(_id);
-    return _id;
+    // Use a lowercase r prefix for client-generated ids.
+    var globalClientId = globalClientIdCounter++;
+    id = "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;
 }
 
@@ -11788,7 +12236,6 @@ function dispatchReducerAction(fiber, queue, action) {
     enqueueRenderPhaseUpdate(queue, update);
   } else {
     enqueueUpdate$1(fiber, queue, update);
-
     var eventTime = requestEventTime();
     var root = scheduleUpdateOnFiber(fiber, lane, eventTime);
 
@@ -11796,6 +12243,8 @@ function dispatchReducerAction(fiber, queue, action) {
       entangleTransitionUpdate(root, queue, lane);
     }
   }
+
+  markUpdateInDevTools(fiber, lane);
 }
 
 function dispatchSetState(fiber, queue, action) {
@@ -11875,6 +12324,8 @@ function dispatchSetState(fiber, queue, action) {
       entangleTransitionUpdate(root, queue, lane);
     }
   }
+
+  markUpdateInDevTools(fiber, lane);
 }
 
 function isRenderPhaseUpdate(fiber) {
@@ -11953,6 +12404,12 @@ function entangleTransitionUpdate(root, queue, lane) {
   }
 }
 
+function markUpdateInDevTools(fiber, lane, action) {
+  {
+    markStateUpdateScheduled(fiber, lane);
+  }
+}
+
 var ContextOnlyDispatcher = {
   readContext: readContext,
   useCallback: throwInvalidHookError,
@@ -11970,7 +12427,7 @@ var ContextOnlyDispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
-  useOpaqueIdentifier: throwInvalidHookError,
+  useId: throwInvalidHookError,
   unstable_isNewReconciler: enableNewReconciler
 };
 
@@ -12107,10 +12564,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
   };
@@ -12215,10 +12672,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
   };
@@ -12323,10 +12780,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
   };
@@ -12431,10 +12888,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
   };
@@ -12555,11 +13012,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
   };
@@ -12680,11 +13137,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
   };
@@ -12805,11 +13262,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
   };
@@ -13093,7 +13550,7 @@ function logCapturedError(boundary, errorInfo) {
   }
 }
 
-var PossiblyWeakMap$1 = typeof WeakMap === "function" ? WeakMap : Map;
+var PossiblyWeakMap$2 = typeof WeakMap === "function" ? WeakMap : Map;
 
 function createRootErrorUpdate(fiber, errorInfo, lane) {
   var update = createUpdate(NoTimestamp, lane); // Unmount the root by rendering null.
@@ -13198,7 +13655,7 @@ function attachWakeableListeners(suspenseBoundary, root, wakeable, lanes) {
     var threadIDs;
 
     if (pingCache === null) {
-      pingCache = root.pingCache = new PossiblyWeakMap$1();
+      pingCache = root.pingCache = new PossiblyWeakMap$2();
       threadIDs = new Set();
       pingCache.set(wakeable, threadIDs);
     } else {
@@ -13271,157 +13728,157 @@ function resetSuspendedComponent(sourceFiber, rootRenderLanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber,
-  sourceFiber,
-  root,
-  rootRenderLanes
-) {
+function getNearestSuspenseBoundaryToCapture(returnFiber) {
+  var node = returnFiber;
   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 (enablePersistentOffscreenHostContainer) {
-            // Another legacy Suspense quirk. In persistent mode, if this is the
-            // initial mount, override the props of the host container to hide
-            // its contents.
-            var currentSuspenseBoundary = suspenseBoundary.alternate;
-
-            if (currentSuspenseBoundary === null) {
-              var offscreenFiber = suspenseBoundary.child;
-              var offscreenContainer = offscreenFiber.child;
-
-              if (offscreenContainer !== null) {
-                var children = offscreenContainer.memoizedProps.children;
-                var containerProps = getOffscreenContainerProps(
-                  "hidden",
-                  children
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
-              }
-            }
-          }
-
-          if (sourceFiber.tag === ClassComponent) {
-            var currentSourceFiber = sourceFiber.alternate;
+      shouldCaptureSuspense(node, hasInvisibleParentBoundary)
+    ) {
+      return node;
+    } // This boundary already captured during this render. Continue to the next
+    // boundary.
 
-            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.
+    node = node.return;
+  } while (node !== null);
 
-          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
-        }
+  return null;
+}
 
-        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.
+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.
       //
-      // If there's ambiguity due to batching it's resolved in preference of:
-      // 1) "delayed", 2) "initial render", 3) "retry".
+      // 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.
       //
-      // 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.
+      // 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 (enablePersistentOffscreenHostContainer) {
+        // Another legacy Suspense quirk. In persistent mode, if this is the
+        // initial mount, override the props of the host container to hide
+        // its contents.
+        var currentSuspenseBoundary = suspenseBoundary.alternate;
+
+        if (currentSuspenseBoundary === null) {
+          var offscreenFiber = suspenseBoundary.child;
+          var offscreenContainer = offscreenFiber.child;
+
+          if (offscreenContainer !== null) {
+            var children = offscreenContainer.memoizedProps.children;
+            var containerProps = getOffscreenContainerProps("hidden", children);
+            offscreenContainer.pendingProps = containerProps;
+            offscreenContainer.memoizedProps = containerProps;
+          }
+        }
+      }
 
-      suspenseBoundary.flags |= ShouldCapture; // TODO: I think we can remove this, since we now use `DidCapture` in
-      // the begin phase to prevent an early bailout.
+      if (sourceFiber.tag === ClassComponent) {
+        var currentSourceFiber = sourceFiber.alternate;
 
-      suspenseBoundary.lanes = rootRenderLanes;
-      return suspenseBoundary;
-    } // This boundary already captured during this render. Continue to the next
-    // boundary.
+        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.
 
-    node = node.return;
-  } while (node !== null); // Could not find a Suspense boundary capable of capturing.
+      sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
+    }
 
-  return null;
+    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(
@@ -13450,14 +13907,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,
@@ -14045,7 +14505,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:
@@ -14238,7 +14703,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
@@ -14251,8 +14716,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.
 
@@ -14711,8 +15176,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);
@@ -14724,6 +15194,7 @@ function updateForwardRef(
       ref,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
 
     if (workInProgress.mode & StrictLegacyMode) {
       setIsStrictModeForDevtools(true);
@@ -14737,6 +15208,7 @@ function updateForwardRef(
           ref,
           renderLanes
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -14745,10 +15217,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);
@@ -15181,8 +15657,13 @@ function updateFunctionComponent(
   }
 
   var nextChildren;
+  var hasId;
   prepareToReadContext(workInProgress, renderLanes);
 
+  {
+    markComponentRenderStarted(workInProgress);
+  }
+
   {
     ReactCurrentOwner$1.current = workInProgress;
     setIsRendering(true);
@@ -15194,6 +15675,7 @@ function updateFunctionComponent(
       context,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
 
     if (workInProgress.mode & StrictLegacyMode) {
       setIsStrictModeForDevtools(true);
@@ -15207,6 +15689,7 @@ function updateFunctionComponent(
           context,
           renderLanes
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -15215,10 +15698,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);
@@ -15402,6 +15889,10 @@ function finishClassComponent(
       stopProfilerTimerIfRunning();
     }
   } else {
+    {
+      markComponentRenderStarted(workInProgress);
+    }
+
     {
       setIsRendering(true);
       nextChildren = instance.render();
@@ -15418,6 +15909,10 @@ function finishClassComponent(
 
       setIsRendering(false);
     }
+
+    {
+      markComponentRenderStopped();
+    }
   } // React DevTools reads this flag.
 
   workInProgress.flags |= PerformedWork;
@@ -15747,6 +16242,11 @@ function mountIndeterminateComponent(
 
   prepareToReadContext(workInProgress, renderLanes);
   var value;
+  var hasId;
+
+  {
+    markComponentRenderStarted(workInProgress);
+  }
 
   {
     if (
@@ -15781,9 +16281,14 @@ function mountIndeterminateComponent(
       context,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
     setIsRendering(false);
   }
 
+  {
+    markComponentRenderStopped();
+  } // React DevTools reads this flag.
+
   workInProgress.flags |= PerformedWork;
 
   {
@@ -15887,6 +16392,7 @@ function mountIndeterminateComponent(
             context,
             renderLanes
           );
+          hasId = checkDidRenderIdHook();
         } finally {
           setIsStrictModeForDevtools(false);
         }
@@ -15974,6 +16480,7 @@ function validateFunctionComponentInDev(workInProgress, Component) {
 
 var SUSPENDED_MARKER = {
   dehydrated: null,
+  treeContext: null,
   retryLane: NoLane
 };
 
@@ -17006,6 +17513,10 @@ function updateContextConsumer(current, workInProgress, renderLanes) {
   prepareToReadContext(workInProgress, renderLanes);
   var newValue = readContext(context);
 
+  {
+    markComponentRenderStarted(workInProgress);
+  }
+
   var newChildren;
 
   {
@@ -17015,6 +17526,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;
@@ -17562,6 +18077,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;
@@ -17657,6 +18178,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;
@@ -17976,7 +18503,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();
+            }
+          }
         }
       }
 
@@ -17985,7 +18528,7 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag, finishedWork) {
+function commitHookEffectListMount(flags, finishedWork) {
   var updateQueue = finishedWork.updateQueue;
   var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
@@ -17994,11 +18537,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;
 
@@ -18524,10 +19082,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);
@@ -18535,6 +19096,10 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
                 } else {
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
+
+                {
+                  markComponentLayoutEffectUnmountStopped();
+                }
               }
             }
 
@@ -19487,11 +20052,44 @@ 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
+    return warnsIfNotActing;
+  }
+}
+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;
@@ -19544,7 +20142,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.
@@ -19571,7 +20171,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;
@@ -19676,60 +20276,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;
@@ -19834,7 +20454,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
     )
   ) {
@@ -19866,8 +20486,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));
@@ -20057,7 +20677,26 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     clearContainer(root.containerInfo);
   }
 
-  var exitStatus = renderRootSync(root, errorRetryLanes);
+  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;
+    }
+
+    break;
+  }
+
   executionContext = prevExecutionContext;
   return exitStatus;
 }
@@ -20244,7 +20883,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
@@ -20270,31 +20912,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) {
@@ -20327,7 +20954,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();
@@ -20415,7 +21042,8 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootExitStatus = RootIncomplete;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
-  workInProgressRootUpdatedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
   enqueueInterleavedUpdates();
 
@@ -20557,7 +21185,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
@@ -20608,6 +21236,10 @@ function renderRootSync(root, lanes) {
     prepareFreshStack(root, lanes);
   }
 
+  {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopSync();
@@ -20629,6 +21261,10 @@ function renderRootSync(root, lanes) {
     );
   }
 
+  {
+    markRenderStopped();
+  } // Set this to null to indicate there's no in-progress render.
+
   workInProgressRoot = null;
   workInProgressRootRenderLanes = NoLanes;
   return workInProgressRootExitStatus;
@@ -20670,6 +21306,10 @@ function renderRootConcurrent(root, lanes) {
     prepareFreshStack(root, lanes);
   }
 
+  {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopConcurrent();
@@ -20684,8 +21324,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.
 
@@ -20857,7 +21507,15 @@ function commitRootImpl(root, renderPriorityLevel) {
   var finishedWork = root.finishedWork;
   var lanes = root.finishedLanes;
 
+  {
+    markCommitStarted(lanes);
+  }
+
   if (finishedWork === null) {
+    {
+      markCommitStopped();
+    }
+
     return null;
   } else {
     {
@@ -20906,7 +21564,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;
       });
     }
@@ -20960,7 +21621,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();
@@ -21064,6 +21733,10 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   flushSyncCallbacks();
 
+  {
+    markCommitStopped();
+  }
+
   return null;
 }
 
@@ -21086,7 +21759,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
     }
   }
 
@@ -21112,6 +21785,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.
@@ -21122,6 +21796,10 @@ function flushPassiveEffectsImpl() {
     throw new Error("Cannot flush passive effects while already rendering.");
   }
 
+  {
+    markPassiveEffectsStarted(lanes);
+  }
+
   var prevExecutionContext = executionContext;
   executionContext |= CommitContext;
   commitPassiveUnmountEffects(root.current);
@@ -21137,6 +21815,10 @@ function flushPassiveEffectsImpl() {
     }
   }
 
+  {
+    markPassiveEffectsStopped();
+  }
+
   {
     commitDoubleInvokeEffectsInDEV(root.current, true);
   }
@@ -21267,6 +21949,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) {
 
   var eventTime = requestEventTime();
   markRootPinged(root, pingedLanes);
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
 
   if (
     workInProgressRoot === root &&
@@ -21592,11 +22275,7 @@ var didWarnAboutUpdateInRenderForAnotherComponent;
 
 function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   {
-    if (
-      isRendering &&
-      (executionContext & RenderContext) !== NoContext &&
-      !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
-    ) {
+    if (isRendering && !getIsUpdatingOpaqueValueInRenderPhaseInDEV()) {
       switch (fiber.tag) {
         case FunctionComponent:
         case ForwardRef:
@@ -21661,7 +22340,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);
@@ -21682,7 +22361,92 @@ 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 warnIfUpdatesNotWrappedWithActDEV(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;
+      }
+    }
+
+    if (ReactCurrentActQueue$1.current === null) {
+      var previousFiber = current;
+
+      try {
+        setCurrentFiber(fiber);
+
+        error(
+          "An update to %s inside a test 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)
+        );
+      } finally {
+        if (previousFiber) {
+          setCurrentFiber(fiber);
+        } else {
+          resetCurrentFiber();
+        }
+      }
+    }
+  }
+}
+
+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 */
@@ -22981,6 +23745,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) {
@@ -23815,5 +24583,14 @@ exports.sendAccessibilityEvent = sendAccessibilityEvent;
 exports.stopSurface = stopSurface;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 
+          /* 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());
+}
+        
   })();
 }
diff --git a/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
index 73b6f5eb765f6e..4445ef5c2f0695 100644
--- a/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
+++ b/Libraries/Renderer/implementations/ReactFabric-prod.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<0641813b146d4710c4029f156d65891e>>
+ * @generated SignedSource<<b80a65da6d07065eb2cb1fb8dca0c565>>
  */
 
 "use strict";
@@ -1619,6 +1619,13 @@ function onCommitRoot(root) {
       );
     } catch (err) {}
 }
+var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
+  log = Math.log,
+  LN2 = Math.LN2;
+function clz32Fallback(x) {
+  x >>>= 0;
+  return 0 === x ? 32 : (31 - ((log(x) / LN2) | 0)) | 0;
+}
 var nextTransitionLane = 64,
   nextRetryLane = 4194304;
 function getHighestPriorityLanes(lanes) {
@@ -1802,12 +1809,6 @@ function markRootEntangled(root, entangledLanes) {
     rootEntangledLanes &= ~lane;
   }
 }
-var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
-  log = Math.log,
-  LN2 = Math.LN2;
-function clz32Fallback(lanes) {
-  return 0 === lanes ? 32 : (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
 var currentUpdatePriority = 0;
 function lanesToEventPriority(lanes) {
   lanes &= -lanes;
@@ -2128,12 +2129,14 @@ function shallowEqual(objA, objB) {
   var keysA = Object.keys(objA),
     keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return !1;
-  for (keysB = 0; keysB < keysA.length; keysB++)
+  for (keysB = 0; keysB < keysA.length; keysB++) {
+    var currentKey = keysA[keysB];
     if (
-      !hasOwnProperty.call(objB, keysA[keysB]) ||
-      !objectIs(objA[keysA[keysB]], objB[keysA[keysB]])
+      !hasOwnProperty.call(objB, currentKey) ||
+      !objectIs(objA[currentKey], objB[currentKey])
     )
       return !1;
+  }
   return !0;
 }
 function describeFiber(fiber) {
@@ -2631,6 +2634,26 @@ function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
   "function" === typeof instance.componentDidMount &&
     (workInProgress.flags |= 4);
 }
+var forkStack = [],
+  forkStackIndex = 0,
+  treeForkProvider = null,
+  idStack = [],
+  idStackIndex = 0,
+  treeContextProvider = null;
+function popTreeContext(workInProgress) {
+  for (; workInProgress === treeForkProvider; )
+    (treeForkProvider = forkStack[--forkStackIndex]),
+      (forkStack[forkStackIndex] = null),
+      --forkStackIndex,
+      (forkStack[forkStackIndex] = null);
+  for (; workInProgress === treeContextProvider; )
+    (treeContextProvider = idStack[--idStackIndex]),
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null);
+}
 function coerceRef(returnFiber, current, element) {
   returnFiber = element.ref;
   if (
@@ -2725,7 +2748,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   }
   function placeChild(newFiber, lastPlacedIndex, newIndex) {
     newFiber.index = newIndex;
-    if (!shouldTrackSideEffects) return lastPlacedIndex;
+    if (!shouldTrackSideEffects)
+      return (newFiber.flags |= 1048576), lastPlacedIndex;
     newIndex = newFiber.alternate;
     if (null !== newIndex)
       return (
@@ -3329,7 +3353,8 @@ var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
   currentHook = null,
   workInProgressHook = null,
   didScheduleRenderPhaseUpdate = !1,
-  didScheduleRenderPhaseUpdateDuringThisPass = !1;
+  didScheduleRenderPhaseUpdateDuringThisPass = !1,
+  globalClientIdCounter = 0;
 function throwInvalidHookError() {
   throw Error(
     "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."
@@ -3752,7 +3777,7 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
   hook.memoizedState = pushEffect(1 | hookFlags, create, destroy, deps);
 }
 function mountEffect(create, deps) {
-  return mountEffectImpl(4196352, 8, create, deps);
+  return mountEffectImpl(8390656, 8, create, deps);
 }
 function updateEffect(create, deps) {
   return updateEffectImpl(2048, 8, create, deps);
@@ -3832,6 +3857,9 @@ function startTransition(setPending, callback) {
       (ReactCurrentBatchConfig$1.transition = prevTransition);
   }
 }
+function updateId() {
+  return updateWorkInProgressHook().memoizedState;
+}
 function dispatchReducerAction(fiber, queue, action) {
   var lane = requestUpdateLane(fiber);
   action = {
@@ -3939,7 +3967,7 @@ var ContextOnlyDispatcher = {
     useTransition: throwInvalidHookError,
     useMutableSource: throwInvalidHookError,
     useSyncExternalStore: throwInvalidHookError,
-    useOpaqueIdentifier: throwInvalidHookError,
+    useId: throwInvalidHookError,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnMount = {
@@ -4037,8 +4065,10 @@ var ContextOnlyDispatcher = {
       return useMutableSource(hook, source, getSnapshot, subscribe);
     },
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      throw Error("Not yet implemented");
+    useId: function() {
+      var hook = mountWorkInProgressHook();
+      var id = "r:" + (globalClientIdCounter++).toString(32);
+      return (hook.memoizedState = id);
     },
     unstable_isNewReconciler: !1
   },
@@ -4121,9 +4151,7 @@ var ContextOnlyDispatcher = {
       }
       return nextSnapshot;
     },
-    useOpaqueIdentifier: function() {
-      return updateReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnRerender = {
@@ -4166,9 +4194,7 @@ var ContextOnlyDispatcher = {
     },
     useMutableSource: updateMutableSource,
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      return rerenderReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   };
 function createCapturedValue(value, source) {
@@ -4434,8 +4460,8 @@ function bubbleProperties(completedWork) {
   if (didBailout)
     for (var child$36 = completedWork.child; null !== child$36; )
       (newChildLanes |= child$36.lanes | child$36.childLanes),
-        (subtreeFlags |= child$36.subtreeFlags & 7340032),
-        (subtreeFlags |= child$36.flags & 7340032),
+        (subtreeFlags |= child$36.subtreeFlags & 14680064),
+        (subtreeFlags |= child$36.flags & 14680064),
         (child$36.return = completedWork),
         (child$36 = child$36.sibling);
   else
@@ -4476,6 +4502,7 @@ function completeSuspendedOffscreenHostContainer(current, workInProgress) {
 }
 function completeWork(current, workInProgress, renderLanes) {
   var newProps = workInProgress.pendingProps;
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 2:
     case 16:
@@ -4599,7 +4626,7 @@ function completeWork(current, workInProgress, renderLanes) {
             workInProgressRootExitStatus = 4;
           null === workInProgressRoot ||
             (0 === (workInProgressRootSkippedLanes & 268435455) &&
-              0 === (workInProgressRootUpdatedLanes & 268435455)) ||
+              0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)) ||
             markRootSuspended$1(
               workInProgressRoot,
               workInProgressRootRenderLanes
@@ -4654,7 +4681,7 @@ function completeWork(current, workInProgress, renderLanes) {
                 for (newProps = workInProgress.child; null !== newProps; )
                   (renderLanes = newProps),
                     (type = current),
-                    (renderLanes.flags &= 7340034),
+                    (renderLanes.flags &= 14680066),
                     (renderedTail = renderLanes.alternate),
                     null === renderedTail
                       ? ((renderLanes.childLanes = 0),
@@ -5270,7 +5297,7 @@ function pushHostRootContext(workInProgress) {
       pushTopLevelContextObject(workInProgress, root.context, !1);
   pushHostContainer(workInProgress, root.containerInfo);
 }
-var SUSPENDED_MARKER = { dehydrated: null, retryLane: 0 };
+var SUSPENDED_MARKER = { dehydrated: null, treeContext: null, retryLane: 0 };
 function mountSuspenseOffscreenState(renderLanes) {
   return { baseLanes: renderLanes, cachePool: null };
 }
@@ -5495,7 +5522,7 @@ function updateSuspenseFallbackChildren(
             primaryChildren
           ))),
       (current.subtreeFlags =
-        currentPrimaryChildFragment.subtreeFlags & 7340032));
+        currentPrimaryChildFragment.subtreeFlags & 14680064));
   null !== currentFallbackChildFragment
     ? (fallbackChildren = createWorkInProgress(
         currentFallbackChildFragment,
@@ -5719,6 +5746,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
   return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 }
 function unwindWork(workInProgress) {
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 1:
       isContextProvider(workInProgress.type) && popContext();
@@ -5776,6 +5804,13 @@ function safelyDetachRef(current, nearestMountedAncestor) {
       }
     else ref.current = null;
 }
+function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
+  try {
+    destroy();
+  } catch (error) {
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
+  }
+}
 var shouldFireAfterActiveInstanceBlur = !1;
 function commitBeforeMutationEffects(root, firstChild) {
   for (nextEffect = firstChild; null !== nextEffect; )
@@ -5840,7 +5875,7 @@ function commitBeforeMutationEffects(root, firstChild) {
 function commitHookEffectListUnmount(
   flags,
   finishedWork,
-  nearestMountedAncestor$jscomp$0
+  nearestMountedAncestor
 ) {
   var updateQueue = finishedWork.updateQueue;
   updateQueue = null !== updateQueue ? updateQueue.lastEffect : null;
@@ -5850,27 +5885,20 @@ function commitHookEffectListUnmount(
       if ((effect.tag & flags) === flags) {
         var destroy = effect.destroy;
         effect.destroy = void 0;
-        if (void 0 !== destroy) {
-          var current = finishedWork,
-            nearestMountedAncestor = nearestMountedAncestor$jscomp$0;
-          try {
-            destroy();
-          } catch (error) {
-            captureCommitPhaseError(current, nearestMountedAncestor, error);
-          }
-        }
+        void 0 !== destroy &&
+          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
       }
       effect = effect.next;
     } while (effect !== updateQueue);
   }
 }
-function commitHookEffectListMount(tag, finishedWork) {
+function commitHookEffectListMount(flags, finishedWork) {
   finishedWork = finishedWork.updateQueue;
   finishedWork = null !== finishedWork ? finishedWork.lastEffect : null;
   if (null !== finishedWork) {
     var effect = (finishedWork = finishedWork.next);
     do {
-      if ((effect.tag & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
         var create$80 = effect.create;
         effect.destroy = create$80();
       }
@@ -5977,22 +6005,11 @@ function commitMutationEffects(root, firstChild) {
                       var _effect = effect,
                         destroy = _effect.destroy,
                         tag = _effect.tag;
-                      if (
-                        void 0 !== destroy &&
-                        (0 !== (tag & 2) || 0 !== (tag & 4))
-                      ) {
-                        _effect = current;
-                        var nearestMountedAncestor = root;
-                        try {
-                          destroy();
-                        } catch (error) {
-                          captureCommitPhaseError(
-                            _effect,
-                            nearestMountedAncestor,
-                            error
-                          );
-                        }
-                      }
+                      void 0 !== destroy &&
+                        (0 !== (tag & 2)
+                          ? safelyCallDestroy(current, root, destroy)
+                          : 0 !== (tag & 4) &&
+                            safelyCallDestroy(current, root, destroy));
                       effect = effect.next;
                     } while (effect !== firstEffect);
                   }
@@ -6222,7 +6239,8 @@ var ceil = Math.ceil,
   workInProgressRootExitStatus = 0,
   workInProgressRootFatalError = null,
   workInProgressRootSkippedLanes = 0,
-  workInProgressRootUpdatedLanes = 0,
+  workInProgressRootInterleavedUpdatedLanes = 0,
+  workInProgressRootRenderPhaseUpdatedLanes = 0,
   workInProgressRootPingedLanes = 0,
   globalMostRecentFallbackTime = 0,
   workInProgressRootRenderTargetTime = Infinity,
@@ -6282,16 +6300,19 @@ function scheduleUpdateOnFiber(fiber, lane, eventTime) {
   var root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (null === root) return null;
   markRootUpdated(root, lane, eventTime);
-  root === workInProgressRoot &&
-    (0 === (executionContext & 2) && (workInProgressRootUpdatedLanes |= lane),
-    4 === workInProgressRootExitStatus &&
-      markRootSuspended$1(root, workInProgressRootRenderLanes));
-  ensureRootIsScheduled(root, eventTime);
-  1 === lane &&
-    0 === executionContext &&
-    0 === (fiber.mode & 1) &&
-    ((workInProgressRootRenderTargetTime = now() + 500),
-    includesLegacySyncCallbacks && flushSyncCallbacks());
+  0 !== (executionContext & 2) && root === workInProgressRoot
+    ? (workInProgressRootRenderPhaseUpdatedLanes |= lane)
+    : (root === workInProgressRoot &&
+        (0 === (executionContext & 2) &&
+          (workInProgressRootInterleavedUpdatedLanes |= lane),
+        4 === workInProgressRootExitStatus &&
+          markRootSuspended$1(root, workInProgressRootRenderLanes)),
+      ensureRootIsScheduled(root, eventTime),
+      1 === lane &&
+        0 === executionContext &&
+        0 === (fiber.mode & 1) &&
+        ((workInProgressRootRenderTargetTime = now() + 500),
+        includesLegacySyncCallbacks && flushSyncCallbacks()));
   return root;
 }
 function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
@@ -6538,9 +6559,15 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   var prevExecutionContext = executionContext;
   executionContext |= 8;
   root.isDehydrated && ((root.isDehydrated = !1), shim(root.containerInfo));
-  root = renderRootSync(root, errorRetryLanes);
+  for (
+    var exitStatus, i = 0;
+    50 > i &&
+    ((exitStatus = renderRootSync(root, errorRetryLanes)),
+    2 === exitStatus && 0 !== workInProgressRootRenderPhaseUpdatedLanes);
+    i++
+  );
   executionContext = prevExecutionContext;
-  return root;
+  return exitStatus;
 }
 function isRenderConsistentWithExternalStores(finishedWork) {
   for (var node = finishedWork; ; ) {
@@ -6578,7 +6605,7 @@ function isRenderConsistentWithExternalStores(finishedWork) {
 }
 function markRootSuspended$1(root, suspendedLanes) {
   suspendedLanes &= ~workInProgressRootPingedLanes;
-  suspendedLanes &= ~workInProgressRootUpdatedLanes;
+  suspendedLanes &= ~workInProgressRootInterleavedUpdatedLanes;
   root.suspendedLanes |= suspendedLanes;
   root.pingedLanes &= ~suspendedLanes;
   for (root = root.expirationTimes; 0 < suspendedLanes; ) {
@@ -6596,13 +6623,10 @@ function performSyncWorkOnRoot(root) {
   if (0 === (lanes & 1)) return ensureRootIsScheduled(root, now()), null;
   var exitStatus = renderRootSync(root, lanes);
   if (0 !== root.tag && 2 === exitStatus) {
-    var prevExecutionContext = executionContext;
-    executionContext |= 8;
-    root.isDehydrated && ((root.isDehydrated = !1), shim(root.containerInfo));
     var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     0 !== errorRetryLanes &&
-      ((lanes = errorRetryLanes), (exitStatus = renderRootSync(root, lanes)));
-    executionContext = prevExecutionContext;
+      ((lanes = errorRetryLanes),
+      (exitStatus = recoverFromConcurrentError(root, errorRetryLanes)));
   }
   if (1 === exitStatus)
     throw ((exitStatus = workInProgressRootFatalError),
@@ -6629,6 +6653,7 @@ function prepareFreshStack(root, lanes) {
   if (null !== workInProgress)
     for (timeoutHandle = workInProgress.return; null !== timeoutHandle; ) {
       var interruptedWork = timeoutHandle;
+      popTreeContext(interruptedWork);
       switch (interruptedWork.tag) {
         case 1:
           interruptedWork = interruptedWork.type.childContextTypes;
@@ -6668,7 +6693,7 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootRenderLanes = subtreeRenderLanes = lanes;
   workInProgressRootExitStatus = 0;
   workInProgressRootFatalError = null;
-  workInProgressRootPingedLanes = workInProgressRootUpdatedLanes = workInProgressRootSkippedLanes = 0;
+  workInProgressRootPingedLanes = workInProgressRootRenderPhaseUpdatedLanes = workInProgressRootInterleavedUpdatedLanes = workInProgressRootSkippedLanes = 0;
   if (null !== interleavedQueues) {
     for (root = 0; root < interleavedQueues.length; root++)
       if (
@@ -6747,83 +6772,81 @@ function handleError(root$jscomp$0, thrownValue) {
           }
           b: {
             sourceFiber$jscomp$0 = returnFiber;
-            var sourceFiber$jscomp$1 = sourceFiber,
-              rootRenderLanes = thrownValue,
-              hasInvisibleParentBoundary =
-                0 !== (suspenseStackCursor.current & 1),
-              node = sourceFiber$jscomp$0;
+            var hasInvisibleParentBoundary =
+              0 !== (suspenseStackCursor.current & 1);
             do {
               var JSCompiler_temp;
-              if ((JSCompiler_temp = 13 === node.tag)) {
-                var nextState = node.memoizedState;
+              if ((JSCompiler_temp = 13 === sourceFiber$jscomp$0.tag)) {
+                var nextState = sourceFiber$jscomp$0.memoizedState;
                 JSCompiler_temp =
                   null !== nextState
                     ? null !== nextState.dehydrated
                       ? !0
                       : !1
-                    : !0 !== node.memoizedProps.unstable_avoidThisFallback
+                    : !0 !==
+                      sourceFiber$jscomp$0.memoizedProps
+                        .unstable_avoidThisFallback
                     ? !0
                     : hasInvisibleParentBoundary
                     ? !1
                     : !0;
               }
               if (JSCompiler_temp) {
-                if (0 === (node.mode & 1)) {
-                  if (node === sourceFiber$jscomp$0) node.flags |= 65536;
-                  else {
-                    node.flags |= 128;
-                    sourceFiber$jscomp$1.flags |= 131072;
-                    sourceFiber$jscomp$1.flags &= -52805;
-                    if (
-                      enablePersistentOffscreenHostContainer &&
-                      null === node.alternate
-                    ) {
-                      var offscreenContainer = node.child.child;
-                      if (null !== offscreenContainer) {
-                        var containerProps = getOffscreenContainerProps(
-                          "hidden",
-                          offscreenContainer.memoizedProps.children
-                        );
-                        offscreenContainer.pendingProps = containerProps;
-                        offscreenContainer.memoizedProps = containerProps;
-                      }
-                    }
-                    if (1 === sourceFiber$jscomp$1.tag)
-                      if (null === sourceFiber$jscomp$1.alternate)
-                        sourceFiber$jscomp$1.tag = 17;
-                      else {
-                        var update = createUpdate(-1, 1);
-                        update.tag = 2;
-                        enqueueUpdate(sourceFiber$jscomp$1, update);
-                      }
-                    sourceFiber$jscomp$1.lanes |= 1;
-                  }
-                  var suspenseBoundary = node;
-                  break b;
-                }
-                node.flags |= 65536;
-                node.lanes = rootRenderLanes;
-                suspenseBoundary = node;
+                var suspenseBoundary = sourceFiber$jscomp$0;
                 break b;
               }
-              node = node.return;
-            } while (null !== node);
+              sourceFiber$jscomp$0 = sourceFiber$jscomp$0.return;
+            } while (null !== sourceFiber$jscomp$0);
             suspenseBoundary = null;
           }
           if (null !== suspenseBoundary) {
-            value = void 0;
-            sourceFiber = suspenseBoundary;
-            if (sourceFiber.mode & 1) {
+            suspenseBoundary.flags &= -257;
+            value = suspenseBoundary;
+            sourceFiber$jscomp$0 = thrownValue;
+            if (0 === (value.mode & 1))
+              if (value === returnFiber) value.flags |= 65536;
+              else {
+                value.flags |= 128;
+                sourceFiber.flags |= 131072;
+                sourceFiber.flags &= -52805;
+                if (
+                  enablePersistentOffscreenHostContainer &&
+                  null === value.alternate
+                ) {
+                  var offscreenContainer = value.child.child;
+                  if (null !== offscreenContainer) {
+                    var containerProps = getOffscreenContainerProps(
+                      "hidden",
+                      offscreenContainer.memoizedProps.children
+                    );
+                    offscreenContainer.pendingProps = containerProps;
+                    offscreenContainer.memoizedProps = containerProps;
+                  }
+                }
+                if (1 === sourceFiber.tag)
+                  if (null === sourceFiber.alternate) sourceFiber.tag = 17;
+                  else {
+                    var update = createUpdate(-1, 1);
+                    update.tag = 2;
+                    enqueueUpdate(sourceFiber, update);
+                  }
+                sourceFiber.lanes |= 1;
+              }
+            else (value.flags |= 65536), (value.lanes = sourceFiber$jscomp$0);
+            sourceFiber = void 0;
+            value = suspenseBoundary;
+            if (value.mode & 1) {
               var pingCache = root.pingCache;
               null === pingCache
                 ? ((pingCache = root.pingCache = new PossiblyWeakMap()),
-                  (value = new Set()),
-                  pingCache.set(wakeable, value))
-                : ((value = pingCache.get(wakeable)),
-                  void 0 === value &&
-                    ((value = new Set()), pingCache.set(wakeable, value)));
-              if (!value.has(thrownValue)) {
-                value.add(thrownValue);
+                  (sourceFiber = new Set()),
+                  pingCache.set(wakeable, sourceFiber))
+                : ((sourceFiber = pingCache.get(wakeable)),
+                  void 0 === sourceFiber &&
+                    ((sourceFiber = new Set()),
+                    pingCache.set(wakeable, sourceFiber)));
+              if (!sourceFiber.has(thrownValue)) {
+                sourceFiber.add(thrownValue);
                 var ping = pingSuspendedRoot.bind(
                   null,
                   root,
@@ -6833,11 +6856,11 @@ function handleError(root$jscomp$0, thrownValue) {
                 wakeable.then(ping, ping);
               }
             }
-            var wakeables = sourceFiber.updateQueue;
+            var wakeables = value.updateQueue;
             if (null === wakeables) {
               var updateQueue = new Set();
               updateQueue.add(wakeable);
-              sourceFiber.updateQueue = updateQueue;
+              value.updateQueue = updateQueue;
             } else wakeables.add(wakeable);
             break a;
           } else
@@ -7784,7 +7807,7 @@ function createWorkInProgress(current, pendingProps) {
       (workInProgress.flags = 0),
       (workInProgress.subtreeFlags = 0),
       (workInProgress.deletions = null));
-  workInProgress.flags = current.flags & 7340032;
+  workInProgress.flags = current.flags & 14680064;
   workInProgress.childLanes = current.childLanes;
   workInProgress.lanes = current.lanes;
   workInProgress.child = current.child;
@@ -8140,10 +8163,10 @@ batchedUpdatesImpl = function(fn, a) {
   }
 };
 var roots = new Map(),
-  devToolsConfig$jscomp$inline_935 = {
+  devToolsConfig$jscomp$inline_925 = {
     findFiberByHostInstance: getInstanceFromInstance,
     bundleType: 0,
-    version: "18.0.0-afcb9cdc9-20211008",
+    version: "18.0.0-c0c71a868-20211112",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForViewTag: function() {
@@ -8158,11 +8181,11 @@ var roots = new Map(),
       }.bind(null, findNodeHandle)
     }
   };
-var internals$jscomp$inline_1189 = {
-  bundleType: devToolsConfig$jscomp$inline_935.bundleType,
-  version: devToolsConfig$jscomp$inline_935.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_935.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_935.rendererConfig,
+var internals$jscomp$inline_1179 = {
+  bundleType: devToolsConfig$jscomp$inline_925.bundleType,
+  version: devToolsConfig$jscomp$inline_925.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_925.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_925.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -8178,26 +8201,26 @@ var internals$jscomp$inline_1189 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_935.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_925.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.0.0-afcb9cdc9-20211008"
+  reconcilerVersion: "18.0.0-c0c71a868-20211112"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1190 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1180 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1190.isDisabled &&
-    hook$jscomp$inline_1190.supportsFiber
+    !hook$jscomp$inline_1180.isDisabled &&
+    hook$jscomp$inline_1180.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1190.inject(
-        internals$jscomp$inline_1189
+      (rendererID = hook$jscomp$inline_1180.inject(
+        internals$jscomp$inline_1179
       )),
-        (injectedHook = hook$jscomp$inline_1190);
+        (injectedHook = hook$jscomp$inline_1180);
     } catch (err) {}
 }
 exports.createPortal = function(children, containerTag) {
diff --git a/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
index 1950c8517f1eaf..ae53cfab703348 100644
--- a/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
+++ b/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js
@@ -7,10 +7,21 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<62430ecbf70b848b8677c9a80f79d347>>
+ * @generated SignedSource<<84b02666b89c30d381a8cdd2ef587911>>
  */
 
-"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";
 require("react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore");
 var ReactNativePrivateInterface = require("react-native/Libraries/ReactPrivate/ReactNativePrivateInterface"),
   React = require("react"),
@@ -927,7 +938,7 @@ eventPluginOrder = Array.prototype.slice.call([
   "ReactNativeBridgeEventPlugin"
 ]);
 recomputePluginOrdering();
-var injectedNamesToPlugins$jscomp$inline_227 = {
+var injectedNamesToPlugins$jscomp$inline_243 = {
     ResponderEventPlugin: ResponderEventPlugin,
     ReactNativeBridgeEventPlugin: {
       eventTypes: {},
@@ -962,33 +973,33 @@ var injectedNamesToPlugins$jscomp$inline_227 = {
       }
     }
   },
-  isOrderingDirty$jscomp$inline_228 = !1,
-  pluginName$jscomp$inline_229;
-for (pluginName$jscomp$inline_229 in injectedNamesToPlugins$jscomp$inline_227)
+  isOrderingDirty$jscomp$inline_244 = !1,
+  pluginName$jscomp$inline_245;
+for (pluginName$jscomp$inline_245 in injectedNamesToPlugins$jscomp$inline_243)
   if (
-    injectedNamesToPlugins$jscomp$inline_227.hasOwnProperty(
-      pluginName$jscomp$inline_229
+    injectedNamesToPlugins$jscomp$inline_243.hasOwnProperty(
+      pluginName$jscomp$inline_245
     )
   ) {
-    var pluginModule$jscomp$inline_230 =
-      injectedNamesToPlugins$jscomp$inline_227[pluginName$jscomp$inline_229];
+    var pluginModule$jscomp$inline_246 =
+      injectedNamesToPlugins$jscomp$inline_243[pluginName$jscomp$inline_245];
     if (
-      !namesToPlugins.hasOwnProperty(pluginName$jscomp$inline_229) ||
-      namesToPlugins[pluginName$jscomp$inline_229] !==
-        pluginModule$jscomp$inline_230
+      !namesToPlugins.hasOwnProperty(pluginName$jscomp$inline_245) ||
+      namesToPlugins[pluginName$jscomp$inline_245] !==
+        pluginModule$jscomp$inline_246
     ) {
-      if (namesToPlugins[pluginName$jscomp$inline_229])
+      if (namesToPlugins[pluginName$jscomp$inline_245])
         throw Error(
           "EventPluginRegistry: Cannot inject two different event plugins using the same name, `" +
-            (pluginName$jscomp$inline_229 + "`.")
+            (pluginName$jscomp$inline_245 + "`.")
         );
       namesToPlugins[
-        pluginName$jscomp$inline_229
-      ] = pluginModule$jscomp$inline_230;
-      isOrderingDirty$jscomp$inline_228 = !0;
+        pluginName$jscomp$inline_245
+      ] = pluginModule$jscomp$inline_246;
+      isOrderingDirty$jscomp$inline_244 = !0;
     }
   }
-isOrderingDirty$jscomp$inline_228 && recomputePluginOrdering();
+isOrderingDirty$jscomp$inline_244 && recomputePluginOrdering();
 function getInstanceFromInstance(instanceHandle) {
   return instanceHandle;
 }
@@ -1637,6 +1648,27 @@ function onCommitRoot(root, eventPriority) {
       );
     } catch (err) {}
 }
+var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
+  log = Math.log,
+  LN2 = Math.LN2;
+function clz32Fallback(x) {
+  x >>>= 0;
+  return 0 === x ? 32 : (31 - ((log(x) / LN2) | 0)) | 0;
+}
+function getLabelForLane(lane) {
+  if (lane & 1) return "Sync";
+  if (lane & 2) return "InputContinuousHydration";
+  if (lane & 4) return "InputContinuous";
+  if (lane & 8) return "DefaultHydration";
+  if (lane & 16) return "Default";
+  if (lane & 32) return "TransitionHydration";
+  if (lane & 4194240) return "Transition";
+  if (lane & 130023424) return "Retry";
+  if (lane & 134217728) return "SelectiveHydration";
+  if (lane & 268435456) return "IdleHydration";
+  if (lane & 536870912) return "Idle";
+  if (lane & 1073741824) return "Offscreen";
+}
 var nextTransitionLane = 64,
   nextRetryLane = 4194304;
 function getHighestPriorityLanes(lanes) {
@@ -1850,12 +1882,6 @@ function movePendingFibersToMemoized(root, lanes) {
       lanes &= ~root;
     }
 }
-var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
-  log = Math.log,
-  LN2 = Math.LN2;
-function clz32Fallback(lanes) {
-  return 0 === lanes ? 32 : (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
 var currentUpdatePriority = 0;
 function lanesToEventPriority(lanes) {
   lanes &= -lanes;
@@ -2163,6 +2189,113 @@ function flushSyncCallbacks() {
   }
   return null;
 }
+var supportsUserTimingV3 = !1;
+if (
+  "undefined" !== typeof performance &&
+  "function" === typeof performance.mark &&
+  "function" === typeof performance.clearMarks
+) {
+  var markOptions = {};
+  Object.defineProperty(markOptions, "startTime", {
+    get: function() {
+      supportsUserTimingV3 = !0;
+      return 0;
+    },
+    set: function() {}
+  });
+  try {
+    performance.mark("__v3", markOptions);
+  } catch (error) {
+  } finally {
+    performance.clearMarks("__v3");
+  }
+}
+var laneLabels = [];
+function getLaneLabels() {
+  if (0 === laneLabels.length)
+    for (var lane = 1, index$11 = 0; 31 > index$11; index$11++)
+      laneLabels.push(getLabelForLane(lane)), (lane *= 2);
+  return laneLabels;
+}
+function markAndClear(name) {
+  performance.mark(name);
+  performance.clearMarks(name);
+}
+function markInternalModuleRanges() {
+  if (
+    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+    "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges
+  ) {
+    var ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
+    if (isArrayImpl(ranges))
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+        if (isArrayImpl(range) && 2 === range.length) {
+          range = ranges[i];
+          var stopStackFrame = range[1];
+          markAndClear("--react-internal-module-start-" + range[0]);
+          markAndClear("--react-internal-module-stop-" + stopStackFrame);
+        }
+      }
+  }
+}
+function markComponentRenderStarted(fiber) {
+  supportsUserTimingV3 &&
+    ((fiber = getComponentNameFromFiber(fiber) || "Unknown"),
+    markAndClear("--component-render-start-" + fiber));
+}
+function markComponentRenderStopped() {
+  supportsUserTimingV3 && markAndClear("--component-render-stop");
+}
+function markComponentLayoutEffectUnmountStarted(fiber) {
+  supportsUserTimingV3 &&
+    ((fiber = getComponentNameFromFiber(fiber) || "Unknown"),
+    markAndClear("--component-layout-effect-unmount-start-" + fiber));
+}
+function markComponentLayoutEffectUnmountStopped() {
+  supportsUserTimingV3 &&
+    markAndClear("--component-layout-effect-unmount-stop");
+}
+var wakeableIDs = new ("function" === typeof WeakMap ? WeakMap : Map)(),
+  wakeableID = 0;
+function getWakeableID(wakeable) {
+  wakeableIDs.has(wakeable) || wakeableIDs.set(wakeable, wakeableID++);
+  return wakeableIDs.get(wakeable);
+}
+function markComponentSuspended(fiber, wakeable, lanes) {
+  if (supportsUserTimingV3) {
+    var eventType = wakeableIDs.has(wakeable) ? "resuspend" : "suspend",
+      id = getWakeableID(wakeable),
+      componentName = getComponentNameFromFiber(fiber) || "Unknown";
+    markAndClear(
+      "--suspense-" +
+        eventType +
+        "-" +
+        id +
+        "-" +
+        componentName +
+        "-" +
+        (null === fiber.alternate ? "mount" : "update") +
+        "-" +
+        lanes +
+        "-" +
+        (wakeable.displayName || "")
+    );
+    wakeable.then(
+      function() {
+        return markAndClear("--suspense-resolved-" + id + "-" + componentName);
+      },
+      function() {
+        return markAndClear("--suspense-rejected-" + id + "-" + componentName);
+      }
+    );
+  }
+}
+function markStateUpdateScheduled(fiber, lane) {
+  supportsUserTimingV3 &&
+    ((fiber = getComponentNameFromFiber(fiber) || "Unknown"),
+    markAndClear("--schedule-state-update-" + lane + "-" + fiber));
+}
 var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
 function shallowEqual(objA, objB) {
   if (objectIs(objA, objB)) return !0;
@@ -2176,12 +2309,14 @@ function shallowEqual(objA, objB) {
   var keysA = Object.keys(objA),
     keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return !1;
-  for (keysB = 0; keysB < keysA.length; keysB++)
+  for (keysB = 0; keysB < keysA.length; keysB++) {
+    var currentKey = keysA[keysB];
     if (
-      !hasOwnProperty.call(objB, keysA[keysB]) ||
-      !objectIs(objA[keysA[keysB]], objB[keysA[keysB]])
+      !hasOwnProperty.call(objB, currentKey) ||
+      !objectIs(objA[currentKey], objB[currentKey])
     )
       return !1;
+  }
   return !0;
 }
 function describeFiber(fiber) {
@@ -2564,6 +2699,7 @@ var classComponentUpdater = {
     enqueueUpdate(inst, update);
     payload = scheduleUpdateOnFiber(inst, lane, eventTime);
     null !== payload && entangleTransitions(payload, inst, lane);
+    markStateUpdateScheduled(inst, lane);
   },
   enqueueReplaceState: function(inst, payload, callback) {
     inst = inst._reactInternals;
@@ -2576,17 +2712,21 @@ var classComponentUpdater = {
     enqueueUpdate(inst, update);
     payload = scheduleUpdateOnFiber(inst, lane, eventTime);
     null !== payload && entangleTransitions(payload, inst, lane);
+    markStateUpdateScheduled(inst, lane);
   },
   enqueueForceUpdate: function(inst, callback) {
-    inst = inst._reactInternals;
-    var eventTime = requestEventTime(),
-      lane = requestUpdateLane(inst),
-      update = createUpdate(eventTime, lane);
+    var fiber = inst._reactInternals,
+      eventTime = requestEventTime();
+    inst = requestUpdateLane(fiber);
+    var update = createUpdate(eventTime, inst);
     update.tag = 2;
     void 0 !== callback && null !== callback && (update.callback = callback);
-    enqueueUpdate(inst, update);
-    callback = scheduleUpdateOnFiber(inst, lane, eventTime);
-    null !== callback && entangleTransitions(callback, inst, lane);
+    enqueueUpdate(fiber, update);
+    callback = scheduleUpdateOnFiber(fiber, inst, eventTime);
+    null !== callback && entangleTransitions(callback, fiber, inst);
+    supportsUserTimingV3 &&
+      ((callback = getComponentNameFromFiber(fiber) || "Unknown"),
+      markAndClear("--schedule-forced-update-" + inst + "-" + callback));
   }
 };
 function checkShouldComponentUpdate(
@@ -2679,6 +2819,26 @@ function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
   "function" === typeof instance.componentDidMount &&
     (workInProgress.flags |= 4);
 }
+var forkStack = [],
+  forkStackIndex = 0,
+  treeForkProvider = null,
+  idStack = [],
+  idStackIndex = 0,
+  treeContextProvider = null;
+function popTreeContext(workInProgress) {
+  for (; workInProgress === treeForkProvider; )
+    (treeForkProvider = forkStack[--forkStackIndex]),
+      (forkStack[forkStackIndex] = null),
+      --forkStackIndex,
+      (forkStack[forkStackIndex] = null);
+  for (; workInProgress === treeContextProvider; )
+    (treeContextProvider = idStack[--idStackIndex]),
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null);
+}
 function coerceRef(returnFiber, current, element) {
   returnFiber = element.ref;
   if (
@@ -2773,7 +2933,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   }
   function placeChild(newFiber, lastPlacedIndex, newIndex) {
     newFiber.index = newIndex;
-    if (!shouldTrackSideEffects) return lastPlacedIndex;
+    if (!shouldTrackSideEffects)
+      return (newFiber.flags |= 1048576), lastPlacedIndex;
     newIndex = newFiber.alternate;
     if (null !== newIndex)
       return (
@@ -3377,7 +3538,8 @@ var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
   currentHook = null,
   workInProgressHook = null,
   didScheduleRenderPhaseUpdate = !1,
-  didScheduleRenderPhaseUpdateDuringThisPass = !1;
+  didScheduleRenderPhaseUpdateDuringThisPass = !1,
+  globalClientIdCounter = 0;
 function throwInvalidHookError() {
   throw Error(
     "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."
@@ -3643,9 +3805,9 @@ function useMutableSource(hook, source, getSnapshot, subscribe) {
           latestSetSnapshot(latestGetSnapshot(source._source));
           var lane = requestUpdateLane(fiber);
           root.mutableReadLanes |= lane & root.pendingLanes;
-        } catch (error) {
+        } catch (error$31) {
           latestSetSnapshot(function() {
-            throw error;
+            throw error$31;
           });
         }
       });
@@ -3731,7 +3893,7 @@ function checkIfSnapshotChanged(inst) {
   try {
     var nextValue = latestGetSnapshot();
     return !objectIs(inst, nextValue);
-  } catch (error) {
+  } catch (error$32) {
     return !0;
   }
 }
@@ -3800,7 +3962,7 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
   hook.memoizedState = pushEffect(1 | hookFlags, create, destroy, deps);
 }
 function mountEffect(create, deps) {
-  return mountEffectImpl(4196352, 8, create, deps);
+  return mountEffectImpl(8390656, 8, create, deps);
 }
 function updateEffect(create, deps) {
   return updateEffectImpl(2048, 8, create, deps);
@@ -3880,6 +4042,9 @@ function startTransition(setPending, callback) {
       (ReactCurrentBatchConfig$1.transition = prevTransition);
   }
 }
+function updateId() {
+  return updateWorkInProgressHook().memoizedState;
+}
 function dispatchReducerAction(fiber, queue, action) {
   var lane = requestUpdateLane(fiber);
   action = {
@@ -3893,8 +4058,9 @@ function dispatchReducerAction(fiber, queue, action) {
     ? enqueueRenderPhaseUpdate(queue, action)
     : (enqueueUpdate$1(fiber, queue, action),
       (action = requestEventTime()),
-      (fiber = scheduleUpdateOnFiber(fiber, lane, action)),
-      null !== fiber && entangleTransitionUpdate(fiber, queue, lane));
+      (action = scheduleUpdateOnFiber(fiber, lane, action)),
+      null !== action && entangleTransitionUpdate(action, queue, lane));
+  markStateUpdateScheduled(fiber, lane);
 }
 function dispatchSetState(fiber, queue, action) {
   var lane = requestUpdateLane(fiber),
@@ -3920,13 +4086,14 @@ function dispatchSetState(fiber, queue, action) {
         update.hasEagerState = !0;
         update.eagerState = eagerState;
         if (objectIs(eagerState, currentState)) return;
-      } catch (error) {
+      } catch (error$34) {
       } finally {
       }
     action = requestEventTime();
-    fiber = scheduleUpdateOnFiber(fiber, lane, action);
-    null !== fiber && entangleTransitionUpdate(fiber, queue, lane);
+    action = scheduleUpdateOnFiber(fiber, lane, action);
+    null !== action && entangleTransitionUpdate(action, queue, lane);
   }
+  markStateUpdateScheduled(fiber, lane);
 }
 function isRenderPhaseUpdate(fiber) {
   var alternate = fiber.alternate;
@@ -3987,7 +4154,7 @@ var ContextOnlyDispatcher = {
     useTransition: throwInvalidHookError,
     useMutableSource: throwInvalidHookError,
     useSyncExternalStore: throwInvalidHookError,
-    useOpaqueIdentifier: throwInvalidHookError,
+    useId: throwInvalidHookError,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnMount = {
@@ -4085,8 +4252,10 @@ var ContextOnlyDispatcher = {
       return useMutableSource(hook, source, getSnapshot, subscribe);
     },
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      throw Error("Not yet implemented");
+    useId: function() {
+      var hook = mountWorkInProgressHook();
+      var id = "r:" + (globalClientIdCounter++).toString(32);
+      return (hook.memoizedState = id);
     },
     unstable_isNewReconciler: !1
   },
@@ -4169,9 +4338,7 @@ var ContextOnlyDispatcher = {
       }
       return nextSnapshot;
     },
-    useOpaqueIdentifier: function() {
-      return updateReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnRerender = {
@@ -4214,9 +4381,7 @@ var ContextOnlyDispatcher = {
     },
     useMutableSource: updateMutableSource,
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      return rerenderReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   },
   now$1 = Scheduler.unstable_now,
@@ -4312,7 +4477,7 @@ function logCapturedError(boundary, errorInfo) {
     });
   }
 }
-var PossiblyWeakMap = "function" === typeof WeakMap ? WeakMap : Map;
+var PossiblyWeakMap$1 = "function" === typeof WeakMap ? WeakMap : Map;
 function createRootErrorUpdate(fiber, errorInfo, lane) {
   lane = createUpdate(-1, lane);
   lane.tag = 3;
@@ -4329,9 +4494,9 @@ function createClassErrorUpdate(fiber, errorInfo, lane) {
   lane.tag = 3;
   var getDerivedStateFromError = fiber.type.getDerivedStateFromError;
   if ("function" === typeof getDerivedStateFromError) {
-    var error = errorInfo.value;
+    var error$36 = errorInfo.value;
     lane.payload = function() {
-      return getDerivedStateFromError(error);
+      return getDerivedStateFromError(error$36);
     };
     lane.callback = function() {
       logCapturedError(fiber, errorInfo);
@@ -4521,14 +4686,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
       break;
     case "collapsed":
       lastTailNode = renderState.tail;
-      for (var lastTailNode$37 = null; null !== lastTailNode; )
-        null !== lastTailNode.alternate && (lastTailNode$37 = lastTailNode),
+      for (var lastTailNode$43 = null; null !== lastTailNode; )
+        null !== lastTailNode.alternate && (lastTailNode$43 = lastTailNode),
           (lastTailNode = lastTailNode.sibling);
-      null === lastTailNode$37
+      null === lastTailNode$43
         ? hasRenderedATailFallback || null === renderState.tail
           ? (renderState.tail = null)
           : (renderState.tail.sibling = null)
-        : (lastTailNode$37.sibling = null);
+        : (lastTailNode$43.sibling = null);
   }
 }
 function bubbleProperties(completedWork) {
@@ -4540,53 +4705,53 @@ function bubbleProperties(completedWork) {
   if (didBailout)
     if (0 !== (completedWork.mode & 2)) {
       for (
-        var treeBaseDuration$39 = completedWork.selfBaseDuration,
-          child$40 = completedWork.child;
-        null !== child$40;
+        var treeBaseDuration$45 = completedWork.selfBaseDuration,
+          child$46 = completedWork.child;
+        null !== child$46;
 
       )
-        (newChildLanes |= child$40.lanes | child$40.childLanes),
-          (subtreeFlags |= child$40.subtreeFlags & 7340032),
-          (subtreeFlags |= child$40.flags & 7340032),
-          (treeBaseDuration$39 += child$40.treeBaseDuration),
-          (child$40 = child$40.sibling);
-      completedWork.treeBaseDuration = treeBaseDuration$39;
+        (newChildLanes |= child$46.lanes | child$46.childLanes),
+          (subtreeFlags |= child$46.subtreeFlags & 14680064),
+          (subtreeFlags |= child$46.flags & 14680064),
+          (treeBaseDuration$45 += child$46.treeBaseDuration),
+          (child$46 = child$46.sibling);
+      completedWork.treeBaseDuration = treeBaseDuration$45;
     } else
       for (
-        treeBaseDuration$39 = completedWork.child;
-        null !== treeBaseDuration$39;
+        treeBaseDuration$45 = completedWork.child;
+        null !== treeBaseDuration$45;
 
       )
         (newChildLanes |=
-          treeBaseDuration$39.lanes | treeBaseDuration$39.childLanes),
-          (subtreeFlags |= treeBaseDuration$39.subtreeFlags & 7340032),
-          (subtreeFlags |= treeBaseDuration$39.flags & 7340032),
-          (treeBaseDuration$39.return = completedWork),
-          (treeBaseDuration$39 = treeBaseDuration$39.sibling);
+          treeBaseDuration$45.lanes | treeBaseDuration$45.childLanes),
+          (subtreeFlags |= treeBaseDuration$45.subtreeFlags & 14680064),
+          (subtreeFlags |= treeBaseDuration$45.flags & 14680064),
+          (treeBaseDuration$45.return = completedWork),
+          (treeBaseDuration$45 = treeBaseDuration$45.sibling);
   else if (0 !== (completedWork.mode & 2)) {
-    treeBaseDuration$39 = completedWork.actualDuration;
-    child$40 = completedWork.selfBaseDuration;
+    treeBaseDuration$45 = completedWork.actualDuration;
+    child$46 = completedWork.selfBaseDuration;
     for (var child = completedWork.child; null !== child; )
       (newChildLanes |= child.lanes | child.childLanes),
         (subtreeFlags |= child.subtreeFlags),
         (subtreeFlags |= child.flags),
-        (treeBaseDuration$39 += child.actualDuration),
-        (child$40 += child.treeBaseDuration),
+        (treeBaseDuration$45 += child.actualDuration),
+        (child$46 += child.treeBaseDuration),
         (child = child.sibling);
-    completedWork.actualDuration = treeBaseDuration$39;
-    completedWork.treeBaseDuration = child$40;
+    completedWork.actualDuration = treeBaseDuration$45;
+    completedWork.treeBaseDuration = child$46;
   } else
     for (
-      treeBaseDuration$39 = completedWork.child;
-      null !== treeBaseDuration$39;
+      treeBaseDuration$45 = completedWork.child;
+      null !== treeBaseDuration$45;
 
     )
       (newChildLanes |=
-        treeBaseDuration$39.lanes | treeBaseDuration$39.childLanes),
-        (subtreeFlags |= treeBaseDuration$39.subtreeFlags),
-        (subtreeFlags |= treeBaseDuration$39.flags),
-        (treeBaseDuration$39.return = completedWork),
-        (treeBaseDuration$39 = treeBaseDuration$39.sibling);
+        treeBaseDuration$45.lanes | treeBaseDuration$45.childLanes),
+        (subtreeFlags |= treeBaseDuration$45.subtreeFlags),
+        (subtreeFlags |= treeBaseDuration$45.flags),
+        (treeBaseDuration$45.return = completedWork),
+        (treeBaseDuration$45 = treeBaseDuration$45.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
@@ -4618,6 +4783,7 @@ function completeSuspendedOffscreenHostContainer(current, workInProgress) {
 }
 function completeWork(current, workInProgress, renderLanes) {
   var newProps = workInProgress.pendingProps;
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 2:
     case 16:
@@ -4747,7 +4913,7 @@ function completeWork(current, workInProgress, renderLanes) {
             workInProgressRootExitStatus = 4;
           null === workInProgressRoot ||
             (0 === (workInProgressRootSkippedLanes & 268435455) &&
-              0 === (workInProgressRootUpdatedLanes & 268435455)) ||
+              0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)) ||
             markRootSuspended$1(
               workInProgressRoot,
               workInProgressRootRenderLanes
@@ -4807,7 +4973,7 @@ function completeWork(current, workInProgress, renderLanes) {
                 for (newProps = workInProgress.child; null !== newProps; )
                   (renderLanes = newProps),
                     (renderedTail = current),
-                    (renderLanes.flags &= 7340034),
+                    (renderLanes.flags &= 14680066),
                     (type = renderLanes.alternate),
                     null === type
                       ? ((renderLanes.childLanes = 0),
@@ -4950,6 +5116,7 @@ function updateForwardRef(
   Component = Component.render;
   var ref = workInProgress.ref;
   prepareToReadContext(workInProgress, renderLanes);
+  markComponentRenderStarted(workInProgress);
   nextProps = renderWithHooks(
     current,
     workInProgress,
@@ -4958,6 +5125,7 @@ function updateForwardRef(
     ref,
     renderLanes
   );
+  markComponentRenderStopped();
   if (null !== current && !didReceiveUpdate)
     return (
       (workInProgress.updateQueue = current.updateQueue),
@@ -5152,6 +5320,7 @@ function updateFunctionComponent(
     : contextStackCursor.current;
   context = getMaskedContext(workInProgress, context);
   prepareToReadContext(workInProgress, renderLanes);
+  markComponentRenderStarted(workInProgress);
   Component = renderWithHooks(
     current,
     workInProgress,
@@ -5160,6 +5329,7 @@ function updateFunctionComponent(
     context,
     renderLanes
   );
+  markComponentRenderStopped();
   if (null !== current && !didReceiveUpdate)
     return (
       (workInProgress.updateQueue = current.updateQueue),
@@ -5396,7 +5566,10 @@ function finishClassComponent(
   ) {
     var nextChildren = null;
     profilerStartTime = -1;
-  } else nextChildren = shouldUpdate.render();
+  } else
+    markComponentRenderStarted(workInProgress),
+      (nextChildren = shouldUpdate.render()),
+      markComponentRenderStopped();
   workInProgress.flags |= 1;
   null !== current && didCaptureError
     ? ((didCaptureError = nextChildren),
@@ -5429,7 +5602,7 @@ function pushHostRootContext(workInProgress) {
       pushTopLevelContextObject(workInProgress, root.context, !1);
   pushHostContainer(workInProgress, root.containerInfo);
 }
-var SUSPENDED_MARKER = { dehydrated: null, retryLane: 0 };
+var SUSPENDED_MARKER = { dehydrated: null, treeContext: null, retryLane: 0 };
 function mountSuspenseOffscreenState(renderLanes) {
   return { baseLanes: renderLanes, cachePool: null };
 }
@@ -5666,7 +5839,7 @@ function updateSuspenseFallbackChildren(
             primaryChildren
           ))),
       (current.subtreeFlags =
-        currentPrimaryChildFragment.subtreeFlags & 7340032));
+        currentPrimaryChildFragment.subtreeFlags & 14680064));
   null !== currentFallbackChildFragment
     ? (fallbackChildren = createWorkInProgress(
         currentFallbackChildFragment,
@@ -5898,6 +6071,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
   return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 }
 function unwindWork(workInProgress) {
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 1:
       isContextProvider(workInProgress.type) && popContext();
@@ -5964,16 +6138,16 @@ function safelyDetachRef(current, nearestMountedAncestor) {
             recordLayoutEffectDuration(current);
           }
         else ref(null);
-      } catch (error) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error);
+      } catch (error$93) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$93);
       }
     else ref.current = null;
 }
 function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
   try {
     destroy();
-  } catch (error) {
-    captureCommitPhaseError(current, nearestMountedAncestor, error);
+  } catch (error$94) {
+    captureCommitPhaseError(current, nearestMountedAncestor, error$94);
   }
 }
 var shouldFireAfterActiveInstanceBlur = !1;
@@ -6022,8 +6196,8 @@ function commitBeforeMutationEffects(root, firstChild) {
                   "This unit of work tag should not have side-effects. This error is likely caused by a bug in React. Please file an issue."
                 );
             }
-        } catch (error) {
-          captureCommitPhaseError(root, root.return, error);
+        } catch (error$95) {
+          captureCommitPhaseError(root, root.return, error$95);
         }
         firstChild = root.sibling;
         if (null !== firstChild) {
@@ -6050,25 +6224,63 @@ function commitHookEffectListUnmount(
       if ((effect.tag & flags) === flags) {
         var destroy = effect.destroy;
         effect.destroy = void 0;
-        void 0 !== destroy &&
+        if (void 0 !== destroy) {
+          if (0 !== (flags & 8)) {
+            if (supportsUserTimingV3) {
+              var componentName =
+                getComponentNameFromFiber(finishedWork) || "Unknown";
+              markAndClear(
+                "--component-passive-effect-unmount-start-" + componentName
+              );
+            }
+          } else
+            0 !== (flags & 4) &&
+              markComponentLayoutEffectUnmountStarted(finishedWork);
           safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+          0 !== (flags & 8)
+            ? supportsUserTimingV3 &&
+              markAndClear("--component-passive-effect-unmount-stop")
+            : 0 !== (flags & 4) && markComponentLayoutEffectUnmountStopped();
+        }
       }
       effect = effect.next;
     } while (effect !== updateQueue);
   }
 }
-function commitHookEffectListMount(tag, finishedWork) {
-  finishedWork = finishedWork.updateQueue;
-  finishedWork = null !== finishedWork ? finishedWork.lastEffect : null;
-  if (null !== finishedWork) {
-    var effect = (finishedWork = finishedWork.next);
+function commitHookEffectListMount(flags, finishedWork) {
+  var updateQueue = finishedWork.updateQueue;
+  updateQueue = null !== updateQueue ? updateQueue.lastEffect : null;
+  if (null !== updateQueue) {
+    var effect = (updateQueue = updateQueue.next);
     do {
-      if ((effect.tag & tag) === tag) {
-        var create$86 = effect.create;
-        effect.destroy = create$86();
+      if ((effect.tag & flags) === flags) {
+        if (0 !== (flags & 8)) {
+          if (supportsUserTimingV3) {
+            var componentName =
+              getComponentNameFromFiber(finishedWork) || "Unknown";
+            markAndClear(
+              "--component-passive-effect-mount-start-" + componentName
+            );
+          }
+        } else
+          0 !== (flags & 4) &&
+            supportsUserTimingV3 &&
+            ((componentName =
+              getComponentNameFromFiber(finishedWork) || "Unknown"),
+            markAndClear(
+              "--component-layout-effect-mount-start-" + componentName
+            ));
+        componentName = effect.create;
+        effect.destroy = componentName();
+        0 !== (flags & 8)
+          ? supportsUserTimingV3 &&
+            markAndClear("--component-passive-effect-mount-stop")
+          : 0 !== (flags & 4) &&
+            supportsUserTimingV3 &&
+            markAndClear("--component-layout-effect-mount-stop");
       }
       effect = effect.next;
-    } while (effect !== finishedWork);
+    } while (effect !== updateQueue);
   }
 }
 function detachFiberAfterEffects(fiber) {
@@ -6192,13 +6404,17 @@ function commitMutationEffects(root, firstChild, committedLanes) {
                       var _effect = effect,
                         destroy = _effect.destroy,
                         tag = _effect.tag;
-                      void 0 === destroy ||
-                        (0 === (tag & 2) && 0 === (tag & 4)) ||
-                        (current.mode & 2
-                          ? (startLayoutEffectTimer(),
-                            safelyCallDestroy(current, root, destroy),
-                            recordLayoutEffectDuration(current))
-                          : safelyCallDestroy(current, root, destroy));
+                      void 0 !== destroy &&
+                        (0 !== (tag & 2)
+                          ? safelyCallDestroy(current, root, destroy)
+                          : 0 !== (tag & 4) &&
+                            (markComponentLayoutEffectUnmountStarted(current),
+                            current.mode & 2
+                              ? (startLayoutEffectTimer(),
+                                safelyCallDestroy(current, root, destroy),
+                                recordLayoutEffectDuration(current))
+                              : safelyCallDestroy(current, root, destroy),
+                            markComponentLayoutEffectUnmountStopped()));
                       effect = effect.next;
                     } while (effect !== firstEffect);
                   }
@@ -6223,8 +6439,8 @@ function commitMutationEffects(root, firstChild, committedLanes) {
                         recordLayoutEffectDuration(effect);
                       }
                     else _effect.componentWillUnmount();
-                  } catch (error) {
-                    captureCommitPhaseError(current, root, error);
+                  } catch (error$92) {
+                    captureCommitPhaseError(current, root, error$92);
                   }
                 break;
               case 5:
@@ -6249,8 +6465,8 @@ function commitMutationEffects(root, firstChild, committedLanes) {
           var alternate = childToDelete.alternate;
           null !== alternate && (alternate.return = null);
           childToDelete.return = null;
-        } catch (error) {
-          captureCommitPhaseError(childToDelete, root, error);
+        } catch (error$102) {
+          captureCommitPhaseError(childToDelete, root, error$102);
         }
       }
     firstChild = root.child;
@@ -6282,8 +6498,11 @@ function commitMutationEffects(root, firstChild, committedLanes) {
             switch (root.tag) {
               case 13:
                 if (null !== root.memoizedState) {
-                  var current$92 = root.alternate;
-                  if (null === current$92 || null === current$92.memoizedState)
+                  var current$104 = root.alternate;
+                  if (
+                    null === current$104 ||
+                    null === current$104.memoizedState
+                  )
                     globalMostRecentFallbackTime = now();
                 }
             }
@@ -6305,8 +6524,8 @@ function commitMutationEffects(root, firstChild, committedLanes) {
             case 4:
               commitWork(root.alternate, root);
           }
-        } catch (error) {
-          captureCommitPhaseError(root, root.return, error);
+        } catch (error$103) {
+          captureCommitPhaseError(root, root.return, error$103);
         }
         firstChild = root.sibling;
         if (null !== firstChild) {
@@ -6393,22 +6612,22 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                     commitUpdateQueue(committedLanes, updateQueue, instance);
                   break;
                 case 3:
-                  var updateQueue$88 = committedLanes.updateQueue;
-                  if (null !== updateQueue$88) {
-                    var instance$89 = null;
+                  var updateQueue$98 = committedLanes.updateQueue;
+                  if (null !== updateQueue$98) {
+                    var instance$99 = null;
                     if (null !== committedLanes.child)
                       switch (committedLanes.child.tag) {
                         case 5:
-                          instance$89 =
+                          instance$99 =
                             committedLanes.child.stateNode.canonical;
                           break;
                         case 1:
-                          instance$89 = committedLanes.child.stateNode;
+                          instance$99 = committedLanes.child.stateNode;
                       }
                     commitUpdateQueue(
                       committedLanes,
-                      updateQueue$88,
-                      instance$89
+                      updateQueue$98,
+                      instance$99
                     );
                   }
                   break;
@@ -6424,7 +6643,7 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                     onCommit = _finishedWork$memoize2.onCommit,
                     onRender = _finishedWork$memoize2.onRender,
                     effectDuration = committedLanes.stateNode.effectDuration;
-                  instance$89 = commitTime;
+                  instance$99 = commitTime;
                   current = null === current ? "mount" : "update";
                   currentUpdateIsNested && (current = "nested-update");
                   "function" === typeof onRender &&
@@ -6434,14 +6653,14 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                       committedLanes.actualDuration,
                       committedLanes.treeBaseDuration,
                       committedLanes.actualStartTime,
-                      instance$89
+                      instance$99
                     );
                   "function" === typeof onCommit &&
                     onCommit(
                       committedLanes.memoizedProps.id,
                       current,
                       effectDuration,
-                      instance$89
+                      instance$99
                     );
                   enqueuePendingPassiveProfilerEffect(committedLanes);
                   var parentFiber = committedLanes.return;
@@ -6471,34 +6690,34 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                   );
               }
             if (committedLanes.flags & 512) {
-              instance$89 = void 0;
+              instance$99 = void 0;
               current = committedLanes;
               var ref = current.ref;
               if (null !== ref) {
                 var instance$jscomp$0 = current.stateNode;
                 switch (current.tag) {
                   case 5:
-                    instance$89 = instance$jscomp$0.canonical;
+                    instance$99 = instance$jscomp$0.canonical;
                     break;
                   default:
-                    instance$89 = instance$jscomp$0;
+                    instance$99 = instance$jscomp$0;
                 }
                 if ("function" === typeof ref)
                   if (current.mode & 2)
                     try {
-                      startLayoutEffectTimer(), ref(instance$89);
+                      startLayoutEffectTimer(), ref(instance$99);
                     } finally {
                       recordLayoutEffectDuration(current);
                     }
-                  else ref(instance$89);
-                else ref.current = instance$89;
+                  else ref(instance$99);
+                else ref.current = instance$99;
               }
             }
-          } catch (error) {
+          } catch (error$111) {
             captureCommitPhaseError(
               committedLanes,
               committedLanes.return,
-              error
+              error$111
             );
           }
         }
@@ -6506,10 +6725,10 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
           nextEffect = null;
           break;
         }
-        instance$89 = committedLanes.sibling;
-        if (null !== instance$89) {
-          instance$89.return = committedLanes.return;
-          nextEffect = instance$89;
+        instance$99 = committedLanes.sibling;
+        if (null !== instance$99) {
+          instance$99.return = committedLanes.return;
+          nextEffect = instance$99;
           break;
         }
         nextEffect = committedLanes.return;
@@ -6529,7 +6748,8 @@ var ceil = Math.ceil,
   workInProgressRootExitStatus = 0,
   workInProgressRootFatalError = null,
   workInProgressRootSkippedLanes = 0,
-  workInProgressRootUpdatedLanes = 0,
+  workInProgressRootInterleavedUpdatedLanes = 0,
+  workInProgressRootRenderPhaseUpdatedLanes = 0,
   workInProgressRootPingedLanes = 0,
   globalMostRecentFallbackTime = 0,
   workInProgressRootRenderTargetTime = Infinity,
@@ -6589,18 +6809,21 @@ function scheduleUpdateOnFiber(fiber, lane, eventTime) {
     ));
   var root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (null === root) return null;
-  isDevToolsPresent && addFiberToLanesMap(root, fiber, lane);
   markRootUpdated(root, lane, eventTime);
-  root === workInProgressRoot &&
-    (0 === (executionContext & 2) && (workInProgressRootUpdatedLanes |= lane),
-    4 === workInProgressRootExitStatus &&
-      markRootSuspended$1(root, workInProgressRootRenderLanes));
-  ensureRootIsScheduled(root, eventTime);
-  1 === lane &&
-    0 === executionContext &&
-    0 === (fiber.mode & 1) &&
-    ((workInProgressRootRenderTargetTime = now() + 500),
-    includesLegacySyncCallbacks && flushSyncCallbacks());
+  0 !== (executionContext & 2) && root === workInProgressRoot
+    ? (workInProgressRootRenderPhaseUpdatedLanes |= lane)
+    : (isDevToolsPresent && addFiberToLanesMap(root, fiber, lane),
+      root === workInProgressRoot &&
+        (0 === (executionContext & 2) &&
+          (workInProgressRootInterleavedUpdatedLanes |= lane),
+        4 === workInProgressRootExitStatus &&
+          markRootSuspended$1(root, workInProgressRootRenderLanes)),
+      ensureRootIsScheduled(root, eventTime),
+      1 === lane &&
+        0 === executionContext &&
+        0 === (fiber.mode & 1) &&
+        ((workInProgressRootRenderTargetTime = now() + 500),
+        includesLegacySyncCallbacks && flushSyncCallbacks()));
   return root;
 }
 function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
@@ -6726,6 +6949,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       workInProgressRootRenderTargetTime = now() + 500;
       prepareFreshStack(root, didTimeout);
     }
+    supportsUserTimingV3 && markAndClear("--render-start-" + didTimeout);
     do
       try {
         workLoopConcurrent();
@@ -6738,8 +6962,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     ReactCurrentDispatcher$2.current = prevDispatcher;
     executionContext = prevExecutionContext;
     null !== workInProgress
-      ? (didTimeout = 0)
-      : ((workInProgressRoot = null),
+      ? (supportsUserTimingV3 && markAndClear("--render-yield"),
+        (didTimeout = 0))
+      : (supportsUserTimingV3 && markAndClear("--render-stop"),
+        (workInProgressRoot = null),
         (workInProgressRootRenderLanes = 0),
         (didTimeout = workInProgressRootExitStatus));
   }
@@ -6856,9 +7082,15 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   var prevExecutionContext = executionContext;
   executionContext |= 8;
   root.isDehydrated && ((root.isDehydrated = !1), shim(root.containerInfo));
-  root = renderRootSync(root, errorRetryLanes);
+  for (
+    var exitStatus, i = 0;
+    50 > i &&
+    ((exitStatus = renderRootSync(root, errorRetryLanes)),
+    2 === exitStatus && 0 !== workInProgressRootRenderPhaseUpdatedLanes);
+    i++
+  );
   executionContext = prevExecutionContext;
-  return root;
+  return exitStatus;
 }
 function isRenderConsistentWithExternalStores(finishedWork) {
   for (var node = finishedWork; ; ) {
@@ -6874,7 +7106,7 @@ function isRenderConsistentWithExternalStores(finishedWork) {
           check = check.value;
           try {
             if (!objectIs(getSnapshot(), check)) return !1;
-          } catch (error) {
+          } catch (error$116) {
             return !1;
           }
         }
@@ -6896,7 +7128,7 @@ function isRenderConsistentWithExternalStores(finishedWork) {
 }
 function markRootSuspended$1(root, suspendedLanes) {
   suspendedLanes &= ~workInProgressRootPingedLanes;
-  suspendedLanes &= ~workInProgressRootUpdatedLanes;
+  suspendedLanes &= ~workInProgressRootInterleavedUpdatedLanes;
   root.suspendedLanes |= suspendedLanes;
   root.pingedLanes &= ~suspendedLanes;
   for (root = root.expirationTimes; 0 < suspendedLanes; ) {
@@ -6916,13 +7148,10 @@ function performSyncWorkOnRoot(root) {
   if (0 === (lanes & 1)) return ensureRootIsScheduled(root, now()), null;
   var exitStatus = renderRootSync(root, lanes);
   if (0 !== root.tag && 2 === exitStatus) {
-    var prevExecutionContext = executionContext;
-    executionContext |= 8;
-    root.isDehydrated && ((root.isDehydrated = !1), shim(root.containerInfo));
     var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     0 !== errorRetryLanes &&
-      ((lanes = errorRetryLanes), (exitStatus = renderRootSync(root, lanes)));
-    executionContext = prevExecutionContext;
+      ((lanes = errorRetryLanes),
+      (exitStatus = recoverFromConcurrentError(root, errorRetryLanes)));
   }
   if (1 === exitStatus)
     throw ((exitStatus = workInProgressRootFatalError),
@@ -6949,6 +7178,7 @@ function prepareFreshStack(root, lanes) {
   if (null !== workInProgress)
     for (timeoutHandle = workInProgress.return; null !== timeoutHandle; ) {
       var interruptedWork = timeoutHandle;
+      popTreeContext(interruptedWork);
       switch (interruptedWork.tag) {
         case 1:
           interruptedWork = interruptedWork.type.childContextTypes;
@@ -6988,7 +7218,7 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootRenderLanes = subtreeRenderLanes = lanes;
   workInProgressRootExitStatus = 0;
   workInProgressRootFatalError = null;
-  workInProgressRootPingedLanes = workInProgressRootUpdatedLanes = workInProgressRootSkippedLanes = 0;
+  workInProgressRootPingedLanes = workInProgressRootRenderPhaseUpdatedLanes = workInProgressRootInterleavedUpdatedLanes = workInProgressRootSkippedLanes = 0;
   if (null !== interleavedQueues) {
     for (root = 0; root < interleavedQueues.length; root++)
       if (
@@ -7009,7 +7239,7 @@ function prepareFreshStack(root, lanes) {
     interleavedQueues = null;
   }
 }
-function handleError(root$jscomp$0, thrownValue) {
+function handleError(root, thrownValue$jscomp$0) {
   do {
     var erroredWork = workInProgress;
     try {
@@ -7033,27 +7263,54 @@ function handleError(root$jscomp$0, thrownValue) {
       ReactCurrentOwner$2.current = null;
       if (null === erroredWork || null === erroredWork.return) {
         workInProgressRootExitStatus = 1;
-        workInProgressRootFatalError = thrownValue;
+        workInProgressRootFatalError = thrownValue$jscomp$0;
         workInProgress = null;
         break;
       }
       erroredWork.mode & 2 &&
         stopProfilerTimerIfRunningAndRecordDelta(erroredWork, !0);
+      markComponentRenderStopped();
+      if (
+        null !== thrownValue$jscomp$0 &&
+        "object" === typeof thrownValue$jscomp$0 &&
+        "function" === typeof thrownValue$jscomp$0.then
+      )
+        markComponentSuspended(
+          erroredWork,
+          thrownValue$jscomp$0,
+          workInProgressRootRenderLanes
+        );
+      else {
+        var fiber = erroredWork,
+          thrownValue = thrownValue$jscomp$0;
+        if (supportsUserTimingV3) {
+          var componentName = getComponentNameFromFiber(fiber) || "Unknown",
+            phase = null === fiber.alternate ? "mount" : "update";
+          fiber = "";
+          null !== thrownValue &&
+          "object" === typeof thrownValue &&
+          "string" === typeof thrownValue.message
+            ? (fiber = thrownValue.message)
+            : "string" === typeof thrownValue && (fiber = thrownValue);
+          markAndClear("--error-" + componentName + "-" + phase + "-" + fiber);
+        }
+      }
       a: {
-        var root = root$jscomp$0,
-          returnFiber = erroredWork.return,
+        thrownValue = root;
+        var returnFiber = erroredWork.return,
           sourceFiber = erroredWork,
-          value = thrownValue;
-        thrownValue = workInProgressRootRenderLanes;
+          value = thrownValue$jscomp$0;
+        thrownValue$jscomp$0 = workInProgressRootRenderLanes;
         sourceFiber.flags |= 32768;
-        isDevToolsPresent && restorePendingUpdaters(root, thrownValue);
+        isDevToolsPresent &&
+          restorePendingUpdaters(thrownValue, thrownValue$jscomp$0);
         if (
           null !== value &&
           "object" === typeof value &&
           "function" === typeof value.then
         ) {
-          var wakeable = value,
-            sourceFiber$jscomp$0 = sourceFiber,
+          fiber = value;
+          var sourceFiber$jscomp$0 = sourceFiber,
             tag = sourceFiber$jscomp$0.tag;
           if (
             0 === (sourceFiber$jscomp$0.mode & 1) &&
@@ -7070,99 +7327,98 @@ function handleError(root$jscomp$0, thrownValue) {
           }
           b: {
             sourceFiber$jscomp$0 = returnFiber;
-            var sourceFiber$jscomp$1 = sourceFiber,
-              rootRenderLanes = thrownValue,
-              hasInvisibleParentBoundary =
-                0 !== (suspenseStackCursor.current & 1),
-              node = sourceFiber$jscomp$0;
+            var hasInvisibleParentBoundary =
+              0 !== (suspenseStackCursor.current & 1);
             do {
               var JSCompiler_temp;
-              if ((JSCompiler_temp = 13 === node.tag)) {
-                var nextState = node.memoizedState;
+              if ((JSCompiler_temp = 13 === sourceFiber$jscomp$0.tag)) {
+                var nextState = sourceFiber$jscomp$0.memoizedState;
                 JSCompiler_temp =
                   null !== nextState
                     ? null !== nextState.dehydrated
                       ? !0
                       : !1
-                    : !0 !== node.memoizedProps.unstable_avoidThisFallback
+                    : !0 !==
+                      sourceFiber$jscomp$0.memoizedProps
+                        .unstable_avoidThisFallback
                     ? !0
                     : hasInvisibleParentBoundary
                     ? !1
                     : !0;
               }
               if (JSCompiler_temp) {
-                if (0 === (node.mode & 1)) {
-                  if (node === sourceFiber$jscomp$0) node.flags |= 65536;
-                  else {
-                    node.flags |= 128;
-                    sourceFiber$jscomp$1.flags |= 131072;
-                    sourceFiber$jscomp$1.flags &= -52805;
-                    if (
-                      enablePersistentOffscreenHostContainer &&
-                      null === node.alternate
-                    ) {
-                      var offscreenContainer = node.child.child;
-                      if (null !== offscreenContainer) {
-                        var containerProps = getOffscreenContainerProps(
-                          "hidden",
-                          offscreenContainer.memoizedProps.children
-                        );
-                        offscreenContainer.pendingProps = containerProps;
-                        offscreenContainer.memoizedProps = containerProps;
-                      }
-                    }
-                    if (1 === sourceFiber$jscomp$1.tag)
-                      if (null === sourceFiber$jscomp$1.alternate)
-                        sourceFiber$jscomp$1.tag = 17;
-                      else {
-                        var update = createUpdate(-1, 1);
-                        update.tag = 2;
-                        enqueueUpdate(sourceFiber$jscomp$1, update);
-                      }
-                    sourceFiber$jscomp$1.lanes |= 1;
-                  }
-                  var suspenseBoundary = node;
-                  break b;
-                }
-                node.flags |= 65536;
-                node.lanes = rootRenderLanes;
-                suspenseBoundary = node;
+                var suspenseBoundary = sourceFiber$jscomp$0;
                 break b;
               }
-              node = node.return;
-            } while (null !== node);
+              sourceFiber$jscomp$0 = sourceFiber$jscomp$0.return;
+            } while (null !== sourceFiber$jscomp$0);
             suspenseBoundary = null;
           }
           if (null !== suspenseBoundary) {
-            value = void 0;
-            sourceFiber = suspenseBoundary;
-            if (sourceFiber.mode & 1) {
-              var pingCache = root.pingCache;
+            suspenseBoundary.flags &= -257;
+            value = suspenseBoundary;
+            sourceFiber$jscomp$0 = thrownValue$jscomp$0;
+            if (0 === (value.mode & 1))
+              if (value === returnFiber) value.flags |= 65536;
+              else {
+                value.flags |= 128;
+                sourceFiber.flags |= 131072;
+                sourceFiber.flags &= -52805;
+                if (
+                  enablePersistentOffscreenHostContainer &&
+                  null === value.alternate
+                ) {
+                  var offscreenContainer = value.child.child;
+                  if (null !== offscreenContainer) {
+                    var containerProps = getOffscreenContainerProps(
+                      "hidden",
+                      offscreenContainer.memoizedProps.children
+                    );
+                    offscreenContainer.pendingProps = containerProps;
+                    offscreenContainer.memoizedProps = containerProps;
+                  }
+                }
+                if (1 === sourceFiber.tag)
+                  if (null === sourceFiber.alternate) sourceFiber.tag = 17;
+                  else {
+                    var update = createUpdate(-1, 1);
+                    update.tag = 2;
+                    enqueueUpdate(sourceFiber, update);
+                  }
+                sourceFiber.lanes |= 1;
+              }
+            else (value.flags |= 65536), (value.lanes = sourceFiber$jscomp$0);
+            sourceFiber = void 0;
+            value = suspenseBoundary;
+            if (value.mode & 1) {
+              var pingCache = thrownValue.pingCache;
               null === pingCache
-                ? ((pingCache = root.pingCache = new PossiblyWeakMap()),
-                  (value = new Set()),
-                  pingCache.set(wakeable, value))
-                : ((value = pingCache.get(wakeable)),
-                  void 0 === value &&
-                    ((value = new Set()), pingCache.set(wakeable, value)));
-              if (!value.has(thrownValue)) {
-                value.add(thrownValue);
+                ? ((pingCache = thrownValue.pingCache = new PossiblyWeakMap$1()),
+                  (sourceFiber = new Set()),
+                  pingCache.set(fiber, sourceFiber))
+                : ((sourceFiber = pingCache.get(fiber)),
+                  void 0 === sourceFiber &&
+                    ((sourceFiber = new Set()),
+                    pingCache.set(fiber, sourceFiber)));
+              if (!sourceFiber.has(thrownValue$jscomp$0)) {
+                sourceFiber.add(thrownValue$jscomp$0);
                 var ping = pingSuspendedRoot.bind(
                   null,
-                  root,
-                  wakeable,
-                  thrownValue
+                  thrownValue,
+                  fiber,
+                  thrownValue$jscomp$0
                 );
-                isDevToolsPresent && restorePendingUpdaters(root, thrownValue);
-                wakeable.then(ping, ping);
+                isDevToolsPresent &&
+                  restorePendingUpdaters(thrownValue, thrownValue$jscomp$0);
+                fiber.then(ping, ping);
               }
             }
-            var wakeables = sourceFiber.updateQueue;
+            var wakeables = value.updateQueue;
             if (null === wakeables) {
               var updateQueue = new Set();
-              updateQueue.add(wakeable);
-              sourceFiber.updateQueue = updateQueue;
-            } else wakeables.add(wakeable);
+              updateQueue.add(fiber);
+              value.updateQueue = updateQueue;
+            } else wakeables.add(fiber);
             break a;
           } else
             value = Error(
@@ -7173,51 +7429,51 @@ function handleError(root$jscomp$0, thrownValue) {
         4 !== workInProgressRootExitStatus &&
           (workInProgressRootExitStatus = 2);
         value = createCapturedValue(value, sourceFiber);
-        root = returnFiber;
+        thrownValue = returnFiber;
         do {
-          switch (root.tag) {
+          switch (thrownValue.tag) {
             case 3:
-              wakeable = value;
-              root.flags |= 65536;
-              thrownValue &= -thrownValue;
-              root.lanes |= thrownValue;
+              fiber = value;
+              thrownValue.flags |= 65536;
+              thrownValue$jscomp$0 &= -thrownValue$jscomp$0;
+              thrownValue.lanes |= thrownValue$jscomp$0;
               var update$jscomp$0 = createRootErrorUpdate(
-                root,
-                wakeable,
-                thrownValue
+                thrownValue,
+                fiber,
+                thrownValue$jscomp$0
               );
-              enqueueCapturedUpdate(root, update$jscomp$0);
+              enqueueCapturedUpdate(thrownValue, update$jscomp$0);
               break a;
             case 1:
-              wakeable = value;
-              var ctor = root.type,
-                instance = root.stateNode;
+              fiber = value;
+              var ctor = thrownValue.type,
+                instance = thrownValue.stateNode;
               if (
-                0 === (root.flags & 128) &&
+                0 === (thrownValue.flags & 128) &&
                 ("function" === typeof ctor.getDerivedStateFromError ||
                   (null !== instance &&
                     "function" === typeof instance.componentDidCatch &&
                     (null === legacyErrorBoundariesThatAlreadyFailed ||
                       !legacyErrorBoundariesThatAlreadyFailed.has(instance))))
               ) {
-                root.flags |= 65536;
-                thrownValue &= -thrownValue;
-                root.lanes |= thrownValue;
-                var update$33 = createClassErrorUpdate(
-                  root,
-                  wakeable,
-                  thrownValue
+                thrownValue.flags |= 65536;
+                thrownValue$jscomp$0 &= -thrownValue$jscomp$0;
+                thrownValue.lanes |= thrownValue$jscomp$0;
+                var update$39 = createClassErrorUpdate(
+                  thrownValue,
+                  fiber,
+                  thrownValue$jscomp$0
                 );
-                enqueueCapturedUpdate(root, update$33);
+                enqueueCapturedUpdate(thrownValue, update$39);
                 break a;
               }
           }
-          root = root.return;
-        } while (null !== root);
+          thrownValue = thrownValue.return;
+        } while (null !== thrownValue);
       }
       completeUnitOfWork(erroredWork);
     } catch (yetAnotherThrownValue) {
-      thrownValue = yetAnotherThrownValue;
+      thrownValue$jscomp$0 = yetAnotherThrownValue;
       workInProgress === erroredWork &&
         null !== erroredWork &&
         (workInProgress = erroredWork = erroredWork.return);
@@ -7245,6 +7501,7 @@ function renderRootSync(root, lanes) {
     }
     prepareFreshStack(root, lanes);
   }
+  supportsUserTimingV3 && markAndClear("--render-start-" + lanes);
   do
     try {
       workLoopSync();
@@ -7260,6 +7517,7 @@ function renderRootSync(root, lanes) {
     throw Error(
       "Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue."
     );
+  supportsUserTimingV3 && markAndClear("--render-stop");
   workInProgressRoot = null;
   workInProgressRootRenderLanes = 0;
   return workInProgressRootExitStatus;
@@ -7352,7 +7610,15 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw Error("Should not already be working.");
   var finishedWork = root.finishedWork,
     lanes = root.finishedLanes;
-  if (null === finishedWork) return null;
+  supportsUserTimingV3 &&
+    (markAndClear("--commit-start-" + lanes),
+    markAndClear("--react-version-18.0.0-c0c71a868-20211112"),
+    markAndClear("--profiler-version-1"),
+    getLaneLabels(),
+    markAndClear("--react-lane-labels-" + laneLabels.join(",")),
+    markInternalModuleRanges());
+  if (null === finishedWork)
+    return supportsUserTimingV3 && markAndClear("--commit-stop"), null;
   root.finishedWork = null;
   root.finishedLanes = 0;
   if (finishedWork === root.current)
@@ -7387,7 +7653,9 @@ function commitRootImpl(root, renderPriorityLevel) {
     commitTime = now$1();
     commitMutationEffects(root, finishedWork, lanes);
     root.current = finishedWork;
+    supportsUserTimingV3 && markAndClear("--layout-effects-start-" + lanes);
     commitLayoutEffects(finishedWork, root, lanes);
+    supportsUserTimingV3 && markAndClear("--layout-effects-stop");
     requestPaint();
     executionContext = prevExecutionContext;
     currentUpdatePriority = previousPriority;
@@ -7418,6 +7686,7 @@ function commitRootImpl(root, renderPriorityLevel) {
         : ((nestedUpdateCount = 0), (rootWithNestedUpdates = root)))
     : (nestedUpdateCount = 0);
   flushSyncCallbacks();
+  supportsUserTimingV3 && markAndClear("--commit-stop");
   return null;
 }
 function flushPassiveEffects() {
@@ -7432,11 +7701,14 @@ function flushPassiveEffects() {
         var JSCompiler_inline_result = !1;
       else {
         renderPriority = rootWithPendingPassiveEffects;
+        var lanes = pendingPassiveEffectsLanes;
         rootWithPendingPassiveEffects = null;
         pendingPassiveEffectsLanes = 0;
         if (0 !== (executionContext & 6))
           throw Error("Cannot flush passive effects while already rendering.");
-        var prevExecutionContext = executionContext;
+        supportsUserTimingV3 &&
+          markAndClear("--passive-effects-start-" + lanes);
+        lanes = executionContext;
         executionContext |= 4;
         for (nextEffect = renderPriority.current; null !== nextEffect; ) {
           var fiber = nextEffect,
@@ -7546,8 +7818,12 @@ function flushPassiveEffects() {
                         }
                       } else commitHookEffectListMount(9, fiberToDelete);
                   }
-                } catch (error) {
-                  captureCommitPhaseError(deletions, deletions.return, error);
+                } catch (error$112) {
+                  captureCommitPhaseError(
+                    deletions,
+                    deletions.return,
+                    error$112
+                  );
                 }
               if (deletions === child) {
                 nextEffect = null;
@@ -7599,7 +7875,8 @@ function flushPassiveEffects() {
                 }
             }
         }
-        executionContext = prevExecutionContext;
+        supportsUserTimingV3 && markAndClear("--passive-effects-stop");
+        executionContext = lanes;
         flushSyncCallbacks();
         if (
           injectedHook &&
@@ -7756,6 +8033,7 @@ beginWork$1 = function(current, workInProgress, renderLanes) {
         contextStackCursor.current
       );
       prepareToReadContext(workInProgress, renderLanes);
+      markComponentRenderStarted(workInProgress);
       context = renderWithHooks(
         null,
         workInProgress,
@@ -7764,6 +8042,7 @@ beginWork$1 = function(current, workInProgress, renderLanes) {
         context,
         renderLanes
       );
+      markComponentRenderStopped();
       workInProgress.flags |= 1;
       if (
         "object" === typeof context &&
@@ -8089,7 +8368,9 @@ beginWork$1 = function(current, workInProgress, renderLanes) {
         (Component = workInProgress.pendingProps.children),
         prepareToReadContext(workInProgress, renderLanes),
         (context = readContext(context)),
+        markComponentRenderStarted(workInProgress),
         (Component = Component(context)),
+        markComponentRenderStopped(),
         (workInProgress.flags |= 1),
         reconcileChildren(current, workInProgress, Component, renderLanes),
         workInProgress.child
@@ -8220,7 +8501,7 @@ function createWorkInProgress(current, pendingProps) {
       (workInProgress.deletions = null),
       (workInProgress.actualDuration = 0),
       (workInProgress.actualStartTime = -1));
-  workInProgress.flags = current.flags & 7340032;
+  workInProgress.flags = current.flags & 14680064;
   workInProgress.childLanes = current.childLanes;
   workInProgress.lanes = current.lanes;
   workInProgress.child = current.child;
@@ -8409,6 +8690,7 @@ function updateContainer(element, container, parentComponent, callback) {
   var current = container.current,
     eventTime = requestEventTime(),
     lane = requestUpdateLane(current);
+  supportsUserTimingV3 && markAndClear("--schedule-render-" + lane);
   a: if (parentComponent) {
     parentComponent = parentComponent._reactInternals;
     b: {
@@ -8583,10 +8865,10 @@ batchedUpdatesImpl = function(fn, a) {
   }
 };
 var roots = new Map(),
-  devToolsConfig$jscomp$inline_965 = {
+  devToolsConfig$jscomp$inline_1020 = {
     findFiberByHostInstance: getInstanceFromInstance,
     bundleType: 0,
-    version: "18.0.0-afcb9cdc9-20211008",
+    version: "18.0.0-c0c71a868-20211112",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForViewTag: function() {
@@ -8601,11 +8883,11 @@ var roots = new Map(),
       }.bind(null, findNodeHandle)
     }
   };
-var internals$jscomp$inline_1239 = {
-  bundleType: devToolsConfig$jscomp$inline_965.bundleType,
-  version: devToolsConfig$jscomp$inline_965.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_965.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_965.rendererConfig,
+var internals$jscomp$inline_1308 = {
+  bundleType: devToolsConfig$jscomp$inline_1020.bundleType,
+  version: devToolsConfig$jscomp$inline_1020.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1020.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1020.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -8621,26 +8903,26 @@ var internals$jscomp$inline_1239 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_965.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1020.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.0.0-afcb9cdc9-20211008"
+  reconcilerVersion: "18.0.0-c0c71a868-20211112"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1240 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1309 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1240.isDisabled &&
-    hook$jscomp$inline_1240.supportsFiber
+    !hook$jscomp$inline_1309.isDisabled &&
+    hook$jscomp$inline_1309.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1240.inject(
-        internals$jscomp$inline_1239
+      (rendererID = hook$jscomp$inline_1309.inject(
+        internals$jscomp$inline_1308
       )),
-        (injectedHook = hook$jscomp$inline_1240);
+        (injectedHook = hook$jscomp$inline_1309);
     } catch (err) {}
 }
 exports.createPortal = function(children, containerTag) {
@@ -8723,3 +9005,13 @@ exports.stopSurface = function(containerTag) {
 exports.unmountComponentAtNode = function(containerTag) {
   this.stopSurface(containerTag);
 };
+
+          /* 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());
+}
+        
diff --git a/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
index 1c526c7f8cbad6..2634820cd23450 100644
--- a/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
+++ b/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
@@ -7,14 +7,25 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<e138d52a3cd55cb99fd1f36b574256a6>>
+ * @generated SignedSource<<74aab8e89c3a533591d19aa80a7790da>>
  */
 
 '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");
@@ -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,7 +3150,7 @@ 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;
@@ -3179,6 +3188,9 @@ var Callback =
 var DidCapture =
   /*                   */
   128;
+var ForceClientRender =
+  /*            */
+  256;
 var Ref =
   /*                          */
   512;
@@ -3216,6 +3228,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 +3238,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
@@ -4418,6 +4433,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 +4562,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 +5093,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 +5181,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 +5606,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,12 +6241,357 @@ function flushSyncCallbacks() {
   return null;
 }
 
-var ReactVersion = "18.0.0-afcb9cdc9-20211008";
+var ReactVersion = "18.0.0-c0c71a868-20211112";
+
+var SCHEDULING_PROFILER_VERSION = 1;
+
+var getLabelForLane$1 = getLabelForLane;
+var TotalLanes$1 = TotalLanes;
+/**
+ * If performance exists and supports the subset of the User Timing API that we
+ * require.
+ */
+
+var supportsUserTiming =
+  typeof performance !== "undefined" &&
+  typeof performance.mark === "function" &&
+  typeof performance.clearMarks === "function";
+var supportsUserTimingV3 = false;
+
+{
+  if (supportsUserTiming) {
+    var CHECK_V3_MARK = "__v3";
+    var markOptions = {}; // $FlowFixMe: Ignore Flow complaining about needing a value
+
+    Object.defineProperty(markOptions, "startTime", {
+      get: function() {
+        supportsUserTimingV3 = true;
+        return 0;
+      },
+      set: function() {}
+    });
+
+    try {
+      // $FlowFixMe: Flow expects the User Timing level 2 API.
+      performance.mark(CHECK_V3_MARK, markOptions);
+    } catch (error) {
+      // Ignore
+    } finally {
+      performance.clearMarks(CHECK_V3_MARK);
+    }
+  }
+}
+
+var laneLabels = [];
+function getLaneLabels() {
+  if (laneLabels.length === 0) {
+    var lane = 1;
+
+    for (var index = 0; index < TotalLanes$1; index++) {
+      laneLabels.push(getLabelForLane$1(lane));
+      lane *= 2;
+    }
+  }
+
+  return laneLabels;
+}
+
+function markLaneToLabelMetadata() {
+  getLaneLabels();
+  markAndClear("--react-lane-labels-" + laneLabels.join(","));
+}
+
+function markAndClear(name) {
+  performance.mark(name);
+  performance.clearMarks(name);
+}
+
+function markVersionMetadata() {
+  markAndClear("--react-version-" + ReactVersion);
+  markAndClear("--profiler-version-" + SCHEDULING_PROFILER_VERSION);
+}
+
+function markInternalModuleRanges() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" &&
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === "function"
+  ) {
+    var ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges(); // This check would not be required,
+    // except that it's possible for things to override __REACT_DEVTOOLS_GLOBAL_HOOK__.
+
+    if (isArray(ranges)) {
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+
+        if (isArray(range) && range.length === 2) {
+          var _ranges$i = ranges[i],
+            startStackFrame = _ranges$i[0],
+            stopStackFrame = _ranges$i[1];
+          markAndClear("--react-internal-module-start-" + startStackFrame);
+          markAndClear("--react-internal-module-stop-" + stopStackFrame);
+        }
+      }
+    }
+  }
+}
+
+function markCommitStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--commit-start-" + lanes); // Certain types of metadata should be logged infrequently.
+      // Normally we would log this during module init,
+      // but there's no guarantee a user is profiling at that time.
+      // Commits happen infrequently (less than renders or state updates)
+      // so we log this extra information along with a commit.
+      // It will likely be logged more than once but that's okay.
+      //
+      // TODO Once DevTools supports starting/stopping the profiler,
+      // we can log this data only once (when started) and remove the per-commit logging.
+
+      markVersionMetadata();
+      markLaneToLabelMetadata();
+      markInternalModuleRanges();
+    }
+  }
+}
+function markCommitStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--commit-stop");
+    }
+  }
+}
+function markComponentRenderStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-render-start-" + componentName);
+    }
+  }
+}
+function markComponentRenderStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-render-stop");
+    }
+  }
+}
+function markComponentPassiveEffectMountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-passive-effect-mount-start-" + componentName);
+    }
+  }
+}
+function markComponentPassiveEffectMountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-passive-effect-mount-stop");
+    }
+  }
+}
+function markComponentPassiveEffectUnmountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-passive-effect-unmount-start-" + componentName);
+    }
+  }
+}
+function markComponentPassiveEffectUnmountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-passive-effect-unmount-stop");
+    }
+  }
+}
+function markComponentLayoutEffectMountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-layout-effect-mount-start-" + componentName);
+    }
+  }
+}
+function markComponentLayoutEffectMountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-layout-effect-mount-stop");
+    }
+  }
+}
+function markComponentLayoutEffectUnmountStarted(fiber) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
+
+      markAndClear("--component-layout-effect-unmount-start-" + componentName);
+    }
+  }
+}
+function markComponentLayoutEffectUnmountStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--component-layout-effect-unmount-stop");
+    }
+  }
+}
+function markComponentErrored(fiber, thrownValue, lanes) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown";
+      var phase = fiber.alternate === null ? "mount" : "update";
+      var message = "";
+
+      if (
+        thrownValue !== null &&
+        typeof thrownValue === "object" &&
+        typeof thrownValue.message === "string"
+      ) {
+        message = thrownValue.message;
+      } else if (typeof thrownValue === "string") {
+        message = thrownValue;
+      } // TODO (timeline) Add component stack id
+
+      markAndClear("--error-" + componentName + "-" + phase + "-" + message);
+    }
+  }
+}
+var PossiblyWeakMap$1 = typeof WeakMap === "function" ? WeakMap : Map; // $FlowFixMe: Flow cannot handle polymorphic WeakMaps
+
+var wakeableIDs = new PossiblyWeakMap$1();
+var wakeableID = 0;
+
+function getWakeableID(wakeable) {
+  if (!wakeableIDs.has(wakeable)) {
+    wakeableIDs.set(wakeable, wakeableID++);
+  }
+
+  return wakeableIDs.get(wakeable);
+}
+
+function markComponentSuspended(fiber, wakeable, lanes) {
+  {
+    if (supportsUserTimingV3) {
+      var eventType = wakeableIDs.has(wakeable) ? "resuspend" : "suspend";
+      var id = getWakeableID(wakeable);
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown";
+      var phase = fiber.alternate === null ? "mount" : "update"; // Following the non-standard fn.displayName convention,
+      // frameworks like Relay may also annotate Promises with a displayName,
+      // describing what operation/data the thrown Promise is related to.
+      // When this is available we should pass it along to the Timeline.
+
+      var displayName = wakeable.displayName || ""; // TODO (timeline) Add component stack id
+
+      markAndClear(
+        "--suspense-" +
+          eventType +
+          "-" +
+          id +
+          "-" +
+          componentName +
+          "-" +
+          phase +
+          "-" +
+          lanes +
+          "-" +
+          displayName
+      );
+      wakeable.then(
+        function() {
+          return markAndClear(
+            "--suspense-resolved-" + id + "-" + componentName
+          );
+        },
+        function() {
+          return markAndClear(
+            "--suspense-rejected-" + id + "-" + componentName
+          );
+        }
+      );
+    }
+  }
+}
+function markLayoutEffectsStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--layout-effects-start-" + lanes);
+    }
+  }
+}
+function markLayoutEffectsStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--layout-effects-stop");
+    }
+  }
+}
+function markPassiveEffectsStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--passive-effects-start-" + lanes);
+    }
+  }
+}
+function markPassiveEffectsStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--passive-effects-stop");
+    }
+  }
+}
+function markRenderStarted(lanes) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--render-start-" + lanes);
+    }
+  }
+}
+function markRenderYielded() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--render-yield");
+    }
+  }
+}
+function markRenderStopped() {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--render-stop");
+    }
+  }
+}
+function markRenderScheduled(lane) {
+  {
+    if (supportsUserTimingV3) {
+      markAndClear("--schedule-render-" + lane);
+    }
+  }
+}
+function markForceUpdateScheduled(fiber, lane) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
 
-function markComponentRenderStopped() {}
-function markComponentErrored(fiber, thrownValue, lanes) {}
+      markAndClear("--schedule-forced-update-" + lane + "-" + componentName);
+    }
+  }
+}
+function markStateUpdateScheduled(fiber, lane) {
+  {
+    if (supportsUserTimingV3) {
+      var componentName = getComponentNameFromFiber(fiber) || "Unknown"; // TODO (timeline) Add component stack id
 
-function markComponentSuspended(fiber, wakeable, lanes) {}
+      markAndClear("--schedule-state-update-" + lane + "-" + componentName);
+    }
+  }
+}
 
 var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
 var NoTransition = 0;
@@ -6214,9 +6627,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 +6738,6 @@ function setIsRendering(rendering) {
     isRendering = rendering;
   }
 }
-function getIsRendering() {
-  {
-    return isRendering;
-  }
-}
 
 var ReactStrictModeWarnings = {
   recordUnsafeLifecycleWarnings: function(fiber, instance) {},
@@ -6687,7 +7097,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 +7111,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 +8187,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markStateUpdateScheduled(fiber, lane);
+    }
   },
   enqueueReplaceState: function(inst, payload, callback) {
     var fiber = get(inst);
@@ -7812,6 +8214,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markStateUpdateScheduled(fiber, lane);
+    }
   },
   enqueueForceUpdate: function(inst, callback) {
     var fiber = get(inst);
@@ -7834,6 +8240,10 @@ var classComponentUpdater = {
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
     }
+
+    {
+      markForceUpdateScheduled(fiber, lane);
+    }
   }
 };
 
@@ -8772,6 +9182,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 +9543,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;
     }
 
@@ -9495,6 +9985,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 +10192,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;
     }
 
@@ -10259,47 +10751,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 +10812,9 @@ function getSuspendedCachePool() {
 var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
   ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig;
 var didWarnAboutMismatchedHooksForComponent;
-var didWarnAboutUseOpaqueIdentifier;
 var didWarnUncachedGetSnapshot;
 
 {
-  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -10389,7 +10838,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 +11025,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 +11057,7 @@ function renderWithHooks(
 
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
+      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -10669,7 +11126,8 @@ function renderWithHooks(
     }
   }
 
-  didScheduleRenderPhaseUpdate = false;
+  didScheduleRenderPhaseUpdate = false; // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -10680,6 +11138,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 +11205,7 @@ function resetHooksAfterThrow() {
   }
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
 }
 
 function mountWorkInProgressHook() {
@@ -11640,13 +12107,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 +12120,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 +12425,23 @@ 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."
-      );
-
-      didWarnAboutUseOpaqueIdentifier[name] = true;
-    }
-  }
-}
-
-function mountOpaqueIdentifier() {
-  var makeId = makeClientIdInDEV.bind(
-    null,
-    warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber$1)
-  );
+function mountId() {
+  var hook = mountWorkInProgressHook();
+  var id;
 
   {
-    var _id = makeId();
-
-    mountState(_id);
-    return _id;
+    // Use a lowercase r prefix for client-generated ids.
+    var globalClientId = globalClientIdCounter++;
+    id = "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 +12469,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 +12476,8 @@ function dispatchReducerAction(fiber, queue, action) {
       entangleTransitionUpdate(root, queue, lane);
     }
   }
+
+  markUpdateInDevTools(fiber, lane);
 }
 
 function dispatchSetState(fiber, queue, action) {
@@ -12124,13 +12550,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 +12557,8 @@ function dispatchSetState(fiber, queue, action) {
       entangleTransitionUpdate(root, queue, lane);
     }
   }
+
+  markUpdateInDevTools(fiber, lane);
 }
 
 function isRenderPhaseUpdate(fiber) {
@@ -12216,6 +12637,12 @@ function entangleTransitionUpdate(root, queue, lane) {
   }
 }
 
+function markUpdateInDevTools(fiber, lane, action) {
+  {
+    markStateUpdateScheduled(fiber, lane);
+  }
+}
+
 var ContextOnlyDispatcher = {
   readContext: readContext,
   useCallback: throwInvalidHookError,
@@ -12233,7 +12660,7 @@ var ContextOnlyDispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
-  useOpaqueIdentifier: throwInvalidHookError,
+  useId: throwInvalidHookError,
   unstable_isNewReconciler: enableNewReconciler
 };
 
@@ -12370,10 +12797,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 +12905,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 +13013,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 +13121,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 +13245,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 +13370,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 +13495,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
   };
@@ -13356,7 +13783,7 @@ function logCapturedError(boundary, errorInfo) {
   }
 }
 
-var PossiblyWeakMap$1 = typeof WeakMap === "function" ? WeakMap : Map;
+var PossiblyWeakMap$2 = typeof WeakMap === "function" ? WeakMap : Map;
 
 function createRootErrorUpdate(fiber, errorInfo, lane) {
   var update = createUpdate(NoTimestamp, lane); // Unmount the root by rendering null.
@@ -13461,7 +13888,7 @@ function attachWakeableListeners(suspenseBoundary, root, wakeable, lanes) {
     var threadIDs;
 
     if (pingCache === null) {
-      pingCache = root.pingCache = new PossiblyWeakMap$1();
+      pingCache = root.pingCache = new PossiblyWeakMap$2();
       threadIDs = new Set();
       pingCache.set(wakeable, threadIDs);
     } else {
@@ -13534,135 +13961,138 @@ function resetSuspendedComponent(sourceFiber, rootRenderLanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber,
-  sourceFiber,
-  root,
-  rootRenderLanes
-) {
+function getNearestSuspenseBoundaryToCapture(returnFiber) {
+  var node = returnFiber;
   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;
+      return node;
+    } // This boundary already captured during this render. Continue to the next
+    // boundary.
 
-            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.
+    node = node.return;
+  } while (node !== null);
 
-          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
-        }
+  return null;
+}
 
-        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.
+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.
       //
-      // If there's ambiguity due to batching it's resolved in preference of:
-      // 1) "delayed", 2) "initial render", 3) "retry".
+      // 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.
       //
-      // 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.
+      // 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.
 
-      suspenseBoundary.flags |= ShouldCapture; // TODO: I think we can remove this, since we now use `DidCapture` in
-      // the begin phase to prevent an early bailout.
+      sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
-      suspenseBoundary.lanes = rootRenderLanes;
-      return suspenseBoundary;
-    } // This boundary already captured during this render. Continue to the next
-    // boundary.
+      if (sourceFiber.tag === ClassComponent) {
+        var currentSourceFiber = sourceFiber.alternate;
 
-    node = node.return;
-  } while (node !== null); // Could not find a Suspense boundary capable of capturing.
+        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.
 
-  return null;
+      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(
@@ -13691,14 +14121,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 +14535,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:
@@ -14301,7 +14739,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 +14752,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.
 
@@ -14787,8 +15225,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 +15243,7 @@ function updateForwardRef(
       ref,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
 
     if (workInProgress.mode & StrictLegacyMode) {
       setIsStrictModeForDevtools(true);
@@ -14813,6 +15257,7 @@ function updateForwardRef(
           ref,
           renderLanes
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -14821,10 +15266,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 +15696,13 @@ function updateFunctionComponent(
   }
 
   var nextChildren;
+  var hasId;
   prepareToReadContext(workInProgress, renderLanes);
 
+  {
+    markComponentRenderStarted(workInProgress);
+  }
+
   {
     ReactCurrentOwner$1.current = workInProgress;
     setIsRendering(true);
@@ -15260,6 +15714,7 @@ function updateFunctionComponent(
       context,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
 
     if (workInProgress.mode & StrictLegacyMode) {
       setIsStrictModeForDevtools(true);
@@ -15273,6 +15728,7 @@ function updateFunctionComponent(
           context,
           renderLanes
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -15281,10 +15737,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 +15928,10 @@ function finishClassComponent(
       stopProfilerTimerIfRunning();
     }
   } else {
+    {
+      markComponentRenderStarted(workInProgress);
+    }
+
     {
       setIsRendering(true);
       nextChildren = instance.render();
@@ -15484,6 +15948,10 @@ function finishClassComponent(
 
       setIsRendering(false);
     }
+
+    {
+      markComponentRenderStopped();
+    }
   } // React DevTools reads this flag.
 
   workInProgress.flags |= PerformedWork;
@@ -15813,6 +16281,11 @@ function mountIndeterminateComponent(
 
   prepareToReadContext(workInProgress, renderLanes);
   var value;
+  var hasId;
+
+  {
+    markComponentRenderStarted(workInProgress);
+  }
 
   {
     if (
@@ -15847,9 +16320,14 @@ function mountIndeterminateComponent(
       context,
       renderLanes
     );
+    hasId = checkDidRenderIdHook();
     setIsRendering(false);
   }
 
+  {
+    markComponentRenderStopped();
+  } // React DevTools reads this flag.
+
   workInProgress.flags |= PerformedWork;
 
   {
@@ -15953,6 +16431,7 @@ function mountIndeterminateComponent(
             context,
             renderLanes
           );
+          hasId = checkDidRenderIdHook();
         } finally {
           setIsStrictModeForDevtools(false);
         }
@@ -16040,6 +16519,7 @@ function validateFunctionComponentInDev(workInProgress, Component) {
 
 var SUSPENDED_MARKER = {
   dehydrated: null,
+  treeContext: null,
   retryLane: NoLane
 };
 
@@ -17064,6 +17544,10 @@ function updateContextConsumer(current, workInProgress, renderLanes) {
   prepareToReadContext(workInProgress, renderLanes);
   var newValue = readContext(context);
 
+  {
+    markComponentRenderStarted(workInProgress);
+  }
+
   var newChildren;
 
   {
@@ -17073,6 +17557,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 +18108,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 +18209,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 +18539,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 +18564,7 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag, finishedWork) {
+function commitHookEffectListMount(flags, finishedWork) {
   var updateQueue = finishedWork.updateQueue;
   var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
 
@@ -18057,11 +18573,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 +19186,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 +19200,10 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
                 } else {
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
+
+                {
+                  markComponentLayoutEffectUnmountStopped();
+                }
               }
             }
 
@@ -19927,11 +20465,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 +20557,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 +20586,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 +20691,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 +20869,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 +20901,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));
@@ -20497,7 +21092,26 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     clearContainer(root.containerInfo);
   }
 
-  var exitStatus = renderRootSync(root, errorRetryLanes);
+  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;
+    }
+
+    break;
+  }
+
   executionContext = prevExecutionContext;
   return exitStatus;
 }
@@ -20684,7 +21298,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 +21327,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 +21369,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 +21457,8 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootExitStatus = RootIncomplete;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
-  workInProgressRootUpdatedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
   enqueueInterleavedUpdates();
 
@@ -20997,7 +21600,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 +21651,10 @@ function renderRootSync(root, lanes) {
     prepareFreshStack(root, lanes);
   }
 
+  {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopSync();
@@ -21069,6 +21676,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 +21721,10 @@ function renderRootConcurrent(root, lanes) {
     prepareFreshStack(root, lanes);
   }
 
+  {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopConcurrent();
@@ -21124,8 +21739,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 +21922,15 @@ function commitRootImpl(root, renderPriorityLevel) {
   var finishedWork = root.finishedWork;
   var lanes = root.finishedLanes;
 
+  {
+    markCommitStarted(lanes);
+  }
+
   if (finishedWork === null) {
+    {
+      markCommitStopped();
+    }
+
     return null;
   } else {
     {
@@ -21346,7 +21979,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 +22036,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 +22148,10 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   flushSyncCallbacks();
 
+  {
+    markCommitStopped();
+  }
+
   return null;
 }
 
@@ -21526,7 +22174,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 +22200,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 +22211,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 +22230,10 @@ function flushPassiveEffectsImpl() {
     }
   }
 
+  {
+    markPassiveEffectsStopped();
+  }
+
   {
     commitDoubleInvokeEffectsInDEV(root.current, true);
   }
@@ -21707,6 +22364,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) {
 
   var eventTime = requestEventTime();
   markRootPinged(root, pingedLanes);
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
 
   if (
     workInProgressRoot === root &&
@@ -22032,11 +22690,7 @@ var didWarnAboutUpdateInRenderForAnotherComponent;
 
 function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   {
-    if (
-      isRendering &&
-      (executionContext & RenderContext) !== NoContext &&
-      !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
-    ) {
+    if (isRendering && !getIsUpdatingOpaqueValueInRenderPhaseInDEV()) {
       switch (fiber.tag) {
         case FunctionComponent:
         case ForwardRef:
@@ -22101,7 +22755,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 +22776,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 +22840,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.
@@ -23487,6 +24156,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) {
@@ -24323,5 +24996,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());
+}
+        
   })();
 }
diff --git a/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js b/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js
index fc9aa87d9e9342..04d6649455c6ad 100644
--- a/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js
+++ b/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<b5653158726335473c74f890aec077fc>>
+ * @generated SignedSource<<6fc8d6b12f7d5605a1f7ab5894718cb3>>
  */
 
 "use strict";
@@ -1697,6 +1697,13 @@ function onCommitRoot(root) {
       );
     } catch (err) {}
 }
+var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
+  log = Math.log,
+  LN2 = Math.LN2;
+function clz32Fallback(x) {
+  x >>>= 0;
+  return 0 === x ? 32 : (31 - ((log(x) / LN2) | 0)) | 0;
+}
 var nextTransitionLane = 64,
   nextRetryLane = 4194304;
 function getHighestPriorityLanes(lanes) {
@@ -1880,12 +1887,6 @@ function markRootEntangled(root, entangledLanes) {
     rootEntangledLanes &= ~lane;
   }
 }
-var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
-  log = Math.log,
-  LN2 = Math.LN2;
-function clz32Fallback(lanes) {
-  return 0 === lanes ? 32 : (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
 var currentUpdatePriority = 0;
 function lanesToEventPriority(lanes) {
   lanes &= -lanes;
@@ -2087,12 +2088,14 @@ function shallowEqual(objA, objB) {
   var keysA = Object.keys(objA),
     keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return !1;
-  for (keysB = 0; keysB < keysA.length; keysB++)
+  for (keysB = 0; keysB < keysA.length; keysB++) {
+    var currentKey = keysA[keysB];
     if (
-      !hasOwnProperty.call(objB, keysA[keysB]) ||
-      !objectIs(objA[keysA[keysB]], objB[keysA[keysB]])
+      !hasOwnProperty.call(objB, currentKey) ||
+      !objectIs(objA[currentKey], objB[currentKey])
     )
       return !1;
+  }
   return !0;
 }
 function describeFiber(fiber) {
@@ -2602,6 +2605,26 @@ function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
   "function" === typeof instance.componentDidMount &&
     (workInProgress.flags |= 4);
 }
+var forkStack = [],
+  forkStackIndex = 0,
+  treeForkProvider = null,
+  idStack = [],
+  idStackIndex = 0,
+  treeContextProvider = null;
+function popTreeContext(workInProgress) {
+  for (; workInProgress === treeForkProvider; )
+    (treeForkProvider = forkStack[--forkStackIndex]),
+      (forkStack[forkStackIndex] = null),
+      --forkStackIndex,
+      (forkStack[forkStackIndex] = null);
+  for (; workInProgress === treeContextProvider; )
+    (treeContextProvider = idStack[--idStackIndex]),
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null);
+}
 function coerceRef(returnFiber, current, element) {
   returnFiber = element.ref;
   if (
@@ -2696,7 +2719,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   }
   function placeChild(newFiber, lastPlacedIndex, newIndex) {
     newFiber.index = newIndex;
-    if (!shouldTrackSideEffects) return lastPlacedIndex;
+    if (!shouldTrackSideEffects)
+      return (newFiber.flags |= 1048576), lastPlacedIndex;
     newIndex = newFiber.alternate;
     if (null !== newIndex)
       return (
@@ -3300,7 +3324,8 @@ var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
   currentHook = null,
   workInProgressHook = null,
   didScheduleRenderPhaseUpdate = !1,
-  didScheduleRenderPhaseUpdateDuringThisPass = !1;
+  didScheduleRenderPhaseUpdateDuringThisPass = !1,
+  globalClientIdCounter = 0;
 function throwInvalidHookError() {
   throw Error(
     "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."
@@ -3723,7 +3748,7 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
   hook.memoizedState = pushEffect(1 | hookFlags, create, destroy, deps);
 }
 function mountEffect(create, deps) {
-  return mountEffectImpl(4196352, 8, create, deps);
+  return mountEffectImpl(8390656, 8, create, deps);
 }
 function updateEffect(create, deps) {
   return updateEffectImpl(2048, 8, create, deps);
@@ -3803,6 +3828,9 @@ function startTransition(setPending, callback) {
       (ReactCurrentBatchConfig$1.transition = prevTransition);
   }
 }
+function updateId() {
+  return updateWorkInProgressHook().memoizedState;
+}
 function dispatchReducerAction(fiber, queue, action) {
   var lane = requestUpdateLane(fiber);
   action = {
@@ -3910,7 +3938,7 @@ var ContextOnlyDispatcher = {
     useTransition: throwInvalidHookError,
     useMutableSource: throwInvalidHookError,
     useSyncExternalStore: throwInvalidHookError,
-    useOpaqueIdentifier: throwInvalidHookError,
+    useId: throwInvalidHookError,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnMount = {
@@ -4008,8 +4036,10 @@ var ContextOnlyDispatcher = {
       return useMutableSource(hook, source, getSnapshot, subscribe);
     },
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      throw Error("Not yet implemented");
+    useId: function() {
+      var hook = mountWorkInProgressHook();
+      var id = "r:" + (globalClientIdCounter++).toString(32);
+      return (hook.memoizedState = id);
     },
     unstable_isNewReconciler: !1
   },
@@ -4092,9 +4122,7 @@ var ContextOnlyDispatcher = {
       }
       return nextSnapshot;
     },
-    useOpaqueIdentifier: function() {
-      return updateReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnRerender = {
@@ -4137,9 +4165,7 @@ var ContextOnlyDispatcher = {
     },
     useMutableSource: updateMutableSource,
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      return rerenderReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   };
 function createCapturedValue(value, source) {
@@ -4273,8 +4299,8 @@ function bubbleProperties(completedWork) {
   if (didBailout)
     for (var child$36 = completedWork.child; null !== child$36; )
       (newChildLanes |= child$36.lanes | child$36.childLanes),
-        (subtreeFlags |= child$36.subtreeFlags & 7340032),
-        (subtreeFlags |= child$36.flags & 7340032),
+        (subtreeFlags |= child$36.subtreeFlags & 14680064),
+        (subtreeFlags |= child$36.flags & 14680064),
         (child$36.return = completedWork),
         (child$36 = child$36.sibling);
   else
@@ -4290,6 +4316,7 @@ function bubbleProperties(completedWork) {
 }
 function completeWork(current, workInProgress, renderLanes) {
   var newProps = workInProgress.pendingProps;
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 2:
     case 16:
@@ -4434,7 +4461,7 @@ function completeWork(current, workInProgress, renderLanes) {
             workInProgressRootExitStatus = 4;
           null === workInProgressRoot ||
             (0 === (workInProgressRootSkippedLanes & 268435455) &&
-              0 === (workInProgressRootUpdatedLanes & 268435455)) ||
+              0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)) ||
             markRootSuspended$1(
               workInProgressRoot,
               workInProgressRootRenderLanes
@@ -4489,7 +4516,7 @@ function completeWork(current, workInProgress, renderLanes) {
                 for (newProps = workInProgress.child; null !== newProps; )
                   (renderLanes = newProps),
                     (type = current),
-                    (renderLanes.flags &= 7340034),
+                    (renderLanes.flags &= 14680066),
                     (updatePayload = renderLanes.alternate),
                     null === updatePayload
                       ? ((renderLanes.childLanes = 0),
@@ -5070,7 +5097,7 @@ function pushHostRootContext(workInProgress) {
       pushTopLevelContextObject(workInProgress, root.context, !1);
   pushHostContainer(workInProgress, root.containerInfo);
 }
-var SUSPENDED_MARKER = { dehydrated: null, retryLane: 0 };
+var SUSPENDED_MARKER = { dehydrated: null, treeContext: null, retryLane: 0 };
 function mountSuspenseOffscreenState(renderLanes) {
   return { baseLanes: renderLanes, cachePool: null };
 }
@@ -5263,7 +5290,7 @@ function updateSuspenseFallbackChildren(
       (primaryChildren.pendingProps = primaryChildProps),
       (workInProgress.deletions = null))
     : ((primaryChildren = createWorkInProgress(current, primaryChildProps)),
-      (primaryChildren.subtreeFlags = current.subtreeFlags & 7340032));
+      (primaryChildren.subtreeFlags = current.subtreeFlags & 14680064));
   null !== currentFallbackChildFragment
     ? (fallbackChildren = createWorkInProgress(
         currentFallbackChildFragment,
@@ -5487,6 +5514,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
   return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 }
 function unwindWork(workInProgress) {
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 1:
       isContextProvider(workInProgress.type) && popContext();
@@ -5544,6 +5572,13 @@ function safelyDetachRef(current, nearestMountedAncestor) {
       }
     else ref.current = null;
 }
+function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
+  try {
+    destroy();
+  } catch (error) {
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
+  }
+}
 var shouldFireAfterActiveInstanceBlur = !1;
 function commitBeforeMutationEffects(root, firstChild) {
   for (nextEffect = firstChild; null !== nextEffect; )
@@ -5608,7 +5643,7 @@ function commitBeforeMutationEffects(root, firstChild) {
 function commitHookEffectListUnmount(
   flags,
   finishedWork,
-  nearestMountedAncestor$jscomp$0
+  nearestMountedAncestor
 ) {
   var updateQueue = finishedWork.updateQueue;
   updateQueue = null !== updateQueue ? updateQueue.lastEffect : null;
@@ -5618,27 +5653,20 @@ function commitHookEffectListUnmount(
       if ((effect.tag & flags) === flags) {
         var destroy = effect.destroy;
         effect.destroy = void 0;
-        if (void 0 !== destroy) {
-          var current = finishedWork,
-            nearestMountedAncestor = nearestMountedAncestor$jscomp$0;
-          try {
-            destroy();
-          } catch (error) {
-            captureCommitPhaseError(current, nearestMountedAncestor, error);
-          }
-        }
+        void 0 !== destroy &&
+          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
       }
       effect = effect.next;
     } while (effect !== updateQueue);
   }
 }
-function commitHookEffectListMount(tag, finishedWork) {
+function commitHookEffectListMount(flags, finishedWork) {
   finishedWork = finishedWork.updateQueue;
   finishedWork = null !== finishedWork ? finishedWork.lastEffect : null;
   if (null !== finishedWork) {
     var effect = (finishedWork = finishedWork.next);
     do {
-      if ((effect.tag & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
         var create$80 = effect.create;
         effect.destroy = create$80();
       }
@@ -5646,7 +5674,7 @@ function commitHookEffectListMount(tag, finishedWork) {
     } while (effect !== finishedWork);
   }
 }
-function commitUnmount(finishedRoot, current, nearestMountedAncestor$jscomp$0) {
+function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
   if (injectedHook && "function" === typeof injectedHook.onCommitFiberUnmount)
     try {
       injectedHook.onCommitFiberUnmount(rendererID, current);
@@ -5666,24 +5694,17 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor$jscomp$0) {
           var _effect = effect,
             destroy = _effect.destroy;
           _effect = _effect.tag;
-          if (
-            void 0 !== destroy &&
-            (0 !== (_effect & 2) || 0 !== (_effect & 4))
-          ) {
-            _effect = current;
-            var nearestMountedAncestor = nearestMountedAncestor$jscomp$0;
-            try {
-              destroy();
-            } catch (error) {
-              captureCommitPhaseError(_effect, nearestMountedAncestor, error);
-            }
-          }
+          void 0 !== destroy &&
+            (0 !== (_effect & 2)
+              ? safelyCallDestroy(current, nearestMountedAncestor, destroy)
+              : 0 !== (_effect & 4) &&
+                safelyCallDestroy(current, nearestMountedAncestor, destroy));
           effect = effect.next;
         } while (effect !== finishedRoot);
       }
       break;
     case 1:
-      safelyDetachRef(current, nearestMountedAncestor$jscomp$0);
+      safelyDetachRef(current, nearestMountedAncestor);
       finishedRoot = current.stateNode;
       if ("function" === typeof finishedRoot.componentWillUnmount)
         try {
@@ -5691,22 +5712,14 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor$jscomp$0) {
             (finishedRoot.state = current.memoizedState),
             finishedRoot.componentWillUnmount();
         } catch (error) {
-          captureCommitPhaseError(
-            current,
-            nearestMountedAncestor$jscomp$0,
-            error
-          );
+          captureCommitPhaseError(current, nearestMountedAncestor, error);
         }
       break;
     case 5:
-      safelyDetachRef(current, nearestMountedAncestor$jscomp$0);
+      safelyDetachRef(current, nearestMountedAncestor);
       break;
     case 4:
-      unmountHostComponents(
-        finishedRoot,
-        current,
-        nearestMountedAncestor$jscomp$0
-      );
+      unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
   }
 }
 function detachFiberAfterEffects(fiber) {
@@ -6340,7 +6353,8 @@ var ceil = Math.ceil,
   workInProgressRootExitStatus = 0,
   workInProgressRootFatalError = null,
   workInProgressRootSkippedLanes = 0,
-  workInProgressRootUpdatedLanes = 0,
+  workInProgressRootInterleavedUpdatedLanes = 0,
+  workInProgressRootRenderPhaseUpdatedLanes = 0,
   workInProgressRootPingedLanes = 0,
   globalMostRecentFallbackTime = 0,
   workInProgressRootRenderTargetTime = Infinity,
@@ -6387,16 +6401,19 @@ function scheduleUpdateOnFiber(fiber, lane, eventTime) {
   var root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (null === root) return null;
   markRootUpdated(root, lane, eventTime);
-  root === workInProgressRoot &&
-    (0 === (executionContext & 2) && (workInProgressRootUpdatedLanes |= lane),
-    4 === workInProgressRootExitStatus &&
-      markRootSuspended$1(root, workInProgressRootRenderLanes));
-  ensureRootIsScheduled(root, eventTime);
-  1 === lane &&
-    0 === executionContext &&
-    0 === (fiber.mode & 1) &&
-    ((workInProgressRootRenderTargetTime = now() + 500),
-    includesLegacySyncCallbacks && flushSyncCallbacks());
+  0 !== (executionContext & 2) && root === workInProgressRoot
+    ? (workInProgressRootRenderPhaseUpdatedLanes |= lane)
+    : (root === workInProgressRoot &&
+        (0 === (executionContext & 2) &&
+          (workInProgressRootInterleavedUpdatedLanes |= lane),
+        4 === workInProgressRootExitStatus &&
+          markRootSuspended$1(root, workInProgressRootRenderLanes)),
+      ensureRootIsScheduled(root, eventTime),
+      1 === lane &&
+        0 === executionContext &&
+        0 === (fiber.mode & 1) &&
+        ((workInProgressRootRenderTargetTime = now() + 500),
+        includesLegacySyncCallbacks && flushSyncCallbacks()));
   return root;
 }
 function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
@@ -6643,9 +6660,15 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   var prevExecutionContext = executionContext;
   executionContext |= 8;
   root.isDehydrated && (root.isDehydrated = !1);
-  root = renderRootSync(root, errorRetryLanes);
+  for (
+    var exitStatus, i = 0;
+    50 > i &&
+    ((exitStatus = renderRootSync(root, errorRetryLanes)),
+    2 === exitStatus && 0 !== workInProgressRootRenderPhaseUpdatedLanes);
+    i++
+  );
   executionContext = prevExecutionContext;
-  return root;
+  return exitStatus;
 }
 function isRenderConsistentWithExternalStores(finishedWork) {
   for (var node = finishedWork; ; ) {
@@ -6683,7 +6706,7 @@ function isRenderConsistentWithExternalStores(finishedWork) {
 }
 function markRootSuspended$1(root, suspendedLanes) {
   suspendedLanes &= ~workInProgressRootPingedLanes;
-  suspendedLanes &= ~workInProgressRootUpdatedLanes;
+  suspendedLanes &= ~workInProgressRootInterleavedUpdatedLanes;
   root.suspendedLanes |= suspendedLanes;
   root.pingedLanes &= ~suspendedLanes;
   for (root = root.expirationTimes; 0 < suspendedLanes; ) {
@@ -6701,13 +6724,10 @@ function performSyncWorkOnRoot(root) {
   if (0 === (lanes & 1)) return ensureRootIsScheduled(root, now()), null;
   var exitStatus = renderRootSync(root, lanes);
   if (0 !== root.tag && 2 === exitStatus) {
-    var prevExecutionContext = executionContext;
-    executionContext |= 8;
-    root.isDehydrated && (root.isDehydrated = !1);
     var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     0 !== errorRetryLanes &&
-      ((lanes = errorRetryLanes), (exitStatus = renderRootSync(root, lanes)));
-    executionContext = prevExecutionContext;
+      ((lanes = errorRetryLanes),
+      (exitStatus = recoverFromConcurrentError(root, errorRetryLanes)));
   }
   if (1 === exitStatus)
     throw ((exitStatus = workInProgressRootFatalError),
@@ -6734,6 +6754,7 @@ function prepareFreshStack(root, lanes) {
   if (null !== workInProgress)
     for (timeoutHandle = workInProgress.return; null !== timeoutHandle; ) {
       var interruptedWork = timeoutHandle;
+      popTreeContext(interruptedWork);
       switch (interruptedWork.tag) {
         case 1:
           interruptedWork = interruptedWork.type.childContextTypes;
@@ -6773,7 +6794,7 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootRenderLanes = subtreeRenderLanes = lanes;
   workInProgressRootExitStatus = 0;
   workInProgressRootFatalError = null;
-  workInProgressRootPingedLanes = workInProgressRootUpdatedLanes = workInProgressRootSkippedLanes = 0;
+  workInProgressRootPingedLanes = workInProgressRootRenderPhaseUpdatedLanes = workInProgressRootInterleavedUpdatedLanes = workInProgressRootSkippedLanes = 0;
   if (null !== interleavedQueues) {
     for (root = 0; root < interleavedQueues.length; root++)
       if (
@@ -6852,69 +6873,67 @@ function handleError(root$jscomp$0, thrownValue) {
           }
           b: {
             sourceFiber$jscomp$0 = returnFiber;
-            var sourceFiber$jscomp$1 = sourceFiber,
-              rootRenderLanes = thrownValue,
-              hasInvisibleParentBoundary =
-                0 !== (suspenseStackCursor.current & 1),
-              node = sourceFiber$jscomp$0;
+            var hasInvisibleParentBoundary =
+              0 !== (suspenseStackCursor.current & 1);
             do {
               var JSCompiler_temp;
-              if ((JSCompiler_temp = 13 === node.tag)) {
-                var nextState = node.memoizedState;
+              if ((JSCompiler_temp = 13 === sourceFiber$jscomp$0.tag)) {
+                var nextState = sourceFiber$jscomp$0.memoizedState;
                 JSCompiler_temp =
                   null !== nextState
                     ? null !== nextState.dehydrated
                       ? !0
                       : !1
-                    : !0 !== node.memoizedProps.unstable_avoidThisFallback
+                    : !0 !==
+                      sourceFiber$jscomp$0.memoizedProps
+                        .unstable_avoidThisFallback
                     ? !0
                     : hasInvisibleParentBoundary
                     ? !1
                     : !0;
               }
               if (JSCompiler_temp) {
-                if (0 === (node.mode & 1)) {
-                  if (node === sourceFiber$jscomp$0) node.flags |= 65536;
-                  else {
-                    node.flags |= 128;
-                    sourceFiber$jscomp$1.flags |= 131072;
-                    sourceFiber$jscomp$1.flags &= -52805;
-                    if (1 === sourceFiber$jscomp$1.tag)
-                      if (null === sourceFiber$jscomp$1.alternate)
-                        sourceFiber$jscomp$1.tag = 17;
-                      else {
-                        var update = createUpdate(-1, 1);
-                        update.tag = 2;
-                        enqueueUpdate(sourceFiber$jscomp$1, update);
-                      }
-                    sourceFiber$jscomp$1.lanes |= 1;
-                  }
-                  var suspenseBoundary = node;
-                  break b;
-                }
-                node.flags |= 65536;
-                node.lanes = rootRenderLanes;
-                suspenseBoundary = node;
+                var suspenseBoundary = sourceFiber$jscomp$0;
                 break b;
               }
-              node = node.return;
-            } while (null !== node);
+              sourceFiber$jscomp$0 = sourceFiber$jscomp$0.return;
+            } while (null !== sourceFiber$jscomp$0);
             suspenseBoundary = null;
           }
           if (null !== suspenseBoundary) {
-            value = void 0;
-            sourceFiber = suspenseBoundary;
-            if (sourceFiber.mode & 1) {
+            suspenseBoundary.flags &= -257;
+            value = suspenseBoundary;
+            sourceFiber$jscomp$0 = thrownValue;
+            if (0 === (value.mode & 1))
+              if (value === returnFiber) value.flags |= 65536;
+              else {
+                value.flags |= 128;
+                sourceFiber.flags |= 131072;
+                sourceFiber.flags &= -52805;
+                if (1 === sourceFiber.tag)
+                  if (null === sourceFiber.alternate) sourceFiber.tag = 17;
+                  else {
+                    var update = createUpdate(-1, 1);
+                    update.tag = 2;
+                    enqueueUpdate(sourceFiber, update);
+                  }
+                sourceFiber.lanes |= 1;
+              }
+            else (value.flags |= 65536), (value.lanes = sourceFiber$jscomp$0);
+            sourceFiber = void 0;
+            value = suspenseBoundary;
+            if (value.mode & 1) {
               var pingCache = root.pingCache;
               null === pingCache
                 ? ((pingCache = root.pingCache = new PossiblyWeakMap()),
-                  (value = new Set()),
-                  pingCache.set(wakeable, value))
-                : ((value = pingCache.get(wakeable)),
-                  void 0 === value &&
-                    ((value = new Set()), pingCache.set(wakeable, value)));
-              if (!value.has(thrownValue)) {
-                value.add(thrownValue);
+                  (sourceFiber = new Set()),
+                  pingCache.set(wakeable, sourceFiber))
+                : ((sourceFiber = pingCache.get(wakeable)),
+                  void 0 === sourceFiber &&
+                    ((sourceFiber = new Set()),
+                    pingCache.set(wakeable, sourceFiber)));
+              if (!sourceFiber.has(thrownValue)) {
+                sourceFiber.add(thrownValue);
                 var ping = pingSuspendedRoot.bind(
                   null,
                   root,
@@ -6924,11 +6943,11 @@ function handleError(root$jscomp$0, thrownValue) {
                 wakeable.then(ping, ping);
               }
             }
-            var wakeables = sourceFiber.updateQueue;
+            var wakeables = value.updateQueue;
             if (null === wakeables) {
               var updateQueue = new Set();
               updateQueue.add(wakeable);
-              sourceFiber.updateQueue = updateQueue;
+              value.updateQueue = updateQueue;
             } else wakeables.add(wakeable);
             break a;
           } else
@@ -7875,7 +7894,7 @@ function createWorkInProgress(current, pendingProps) {
       (workInProgress.flags = 0),
       (workInProgress.subtreeFlags = 0),
       (workInProgress.deletions = null));
-  workInProgress.flags = current.flags & 7340032;
+  workInProgress.flags = current.flags & 14680064;
   workInProgress.childLanes = current.childLanes;
   workInProgress.lanes = current.lanes;
   workInProgress.child = current.child;
@@ -8231,10 +8250,10 @@ batchedUpdatesImpl = function(fn, a) {
   }
 };
 var roots = new Map(),
-  devToolsConfig$jscomp$inline_976 = {
+  devToolsConfig$jscomp$inline_966 = {
     findFiberByHostInstance: getInstanceFromTag,
     bundleType: 0,
-    version: "18.0.0-afcb9cdc9-20211008",
+    version: "18.0.0-c0c71a868-20211112",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForViewTag: function() {
@@ -8249,11 +8268,11 @@ var roots = new Map(),
       }.bind(null, findNodeHandle)
     }
   };
-var internals$jscomp$inline_1240 = {
-  bundleType: devToolsConfig$jscomp$inline_976.bundleType,
-  version: devToolsConfig$jscomp$inline_976.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_976.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_976.rendererConfig,
+var internals$jscomp$inline_1230 = {
+  bundleType: devToolsConfig$jscomp$inline_966.bundleType,
+  version: devToolsConfig$jscomp$inline_966.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_966.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_966.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -8269,26 +8288,26 @@ var internals$jscomp$inline_1240 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_976.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_966.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.0.0-afcb9cdc9-20211008"
+  reconcilerVersion: "18.0.0-c0c71a868-20211112"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1241 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1231 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1241.isDisabled &&
-    hook$jscomp$inline_1241.supportsFiber
+    !hook$jscomp$inline_1231.isDisabled &&
+    hook$jscomp$inline_1231.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1241.inject(
-        internals$jscomp$inline_1240
+      (rendererID = hook$jscomp$inline_1231.inject(
+        internals$jscomp$inline_1230
       )),
-        (injectedHook = hook$jscomp$inline_1241);
+        (injectedHook = hook$jscomp$inline_1231);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
diff --git a/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js b/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js
index 8916f57175feff..ea905e571fdb56 100644
--- a/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js
+++ b/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js
@@ -7,10 +7,21 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<fb4d870eef7bc67bee589431bb9294f7>>
+ * @generated SignedSource<<bbacb11ee462ae80c14f12baf55dfb71>>
  */
 
-"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";
 require("react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore");
 var ReactNativePrivateInterface = require("react-native/Libraries/ReactPrivate/ReactNativePrivateInterface"),
   React = require("react");
@@ -926,7 +937,7 @@ eventPluginOrder = Array.prototype.slice.call([
   "ReactNativeBridgeEventPlugin"
 ]);
 recomputePluginOrdering();
-var injectedNamesToPlugins$jscomp$inline_230 = {
+var injectedNamesToPlugins$jscomp$inline_246 = {
     ResponderEventPlugin: ResponderEventPlugin,
     ReactNativeBridgeEventPlugin: {
       eventTypes: {},
@@ -961,33 +972,33 @@ var injectedNamesToPlugins$jscomp$inline_230 = {
       }
     }
   },
-  isOrderingDirty$jscomp$inline_231 = !1,
-  pluginName$jscomp$inline_232;
-for (pluginName$jscomp$inline_232 in injectedNamesToPlugins$jscomp$inline_230)
+  isOrderingDirty$jscomp$inline_247 = !1,
+  pluginName$jscomp$inline_248;
+for (pluginName$jscomp$inline_248 in injectedNamesToPlugins$jscomp$inline_246)
   if (
-    injectedNamesToPlugins$jscomp$inline_230.hasOwnProperty(
-      pluginName$jscomp$inline_232
+    injectedNamesToPlugins$jscomp$inline_246.hasOwnProperty(
+      pluginName$jscomp$inline_248
     )
   ) {
-    var pluginModule$jscomp$inline_233 =
-      injectedNamesToPlugins$jscomp$inline_230[pluginName$jscomp$inline_232];
+    var pluginModule$jscomp$inline_249 =
+      injectedNamesToPlugins$jscomp$inline_246[pluginName$jscomp$inline_248];
     if (
-      !namesToPlugins.hasOwnProperty(pluginName$jscomp$inline_232) ||
-      namesToPlugins[pluginName$jscomp$inline_232] !==
-        pluginModule$jscomp$inline_233
+      !namesToPlugins.hasOwnProperty(pluginName$jscomp$inline_248) ||
+      namesToPlugins[pluginName$jscomp$inline_248] !==
+        pluginModule$jscomp$inline_249
     ) {
-      if (namesToPlugins[pluginName$jscomp$inline_232])
+      if (namesToPlugins[pluginName$jscomp$inline_248])
         throw Error(
           "EventPluginRegistry: Cannot inject two different event plugins using the same name, `" +
-            (pluginName$jscomp$inline_232 + "`.")
+            (pluginName$jscomp$inline_248 + "`.")
         );
       namesToPlugins[
-        pluginName$jscomp$inline_232
-      ] = pluginModule$jscomp$inline_233;
-      isOrderingDirty$jscomp$inline_231 = !0;
+        pluginName$jscomp$inline_248
+      ] = pluginModule$jscomp$inline_249;
+      isOrderingDirty$jscomp$inline_247 = !0;
     }
   }
-isOrderingDirty$jscomp$inline_231 && recomputePluginOrdering();
+isOrderingDirty$jscomp$inline_247 && recomputePluginOrdering();
 var instanceCache = new Map(),
   instanceProps = new Map();
 function getInstanceFromTag(tag) {
@@ -1715,6 +1726,27 @@ function onCommitRoot(root, eventPriority) {
       );
     } catch (err) {}
 }
+var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
+  log = Math.log,
+  LN2 = Math.LN2;
+function clz32Fallback(x) {
+  x >>>= 0;
+  return 0 === x ? 32 : (31 - ((log(x) / LN2) | 0)) | 0;
+}
+function getLabelForLane(lane) {
+  if (lane & 1) return "Sync";
+  if (lane & 2) return "InputContinuousHydration";
+  if (lane & 4) return "InputContinuous";
+  if (lane & 8) return "DefaultHydration";
+  if (lane & 16) return "Default";
+  if (lane & 32) return "TransitionHydration";
+  if (lane & 4194240) return "Transition";
+  if (lane & 130023424) return "Retry";
+  if (lane & 134217728) return "SelectiveHydration";
+  if (lane & 268435456) return "IdleHydration";
+  if (lane & 536870912) return "Idle";
+  if (lane & 1073741824) return "Offscreen";
+}
 var nextTransitionLane = 64,
   nextRetryLane = 4194304;
 function getHighestPriorityLanes(lanes) {
@@ -1928,12 +1960,6 @@ function movePendingFibersToMemoized(root, lanes) {
       lanes &= ~root;
     }
 }
-var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
-  log = Math.log,
-  LN2 = Math.LN2;
-function clz32Fallback(lanes) {
-  return 0 === lanes ? 32 : (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
 var currentUpdatePriority = 0;
 function lanesToEventPriority(lanes) {
   lanes &= -lanes;
@@ -2122,6 +2148,113 @@ function flushSyncCallbacks() {
   }
   return null;
 }
+var supportsUserTimingV3 = !1;
+if (
+  "undefined" !== typeof performance &&
+  "function" === typeof performance.mark &&
+  "function" === typeof performance.clearMarks
+) {
+  var markOptions = {};
+  Object.defineProperty(markOptions, "startTime", {
+    get: function() {
+      supportsUserTimingV3 = !0;
+      return 0;
+    },
+    set: function() {}
+  });
+  try {
+    performance.mark("__v3", markOptions);
+  } catch (error) {
+  } finally {
+    performance.clearMarks("__v3");
+  }
+}
+var laneLabels = [];
+function getLaneLabels() {
+  if (0 === laneLabels.length)
+    for (var lane = 1, index$13 = 0; 31 > index$13; index$13++)
+      laneLabels.push(getLabelForLane(lane)), (lane *= 2);
+  return laneLabels;
+}
+function markAndClear(name) {
+  performance.mark(name);
+  performance.clearMarks(name);
+}
+function markInternalModuleRanges() {
+  if (
+    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+    "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges
+  ) {
+    var ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
+    if (isArrayImpl(ranges))
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+        if (isArrayImpl(range) && 2 === range.length) {
+          range = ranges[i];
+          var stopStackFrame = range[1];
+          markAndClear("--react-internal-module-start-" + range[0]);
+          markAndClear("--react-internal-module-stop-" + stopStackFrame);
+        }
+      }
+  }
+}
+function markComponentRenderStarted(fiber) {
+  supportsUserTimingV3 &&
+    ((fiber = getComponentNameFromFiber(fiber) || "Unknown"),
+    markAndClear("--component-render-start-" + fiber));
+}
+function markComponentRenderStopped() {
+  supportsUserTimingV3 && markAndClear("--component-render-stop");
+}
+function markComponentLayoutEffectUnmountStarted(fiber) {
+  supportsUserTimingV3 &&
+    ((fiber = getComponentNameFromFiber(fiber) || "Unknown"),
+    markAndClear("--component-layout-effect-unmount-start-" + fiber));
+}
+function markComponentLayoutEffectUnmountStopped() {
+  supportsUserTimingV3 &&
+    markAndClear("--component-layout-effect-unmount-stop");
+}
+var wakeableIDs = new ("function" === typeof WeakMap ? WeakMap : Map)(),
+  wakeableID = 0;
+function getWakeableID(wakeable) {
+  wakeableIDs.has(wakeable) || wakeableIDs.set(wakeable, wakeableID++);
+  return wakeableIDs.get(wakeable);
+}
+function markComponentSuspended(fiber, wakeable, lanes) {
+  if (supportsUserTimingV3) {
+    var eventType = wakeableIDs.has(wakeable) ? "resuspend" : "suspend",
+      id = getWakeableID(wakeable),
+      componentName = getComponentNameFromFiber(fiber) || "Unknown";
+    markAndClear(
+      "--suspense-" +
+        eventType +
+        "-" +
+        id +
+        "-" +
+        componentName +
+        "-" +
+        (null === fiber.alternate ? "mount" : "update") +
+        "-" +
+        lanes +
+        "-" +
+        (wakeable.displayName || "")
+    );
+    wakeable.then(
+      function() {
+        return markAndClear("--suspense-resolved-" + id + "-" + componentName);
+      },
+      function() {
+        return markAndClear("--suspense-rejected-" + id + "-" + componentName);
+      }
+    );
+  }
+}
+function markStateUpdateScheduled(fiber, lane) {
+  supportsUserTimingV3 &&
+    ((fiber = getComponentNameFromFiber(fiber) || "Unknown"),
+    markAndClear("--schedule-state-update-" + lane + "-" + fiber));
+}
 var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
 function shallowEqual(objA, objB) {
   if (objectIs(objA, objB)) return !0;
@@ -2135,12 +2268,14 @@ function shallowEqual(objA, objB) {
   var keysA = Object.keys(objA),
     keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return !1;
-  for (keysB = 0; keysB < keysA.length; keysB++)
+  for (keysB = 0; keysB < keysA.length; keysB++) {
+    var currentKey = keysA[keysB];
     if (
-      !hasOwnProperty.call(objB, keysA[keysB]) ||
-      !objectIs(objA[keysA[keysB]], objB[keysA[keysB]])
+      !hasOwnProperty.call(objB, currentKey) ||
+      !objectIs(objA[currentKey], objB[currentKey])
     )
       return !1;
+  }
   return !0;
 }
 function describeFiber(fiber) {
@@ -2535,6 +2670,7 @@ var classComponentUpdater = {
     enqueueUpdate(inst, update);
     payload = scheduleUpdateOnFiber(inst, lane, eventTime);
     null !== payload && entangleTransitions(payload, inst, lane);
+    markStateUpdateScheduled(inst, lane);
   },
   enqueueReplaceState: function(inst, payload, callback) {
     inst = inst._reactInternals;
@@ -2547,17 +2683,21 @@ var classComponentUpdater = {
     enqueueUpdate(inst, update);
     payload = scheduleUpdateOnFiber(inst, lane, eventTime);
     null !== payload && entangleTransitions(payload, inst, lane);
+    markStateUpdateScheduled(inst, lane);
   },
   enqueueForceUpdate: function(inst, callback) {
-    inst = inst._reactInternals;
-    var eventTime = requestEventTime(),
-      lane = requestUpdateLane(inst),
-      update = createUpdate(eventTime, lane);
+    var fiber = inst._reactInternals,
+      eventTime = requestEventTime();
+    inst = requestUpdateLane(fiber);
+    var update = createUpdate(eventTime, inst);
     update.tag = 2;
     void 0 !== callback && null !== callback && (update.callback = callback);
-    enqueueUpdate(inst, update);
-    callback = scheduleUpdateOnFiber(inst, lane, eventTime);
-    null !== callback && entangleTransitions(callback, inst, lane);
+    enqueueUpdate(fiber, update);
+    callback = scheduleUpdateOnFiber(fiber, inst, eventTime);
+    null !== callback && entangleTransitions(callback, fiber, inst);
+    supportsUserTimingV3 &&
+      ((callback = getComponentNameFromFiber(fiber) || "Unknown"),
+      markAndClear("--schedule-forced-update-" + inst + "-" + callback));
   }
 };
 function checkShouldComponentUpdate(
@@ -2650,6 +2790,26 @@ function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
   "function" === typeof instance.componentDidMount &&
     (workInProgress.flags |= 4);
 }
+var forkStack = [],
+  forkStackIndex = 0,
+  treeForkProvider = null,
+  idStack = [],
+  idStackIndex = 0,
+  treeContextProvider = null;
+function popTreeContext(workInProgress) {
+  for (; workInProgress === treeForkProvider; )
+    (treeForkProvider = forkStack[--forkStackIndex]),
+      (forkStack[forkStackIndex] = null),
+      --forkStackIndex,
+      (forkStack[forkStackIndex] = null);
+  for (; workInProgress === treeContextProvider; )
+    (treeContextProvider = idStack[--idStackIndex]),
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null),
+      --idStackIndex,
+      (idStack[idStackIndex] = null);
+}
 function coerceRef(returnFiber, current, element) {
   returnFiber = element.ref;
   if (
@@ -2744,7 +2904,8 @@ function ChildReconciler(shouldTrackSideEffects) {
   }
   function placeChild(newFiber, lastPlacedIndex, newIndex) {
     newFiber.index = newIndex;
-    if (!shouldTrackSideEffects) return lastPlacedIndex;
+    if (!shouldTrackSideEffects)
+      return (newFiber.flags |= 1048576), lastPlacedIndex;
     newIndex = newFiber.alternate;
     if (null !== newIndex)
       return (
@@ -3348,7 +3509,8 @@ var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher,
   currentHook = null,
   workInProgressHook = null,
   didScheduleRenderPhaseUpdate = !1,
-  didScheduleRenderPhaseUpdateDuringThisPass = !1;
+  didScheduleRenderPhaseUpdateDuringThisPass = !1,
+  globalClientIdCounter = 0;
 function throwInvalidHookError() {
   throw Error(
     "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."
@@ -3614,9 +3776,9 @@ function useMutableSource(hook, source, getSnapshot, subscribe) {
           latestSetSnapshot(latestGetSnapshot(source._source));
           var lane = requestUpdateLane(fiber);
           root.mutableReadLanes |= lane & root.pendingLanes;
-        } catch (error) {
+        } catch (error$33) {
           latestSetSnapshot(function() {
-            throw error;
+            throw error$33;
           });
         }
       });
@@ -3702,7 +3864,7 @@ function checkIfSnapshotChanged(inst) {
   try {
     var nextValue = latestGetSnapshot();
     return !objectIs(inst, nextValue);
-  } catch (error) {
+  } catch (error$34) {
     return !0;
   }
 }
@@ -3771,7 +3933,7 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
   hook.memoizedState = pushEffect(1 | hookFlags, create, destroy, deps);
 }
 function mountEffect(create, deps) {
-  return mountEffectImpl(4196352, 8, create, deps);
+  return mountEffectImpl(8390656, 8, create, deps);
 }
 function updateEffect(create, deps) {
   return updateEffectImpl(2048, 8, create, deps);
@@ -3851,6 +4013,9 @@ function startTransition(setPending, callback) {
       (ReactCurrentBatchConfig$1.transition = prevTransition);
   }
 }
+function updateId() {
+  return updateWorkInProgressHook().memoizedState;
+}
 function dispatchReducerAction(fiber, queue, action) {
   var lane = requestUpdateLane(fiber);
   action = {
@@ -3864,8 +4029,9 @@ function dispatchReducerAction(fiber, queue, action) {
     ? enqueueRenderPhaseUpdate(queue, action)
     : (enqueueUpdate$1(fiber, queue, action),
       (action = requestEventTime()),
-      (fiber = scheduleUpdateOnFiber(fiber, lane, action)),
-      null !== fiber && entangleTransitionUpdate(fiber, queue, lane));
+      (action = scheduleUpdateOnFiber(fiber, lane, action)),
+      null !== action && entangleTransitionUpdate(action, queue, lane));
+  markStateUpdateScheduled(fiber, lane);
 }
 function dispatchSetState(fiber, queue, action) {
   var lane = requestUpdateLane(fiber),
@@ -3891,13 +4057,14 @@ function dispatchSetState(fiber, queue, action) {
         update.hasEagerState = !0;
         update.eagerState = eagerState;
         if (objectIs(eagerState, currentState)) return;
-      } catch (error) {
+      } catch (error$36) {
       } finally {
       }
     action = requestEventTime();
-    fiber = scheduleUpdateOnFiber(fiber, lane, action);
-    null !== fiber && entangleTransitionUpdate(fiber, queue, lane);
+    action = scheduleUpdateOnFiber(fiber, lane, action);
+    null !== action && entangleTransitionUpdate(action, queue, lane);
   }
+  markStateUpdateScheduled(fiber, lane);
 }
 function isRenderPhaseUpdate(fiber) {
   var alternate = fiber.alternate;
@@ -3958,7 +4125,7 @@ var ContextOnlyDispatcher = {
     useTransition: throwInvalidHookError,
     useMutableSource: throwInvalidHookError,
     useSyncExternalStore: throwInvalidHookError,
-    useOpaqueIdentifier: throwInvalidHookError,
+    useId: throwInvalidHookError,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnMount = {
@@ -4056,8 +4223,10 @@ var ContextOnlyDispatcher = {
       return useMutableSource(hook, source, getSnapshot, subscribe);
     },
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      throw Error("Not yet implemented");
+    useId: function() {
+      var hook = mountWorkInProgressHook();
+      var id = "r:" + (globalClientIdCounter++).toString(32);
+      return (hook.memoizedState = id);
     },
     unstable_isNewReconciler: !1
   },
@@ -4140,9 +4309,7 @@ var ContextOnlyDispatcher = {
       }
       return nextSnapshot;
     },
-    useOpaqueIdentifier: function() {
-      return updateReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   },
   HooksDispatcherOnRerender = {
@@ -4185,9 +4352,7 @@ var ContextOnlyDispatcher = {
     },
     useMutableSource: updateMutableSource,
     useSyncExternalStore: mountSyncExternalStore,
-    useOpaqueIdentifier: function() {
-      return rerenderReducer(basicStateReducer)[0];
-    },
+    useId: updateId,
     unstable_isNewReconciler: !1
   },
   now$1 = Scheduler.unstable_now,
@@ -4277,7 +4442,7 @@ function logCapturedError(boundary, errorInfo) {
     });
   }
 }
-var PossiblyWeakMap = "function" === typeof WeakMap ? WeakMap : Map;
+var PossiblyWeakMap$1 = "function" === typeof WeakMap ? WeakMap : Map;
 function createRootErrorUpdate(fiber, errorInfo, lane) {
   lane = createUpdate(-1, lane);
   lane.tag = 3;
@@ -4294,9 +4459,9 @@ function createClassErrorUpdate(fiber, errorInfo, lane) {
   lane.tag = 3;
   var getDerivedStateFromError = fiber.type.getDerivedStateFromError;
   if ("function" === typeof getDerivedStateFromError) {
-    var error = errorInfo.value;
+    var error$38 = errorInfo.value;
     lane.payload = function() {
-      return getDerivedStateFromError(error);
+      return getDerivedStateFromError(error$38);
     };
     lane.callback = function() {
       logCapturedError(fiber, errorInfo);
@@ -4360,14 +4525,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) {
       break;
     case "collapsed":
       lastTailNode = renderState.tail;
-      for (var lastTailNode$37 = null; null !== lastTailNode; )
-        null !== lastTailNode.alternate && (lastTailNode$37 = lastTailNode),
+      for (var lastTailNode$43 = null; null !== lastTailNode; )
+        null !== lastTailNode.alternate && (lastTailNode$43 = lastTailNode),
           (lastTailNode = lastTailNode.sibling);
-      null === lastTailNode$37
+      null === lastTailNode$43
         ? hasRenderedATailFallback || null === renderState.tail
           ? (renderState.tail = null)
           : (renderState.tail.sibling = null)
-        : (lastTailNode$37.sibling = null);
+        : (lastTailNode$43.sibling = null);
   }
 }
 function bubbleProperties(completedWork) {
@@ -4379,59 +4544,60 @@ function bubbleProperties(completedWork) {
   if (didBailout)
     if (0 !== (completedWork.mode & 2)) {
       for (
-        var treeBaseDuration$39 = completedWork.selfBaseDuration,
-          child$40 = completedWork.child;
-        null !== child$40;
+        var treeBaseDuration$45 = completedWork.selfBaseDuration,
+          child$46 = completedWork.child;
+        null !== child$46;
 
       )
-        (newChildLanes |= child$40.lanes | child$40.childLanes),
-          (subtreeFlags |= child$40.subtreeFlags & 7340032),
-          (subtreeFlags |= child$40.flags & 7340032),
-          (treeBaseDuration$39 += child$40.treeBaseDuration),
-          (child$40 = child$40.sibling);
-      completedWork.treeBaseDuration = treeBaseDuration$39;
+        (newChildLanes |= child$46.lanes | child$46.childLanes),
+          (subtreeFlags |= child$46.subtreeFlags & 14680064),
+          (subtreeFlags |= child$46.flags & 14680064),
+          (treeBaseDuration$45 += child$46.treeBaseDuration),
+          (child$46 = child$46.sibling);
+      completedWork.treeBaseDuration = treeBaseDuration$45;
     } else
       for (
-        treeBaseDuration$39 = completedWork.child;
-        null !== treeBaseDuration$39;
+        treeBaseDuration$45 = completedWork.child;
+        null !== treeBaseDuration$45;
 
       )
         (newChildLanes |=
-          treeBaseDuration$39.lanes | treeBaseDuration$39.childLanes),
-          (subtreeFlags |= treeBaseDuration$39.subtreeFlags & 7340032),
-          (subtreeFlags |= treeBaseDuration$39.flags & 7340032),
-          (treeBaseDuration$39.return = completedWork),
-          (treeBaseDuration$39 = treeBaseDuration$39.sibling);
+          treeBaseDuration$45.lanes | treeBaseDuration$45.childLanes),
+          (subtreeFlags |= treeBaseDuration$45.subtreeFlags & 14680064),
+          (subtreeFlags |= treeBaseDuration$45.flags & 14680064),
+          (treeBaseDuration$45.return = completedWork),
+          (treeBaseDuration$45 = treeBaseDuration$45.sibling);
   else if (0 !== (completedWork.mode & 2)) {
-    treeBaseDuration$39 = completedWork.actualDuration;
-    child$40 = completedWork.selfBaseDuration;
+    treeBaseDuration$45 = completedWork.actualDuration;
+    child$46 = completedWork.selfBaseDuration;
     for (var child = completedWork.child; null !== child; )
       (newChildLanes |= child.lanes | child.childLanes),
         (subtreeFlags |= child.subtreeFlags),
         (subtreeFlags |= child.flags),
-        (treeBaseDuration$39 += child.actualDuration),
-        (child$40 += child.treeBaseDuration),
+        (treeBaseDuration$45 += child.actualDuration),
+        (child$46 += child.treeBaseDuration),
         (child = child.sibling);
-    completedWork.actualDuration = treeBaseDuration$39;
-    completedWork.treeBaseDuration = child$40;
+    completedWork.actualDuration = treeBaseDuration$45;
+    completedWork.treeBaseDuration = child$46;
   } else
     for (
-      treeBaseDuration$39 = completedWork.child;
-      null !== treeBaseDuration$39;
+      treeBaseDuration$45 = completedWork.child;
+      null !== treeBaseDuration$45;
 
     )
       (newChildLanes |=
-        treeBaseDuration$39.lanes | treeBaseDuration$39.childLanes),
-        (subtreeFlags |= treeBaseDuration$39.subtreeFlags),
-        (subtreeFlags |= treeBaseDuration$39.flags),
-        (treeBaseDuration$39.return = completedWork),
-        (treeBaseDuration$39 = treeBaseDuration$39.sibling);
+        treeBaseDuration$45.lanes | treeBaseDuration$45.childLanes),
+        (subtreeFlags |= treeBaseDuration$45.subtreeFlags),
+        (subtreeFlags |= treeBaseDuration$45.flags),
+        (treeBaseDuration$45.return = completedWork),
+        (treeBaseDuration$45 = treeBaseDuration$45.sibling);
   completedWork.subtreeFlags |= subtreeFlags;
   completedWork.childLanes = newChildLanes;
   return didBailout;
 }
 function completeWork(current, workInProgress, renderLanes) {
   var newProps = workInProgress.pendingProps;
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 2:
     case 16:
@@ -4582,7 +4748,7 @@ function completeWork(current, workInProgress, renderLanes) {
             workInProgressRootExitStatus = 4;
           null === workInProgressRoot ||
             (0 === (workInProgressRootSkippedLanes & 268435455) &&
-              0 === (workInProgressRootUpdatedLanes & 268435455)) ||
+              0 === (workInProgressRootInterleavedUpdatedLanes & 268435455)) ||
             markRootSuspended$1(
               workInProgressRoot,
               workInProgressRootRenderLanes
@@ -4642,7 +4808,7 @@ function completeWork(current, workInProgress, renderLanes) {
                 for (newProps = workInProgress.child; null !== newProps; )
                   (renderLanes = newProps),
                     (updatePayload = current),
-                    (renderLanes.flags &= 7340034),
+                    (renderLanes.flags &= 14680066),
                     (type = renderLanes.alternate),
                     null === type
                       ? ((renderLanes.childLanes = 0),
@@ -4789,6 +4955,7 @@ function updateForwardRef(
   Component = Component.render;
   var ref = workInProgress.ref;
   prepareToReadContext(workInProgress, renderLanes);
+  markComponentRenderStarted(workInProgress);
   nextProps = renderWithHooks(
     current,
     workInProgress,
@@ -4797,6 +4964,7 @@ function updateForwardRef(
     ref,
     renderLanes
   );
+  markComponentRenderStopped();
   if (null !== current && !didReceiveUpdate)
     return (
       (workInProgress.updateQueue = current.updateQueue),
@@ -4952,6 +5120,7 @@ function updateFunctionComponent(
     : contextStackCursor.current;
   context = getMaskedContext(workInProgress, context);
   prepareToReadContext(workInProgress, renderLanes);
+  markComponentRenderStarted(workInProgress);
   Component = renderWithHooks(
     current,
     workInProgress,
@@ -4960,6 +5129,7 @@ function updateFunctionComponent(
     context,
     renderLanes
   );
+  markComponentRenderStopped();
   if (null !== current && !didReceiveUpdate)
     return (
       (workInProgress.updateQueue = current.updateQueue),
@@ -5196,7 +5366,10 @@ function finishClassComponent(
   ) {
     var nextChildren = null;
     profilerStartTime = -1;
-  } else nextChildren = shouldUpdate.render();
+  } else
+    markComponentRenderStarted(workInProgress),
+      (nextChildren = shouldUpdate.render()),
+      markComponentRenderStopped();
   workInProgress.flags |= 1;
   null !== current && didCaptureError
     ? ((didCaptureError = nextChildren),
@@ -5229,7 +5402,7 @@ function pushHostRootContext(workInProgress) {
       pushTopLevelContextObject(workInProgress, root.context, !1);
   pushHostContainer(workInProgress, root.containerInfo);
 }
-var SUSPENDED_MARKER = { dehydrated: null, retryLane: 0 };
+var SUSPENDED_MARKER = { dehydrated: null, treeContext: null, retryLane: 0 };
 function mountSuspenseOffscreenState(renderLanes) {
   return { baseLanes: renderLanes, cachePool: null };
 }
@@ -5432,7 +5605,7 @@ function updateSuspenseFallbackChildren(
         (primaryChildren.treeBaseDuration = current.treeBaseDuration)),
       (workInProgress.deletions = null))
     : ((primaryChildren = createWorkInProgress(current, primaryChildProps)),
-      (primaryChildren.subtreeFlags = current.subtreeFlags & 7340032));
+      (primaryChildren.subtreeFlags = current.subtreeFlags & 14680064));
   null !== currentFallbackChildFragment
     ? (fallbackChildren = createWorkInProgress(
         currentFallbackChildFragment,
@@ -5664,6 +5837,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
   return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 }
 function unwindWork(workInProgress) {
+  popTreeContext(workInProgress);
   switch (workInProgress.tag) {
     case 1:
       isContextProvider(workInProgress.type) && popContext();
@@ -5730,16 +5904,16 @@ function safelyDetachRef(current, nearestMountedAncestor) {
             recordLayoutEffectDuration(current);
           }
         else ref(null);
-      } catch (error) {
-        captureCommitPhaseError(current, nearestMountedAncestor, error);
+      } catch (error$93) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error$93);
       }
     else ref.current = null;
 }
 function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
   try {
     destroy();
-  } catch (error) {
-    captureCommitPhaseError(current, nearestMountedAncestor, error);
+  } catch (error$94) {
+    captureCommitPhaseError(current, nearestMountedAncestor, error$94);
   }
 }
 var shouldFireAfterActiveInstanceBlur = !1;
@@ -5788,8 +5962,8 @@ function commitBeforeMutationEffects(root, firstChild) {
                   "This unit of work tag should not have side-effects. This error is likely caused by a bug in React. Please file an issue."
                 );
             }
-        } catch (error) {
-          captureCommitPhaseError(root, root.return, error);
+        } catch (error$95) {
+          captureCommitPhaseError(root, root.return, error$95);
         }
         firstChild = root.sibling;
         if (null !== firstChild) {
@@ -5816,25 +5990,63 @@ function commitHookEffectListUnmount(
       if ((effect.tag & flags) === flags) {
         var destroy = effect.destroy;
         effect.destroy = void 0;
-        void 0 !== destroy &&
+        if (void 0 !== destroy) {
+          if (0 !== (flags & 8)) {
+            if (supportsUserTimingV3) {
+              var componentName =
+                getComponentNameFromFiber(finishedWork) || "Unknown";
+              markAndClear(
+                "--component-passive-effect-unmount-start-" + componentName
+              );
+            }
+          } else
+            0 !== (flags & 4) &&
+              markComponentLayoutEffectUnmountStarted(finishedWork);
           safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+          0 !== (flags & 8)
+            ? supportsUserTimingV3 &&
+              markAndClear("--component-passive-effect-unmount-stop")
+            : 0 !== (flags & 4) && markComponentLayoutEffectUnmountStopped();
+        }
       }
       effect = effect.next;
     } while (effect !== updateQueue);
   }
 }
-function commitHookEffectListMount(tag, finishedWork) {
-  finishedWork = finishedWork.updateQueue;
-  finishedWork = null !== finishedWork ? finishedWork.lastEffect : null;
-  if (null !== finishedWork) {
-    var effect = (finishedWork = finishedWork.next);
+function commitHookEffectListMount(flags, finishedWork) {
+  var updateQueue = finishedWork.updateQueue;
+  updateQueue = null !== updateQueue ? updateQueue.lastEffect : null;
+  if (null !== updateQueue) {
+    var effect = (updateQueue = updateQueue.next);
     do {
-      if ((effect.tag & tag) === tag) {
-        var create$86 = effect.create;
-        effect.destroy = create$86();
+      if ((effect.tag & flags) === flags) {
+        if (0 !== (flags & 8)) {
+          if (supportsUserTimingV3) {
+            var componentName =
+              getComponentNameFromFiber(finishedWork) || "Unknown";
+            markAndClear(
+              "--component-passive-effect-mount-start-" + componentName
+            );
+          }
+        } else
+          0 !== (flags & 4) &&
+            supportsUserTimingV3 &&
+            ((componentName =
+              getComponentNameFromFiber(finishedWork) || "Unknown"),
+            markAndClear(
+              "--component-layout-effect-mount-start-" + componentName
+            ));
+        componentName = effect.create;
+        effect.destroy = componentName();
+        0 !== (flags & 8)
+          ? supportsUserTimingV3 &&
+            markAndClear("--component-passive-effect-mount-stop")
+          : 0 !== (flags & 4) &&
+            supportsUserTimingV3 &&
+            markAndClear("--component-layout-effect-mount-stop");
       }
       effect = effect.next;
-    } while (effect !== finishedWork);
+    } while (effect !== updateQueue);
   }
 }
 function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
@@ -5857,13 +6069,17 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
           var _effect = effect,
             destroy = _effect.destroy;
           _effect = _effect.tag;
-          void 0 === destroy ||
-            (0 === (_effect & 2) && 0 === (_effect & 4)) ||
-            (current.mode & 2
-              ? (startLayoutEffectTimer(),
-                safelyCallDestroy(current, nearestMountedAncestor, destroy),
-                recordLayoutEffectDuration(current))
-              : safelyCallDestroy(current, nearestMountedAncestor, destroy));
+          void 0 !== destroy &&
+            (0 !== (_effect & 2)
+              ? safelyCallDestroy(current, nearestMountedAncestor, destroy)
+              : 0 !== (_effect & 4) &&
+                (markComponentLayoutEffectUnmountStarted(current),
+                current.mode & 2
+                  ? (startLayoutEffectTimer(),
+                    safelyCallDestroy(current, nearestMountedAncestor, destroy),
+                    recordLayoutEffectDuration(current))
+                  : safelyCallDestroy(current, nearestMountedAncestor, destroy),
+                markComponentLayoutEffectUnmountStopped()));
           effect = effect.next;
         } while (effect !== finishedRoot);
       }
@@ -5884,8 +6100,8 @@ function commitUnmount(finishedRoot, current, nearestMountedAncestor) {
               recordLayoutEffectDuration(current);
             }
           else finishedRoot.componentWillUnmount();
-        } catch (error) {
-          captureCommitPhaseError(current, nearestMountedAncestor, error);
+        } catch (error$92) {
+          captureCommitPhaseError(current, nearestMountedAncestor, error$92);
         }
       break;
     case 5:
@@ -6283,8 +6499,8 @@ function commitMutationEffects(root, firstChild, committedLanes) {
           var alternate = childToDelete.alternate;
           null !== alternate && (alternate.return = null);
           childToDelete.return = null;
-        } catch (error) {
-          captureCommitPhaseError(childToDelete, firstChild, error);
+        } catch (error$103) {
+          captureCommitPhaseError(childToDelete, firstChild, error$103);
         }
       }
     committedLanes = firstChild.child;
@@ -6316,8 +6532,11 @@ function commitMutationEffects(root, firstChild, committedLanes) {
             switch (firstChild.tag) {
               case 13:
                 if (null !== firstChild.memoizedState) {
-                  var current$93 = firstChild.alternate;
-                  if (null === current$93 || null === current$93.memoizedState)
+                  var current$105 = firstChild.alternate;
+                  if (
+                    null === current$105 ||
+                    null === current$105.memoizedState
+                  )
                     globalMostRecentFallbackTime = now();
                 }
                 break;
@@ -6413,8 +6632,8 @@ function commitMutationEffects(root, firstChild, committedLanes) {
             case 4:
               commitWork(firstChild.alternate, firstChild);
           }
-        } catch (error) {
-          captureCommitPhaseError(firstChild, firstChild.return, error);
+        } catch (error$104) {
+          captureCommitPhaseError(firstChild, firstChild.return, error$104);
         }
         committedLanes = firstChild.sibling;
         if (null !== committedLanes) {
@@ -6501,21 +6720,21 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                     commitUpdateQueue(committedLanes, updateQueue, instance);
                   break;
                 case 3:
-                  var updateQueue$88 = committedLanes.updateQueue;
-                  if (null !== updateQueue$88) {
-                    var instance$89 = null;
+                  var updateQueue$98 = committedLanes.updateQueue;
+                  if (null !== updateQueue$98) {
+                    var instance$99 = null;
                     if (null !== committedLanes.child)
                       switch (committedLanes.child.tag) {
                         case 5:
-                          instance$89 = committedLanes.child.stateNode;
+                          instance$99 = committedLanes.child.stateNode;
                           break;
                         case 1:
-                          instance$89 = committedLanes.child.stateNode;
+                          instance$99 = committedLanes.child.stateNode;
                       }
                     commitUpdateQueue(
                       committedLanes,
-                      updateQueue$88,
-                      instance$89
+                      updateQueue$98,
+                      instance$99
                     );
                   }
                   break;
@@ -6530,7 +6749,7 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                     onCommit = _finishedWork$memoize2.onCommit,
                     onRender = _finishedWork$memoize2.onRender,
                     effectDuration = committedLanes.stateNode.effectDuration;
-                  instance$89 = commitTime;
+                  instance$99 = commitTime;
                   current = null === current ? "mount" : "update";
                   currentUpdateIsNested && (current = "nested-update");
                   "function" === typeof onRender &&
@@ -6540,14 +6759,14 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                       committedLanes.actualDuration,
                       committedLanes.treeBaseDuration,
                       committedLanes.actualStartTime,
-                      instance$89
+                      instance$99
                     );
                   "function" === typeof onCommit &&
                     onCommit(
                       committedLanes.memoizedProps.id,
                       current,
                       effectDuration,
-                      instance$89
+                      instance$99
                     );
                   enqueuePendingPassiveProfilerEffect(committedLanes);
                   var parentFiber = committedLanes.return;
@@ -6577,34 +6796,34 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
                   );
               }
             if (committedLanes.flags & 512) {
-              instance$89 = void 0;
+              instance$99 = void 0;
               current = committedLanes;
               var ref = current.ref;
               if (null !== ref) {
                 var instance$jscomp$0 = current.stateNode;
                 switch (current.tag) {
                   case 5:
-                    instance$89 = instance$jscomp$0;
+                    instance$99 = instance$jscomp$0;
                     break;
                   default:
-                    instance$89 = instance$jscomp$0;
+                    instance$99 = instance$jscomp$0;
                 }
                 if ("function" === typeof ref)
                   if (current.mode & 2)
                     try {
-                      startLayoutEffectTimer(), ref(instance$89);
+                      startLayoutEffectTimer(), ref(instance$99);
                     } finally {
                       recordLayoutEffectDuration(current);
                     }
-                  else ref(instance$89);
-                else ref.current = instance$89;
+                  else ref(instance$99);
+                else ref.current = instance$99;
               }
             }
-          } catch (error) {
+          } catch (error$113) {
             captureCommitPhaseError(
               committedLanes,
               committedLanes.return,
-              error
+              error$113
             );
           }
         }
@@ -6612,10 +6831,10 @@ function commitLayoutEffects(finishedWork, root, committedLanes) {
           nextEffect = null;
           break;
         }
-        instance$89 = committedLanes.sibling;
-        if (null !== instance$89) {
-          instance$89.return = committedLanes.return;
-          nextEffect = instance$89;
+        instance$99 = committedLanes.sibling;
+        if (null !== instance$99) {
+          instance$99.return = committedLanes.return;
+          nextEffect = instance$99;
           break;
         }
         nextEffect = committedLanes.return;
@@ -6635,7 +6854,8 @@ var ceil = Math.ceil,
   workInProgressRootExitStatus = 0,
   workInProgressRootFatalError = null,
   workInProgressRootSkippedLanes = 0,
-  workInProgressRootUpdatedLanes = 0,
+  workInProgressRootInterleavedUpdatedLanes = 0,
+  workInProgressRootRenderPhaseUpdatedLanes = 0,
   workInProgressRootPingedLanes = 0,
   globalMostRecentFallbackTime = 0,
   workInProgressRootRenderTargetTime = Infinity,
@@ -6682,18 +6902,21 @@ function scheduleUpdateOnFiber(fiber, lane, eventTime) {
     ));
   var root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (null === root) return null;
-  isDevToolsPresent && addFiberToLanesMap(root, fiber, lane);
   markRootUpdated(root, lane, eventTime);
-  root === workInProgressRoot &&
-    (0 === (executionContext & 2) && (workInProgressRootUpdatedLanes |= lane),
-    4 === workInProgressRootExitStatus &&
-      markRootSuspended$1(root, workInProgressRootRenderLanes));
-  ensureRootIsScheduled(root, eventTime);
-  1 === lane &&
-    0 === executionContext &&
-    0 === (fiber.mode & 1) &&
-    ((workInProgressRootRenderTargetTime = now() + 500),
-    includesLegacySyncCallbacks && flushSyncCallbacks());
+  0 !== (executionContext & 2) && root === workInProgressRoot
+    ? (workInProgressRootRenderPhaseUpdatedLanes |= lane)
+    : (isDevToolsPresent && addFiberToLanesMap(root, fiber, lane),
+      root === workInProgressRoot &&
+        (0 === (executionContext & 2) &&
+          (workInProgressRootInterleavedUpdatedLanes |= lane),
+        4 === workInProgressRootExitStatus &&
+          markRootSuspended$1(root, workInProgressRootRenderLanes)),
+      ensureRootIsScheduled(root, eventTime),
+      1 === lane &&
+        0 === executionContext &&
+        0 === (fiber.mode & 1) &&
+        ((workInProgressRootRenderTargetTime = now() + 500),
+        includesLegacySyncCallbacks && flushSyncCallbacks()));
   return root;
 }
 function markUpdateLaneFromFiberToRoot(sourceFiber, lane) {
@@ -6819,6 +7042,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       workInProgressRootRenderTargetTime = now() + 500;
       prepareFreshStack(root, didTimeout);
     }
+    supportsUserTimingV3 && markAndClear("--render-start-" + didTimeout);
     do
       try {
         workLoopConcurrent();
@@ -6831,8 +7055,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     ReactCurrentDispatcher$2.current = prevDispatcher;
     executionContext = prevExecutionContext;
     null !== workInProgress
-      ? (didTimeout = 0)
-      : ((workInProgressRoot = null),
+      ? (supportsUserTimingV3 && markAndClear("--render-yield"),
+        (didTimeout = 0))
+      : (supportsUserTimingV3 && markAndClear("--render-stop"),
+        (workInProgressRoot = null),
         (workInProgressRootRenderLanes = 0),
         (didTimeout = workInProgressRootExitStatus));
   }
@@ -6949,9 +7175,15 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   var prevExecutionContext = executionContext;
   executionContext |= 8;
   root.isDehydrated && (root.isDehydrated = !1);
-  root = renderRootSync(root, errorRetryLanes);
+  for (
+    var exitStatus, i = 0;
+    50 > i &&
+    ((exitStatus = renderRootSync(root, errorRetryLanes)),
+    2 === exitStatus && 0 !== workInProgressRootRenderPhaseUpdatedLanes);
+    i++
+  );
   executionContext = prevExecutionContext;
-  return root;
+  return exitStatus;
 }
 function isRenderConsistentWithExternalStores(finishedWork) {
   for (var node = finishedWork; ; ) {
@@ -6967,7 +7199,7 @@ function isRenderConsistentWithExternalStores(finishedWork) {
           check = check.value;
           try {
             if (!objectIs(getSnapshot(), check)) return !1;
-          } catch (error) {
+          } catch (error$118) {
             return !1;
           }
         }
@@ -6989,7 +7221,7 @@ function isRenderConsistentWithExternalStores(finishedWork) {
 }
 function markRootSuspended$1(root, suspendedLanes) {
   suspendedLanes &= ~workInProgressRootPingedLanes;
-  suspendedLanes &= ~workInProgressRootUpdatedLanes;
+  suspendedLanes &= ~workInProgressRootInterleavedUpdatedLanes;
   root.suspendedLanes |= suspendedLanes;
   root.pingedLanes &= ~suspendedLanes;
   for (root = root.expirationTimes; 0 < suspendedLanes; ) {
@@ -7009,13 +7241,10 @@ function performSyncWorkOnRoot(root) {
   if (0 === (lanes & 1)) return ensureRootIsScheduled(root, now()), null;
   var exitStatus = renderRootSync(root, lanes);
   if (0 !== root.tag && 2 === exitStatus) {
-    var prevExecutionContext = executionContext;
-    executionContext |= 8;
-    root.isDehydrated && (root.isDehydrated = !1);
     var errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     0 !== errorRetryLanes &&
-      ((lanes = errorRetryLanes), (exitStatus = renderRootSync(root, lanes)));
-    executionContext = prevExecutionContext;
+      ((lanes = errorRetryLanes),
+      (exitStatus = recoverFromConcurrentError(root, errorRetryLanes)));
   }
   if (1 === exitStatus)
     throw ((exitStatus = workInProgressRootFatalError),
@@ -7042,6 +7271,7 @@ function prepareFreshStack(root, lanes) {
   if (null !== workInProgress)
     for (timeoutHandle = workInProgress.return; null !== timeoutHandle; ) {
       var interruptedWork = timeoutHandle;
+      popTreeContext(interruptedWork);
       switch (interruptedWork.tag) {
         case 1:
           interruptedWork = interruptedWork.type.childContextTypes;
@@ -7081,7 +7311,7 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootRenderLanes = subtreeRenderLanes = lanes;
   workInProgressRootExitStatus = 0;
   workInProgressRootFatalError = null;
-  workInProgressRootPingedLanes = workInProgressRootUpdatedLanes = workInProgressRootSkippedLanes = 0;
+  workInProgressRootPingedLanes = workInProgressRootRenderPhaseUpdatedLanes = workInProgressRootInterleavedUpdatedLanes = workInProgressRootSkippedLanes = 0;
   if (null !== interleavedQueues) {
     for (root = 0; root < interleavedQueues.length; root++)
       if (
@@ -7102,7 +7332,7 @@ function prepareFreshStack(root, lanes) {
     interleavedQueues = null;
   }
 }
-function handleError(root$jscomp$0, thrownValue) {
+function handleError(root, thrownValue$jscomp$0) {
   do {
     var erroredWork = workInProgress;
     try {
@@ -7126,27 +7356,54 @@ function handleError(root$jscomp$0, thrownValue) {
       ReactCurrentOwner$2.current = null;
       if (null === erroredWork || null === erroredWork.return) {
         workInProgressRootExitStatus = 1;
-        workInProgressRootFatalError = thrownValue;
+        workInProgressRootFatalError = thrownValue$jscomp$0;
         workInProgress = null;
         break;
       }
       erroredWork.mode & 2 &&
         stopProfilerTimerIfRunningAndRecordDelta(erroredWork, !0);
+      markComponentRenderStopped();
+      if (
+        null !== thrownValue$jscomp$0 &&
+        "object" === typeof thrownValue$jscomp$0 &&
+        "function" === typeof thrownValue$jscomp$0.then
+      )
+        markComponentSuspended(
+          erroredWork,
+          thrownValue$jscomp$0,
+          workInProgressRootRenderLanes
+        );
+      else {
+        var fiber = erroredWork,
+          thrownValue = thrownValue$jscomp$0;
+        if (supportsUserTimingV3) {
+          var componentName = getComponentNameFromFiber(fiber) || "Unknown",
+            phase = null === fiber.alternate ? "mount" : "update";
+          fiber = "";
+          null !== thrownValue &&
+          "object" === typeof thrownValue &&
+          "string" === typeof thrownValue.message
+            ? (fiber = thrownValue.message)
+            : "string" === typeof thrownValue && (fiber = thrownValue);
+          markAndClear("--error-" + componentName + "-" + phase + "-" + fiber);
+        }
+      }
       a: {
-        var root = root$jscomp$0,
-          returnFiber = erroredWork.return,
+        thrownValue = root;
+        var returnFiber = erroredWork.return,
           sourceFiber = erroredWork,
-          value = thrownValue;
-        thrownValue = workInProgressRootRenderLanes;
+          value = thrownValue$jscomp$0;
+        thrownValue$jscomp$0 = workInProgressRootRenderLanes;
         sourceFiber.flags |= 32768;
-        isDevToolsPresent && restorePendingUpdaters(root, thrownValue);
+        isDevToolsPresent &&
+          restorePendingUpdaters(thrownValue, thrownValue$jscomp$0);
         if (
           null !== value &&
           "object" === typeof value &&
           "function" === typeof value.then
         ) {
-          var wakeable = value,
-            sourceFiber$jscomp$0 = sourceFiber,
+          fiber = value;
+          var sourceFiber$jscomp$0 = sourceFiber,
             tag = sourceFiber$jscomp$0.tag;
           if (
             0 === (sourceFiber$jscomp$0.mode & 1) &&
@@ -7163,85 +7420,84 @@ function handleError(root$jscomp$0, thrownValue) {
           }
           b: {
             sourceFiber$jscomp$0 = returnFiber;
-            var sourceFiber$jscomp$1 = sourceFiber,
-              rootRenderLanes = thrownValue,
-              hasInvisibleParentBoundary =
-                0 !== (suspenseStackCursor.current & 1),
-              node = sourceFiber$jscomp$0;
+            var hasInvisibleParentBoundary =
+              0 !== (suspenseStackCursor.current & 1);
             do {
               var JSCompiler_temp;
-              if ((JSCompiler_temp = 13 === node.tag)) {
-                var nextState = node.memoizedState;
+              if ((JSCompiler_temp = 13 === sourceFiber$jscomp$0.tag)) {
+                var nextState = sourceFiber$jscomp$0.memoizedState;
                 JSCompiler_temp =
                   null !== nextState
                     ? null !== nextState.dehydrated
                       ? !0
                       : !1
-                    : !0 !== node.memoizedProps.unstable_avoidThisFallback
+                    : !0 !==
+                      sourceFiber$jscomp$0.memoizedProps
+                        .unstable_avoidThisFallback
                     ? !0
                     : hasInvisibleParentBoundary
                     ? !1
                     : !0;
               }
               if (JSCompiler_temp) {
-                if (0 === (node.mode & 1)) {
-                  if (node === sourceFiber$jscomp$0) node.flags |= 65536;
-                  else {
-                    node.flags |= 128;
-                    sourceFiber$jscomp$1.flags |= 131072;
-                    sourceFiber$jscomp$1.flags &= -52805;
-                    if (1 === sourceFiber$jscomp$1.tag)
-                      if (null === sourceFiber$jscomp$1.alternate)
-                        sourceFiber$jscomp$1.tag = 17;
-                      else {
-                        var update = createUpdate(-1, 1);
-                        update.tag = 2;
-                        enqueueUpdate(sourceFiber$jscomp$1, update);
-                      }
-                    sourceFiber$jscomp$1.lanes |= 1;
-                  }
-                  var suspenseBoundary = node;
-                  break b;
-                }
-                node.flags |= 65536;
-                node.lanes = rootRenderLanes;
-                suspenseBoundary = node;
+                var suspenseBoundary = sourceFiber$jscomp$0;
                 break b;
               }
-              node = node.return;
-            } while (null !== node);
+              sourceFiber$jscomp$0 = sourceFiber$jscomp$0.return;
+            } while (null !== sourceFiber$jscomp$0);
             suspenseBoundary = null;
           }
           if (null !== suspenseBoundary) {
-            value = void 0;
-            sourceFiber = suspenseBoundary;
-            if (sourceFiber.mode & 1) {
-              var pingCache = root.pingCache;
+            suspenseBoundary.flags &= -257;
+            value = suspenseBoundary;
+            sourceFiber$jscomp$0 = thrownValue$jscomp$0;
+            if (0 === (value.mode & 1))
+              if (value === returnFiber) value.flags |= 65536;
+              else {
+                value.flags |= 128;
+                sourceFiber.flags |= 131072;
+                sourceFiber.flags &= -52805;
+                if (1 === sourceFiber.tag)
+                  if (null === sourceFiber.alternate) sourceFiber.tag = 17;
+                  else {
+                    var update = createUpdate(-1, 1);
+                    update.tag = 2;
+                    enqueueUpdate(sourceFiber, update);
+                  }
+                sourceFiber.lanes |= 1;
+              }
+            else (value.flags |= 65536), (value.lanes = sourceFiber$jscomp$0);
+            sourceFiber = void 0;
+            value = suspenseBoundary;
+            if (value.mode & 1) {
+              var pingCache = thrownValue.pingCache;
               null === pingCache
-                ? ((pingCache = root.pingCache = new PossiblyWeakMap()),
-                  (value = new Set()),
-                  pingCache.set(wakeable, value))
-                : ((value = pingCache.get(wakeable)),
-                  void 0 === value &&
-                    ((value = new Set()), pingCache.set(wakeable, value)));
-              if (!value.has(thrownValue)) {
-                value.add(thrownValue);
+                ? ((pingCache = thrownValue.pingCache = new PossiblyWeakMap$1()),
+                  (sourceFiber = new Set()),
+                  pingCache.set(fiber, sourceFiber))
+                : ((sourceFiber = pingCache.get(fiber)),
+                  void 0 === sourceFiber &&
+                    ((sourceFiber = new Set()),
+                    pingCache.set(fiber, sourceFiber)));
+              if (!sourceFiber.has(thrownValue$jscomp$0)) {
+                sourceFiber.add(thrownValue$jscomp$0);
                 var ping = pingSuspendedRoot.bind(
                   null,
-                  root,
-                  wakeable,
-                  thrownValue
+                  thrownValue,
+                  fiber,
+                  thrownValue$jscomp$0
                 );
-                isDevToolsPresent && restorePendingUpdaters(root, thrownValue);
-                wakeable.then(ping, ping);
+                isDevToolsPresent &&
+                  restorePendingUpdaters(thrownValue, thrownValue$jscomp$0);
+                fiber.then(ping, ping);
               }
             }
-            var wakeables = sourceFiber.updateQueue;
+            var wakeables = value.updateQueue;
             if (null === wakeables) {
               var updateQueue = new Set();
-              updateQueue.add(wakeable);
-              sourceFiber.updateQueue = updateQueue;
-            } else wakeables.add(wakeable);
+              updateQueue.add(fiber);
+              value.updateQueue = updateQueue;
+            } else wakeables.add(fiber);
             break a;
           } else
             value = Error(
@@ -7252,51 +7508,51 @@ function handleError(root$jscomp$0, thrownValue) {
         4 !== workInProgressRootExitStatus &&
           (workInProgressRootExitStatus = 2);
         value = createCapturedValue(value, sourceFiber);
-        root = returnFiber;
+        thrownValue = returnFiber;
         do {
-          switch (root.tag) {
+          switch (thrownValue.tag) {
             case 3:
-              wakeable = value;
-              root.flags |= 65536;
-              thrownValue &= -thrownValue;
-              root.lanes |= thrownValue;
+              fiber = value;
+              thrownValue.flags |= 65536;
+              thrownValue$jscomp$0 &= -thrownValue$jscomp$0;
+              thrownValue.lanes |= thrownValue$jscomp$0;
               var update$jscomp$0 = createRootErrorUpdate(
-                root,
-                wakeable,
-                thrownValue
+                thrownValue,
+                fiber,
+                thrownValue$jscomp$0
               );
-              enqueueCapturedUpdate(root, update$jscomp$0);
+              enqueueCapturedUpdate(thrownValue, update$jscomp$0);
               break a;
             case 1:
-              wakeable = value;
-              var ctor = root.type,
-                instance = root.stateNode;
+              fiber = value;
+              var ctor = thrownValue.type,
+                instance = thrownValue.stateNode;
               if (
-                0 === (root.flags & 128) &&
+                0 === (thrownValue.flags & 128) &&
                 ("function" === typeof ctor.getDerivedStateFromError ||
                   (null !== instance &&
                     "function" === typeof instance.componentDidCatch &&
                     (null === legacyErrorBoundariesThatAlreadyFailed ||
                       !legacyErrorBoundariesThatAlreadyFailed.has(instance))))
               ) {
-                root.flags |= 65536;
-                thrownValue &= -thrownValue;
-                root.lanes |= thrownValue;
-                var update$35 = createClassErrorUpdate(
-                  root,
-                  wakeable,
-                  thrownValue
+                thrownValue.flags |= 65536;
+                thrownValue$jscomp$0 &= -thrownValue$jscomp$0;
+                thrownValue.lanes |= thrownValue$jscomp$0;
+                var update$41 = createClassErrorUpdate(
+                  thrownValue,
+                  fiber,
+                  thrownValue$jscomp$0
                 );
-                enqueueCapturedUpdate(root, update$35);
+                enqueueCapturedUpdate(thrownValue, update$41);
                 break a;
               }
           }
-          root = root.return;
-        } while (null !== root);
+          thrownValue = thrownValue.return;
+        } while (null !== thrownValue);
       }
       completeUnitOfWork(erroredWork);
     } catch (yetAnotherThrownValue) {
-      thrownValue = yetAnotherThrownValue;
+      thrownValue$jscomp$0 = yetAnotherThrownValue;
       workInProgress === erroredWork &&
         null !== erroredWork &&
         (workInProgress = erroredWork = erroredWork.return);
@@ -7324,6 +7580,7 @@ function renderRootSync(root, lanes) {
     }
     prepareFreshStack(root, lanes);
   }
+  supportsUserTimingV3 && markAndClear("--render-start-" + lanes);
   do
     try {
       workLoopSync();
@@ -7339,6 +7596,7 @@ function renderRootSync(root, lanes) {
     throw Error(
       "Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue."
     );
+  supportsUserTimingV3 && markAndClear("--render-stop");
   workInProgressRoot = null;
   workInProgressRootRenderLanes = 0;
   return workInProgressRootExitStatus;
@@ -7431,7 +7689,15 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw Error("Should not already be working.");
   var finishedWork = root.finishedWork,
     lanes = root.finishedLanes;
-  if (null === finishedWork) return null;
+  supportsUserTimingV3 &&
+    (markAndClear("--commit-start-" + lanes),
+    markAndClear("--react-version-18.0.0-c0c71a868-20211112"),
+    markAndClear("--profiler-version-1"),
+    getLaneLabels(),
+    markAndClear("--react-lane-labels-" + laneLabels.join(",")),
+    markInternalModuleRanges());
+  if (null === finishedWork)
+    return supportsUserTimingV3 && markAndClear("--commit-stop"), null;
   root.finishedWork = null;
   root.finishedLanes = 0;
   if (finishedWork === root.current)
@@ -7466,7 +7732,9 @@ function commitRootImpl(root, renderPriorityLevel) {
     commitTime = now$1();
     commitMutationEffects(root, finishedWork, lanes);
     root.current = finishedWork;
+    supportsUserTimingV3 && markAndClear("--layout-effects-start-" + lanes);
     commitLayoutEffects(finishedWork, root, lanes);
+    supportsUserTimingV3 && markAndClear("--layout-effects-stop");
     requestPaint();
     executionContext = prevExecutionContext;
     currentUpdatePriority = previousPriority;
@@ -7497,6 +7765,7 @@ function commitRootImpl(root, renderPriorityLevel) {
         : ((nestedUpdateCount = 0), (rootWithNestedUpdates = root)))
     : (nestedUpdateCount = 0);
   flushSyncCallbacks();
+  supportsUserTimingV3 && markAndClear("--commit-stop");
   return null;
 }
 function flushPassiveEffects() {
@@ -7511,11 +7780,14 @@ function flushPassiveEffects() {
         var JSCompiler_inline_result = !1;
       else {
         renderPriority = rootWithPendingPassiveEffects;
+        var lanes = pendingPassiveEffectsLanes;
         rootWithPendingPassiveEffects = null;
         pendingPassiveEffectsLanes = 0;
         if (0 !== (executionContext & 6))
           throw Error("Cannot flush passive effects while already rendering.");
-        var prevExecutionContext = executionContext;
+        supportsUserTimingV3 &&
+          markAndClear("--passive-effects-start-" + lanes);
+        lanes = executionContext;
         executionContext |= 4;
         for (nextEffect = renderPriority.current; null !== nextEffect; ) {
           var fiber = nextEffect,
@@ -7625,8 +7897,12 @@ function flushPassiveEffects() {
                         }
                       } else commitHookEffectListMount(9, fiberToDelete);
                   }
-                } catch (error) {
-                  captureCommitPhaseError(deletions, deletions.return, error);
+                } catch (error$114) {
+                  captureCommitPhaseError(
+                    deletions,
+                    deletions.return,
+                    error$114
+                  );
                 }
               if (deletions === child) {
                 nextEffect = null;
@@ -7678,7 +7954,8 @@ function flushPassiveEffects() {
                 }
             }
         }
-        executionContext = prevExecutionContext;
+        supportsUserTimingV3 && markAndClear("--passive-effects-stop");
+        executionContext = lanes;
         flushSyncCallbacks();
         if (
           injectedHook &&
@@ -7835,6 +8112,7 @@ beginWork$1 = function(current, workInProgress, renderLanes) {
         contextStackCursor.current
       );
       prepareToReadContext(workInProgress, renderLanes);
+      markComponentRenderStarted(workInProgress);
       context = renderWithHooks(
         null,
         workInProgress,
@@ -7843,6 +8121,7 @@ beginWork$1 = function(current, workInProgress, renderLanes) {
         context,
         renderLanes
       );
+      markComponentRenderStopped();
       workInProgress.flags |= 1;
       if (
         "object" === typeof context &&
@@ -8168,7 +8447,9 @@ beginWork$1 = function(current, workInProgress, renderLanes) {
         (Component = workInProgress.pendingProps.children),
         prepareToReadContext(workInProgress, renderLanes),
         (context = readContext(context)),
+        markComponentRenderStarted(workInProgress),
         (Component = Component(context)),
+        markComponentRenderStopped(),
         (workInProgress.flags |= 1),
         reconcileChildren(current, workInProgress, Component, renderLanes),
         workInProgress.child
@@ -8299,7 +8580,7 @@ function createWorkInProgress(current, pendingProps) {
       (workInProgress.deletions = null),
       (workInProgress.actualDuration = 0),
       (workInProgress.actualStartTime = -1));
-  workInProgress.flags = current.flags & 7340032;
+  workInProgress.flags = current.flags & 14680064;
   workInProgress.childLanes = current.childLanes;
   workInProgress.lanes = current.lanes;
   workInProgress.child = current.child;
@@ -8481,6 +8762,7 @@ function updateContainer(element, container, parentComponent, callback) {
   var current = container.current,
     eventTime = requestEventTime(),
     lane = requestUpdateLane(current);
+  supportsUserTimingV3 && markAndClear("--schedule-render-" + lane);
   a: if (parentComponent) {
     parentComponent = parentComponent._reactInternals;
     b: {
@@ -8662,10 +8944,10 @@ batchedUpdatesImpl = function(fn, a) {
   }
 };
 var roots = new Map(),
-  devToolsConfig$jscomp$inline_1006 = {
+  devToolsConfig$jscomp$inline_1061 = {
     findFiberByHostInstance: getInstanceFromTag,
     bundleType: 0,
-    version: "18.0.0-afcb9cdc9-20211008",
+    version: "18.0.0-c0c71a868-20211112",
     rendererPackageName: "react-native-renderer",
     rendererConfig: {
       getInspectorDataForViewTag: function() {
@@ -8680,11 +8962,11 @@ var roots = new Map(),
       }.bind(null, findNodeHandle)
     }
   };
-var internals$jscomp$inline_1290 = {
-  bundleType: devToolsConfig$jscomp$inline_1006.bundleType,
-  version: devToolsConfig$jscomp$inline_1006.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1006.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1006.rendererConfig,
+var internals$jscomp$inline_1359 = {
+  bundleType: devToolsConfig$jscomp$inline_1061.bundleType,
+  version: devToolsConfig$jscomp$inline_1061.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1061.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1061.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -8700,26 +8982,26 @@ var internals$jscomp$inline_1290 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1006.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1061.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.0.0-afcb9cdc9-20211008"
+  reconcilerVersion: "18.0.0-c0c71a868-20211112"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1291 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1360 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1291.isDisabled &&
-    hook$jscomp$inline_1291.supportsFiber
+    !hook$jscomp$inline_1360.isDisabled &&
+    hook$jscomp$inline_1360.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1291.inject(
-        internals$jscomp$inline_1290
+      (rendererID = hook$jscomp$inline_1360.inject(
+        internals$jscomp$inline_1359
       )),
-        (injectedHook = hook$jscomp$inline_1291);
+        (injectedHook = hook$jscomp$inline_1360);
     } catch (err) {}
 }
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
@@ -8809,3 +9091,13 @@ exports.unmountComponentAtNodeAndRemoveContainer = function(containerTag) {
   ReactNativePrivateInterface.UIManager.removeRootView(containerTag);
 };
 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());
+}
+