From d9fb383d6f627bf3f6e53ec7b14ba4d1260959d5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 28 Sep 2021 15:05:44 -0400
Subject: [PATCH 001/109] Extract queueing logic into shared functions (#22452)

As a follow up to #22445, this extracts the queueing logic that is
shared between `dispatchSetState` and `dispatchReducerAction` into
separate functions. It likely doesn't save any bytes since these will
get inlined, anyway, but it does make the flow a bit easier to follow.
---
 .../src/ReactFiberHooks.new.js                | 246 ++++++++----------
 .../src/ReactFiberHooks.old.js                | 246 ++++++++----------
 2 files changed, 214 insertions(+), 278 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 6d7cb75bbd751..d6123454972ac 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -113,9 +113,9 @@ import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {CacheContext} from './ReactFiberCacheComponent.new';
 import {
-  createUpdate,
-  enqueueUpdate,
-  entangleTransitions,
+  createUpdate as createLegacyQueueUpdate,
+  enqueueUpdate as enqueueLegacyQueueUpdate,
+  entangleTransitions as entangleLegacyQueueTransitions,
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
@@ -2125,7 +2125,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
         if (root !== null) {
-          entangleTransitions(root, provider, lane);
+          entangleLegacyQueueTransitions(root, provider, lane);
         }
 
         const seededCache = new Map();
@@ -2136,12 +2136,12 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
-        const refreshUpdate = createUpdate(eventTime, lane);
+        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
         const payload = {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueUpdate(provider, refreshUpdate, lane);
+        enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -2165,7 +2165,6 @@ function dispatchReducerAction<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2176,49 +2175,10 @@ function dispatchReducerAction<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // This is a render phase update. Stash it in a lazily-created map of
-    // queue -> linked list of updates. After this render pass, we'll restart
-    // and apply the stashed updates on top of the work-in-progress hook.
-    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
-    const pending = queue.pending;
-    if (pending === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-    } else {
-      update.next = pending.next;
-      pending.next = update;
-    }
-    queue.pending = update;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      const pending = queue.pending;
-      if (pending === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-      } else {
-        update.next = pending.next;
-        pending.next = update;
-      }
-      queue.pending = update;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
@@ -2226,40 +2186,14 @@ function dispatchReducerAction<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
-
-    if (isTransitionLane(lane) && root !== null) {
-      let queueLanes = queue.lanes;
-
-      // If any entangled lanes are no longer pending on the root, then they
-      // must have finished. We can remove them from the shared queue, which
-      // represents a superset of the actually pending lanes. In some cases we
-      // may entangle more than we need to, but that's OK. In fact it's worse if
-      // we *don't* entangle when we should.
-      queueLanes = intersectLanes(queueLanes, root.pendingLanes);
-
-      // Entangle the new transition lane with the other transition lanes.
-      const newQueueLanes = mergeLanes(queueLanes, lane);
-      queue.lanes = newQueueLanes;
-      // Even if queue.lanes already include lane, we don't know for certain if
-      // the lane finished since the last time we entangled it. So we need to
-      // entangle it again, just to be sure.
-      markRootEntangled(root, newQueueLanes);
-    }
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      if (fiber.mode & DebugTracingMode) {
-        const name = getComponentNameFromFiber(fiber) || 'Unknown';
-        logStateUpdateScheduled(name, lane, action);
-      }
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
     }
   }
 
-  if (enableSchedulingProfiler) {
-    markStateUpdateScheduled(fiber, lane);
-  }
+  markUpdateInDevTools(fiber, lane, action);
 }
 
 function dispatchSetState<S, A>(
@@ -2277,7 +2211,6 @@ function dispatchSetState<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2288,50 +2221,12 @@ function dispatchSetState<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // This is a render phase update. Stash it in a lazily-created map of
-    // queue -> linked list of updates. After this render pass, we'll restart
-    // and apply the stashed updates on top of the work-in-progress hook.
-    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
-    const pending = queue.pending;
-    if (pending === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-    } else {
-      update.next = pending.next;
-      pending.next = update;
-    }
-    queue.pending = update;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      const pending = queue.pending;
-      if (pending === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-      } else {
-        update.next = pending.next;
-        pending.next = update;
-      }
-      queue.pending = update;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
+    const alternate = fiber.alternate;
     if (
       fiber.lanes === NoLanes &&
       (alternate === null || alternate.lanes === NoLanes)
@@ -2377,28 +2272,101 @@ function dispatchSetState<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
+    }
+  }
+
+  markUpdateInDevTools(fiber, lane, action);
+}
+
+function isRenderPhaseUpdate(fiber: Fiber) {
+  const alternate = fiber.alternate;
+  return (
+    fiber === currentlyRenderingFiber ||
+    (alternate !== null && alternate === currentlyRenderingFiber)
+  );
+}
+
+function enqueueRenderPhaseUpdate<S, A>(
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+) {
+  // This is a render phase update. Stash it in a lazily-created map of
+  // queue -> linked list of updates. After this render pass, we'll restart
+  // and apply the stashed updates on top of the work-in-progress hook.
+  didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
+  const pending = queue.pending;
+  if (pending === null) {
+    // This is the first update. Create a circular list.
+    update.next = update;
+  } else {
+    update.next = pending.next;
+    pending.next = update;
+  }
+  queue.pending = update;
+}
 
-    if (isTransitionLane(lane) && root !== null) {
-      let queueLanes = queue.lanes;
-
-      // If any entangled lanes are no longer pending on the root, then they
-      // must have finished. We can remove them from the shared queue, which
-      // represents a superset of the actually pending lanes. In some cases we
-      // may entangle more than we need to, but that's OK. In fact it's worse if
-      // we *don't* entangle when we should.
-      queueLanes = intersectLanes(queueLanes, root.pendingLanes);
-
-      // Entangle the new transition lane with the other transition lanes.
-      const newQueueLanes = mergeLanes(queueLanes, lane);
-      queue.lanes = newQueueLanes;
-      // Even if queue.lanes already include lane, we don't know for certain if
-      // the lane finished since the last time we entangled it. So we need to
-      // entangle it again, just to be sure.
-      markRootEntangled(root, newQueueLanes);
+function enqueueUpdate<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+  lane: Lane,
+) {
+  if (isInterleavedUpdate(fiber, lane)) {
+    const interleaved = queue.interleaved;
+    if (interleaved === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+      // At the end of the current render, this queue's interleaved updates will
+      // be transferred to the pending queue.
+      pushInterleavedQueue(queue);
+    } else {
+      update.next = interleaved.next;
+      interleaved.next = update;
+    }
+    queue.interleaved = update;
+  } else {
+    const pending = queue.pending;
+    if (pending === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+    } else {
+      update.next = pending.next;
+      pending.next = update;
     }
+    queue.pending = update;
+  }
+}
+
+function entangleTransitionUpdate<S, A>(
+  root: FiberRoot,
+  queue: UpdateQueue<S, A>,
+  lane: Lane,
+) {
+  if (isTransitionLane(lane)) {
+    let queueLanes = queue.lanes;
+
+    // If any entangled lanes are no longer pending on the root, then they
+    // must have finished. We can remove them from the shared queue, which
+    // represents a superset of the actually pending lanes. In some cases we
+    // may entangle more than we need to, but that's OK. In fact it's worse if
+    // we *don't* entangle when we should.
+    queueLanes = intersectLanes(queueLanes, root.pendingLanes);
+
+    // Entangle the new transition lane with the other transition lanes.
+    const newQueueLanes = mergeLanes(queueLanes, lane);
+    queue.lanes = newQueueLanes;
+    // Even if queue.lanes already include lane, we don't know for certain if
+    // the lane finished since the last time we entangled it. So we need to
+    // entangle it again, just to be sure.
+    markRootEntangled(root, newQueueLanes);
   }
+}
 
+function markUpdateInDevTools(fiber, lane, action) {
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 75570d1c30969..d4dacbc8833ce 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -113,9 +113,9 @@ import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {CacheContext} from './ReactFiberCacheComponent.old';
 import {
-  createUpdate,
-  enqueueUpdate,
-  entangleTransitions,
+  createUpdate as createLegacyQueueUpdate,
+  enqueueUpdate as enqueueLegacyQueueUpdate,
+  entangleTransitions as entangleLegacyQueueTransitions,
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
@@ -2125,7 +2125,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
         if (root !== null) {
-          entangleTransitions(root, provider, lane);
+          entangleLegacyQueueTransitions(root, provider, lane);
         }
 
         const seededCache = new Map();
@@ -2136,12 +2136,12 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
-        const refreshUpdate = createUpdate(eventTime, lane);
+        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
         const payload = {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueUpdate(provider, refreshUpdate, lane);
+        enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -2165,7 +2165,6 @@ function dispatchReducerAction<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2176,49 +2175,10 @@ function dispatchReducerAction<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // This is a render phase update. Stash it in a lazily-created map of
-    // queue -> linked list of updates. After this render pass, we'll restart
-    // and apply the stashed updates on top of the work-in-progress hook.
-    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
-    const pending = queue.pending;
-    if (pending === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-    } else {
-      update.next = pending.next;
-      pending.next = update;
-    }
-    queue.pending = update;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      const pending = queue.pending;
-      if (pending === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-      } else {
-        update.next = pending.next;
-        pending.next = update;
-      }
-      queue.pending = update;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
@@ -2226,40 +2186,14 @@ function dispatchReducerAction<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
-
-    if (isTransitionLane(lane) && root !== null) {
-      let queueLanes = queue.lanes;
-
-      // If any entangled lanes are no longer pending on the root, then they
-      // must have finished. We can remove them from the shared queue, which
-      // represents a superset of the actually pending lanes. In some cases we
-      // may entangle more than we need to, but that's OK. In fact it's worse if
-      // we *don't* entangle when we should.
-      queueLanes = intersectLanes(queueLanes, root.pendingLanes);
-
-      // Entangle the new transition lane with the other transition lanes.
-      const newQueueLanes = mergeLanes(queueLanes, lane);
-      queue.lanes = newQueueLanes;
-      // Even if queue.lanes already include lane, we don't know for certain if
-      // the lane finished since the last time we entangled it. So we need to
-      // entangle it again, just to be sure.
-      markRootEntangled(root, newQueueLanes);
-    }
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      if (fiber.mode & DebugTracingMode) {
-        const name = getComponentNameFromFiber(fiber) || 'Unknown';
-        logStateUpdateScheduled(name, lane, action);
-      }
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
     }
   }
 
-  if (enableSchedulingProfiler) {
-    markStateUpdateScheduled(fiber, lane);
-  }
+  markUpdateInDevTools(fiber, lane, action);
 }
 
 function dispatchSetState<S, A>(
@@ -2277,7 +2211,6 @@ function dispatchSetState<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2288,50 +2221,12 @@ function dispatchSetState<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // This is a render phase update. Stash it in a lazily-created map of
-    // queue -> linked list of updates. After this render pass, we'll restart
-    // and apply the stashed updates on top of the work-in-progress hook.
-    didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
-    const pending = queue.pending;
-    if (pending === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-    } else {
-      update.next = pending.next;
-      pending.next = update;
-    }
-    queue.pending = update;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      const pending = queue.pending;
-      if (pending === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-      } else {
-        update.next = pending.next;
-        pending.next = update;
-      }
-      queue.pending = update;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
+    const alternate = fiber.alternate;
     if (
       fiber.lanes === NoLanes &&
       (alternate === null || alternate.lanes === NoLanes)
@@ -2377,28 +2272,101 @@ function dispatchSetState<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
+    }
+  }
+
+  markUpdateInDevTools(fiber, lane, action);
+}
+
+function isRenderPhaseUpdate(fiber: Fiber) {
+  const alternate = fiber.alternate;
+  return (
+    fiber === currentlyRenderingFiber ||
+    (alternate !== null && alternate === currentlyRenderingFiber)
+  );
+}
+
+function enqueueRenderPhaseUpdate<S, A>(
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+) {
+  // This is a render phase update. Stash it in a lazily-created map of
+  // queue -> linked list of updates. After this render pass, we'll restart
+  // and apply the stashed updates on top of the work-in-progress hook.
+  didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
+  const pending = queue.pending;
+  if (pending === null) {
+    // This is the first update. Create a circular list.
+    update.next = update;
+  } else {
+    update.next = pending.next;
+    pending.next = update;
+  }
+  queue.pending = update;
+}
 
-    if (isTransitionLane(lane) && root !== null) {
-      let queueLanes = queue.lanes;
-
-      // If any entangled lanes are no longer pending on the root, then they
-      // must have finished. We can remove them from the shared queue, which
-      // represents a superset of the actually pending lanes. In some cases we
-      // may entangle more than we need to, but that's OK. In fact it's worse if
-      // we *don't* entangle when we should.
-      queueLanes = intersectLanes(queueLanes, root.pendingLanes);
-
-      // Entangle the new transition lane with the other transition lanes.
-      const newQueueLanes = mergeLanes(queueLanes, lane);
-      queue.lanes = newQueueLanes;
-      // Even if queue.lanes already include lane, we don't know for certain if
-      // the lane finished since the last time we entangled it. So we need to
-      // entangle it again, just to be sure.
-      markRootEntangled(root, newQueueLanes);
+function enqueueUpdate<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+  lane: Lane,
+) {
+  if (isInterleavedUpdate(fiber, lane)) {
+    const interleaved = queue.interleaved;
+    if (interleaved === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+      // At the end of the current render, this queue's interleaved updates will
+      // be transferred to the pending queue.
+      pushInterleavedQueue(queue);
+    } else {
+      update.next = interleaved.next;
+      interleaved.next = update;
+    }
+    queue.interleaved = update;
+  } else {
+    const pending = queue.pending;
+    if (pending === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+    } else {
+      update.next = pending.next;
+      pending.next = update;
     }
+    queue.pending = update;
+  }
+}
+
+function entangleTransitionUpdate<S, A>(
+  root: FiberRoot,
+  queue: UpdateQueue<S, A>,
+  lane: Lane,
+) {
+  if (isTransitionLane(lane)) {
+    let queueLanes = queue.lanes;
+
+    // If any entangled lanes are no longer pending on the root, then they
+    // must have finished. We can remove them from the shared queue, which
+    // represents a superset of the actually pending lanes. In some cases we
+    // may entangle more than we need to, but that's OK. In fact it's worse if
+    // we *don't* entangle when we should.
+    queueLanes = intersectLanes(queueLanes, root.pendingLanes);
+
+    // Entangle the new transition lane with the other transition lanes.
+    const newQueueLanes = mergeLanes(queueLanes, lane);
+    queue.lanes = newQueueLanes;
+    // Even if queue.lanes already include lane, we don't know for certain if
+    // the lane finished since the last time we entangled it. So we need to
+    // entangle it again, just to be sure.
+    markRootEntangled(root, newQueueLanes);
   }
+}
 
+function markUpdateInDevTools(fiber, lane, action) {
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {

From 7843b142ac804655990157a7be1e4641b4b6695f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 28 Sep 2021 18:32:09 -0400
Subject: [PATCH 002/109] [Fizz/Flight] Pass in Destination lazily to
 startFlowing instead of in createRequest (#22449)

* Pass in Destination lazily in startFlowing instead of createRequest

* Delay fatal errors until we have a destination to forward them to

* Flow can now be inferred by whether there's a destination set

We can drop the destination when we're not flowing since there's nothing to
write to.

Fatal errors now close once flowing starts back up again.

* Defer fatal errors in Flight too
---
 .../__tests__/ReactDOMFizzServerNode-test.js  |  5 +-
 .../src/server/ReactDOMFizzServerBrowser.js   | 22 ++++---
 .../src/server/ReactDOMFizzServerNode.js      | 13 ++--
 .../src/server/ReactDOMLegacyServerBrowser.js |  3 +-
 .../src/server/ReactDOMLegacyServerNode.js    |  5 +-
 .../src/ReactNoopFlightServer.js              |  3 +-
 .../src/ReactNoopServer.js                    |  3 +-
 .../src/ReactDOMServerFB.js                   |  3 +-
 .../src/ReactFlightDOMRelayServer.js          |  3 +-
 .../src/ReactFlightDOMServerBrowser.js        | 14 ++---
 .../src/ReactFlightDOMServerNode.js           |  5 +-
 .../src/ReactFlightNativeRelayServer.js       |  4 +-
 packages/react-server/src/ReactFizzServer.js  | 59 ++++++++++++-------
 .../react-server/src/ReactFlightServer.js     | 56 ++++++++++++------
 14 files changed, 110 insertions(+), 88 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 78a8374d09cc3..949ddcb04fa2d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -154,7 +154,7 @@ describe('ReactDOMFizzServer', () => {
   it('should error the stream when an error is thrown at the root', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    ReactDOMFizzServer.pipeToNodeWritable(
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
         <Throw />
       </div>,
@@ -166,7 +166,8 @@ describe('ReactDOMFizzServer', () => {
       },
     );
 
-    // The stream is errored even if we haven't started writing.
+    // The stream is errored once we start writing.
+    startWriting();
 
     await completed;
 
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 42752a34c0bde..d238201247626 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -37,7 +37,15 @@ function renderToReadableStream(
   children: ReactNodeList,
   options?: Options,
 ): ReadableStream {
-  let request;
+  const request = createRequest(
+    children,
+    createResponseState(options ? options.identifierPrefix : undefined),
+    createRootFormatContext(options ? options.namespaceURI : undefined),
+    options ? options.progressiveChunkSize : undefined,
+    options ? options.onError : undefined,
+    options ? options.onCompleteAll : undefined,
+    options ? options.onCompleteShell : undefined,
+  );
   if (options && options.signal) {
     const signal = options.signal;
     const listener = () => {
@@ -48,16 +56,6 @@ function renderToReadableStream(
   }
   const stream = new ReadableStream({
     start(controller) {
-      request = createRequest(
-        children,
-        controller,
-        createResponseState(options ? options.identifierPrefix : undefined),
-        createRootFormatContext(options ? options.namespaceURI : undefined),
-        options ? options.progressiveChunkSize : undefined,
-        options ? options.onError : undefined,
-        options ? options.onCompleteAll : undefined,
-        options ? options.onCompleteShell : undefined,
-      );
       startWork(request);
     },
     pull(controller) {
@@ -66,7 +64,7 @@ function renderToReadableStream(
       // is actually used by something so we can give it the best result possible
       // at that point.
       if (stream.locked) {
-        startFlowing(request);
+        startFlowing(request, controller);
       }
     },
     cancel(reason) {},
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 2bfb505ea0625..fb1939f0c404f 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -25,7 +25,7 @@ import {
 } from './ReactDOMServerFormatConfig';
 
 function createDrainHandler(destination, request) {
-  return () => startFlowing(request);
+  return () => startFlowing(request, destination);
 }
 
 type Options = {|
@@ -44,14 +44,9 @@ type Controls = {|
   startWriting(): void,
 |};
 
-function createRequestImpl(
-  children: ReactNodeList,
-  destination: Writable,
-  options: void | Options,
-) {
+function createRequestImpl(children: ReactNodeList, options: void | Options) {
   return createRequest(
     children,
-    destination,
     createResponseState(options ? options.identifierPrefix : undefined),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
@@ -66,7 +61,7 @@ function pipeToNodeWritable(
   destination: Writable,
   options?: Options,
 ): Controls {
-  const request = createRequestImpl(children, destination, options);
+  const request = createRequestImpl(children, options);
   let hasStartedFlowing = false;
   startWork(request);
   return {
@@ -75,7 +70,7 @@ function pipeToNodeWritable(
         return;
       }
       hasStartedFlowing = true;
-      startFlowing(request);
+      startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
     },
     abort() {
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index d05b44200e627..8982d4d9341bd 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -59,7 +59,6 @@ function renderToStringImpl(
   }
   const request = createRequest(
     children,
-    destination,
     createResponseState(
       generateStaticMarkup,
       options ? options.identifierPrefix : undefined,
@@ -74,7 +73,7 @@ function renderToStringImpl(
   // If anything suspended and is still pending, we'll abort it before writing.
   // That way we write only client-rendered boundaries from the start.
   abort(request);
-  startFlowing(request);
+  startFlowing(request, destination);
   if (didFatal) {
     throw fatalError;
   }
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index ce2924c9a53a4..71ebab5ac0f0f 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -54,7 +54,7 @@ class ReactMarkupReadableStream extends Readable {
 
   _read(size) {
     if (this.startedFlowing) {
-      startFlowing(this.request);
+      startFlowing(this.request, this);
     }
   }
 }
@@ -72,12 +72,11 @@ function renderToNodeStreamImpl(
     // We wait until everything has loaded before starting to write.
     // That way we only end up with fully resolved HTML even if we suspend.
     destination.startedFlowing = true;
-    startFlowing(request);
+    startFlowing(request, destination);
   }
   const destination = new ReactMarkupReadableStream();
   const request = createRequest(
     children,
-    destination,
     createResponseState(false, options ? options.identifierPrefix : undefined),
     createRootFormatContext(),
     Infinity,
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index eed5f2219fbfd..f6d64c003f9e1 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -63,12 +63,11 @@ function render(model: ReactModel, options?: Options): Destination {
   const bundlerConfig = undefined;
   const request = ReactNoopFlightServer.createRequest(
     model,
-    destination,
     bundlerConfig,
     options ? options.onError : undefined,
   );
   ReactNoopFlightServer.startWork(request);
-  ReactNoopFlightServer.startFlowing(request);
+  ReactNoopFlightServer.startFlowing(request, destination);
   return destination;
 }
 
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 279c8b7b217fa..080c3042080a2 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -259,7 +259,6 @@ function render(children: React$Element<any>, options?: Options): Destination {
   };
   const request = ReactNoopServer.createRequest(
     children,
-    destination,
     null,
     null,
     options ? options.progressiveChunkSize : undefined,
@@ -268,7 +267,7 @@ function render(children: React$Element<any>, options?: Options): Destination {
     options ? options.onCompleteShell : undefined,
   );
   ReactNoopServer.startWork(request);
-  ReactNoopServer.startFlowing(request);
+  ReactNoopServer.startFlowing(request, destination);
   return destination;
 }
 
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index 290a1f227e612..b5b6ba84e77d4 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -46,7 +46,6 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
   };
   const request = createRequest(
     children,
-    destination,
     createResponseState(options ? options.identifierPrefix : undefined),
     createRootFormatContext(undefined),
     options ? options.progressiveChunkSize : undefined,
@@ -71,7 +70,7 @@ function abortStream(stream: Stream): void {
 function renderNextChunk(stream: Stream): string {
   const {request, destination} = stream;
   performWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
   if (destination.fatal) {
     throw destination.error;
   }
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
index fe2f9c8008c85..7feb6e3f0eff2 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
@@ -31,12 +31,11 @@ function render(
 ): void {
   const request = createRequest(
     model,
-    destination,
     config,
     options ? options.onError : undefined,
   );
   startWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
 }
 
 export {render};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 261cf85c9bdf4..9d632dfb0712e 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -25,15 +25,13 @@ function renderToReadableStream(
   webpackMap: BundlerConfig,
   options?: Options,
 ): ReadableStream {
-  let request;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+  );
   const stream = new ReadableStream({
     start(controller) {
-      request = createRequest(
-        model,
-        controller,
-        webpackMap,
-        options ? options.onError : undefined,
-      );
       startWork(request);
     },
     pull(controller) {
@@ -42,7 +40,7 @@ function renderToReadableStream(
       // is actually used by something so we can give it the best result possible
       // at that point.
       if (stream.locked) {
-        startFlowing(request);
+        startFlowing(request, controller);
       }
     },
     cancel(reason) {},
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 4529abd2b6718..35773279890ca 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -18,7 +18,7 @@ import {
 } from 'react-server/src/ReactFlightServer';
 
 function createDrainHandler(destination, request) {
-  return () => startFlowing(request);
+  return () => startFlowing(request, destination);
 }
 
 type Options = {
@@ -33,12 +33,11 @@ function pipeToNodeWritable(
 ): void {
   const request = createRequest(
     model,
-    destination,
     webpackMap,
     options ? options.onError : undefined,
   );
   startWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
   destination.on('drain', createDrainHandler(destination, request));
 }
 
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
index cae476b46c107..dd9bd6cc60ada 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
@@ -24,9 +24,9 @@ function render(
   destination: Destination,
   config: BundlerConfig,
 ): void {
-  const request = createRequest(model, destination, config);
+  const request = createRequest(model, config);
   startWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
 }
 
 export {render};
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index c50ef5335297c..e9396c861ee4c 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -166,15 +166,16 @@ type Segment = {
   +boundary: null | SuspenseBoundary,
 };
 
-const BUFFERING = 0;
-const FLOWING = 1;
+const OPEN = 0;
+const CLOSING = 1;
 const CLOSED = 2;
 
 export opaque type Request = {
-  +destination: Destination,
+  destination: null | Destination,
   +responseState: ResponseState,
   +progressiveChunkSize: number,
   status: 0 | 1 | 2,
+  fatalError: mixed,
   nextSegmentId: number,
   allPendingTasks: number, // when it reaches zero, we can close the connection.
   pendingRootTasks: number, // when this reaches zero, we've finished at least the root boundary.
@@ -221,7 +222,6 @@ function noop(): void {}
 
 export function createRequest(
   children: ReactNodeList,
-  destination: Destination,
   responseState: ResponseState,
   rootFormatContext: FormatContext,
   progressiveChunkSize: void | number,
@@ -232,13 +232,14 @@ export function createRequest(
   const pingedTasks = [];
   const abortSet: Set<Task> = new Set();
   const request = {
-    destination,
+    destination: null,
     responseState,
     progressiveChunkSize:
       progressiveChunkSize === undefined
         ? DEFAULT_PROGRESSIVE_CHUNK_SIZE
         : progressiveChunkSize,
-    status: BUFFERING,
+    status: OPEN,
+    fatalError: null,
     nextSegmentId: 0,
     allPendingTasks: 0,
     pendingRootTasks: 0,
@@ -404,8 +405,13 @@ function fatalError(request: Request, error: mixed): void {
   // This is called outside error handling code such as if the root errors outside
   // a suspense boundary or if the root suspense boundary's fallback errors.
   // It's also called if React itself or its host configs errors.
-  request.status = CLOSED;
-  closeWithError(request.destination, error);
+  if (request.destination !== null) {
+    request.status = CLOSED;
+    closeWithError(request.destination, error);
+  } else {
+    request.status = CLOSING;
+    request.fatalError = error;
+  }
 }
 
 function renderSuspenseBoundary(
@@ -1330,7 +1336,9 @@ function abortTask(task: Task): void {
     // the request;
     if (request.status !== CLOSED) {
       request.status = CLOSED;
-      close(request.destination);
+      if (request.destination !== null) {
+        close(request.destination);
+      }
     }
   } else {
     boundary.pendingTasks--;
@@ -1490,8 +1498,8 @@ export function performWork(request: Request): void {
       retryTask(request, task);
     }
     pingedTasks.splice(0, i);
-    if (request.status === FLOWING) {
-      flushCompletedQueues(request);
+    if (request.destination !== null) {
+      flushCompletedQueues(request, request.destination);
     }
   } catch (error) {
     reportError(request, error);
@@ -1748,8 +1756,10 @@ function flushPartiallyCompletedSegment(
   }
 }
 
-function flushCompletedQueues(request: Request): void {
-  const destination = request.destination;
+function flushCompletedQueues(
+  request: Request,
+  destination: Destination,
+): void {
   beginWriting(destination);
   try {
     // The structure of this is to go through each queue one by one and write
@@ -1775,7 +1785,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < clientRenderedBoundaries.length; i++) {
       const boundary = clientRenderedBoundaries[i];
       if (!flushClientRenderedBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         clientRenderedBoundaries.splice(0, i);
         return;
@@ -1790,7 +1800,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < completedBoundaries.length; i++) {
       const boundary = completedBoundaries[i];
       if (!flushCompletedBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         completedBoundaries.splice(0, i);
         return;
@@ -1811,7 +1821,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < partialBoundaries.length; i++) {
       const boundary = partialBoundaries[i];
       if (!flushPartialBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         partialBoundaries.splice(0, i);
         return;
@@ -1826,7 +1836,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < largeBoundaries.length; i++) {
       const boundary = largeBoundaries[i];
       if (!flushCompletedBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         largeBoundaries.splice(0, i);
         return;
@@ -1861,13 +1871,18 @@ export function startWork(request: Request): void {
   scheduleWork(() => performWork(request));
 }
 
-export function startFlowing(request: Request): void {
+export function startFlowing(request: Request, destination: Destination): void {
+  if (request.status === CLOSING) {
+    request.status = CLOSED;
+    closeWithError(destination, request.fatalError);
+    return;
+  }
   if (request.status === CLOSED) {
     return;
   }
-  request.status = FLOWING;
+  request.destination = destination;
   try {
-    flushCompletedQueues(request);
+    flushCompletedQueues(request, destination);
   } catch (error) {
     reportError(request, error);
     fatalError(request, error);
@@ -1880,8 +1895,8 @@ export function abort(request: Request): void {
     const abortableTasks = request.abortableTasks;
     abortableTasks.forEach(abortTask, request);
     abortableTasks.clear();
-    if (request.status === FLOWING) {
-      flushCompletedQueues(request);
+    if (request.destination !== null) {
+      flushCompletedQueues(request, request.destination);
     }
   } catch (error) {
     reportError(request, error);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index f608c9d288a49..8247a904ec997 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -72,7 +72,9 @@ type Segment = {
 };
 
 export type Request = {
-  destination: Destination,
+  status: 0 | 1 | 2,
+  fatalError: mixed,
+  destination: null | Destination,
   bundlerConfig: BundlerConfig,
   cache: Map<Function, mixed>,
   nextChunkId: number,
@@ -84,25 +86,30 @@ export type Request = {
   writtenSymbols: Map<Symbol, number>,
   writtenModules: Map<ModuleKey, number>,
   onError: (error: mixed) => void,
-  flowing: boolean,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error: mixed) {
-  console['error'](error); // Don't transform to our wrapper
+  console['error'](error);
+  // Don't transform to our wrapper
 }
 
+const OPEN = 0;
+const CLOSING = 1;
+const CLOSED = 2;
+
 export function createRequest(
   model: ReactModel,
-  destination: Destination,
   bundlerConfig: BundlerConfig,
   onError: void | ((error: mixed) => void),
 ): Request {
   const pingedSegments = [];
   const request = {
-    destination,
+    status: OPEN,
+    fatalError: null,
+    destination: null,
     bundlerConfig,
     cache: new Map(),
     nextChunkId: 0,
@@ -114,7 +121,6 @@ export function createRequest(
     writtenSymbols: new Map(),
     writtenModules: new Map(),
     onError: onError === undefined ? defaultErrorHandler : onError,
-    flowing: false,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
     },
@@ -604,7 +610,13 @@ function reportError(request: Request, error: mixed): void {
 
 function fatalError(request: Request, error: mixed): void {
   // This is called outside error handling code such as if an error happens in React internals.
-  closeWithError(request.destination, error);
+  if (request.destination !== null) {
+    request.status = CLOSED;
+    closeWithError(request.destination, error);
+  } else {
+    request.status = CLOSING;
+    request.fatalError = error;
+  }
 }
 
 function emitErrorChunk(request: Request, id: number, error: mixed): void {
@@ -694,8 +706,8 @@ function performWork(request: Request): void {
       const segment = pingedSegments[i];
       retrySegment(request, segment);
     }
-    if (request.flowing) {
-      flushCompletedChunks(request);
+    if (request.destination !== null) {
+      flushCompletedChunks(request, request.destination);
     }
   } catch (error) {
     reportError(request, error);
@@ -706,8 +718,10 @@ function performWork(request: Request): void {
   }
 }
 
-function flushCompletedChunks(request: Request): void {
-  const destination = request.destination;
+function flushCompletedChunks(
+  request: Request,
+  destination: Destination,
+): void {
   beginWriting(destination);
   try {
     // We emit module chunks first in the stream so that
@@ -718,7 +732,7 @@ function flushCompletedChunks(request: Request): void {
       request.pendingChunks--;
       const chunk = moduleChunks[i];
       if (!writeChunk(destination, chunk)) {
-        request.flowing = false;
+        request.destination = null;
         i++;
         break;
       }
@@ -731,7 +745,7 @@ function flushCompletedChunks(request: Request): void {
       request.pendingChunks--;
       const chunk = jsonChunks[i];
       if (!writeChunk(destination, chunk)) {
-        request.flowing = false;
+        request.destination = null;
         i++;
         break;
       }
@@ -746,7 +760,7 @@ function flushCompletedChunks(request: Request): void {
       request.pendingChunks--;
       const chunk = errorChunks[i];
       if (!writeChunk(destination, chunk)) {
-        request.flowing = false;
+        request.destination = null;
         i++;
         break;
       }
@@ -766,10 +780,18 @@ export function startWork(request: Request): void {
   scheduleWork(() => performWork(request));
 }
 
-export function startFlowing(request: Request): void {
-  request.flowing = true;
+export function startFlowing(request: Request, destination: Destination): void {
+  if (request.status === CLOSING) {
+    request.status = CLOSED;
+    closeWithError(destination, request.fatalError);
+    return;
+  }
+  if (request.status === CLOSED) {
+    return;
+  }
+  request.destination = destination;
   try {
-    flushCompletedChunks(request);
+    flushCompletedChunks(request, destination);
   } catch (error) {
     reportError(request, error);
     fatalError(request, error);

From 033efe7312cdf73118922b279d9b1ae29a2f693d Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 28 Sep 2021 21:32:57 -0400
Subject: [PATCH 003/109] Call get snapshot in useSyncExternalStore server shim
 (#22453)

* Call getSnapshot in shim

* just change useSyncExternalStoreServer

* remove builtInAPI Check in useSyncExternalStoreClient
---
 .../useSyncExternalStoreShimServer-test.js    |  6 ++++--
 .../src/useSyncExternalStore.js               | 10 +++++++++-
 .../src/useSyncExternalStoreClient.js         | 19 ++-----------------
 .../src/useSyncExternalStoreServer.js         | 11 +----------
 4 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
index 9fa5b9ce21ebf..b46e028724061 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
@@ -92,7 +92,9 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     }
 
     const html = ReactDOMServer.renderToString(<App />);
-    expect(Scheduler).toHaveYielded(['server']);
-    expect(html).toEqual('server');
+
+    // We don't call getServerSnapshot in the shim
+    expect(Scheduler).toHaveYielded(['client']);
+    expect(html).toEqual('client');
   });
 });
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 8a1a5c7191135..c152287174269 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -10,5 +10,13 @@
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import {useSyncExternalStore as client} from './useSyncExternalStoreClient';
 import {useSyncExternalStore as server} from './useSyncExternalStoreServer';
+import * as React from 'react';
 
-export const useSyncExternalStore = canUseDOM ? client : server;
+const {unstable_useSyncExternalStore: builtInAPI} = React;
+
+export const useSyncExternalStore =
+  builtInAPI !== undefined
+    ? ((builtInAPI: any): typeof client)
+    : canUseDOM
+    ? client
+    : server;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
index 76e7fda36f831..dc42169c399d6 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
@@ -12,22 +12,7 @@ import is from 'shared/objectIs';
 
 // Intentionally not using named imports because Rollup uses dynamic
 // dispatch for CommonJS interop named imports.
-const {
-  useState,
-  useEffect,
-  useLayoutEffect,
-  useDebugValue,
-  // The built-in API is still prefixed.
-  unstable_useSyncExternalStore: builtInAPI,
-} = React;
-
-// Prefer the built-in API, if it exists. If it doesn't exist, then we assume
-// we're in version 16 or 17, so rendering is always synchronous. The shim
-// does not support concurrent rendering, only the built-in API.
-export const useSyncExternalStore =
-  builtInAPI !== undefined
-    ? ((builtInAPI: any): typeof useSyncExternalStore_client)
-    : useSyncExternalStore_client;
+const {useState, useEffect, useLayoutEffect, useDebugValue} = React;
 
 let didWarnOld18Alpha = false;
 let didWarnUncachedGetSnapshot = false;
@@ -42,7 +27,7 @@ let didWarnUncachedGetSnapshot = false;
 //
 // Do not assume that the clever hacks used by this hook also work in general.
 // The point of this shim is to replace the need for hacks by other libraries.
-function useSyncExternalStore_client<T>(
+export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
   // Note: The client shim does not use getServerSnapshot, because pre-18
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js b/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
index 1bf2a752273db..52903dd4aca89 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
@@ -7,19 +7,10 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
   getServerSnapshot?: () => T,
 ): T {
-  if (getServerSnapshot === undefined) {
-    invariant(
-      false,
-      'Missing getServerSnapshot, which is required for server-' +
-        'rendered content.',
-    );
-  }
-  return getServerSnapshot();
+  return getSnapshot();
 }

From 0883c4cd3a0bba4cc3eb2a1921cf21b1d78ddea2 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 29 Sep 2021 12:06:13 -0400
Subject: [PATCH 004/109] React DevTools 4.18.0 -> 4.19.0 (#22461)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 ++--
 .../edge/manifest.json                        |  4 ++--
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 .../package.json                              |  2 +-
 packages/react-devtools/CHANGELOG.md          | 21 +++++++++++++++++++
 packages/react-devtools/package.json          |  4 ++--
 8 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 4d1ebdd9db8a4..4c6d33dbd585e 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index ba5dd667cdd28..e20186cc22c52 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.18.0",
-  "version_name": "4.18.0",
+  "version": "4.19.0",
+  "version_name": "4.19.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 0fdb82088c952..ad8d5eade5d30 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.18.0",
-  "version_name": "4.18.0",
+  "version": "4.19.0",
+  "version_name": "4.19.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 7ef9d847b15f7..56b0ee91269ca 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index e6e9807c39013..a3905de97f0b6 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 98a386ba1949c..4b10d75406d3b 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index d858072a8d7b3..e4ca09b65faf7 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,27 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.19.0 (September 29, 2021)
+
+#### Features
+* Scheduling Profiler: Show Suspense resource .displayName ([bvaughn](https://github.com/bvaughn) in [#22451](https://github.com/facebook/react/pull/22451))
+* Scheduling Profiler marks should include thrown Errors ([bvaughn](https://github.com/bvaughn) in [#22419](https://github.com/facebook/react/pull/22419))
+* Don't patch console during first render in strict mode ([lunaruan](https://github.com/lunaruan) in [#22308](https://github.com/facebook/react/pull/22308))
+* Show which hook indicies changed when profiling for all builds ([bvaughn](https://github.com/bvaughn) in [#22365](https://github.com/facebook/react/pull/22365))
+* Display actual ReactDOM API name in root type ([eps1lon](https://github.com/eps1lon) in [#22363](https://github.com/facebook/react/pull/22363))
+* Add named hooks support to standalone and inline DevTools ([jstejada](https://github.com/jstejada) in [#22320](https://github.com/facebook/react/pull/22320) and [bvaughn](https://github.com/bvaughn) in [#22263](https://github.com/facebook/react/pull/22263))
+#### Bugfix
+* DevTools encoding supports multibyte characters (e.g. "🟩") ([bvaughn](https://github.com/bvaughn) in [#22424](https://github.com/facebook/react/pull/22424))
+* Improve DEV errors if string coercion throws (Temporal.*, Symbol, etc.) ([justingrant](https://github.com/justingrant) in [#22064](https://github.com/facebook/react/pull/22064))
+* Fix memory leak caused by not storing alternate Fiber pointer ([bvaughn](https://github.com/bvaughn) in [#22346](https://github.com/facebook/react/pull/22346))
+* Fix call stack exceeded error in `utfDecodeString()` ([bvaughn](https://github.com/bvaughn) in [#22330](https://github.com/facebook/react/pull/22330))
+* Fix runtime error when inspecting an element times out ([jstejada](https://github.com/jstejada) in [#22329](https://github.com/facebook/react/pull/22329))
+
+#### Performance
+* DevTools: Lazily parse indexed map sections ([bvaughn](https://github.com/bvaughn) in [#22415](https://github.com/facebook/react/pull/22415))
+* DevTools: Hook names optimizations ([bvaughn](https://github.com/bvaughn) in [#22403](https://github.com/facebook/react/pull/22403))
+* Replaced `network.onRequestFinished()` caching with `network.getHAR()` ([bvaughn](https://github.com/bvaughn) in [#22285](https://github.com/facebook/react/pull/22285))
+
 ## 4.18.0 (September 1, 2021)
 
 #### Features
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 12f93895780c9..6ff26538ca967 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.18.0",
+    "react-devtools-core": "4.19.0",
     "update-notifier": "^2.1.0"
   }
 }

From 95ecd4a2c360921f9db91bf8db5cad1aa5a34a5e Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 29 Sep 2021 17:46:34 -0400
Subject: [PATCH 005/109] [DevTools] Commands for internal builds all follow
 :fb convention (#22463)

---
 packages/react-devtools-extensions/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index a2642788b5f4c..7d1f018a6bb2b 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -6,12 +6,12 @@
     "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
     "build:dev": "cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev",
     "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
-    "build:chrome:crx": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
+    "build:chrome:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
     "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
     "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
     "build:edge": "cross-env NODE_ENV=production node ./edge/build",
-    "build:edge:crx": "cross-env NODE_ENV=production node ./edge/build --crx",
+    "build:edge:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./edge/build --crx",
     "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",

From 201af81b0168cabea3cc07cd8201378a4fec4aaf Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Wed, 29 Sep 2021 15:49:52 -0700
Subject: [PATCH 006/109] Release pooled cache reference in complete/unwind
 (#22464)

---
 .../src/ReactFiberCacheComponent.new.js                | 10 ++++++----
 .../src/ReactFiberCacheComponent.old.js                | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 042a8b2efc098..0d284c683ed1f 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -99,14 +99,16 @@ export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
     return;
   }
   // The `pooledCache` variable points to the cache that was used for new
-  // cache boundaries during this render, if any. Stash it on the root so that
-  // parallel transitions may share the same cache. We will clear this field
-  // once all the transitions that depend on it (which we track with
-  // `pooledCacheLanes`) have committed.
+  // cache boundaries during this render, if any. Move ownership of the
+  // cache to the root so that parallel transitions may share the same
+  // cache. We will clear this field once all the transitions that depend
+  // on it (which we track with `pooledCacheLanes`) have committed.
   root.pooledCache = pooledCache;
   if (pooledCache !== null) {
     root.pooledCacheLanes |= renderLanes;
   }
+  // set to null, conceptually we are moving ownership to the root
+  pooledCache = null;
 }
 
 export function restoreSpawnedCachePool(
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index 2bc64254d3092..dd450fff76b50 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -99,14 +99,16 @@ export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
     return;
   }
   // The `pooledCache` variable points to the cache that was used for new
-  // cache boundaries during this render, if any. Stash it on the root so that
-  // parallel transitions may share the same cache. We will clear this field
-  // once all the transitions that depend on it (which we track with
-  // `pooledCacheLanes`) have committed.
+  // cache boundaries during this render, if any. Move ownership of the
+  // cache to the root so that parallel transitions may share the same
+  // cache. We will clear this field once all the transitions that depend
+  // on it (which we track with `pooledCacheLanes`) have committed.
   root.pooledCache = pooledCache;
   if (pooledCache !== null) {
     root.pooledCacheLanes |= renderLanes;
   }
+  // set to null, conceptually we are moving ownership to the root
+  pooledCache = null;
 }
 
 export function restoreSpawnedCachePool(

From ec4ac97500e850a90f837668a261533e780f40f4 Mon Sep 17 00:00:00 2001
From: Ay-Ay-Ron <34754995+aaronamendez@users.noreply.github.com>
Date: Thu, 30 Sep 2021 09:58:01 -0400
Subject: [PATCH 007/109] Fixed Link on Documentation (#22465)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1a5a64e0dc707..54a095f7d0f4c 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-
 
 ## Documentation
 
-You can find the React documentation [on the website](https://reactjs.org/docs).  
+You can find the React documentation [on the website](https://reactjs.org/).  
 
 Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
 

From 7d38e4fd896911f7204165853236e1b7f2786a60 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Sep 2021 11:12:25 -0400
Subject: [PATCH 008/109] CodeSandbox CI: Fall back to local build (#22473)

The `download-experimental-build` script has been flaky on CodeSandbox
CI, I think because of GitHub rate limiting.

Until we figure out how to fix that, I've updated it to fall back to a
local build.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 258a4a093944d..e7471a686ce88 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,6 @@
     "publish-prereleases": "node ./scripts/release/publish-using-ci-workflow.js",
     "download-build": "node ./scripts/release/download-experimental-build.js",
     "download-build-for-head": "node ./scripts/release/download-experimental-build.js --commit=$(git rev-parse HEAD)",
-    "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head"
+    "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler"
   }
 }

From 47177247f8c792fbb9a33328c913e246ff139a2d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 30 Sep 2021 12:48:53 -0400
Subject: [PATCH 009/109] DevTools: Fixed potential cache miss when insepcting
 elements (#22472)

---
 .../src/__tests__/inspectedElement-test.js    | 61 +++++++++++++++++++
 .../src/backend/agent.js                      |  4 +-
 .../src/backend/legacy/renderer.js            |  3 +-
 .../src/backend/renderer.js                   |  3 +-
 .../src/backend/types.js                      |  1 +
 .../react-devtools-shared/src/backendAPI.js   |  3 +
 packages/react-devtools-shared/src/bridge.js  |  1 +
 .../src/inspectedElementMutableSource.js      | 21 +++++--
 8 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index eb196e76b480a..211cd27b1522f 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -384,6 +384,67 @@ describe('InspectedElement', () => {
     `);
   });
 
+  // See github.com/facebook/react/issues/22241#issuecomment-931299972
+  it('should properly recover from a cache miss on the frontend', async () => {
+    let targetRenderCount = 0;
+
+    const Wrapper = ({children}) => children;
+    const Target = React.memo(props => {
+      targetRenderCount++;
+      // Even though his hook isn't referenced, it's used to observe backend rendering.
+      React.useState(0);
+      return null;
+    });
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      legacyRender(
+        <Wrapper>
+          <Target a={1} b="abc" />
+        </Wrapper>,
+        container,
+      ),
+    );
+
+    targetRenderCount = 0;
+
+    let inspectedElement = await inspectElementAtIndex(1);
+    expect(targetRenderCount).toBe(1);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "a": 1,
+        "b": "abc",
+      }
+    `);
+
+    const prevInspectedElement = inspectedElement;
+
+    // This test causes an intermediate error to be logged but we can ignore it.
+    console.error = () => {};
+
+    // Wait for our check-for-updates poll to get the new data.
+    jest.runOnlyPendingTimers();
+    await Promise.resolve();
+
+    // Clear the frontend cache to simulate DevTools being closed and re-opened.
+    // The backend still thinks the most recently-inspected element is still cached,
+    // so the frontend needs to tell it to resend a full value.
+    // We can verify this by asserting that the component is re-rendered again.
+    testRendererInstance = TestRenderer.create(null, {
+      unstable_isConcurrent: true,
+    });
+
+    const {
+      clearCacheForTests,
+    } = require('react-devtools-shared/src/inspectedElementMutableSource');
+    clearCacheForTests();
+
+    targetRenderCount = 0;
+    inspectedElement = await inspectElementAtIndex(1);
+    expect(targetRenderCount).toBe(1);
+    expect(inspectedElement).toEqual(prevInspectedElement);
+  });
+
   it('should temporarily disable console logging when re-running a component to inspect its hooks', async () => {
     let targetRenderCount = 0;
 
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 9eea501cbdd0a..fdd46bf9c88f0 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -72,6 +72,7 @@ type CopyElementParams = {|
 |};
 
 type InspectElementParams = {|
+  forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
@@ -346,6 +347,7 @@ export default class Agent extends EventEmitter<{|
   };
 
   inspectElement = ({
+    forceFullData,
     id,
     path,
     rendererID,
@@ -357,7 +359,7 @@ export default class Agent extends EventEmitter<{|
     } else {
       this._bridge.send(
         'inspectedElement',
-        renderer.inspectElement(requestID, id, path),
+        renderer.inspectElement(requestID, id, path, forceFullData),
       );
 
       // When user selects an element, stop trying to restore the selection,
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 1f0aed404087a..d799ce72a275c 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -694,8 +694,9 @@ export function attach(
     requestID: number,
     id: number,
     path: Array<string | number> | null,
+    forceFullData: boolean,
   ): InspectedElementPayload {
-    if (currentlyInspectedElementID !== id) {
+    if (forceFullData || currentlyInspectedElementID !== id) {
       currentlyInspectedElementID = id;
       currentlyInspectedPaths = {};
     }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index a2469577a0a38..011f055e505a8 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -3439,12 +3439,13 @@ export function attach(
     requestID: number,
     id: number,
     path: Array<string | number> | null,
+    forceFullData: boolean,
   ): InspectedElementPayload {
     if (path !== null) {
       mergeInspectedPaths(path);
     }
 
-    if (isMostRecentlyInspectedElement(id)) {
+    if (isMostRecentlyInspectedElement(id) && !forceFullData) {
       if (!hasElementUpdatedSinceLastInspected) {
         if (path !== null) {
           let secondaryCategory = null;
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 2206dd94fb124..bbf574ed21a50 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -339,6 +339,7 @@ export type RendererInterface = {
     requestID: number,
     id: number,
     inspectedPaths: Object,
+    forceFullData: boolean,
   ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   overrideError: (id: number, forceError: boolean) => void,
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 5e0ac663fee44..2aa5b30cd22e6 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -86,11 +86,13 @@ export function copyInspectedElementPath({
 
 export function inspectElement({
   bridge,
+  forceFullData,
   id,
   path,
   rendererID,
 }: {|
   bridge: FrontendBridge,
+  forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
@@ -103,6 +105,7 @@ export function inspectElement({
   );
 
   bridge.send('inspectElement', {
+    forceFullData,
     id,
     path,
     rendererID,
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index ae5abf7c4f2b5..e67f6cee95423 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -138,6 +138,7 @@ type ViewAttributeSourceParams = {|
 
 type InspectElementParams = {|
   ...ElementAndRendererID,
+  forceFullData: boolean,
   path: Array<number | string> | null,
   requestID: number,
 |};
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index d0c2880005950..9302cd782a0cf 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -62,8 +62,15 @@ export function inspectElement({
   rendererID: number,
 |}): Promise<InspectElementReturnType> {
   const {id} = element;
+
+  // This could indicate that the DevTools UI has been closed and reopened.
+  // The in-memory cache will be clear but the backend still thinks we have cached data.
+  // In this case, we need to tell it to resend the full data.
+  const forceFullData = !inspectedElementCache.has(id);
+
   return inspectElementAPI({
     bridge,
+    forceFullData,
     id,
     path,
     rendererID,
@@ -74,7 +81,7 @@ export function inspectElement({
     switch (type) {
       case 'no-change':
         // This is a no-op for the purposes of our cache.
-        inspectedElement = inspectedElementCache.get(element.id);
+        inspectedElement = inspectedElementCache.get(id);
         if (inspectedElement != null) {
           return [inspectedElement, type];
         }
@@ -85,7 +92,7 @@ export function inspectElement({
       case 'not-found':
         // This is effectively a no-op.
         // If the Element is still in the Store, we can eagerly remove it from the Map.
-        inspectedElementCache.remove(element.id);
+        inspectedElementCache.remove(id);
 
         throw Error(`Element "${id}" not found`);
 
@@ -98,7 +105,7 @@ export function inspectElement({
           fullData.value,
         );
 
-        inspectedElementCache.set(element.id, inspectedElement);
+        inspectedElementCache.set(id, inspectedElement);
 
         return [inspectedElement, type];
 
@@ -108,7 +115,7 @@ export function inspectElement({
 
         // A path has been hydrated.
         // Merge it with the latest copy we have locally and resolve with the merged value.
-        inspectedElement = inspectedElementCache.get(element.id) || null;
+        inspectedElement = inspectedElementCache.get(id) || null;
         if (inspectedElement !== null) {
           // Clone element
           inspectedElement = {...inspectedElement};
@@ -121,7 +128,7 @@ export function inspectElement({
             hydrateHelper(value, ((path: any): Path)),
           );
 
-          inspectedElementCache.set(element.id, inspectedElement);
+          inspectedElementCache.set(id, inspectedElement);
 
           return [inspectedElement, type];
         }
@@ -140,3 +147,7 @@ export function inspectElement({
     throw Error(`Unable to inspect element with id "${id}"`);
   });
 }
+
+export function clearCacheForTests(): void {
+  inspectedElementCache.reset();
+}

From 75b9869648a2043d8c42693f44db437f40ea7d38 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 30 Sep 2021 13:47:14 -0400
Subject: [PATCH 010/109] [DevTools] Extension reports logged events when
 feature flag is enabled (#22475)

---
 .../react-devtools-extensions/src/main.js     |  6 +-
 .../src/registerExtensionsEventLogger.js      | 69 +++++++++++++++++++
 .../webpack.config.js                         |  3 +
 packages/react-devtools-shared/src/Logger.js  | 24 ++++---
 .../src/hookNamesCache.js                     | 18 ++---
 5 files changed, 96 insertions(+), 24 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/registerExtensionsEventLogger.js

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index eb093fc51b785..f22649c06394c 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -18,9 +18,9 @@ import {
   localStorageRemoveItem,
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
-import {registerEventLogger} from 'react-devtools-shared/src/Logger';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
@@ -88,9 +88,7 @@ function createPanelIfReactLoaded() {
 
       const tabId = chrome.devtools.inspectedWindow.tabId;
 
-      registerEventLogger((event: LogEvent) => {
-        // TODO: hook up event logging
-      });
+      registerExtensionsEventLogger();
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
diff --git a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js b/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
new file mode 100644
index 0000000000000..90917ef3a1d21
--- /dev/null
+++ b/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import type {LogEvent} from 'react-devtools-shared/src/Logger';
+
+import {registerEventLogger} from 'react-devtools-shared/src/Logger';
+import {enableLogger} from 'react-devtools-feature-flags';
+
+let loggingIFrame = null;
+let missedEvents = [];
+function logEvent(event: LogEvent) {
+  if (enableLogger) {
+    if (loggingIFrame != null) {
+      loggingIFrame.contentWindow.postMessage(
+        {
+          source: 'react-devtools-logging',
+          event: event,
+          context: {
+            surface: 'extension',
+          },
+        },
+        '*',
+      );
+    } else {
+      missedEvents.push(event);
+    }
+  }
+}
+
+function handleLoggingIFrameLoaded(iframe) {
+  if (loggingIFrame != null) {
+    return;
+  }
+
+  loggingIFrame = iframe;
+  if (missedEvents.length > 0) {
+    missedEvents.forEach(logEvent);
+    missedEvents = [];
+  }
+}
+
+export function registerExtensionsEventLogger() {
+  // If logger is enabled, register a logger that captures logged events
+  // and render iframe where the logged events will be reported to
+  if (enableLogger) {
+    const loggingUrl = process.env.LOGGING_URL;
+    const body = document.body;
+    if (
+      typeof loggingUrl === 'string' &&
+      loggingUrl.length > 0 &&
+      body != null
+    ) {
+      registerEventLogger(logEvent);
+
+      const iframe = document.createElement('iframe');
+      iframe.src = loggingUrl;
+      iframe.onload = function(...args) {
+        handleLoggingIFrameLoaded(iframe);
+      };
+      body.appendChild(iframe);
+    }
+  }
+}
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 3205a7acbe893..f7ba2f2e76241 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -32,6 +32,8 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const LOGGING_URL = process.env.LOGGING_URL || null;
+
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 const babelOptions = {
@@ -91,6 +93,7 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
       'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index 0ce2afb3b3c0d..ac8577e2105c7 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -10,11 +10,11 @@
 import {enableLogger} from 'react-devtools-feature-flags';
 
 type LoadHookNamesEvent = {|
-  +name: 'loadHookNames',
-  +displayName: string | null,
-  +numberOfHooks: number | null,
-  +durationMs: number,
-  +resolution: 'success' | 'error' | 'timeout' | 'unknown',
+  +event_name: 'loadHookNames',
+  +event_status: 'success' | 'error' | 'timeout' | 'unknown',
+  +duration_ms: number,
+  +inspected_element_display_name: string | null,
+  +inspected_element_number_of_hooks: number | null,
 |};
 
 // prettier-ignore
@@ -23,11 +23,11 @@ export type LogEvent =
 
 export type LogFunction = LogEvent => void;
 
-let loggers: Array<LogFunction> = [];
+let logFunctions: Array<LogFunction> = [];
 export const logEvent: LogFunction =
   enableLogger === true
     ? function logEvent(event: LogEvent): void {
-        loggers.forEach(log => {
+        logFunctions.forEach(log => {
           log(event);
         });
       }
@@ -35,13 +35,15 @@ export const logEvent: LogFunction =
 
 export const registerEventLogger =
   enableLogger === true
-    ? function registerEventLogger(eventLogger: LogFunction): () => void {
+    ? function registerEventLogger(logFunction: LogFunction): () => void {
         if (enableLogger) {
-          loggers.push(eventLogger);
+          logFunctions.push(logFunction);
           return function unregisterEventLogger() {
-            loggers = loggers.filter(logger => logger !== eventLogger);
+            logFunctions = logFunctions.filter(log => log !== logFunction);
           };
         }
         return () => {};
       }
-    : function registerEventLogger() {};
+    : function registerEventLogger(logFunction: LogFunction) {
+        return () => {};
+      };
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 106c10fc8ac12..8926f3feb9a51 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -99,7 +99,7 @@ export function loadHookNames(
 
     let timeoutID;
     let didTimeout = false;
-    let resolution = 'unknown';
+    let status = 'unknown';
     let resolvedHookNames: HookNames | null = null;
 
     const wake = () => {
@@ -116,11 +116,11 @@ export function loadHookNames(
     const handleLoadComplete = (durationMs: number): void => {
       // Log duration for parsing hook names
       logEvent({
-        name: 'loadHookNames',
-        displayName: element.displayName,
-        numberOfHooks: resolvedHookNames?.size ?? null,
-        durationMs,
-        resolution,
+        event_name: 'loadHookNames',
+        event_status: status,
+        duration_ms: durationMs,
+        inspected_element_display_name: element.displayName,
+        inspected_element_number_of_hooks: resolvedHookNames?.size ?? null,
       });
     };
 
@@ -152,7 +152,7 @@ export function loadHookNames(
               notFoundRecord.value = null;
             }
 
-            resolution = 'success';
+            status = 'success';
             resolvedHookNames = hookNames;
             done();
             wake();
@@ -172,7 +172,7 @@ export function loadHookNames(
             thrownRecord.status = Rejected;
             thrownRecord.value = null;
 
-            resolution = 'error';
+            status = 'error';
             done();
             wake();
           },
@@ -192,7 +192,7 @@ export function loadHookNames(
           timedoutRecord.status = Rejected;
           timedoutRecord.value = null;
 
-          resolution = 'timeout';
+          status = 'timeout';
           done();
           wake();
         }, TIMEOUT);

From f5d946da6be8d0cefd66ab3d029a55ab54ebb460 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 30 Sep 2021 14:13:13 -0400
Subject: [PATCH 011/109] [DevTools] Enable logger for internal build of
 DevTools extensions (#22476)

---
 .../src/config/DevToolsFeatureFlags.extension-fb.js             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
index 51fe2ed6abc13..b3bd5a7a92dcf 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -16,7 +16,7 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 export const enableNamedHooksFeature = true;
-export const enableLogger = false;
+export const enableLogger = true;
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************

From a724a3b578dce77d427bef313102a4d0e978d9b4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Sep 2021 15:01:28 -0400
Subject: [PATCH 012/109] [RFC] Codemod invariant -> throw new Error (#22435)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Hoist error codes import to module scope

When this code was written, the error codes map (`codes.json`) was
created on-the-fly, so we had to lazily require from inside the visitor.

Because `codes.json` is now checked into source, we can import it a
single time in module scope.

* Minify error constructors in production

We use a script to minify our error messages in production. Each message
is assigned an error code, defined in `scripts/error-codes/codes.json`.
Then our build script replaces the messages with a link to our
error decoder page, e.g. https://reactjs.org/docs/error-decoder.html/?invariant=92

This enables us to write helpful error messages without increasing the
bundle size.

Right now, the script only works for `invariant` calls. It does not work
if you throw an Error object. This is an old Facebookism that we don't
really need, other than the fact that our error minification script
relies on it.

So, I've updated the script to minify error constructors, too:

Input:
  Error(`A ${adj} message that contains ${noun}`);
Output:
  Error(formatProdErrorMessage(ERR_CODE, adj, noun));

It only works for constructors that are literally named Error, though we
could add support for other names, too.

As a next step, I will add a lint rule to enforce that errors written
this way must have a corresponding error code.

* Minify "no fallback UI specified" error in prod

This error message wasn't being minified because it doesn't use
invariant. The reason it didn't use invariant is because this particular
error is created without begin thrown — it doesn't need to be thrown
because it's located inside the error handling part of the runtime.

Now that the error minification script supports Error constructors, we
can minify it by assigning it a production error code in
`scripts/error-codes/codes.json`.

To support the use of Error constructors more generally, I will add a
lint rule that enforces each message has a corresponding error code.

* Lint rule to detect unminified errors

Adds a lint rule that detects when an Error constructor is used without
a corresponding production error code.

We already have this for `invariant`, but not for regular errors, i.e.
`throw new Error(msg)`. There's also nothing that enforces the use of
`invariant` besides convention.

There are some packages where we don't care to minify errors. These are
packages that run in environments where bundle size is not a concern,
like react-pg. I added an override in the ESLint config to ignore these.

* Temporarily add invariant codemod script

I'm adding this codemod to the repo temporarily, but I'll revert it
in the same PR. That way we don't have to check it in but it's still
accessible (via the PR) if we need it later.

* [Automated] Codemod invariant -> Error

This commit contains only automated changes:

npx jscodeshift -t scripts/codemod-invariant.js packages --ignore-pattern="node_modules/**/*"
yarn linc --fix
yarn prettier

I will do any manual touch ups in separate commits so they're easier
to review.

* Remove temporary codemod script

This reverts the codemod script and ESLint config I added temporarily
in order to perform the invariant codemod.

* Manual touch ups

A few manual changes I made after the codemod ran.

* Enable error code transform per package

Currently we're not consistent about which packages should have their
errors minified in production and which ones should.

This adds a field to the bundle configuration to control whether to
apply the transform. We should decide what the criteria is going
forward. I think it's probably a good idea to minify any package that
gets sent over the network. So yes to modules that run in the browser,
and no to modules that run on the server and during development only.
---
 .eslintrc.js                                  |  35 ++++
 .../src/createSubscription.js                 |  11 +-
 packages/jest-react/src/JestReact.js          |  12 +-
 packages/react-art/src/ReactARTHostConfig.js  |  34 ++--
 packages/react-cache/src/ReactCacheOld.js     |   2 +
 .../react-client/src/ReactFlightClient.js     |   1 +
 .../src/ReactFlightClientHostConfig.js        |   6 +-
 .../ReactFlightClientHostConfigNoStream.js    |   3 +
 .../react-debug-tools/src/ReactDebugHooks.js  |   3 +-
 packages/react-dom/src/client/ReactDOM.js     |   9 +-
 .../src/client/ReactDOMComponentTree.js       |   3 +-
 .../src/client/ReactDOMEventHandle.js         |  26 +--
 .../react-dom/src/client/ReactDOMInput.js     |  13 +-
 .../react-dom/src/client/ReactDOMLegacy.js    |  42 ++---
 packages/react-dom/src/client/ReactDOMRoot.js |  19 ++-
 .../react-dom/src/client/ReactDOMTextarea.js  |  29 ++--
 .../src/events/ReactDOMControlledComponent.js |  14 +-
 packages/react-dom/src/events/getListener.js  |  14 +-
 .../src/server/ReactDOMLegacyServerBrowser.js |  24 +--
 .../src/server/ReactDOMServerFormatConfig.js  | 149 ++++++++++--------
 ...ctDOMServerLegacyPartialRendererBrowser.js |   7 +-
 .../src/server/ReactPartialRenderer.js        | 104 ++++++------
 .../src/server/ReactPartialRendererHooks.js   |  41 ++---
 .../src/server/ReactThreadIDAllocator.js      |  19 +--
 .../react-dom/src/shared/assertValidProps.js  |  55 ++++---
 packages/react-dom/src/shared/sanitizeURL.js  |  10 +-
 .../src/test-utils/ReactTestUtils.js          |  61 +++----
 packages/react-fetch/src/ReactFetchBrowser.js |   1 +
 packages/react-fetch/src/ReactFetchNode.js    |   1 +
 .../src/ReactFabricComponentTree.js           |  11 +-
 .../src/ReactNativeBridgeEventPlugin.js       |  14 +-
 .../src/ReactNativeComponentTree.js           |   8 +-
 .../src/ReactNativeFiberInspector.js          |   7 +-
 .../src/ReactNativeGetListener.js             |  14 +-
 .../src/ReactNativeHostConfig.js              |  16 +-
 .../InitializeNativeFabricUIManager.js        |  87 +++++-----
 .../ReactNativeViewConfigRegistry.js          |  57 +++----
 .../Libraries/ReactPrivate/UIManager.js       | 117 +++++++-------
 .../src/legacy-events/EventBatching.js        |  14 +-
 .../src/legacy-events/EventPluginRegistry.js  |  96 +++++------
 .../src/legacy-events/EventPluginUtils.js     |  10 +-
 .../src/legacy-events/ResponderEventPlugin.js |  14 +-
 .../ResponderTouchHistoryStore.js             |   7 +-
 .../src/legacy-events/SyntheticEvent.js       |  13 +-
 .../src/legacy-events/accumulate.js           |  10 +-
 .../src/legacy-events/accumulateInto.js       |  10 +-
 .../server/ReactNativeServerFormatConfig.js   |  15 +-
 packages/react-pg/src/ReactPostgres.js        |   7 +-
 .../src/ReactChildFiber.new.js                | 118 ++++++++------
 .../src/ReactChildFiber.old.js                | 118 ++++++++------
 .../react-reconciler/src/ReactFiber.new.js    |  11 +-
 .../react-reconciler/src/ReactFiber.old.js    |  11 +-
 .../src/ReactFiberBeginWork.new.js            |  37 +++--
 .../src/ReactFiberBeginWork.old.js            |  37 +++--
 .../src/ReactFiberClassComponent.new.js       |   4 +-
 .../src/ReactFiberClassComponent.old.js       |   4 +-
 .../src/ReactFiberCommitWork.new.js           |  46 +++---
 .../src/ReactFiberCommitWork.old.js           |  46 +++---
 .../src/ReactFiberCompleteWork.new.js         |  44 +++---
 .../src/ReactFiberCompleteWork.old.js         |  44 +++---
 .../src/ReactFiberContext.new.js              |  51 +++---
 .../src/ReactFiberContext.old.js              |  51 +++---
 .../src/ReactFiberHooks.new.js                | 100 ++++++------
 .../src/ReactFiberHooks.old.js                | 100 ++++++------
 .../src/ReactFiberHostConfig.js               |   6 +-
 .../ReactFiberHostConfigWithNoHydration.js    |   5 +-
 .../ReactFiberHostConfigWithNoMicrotasks.js   |   5 +-
 .../src/ReactFiberHostConfigWithNoMutation.js |   5 +-
 .../ReactFiberHostConfigWithNoPersistence.js  |   5 +-
 .../src/ReactFiberHostConfigWithNoScopes.js   |   5 +-
 ...ReactFiberHostConfigWithNoTestSelectors.js |   5 +-
 .../src/ReactFiberHostContext.new.js          |  14 +-
 .../src/ReactFiberHostContext.old.js          |  14 +-
 .../src/ReactFiberHotReloading.new.js         |   2 +
 .../src/ReactFiberHotReloading.old.js         |   2 +
 .../src/ReactFiberHydrationContext.new.js     |  39 ++---
 .../src/ReactFiberHydrationContext.old.js     |  39 ++---
 .../src/ReactFiberNewContext.new.js           |  47 +++---
 .../src/ReactFiberNewContext.old.js           |  47 +++---
 .../src/ReactFiberReconciler.new.js           |  19 +--
 .../src/ReactFiberReconciler.old.js           |  19 +--
 .../src/ReactFiberThrow.new.js                |   3 +-
 .../src/ReactFiberThrow.old.js                |   3 +-
 .../src/ReactFiberTreeReflection.js           |  53 ++++---
 .../src/ReactFiberUnwindWork.new.js           |  27 ++--
 .../src/ReactFiberUnwindWork.old.js           |  27 ++--
 .../src/ReactFiberWorkLoop.new.js             |  54 +++----
 .../src/ReactFiberWorkLoop.old.js             |  54 +++----
 .../src/ReactTestSelectors.js                 |  40 ++---
 .../src/ReactUpdateQueue.new.js               |  15 +-
 .../src/ReactUpdateQueue.old.js               |  15 +-
 .../src/forks/ReactFiberErrorDialog.native.js |  11 +-
 .../src/forks/ReactFiberErrorDialog.www.js    |  12 +-
 packages/react-server/src/ReactFizzContext.js |  13 +-
 packages/react-server/src/ReactFizzHooks.js   |  43 ++---
 .../react-server/src/ReactFizzNewContext.js   |  54 ++++---
 packages/react-server/src/ReactFizzServer.js  |  62 ++++----
 .../react-server/src/ReactFlightServer.js     | 106 +++++++------
 .../src/ReactFlightServerConfig.js            |   6 +-
 .../src/ReactServerFormatConfig.js            |   6 +-
 .../src/ReactServerStreamConfig.js            |   6 +-
 .../src/ReactSuspenseTestUtils.js             |   3 +-
 .../src/ReactTestRenderer.js                  |  39 +++--
 packages/react/src/ReactAct.js                |   6 +-
 packages/react/src/ReactBaseClasses.js        |  20 +--
 packages/react/src/ReactChildren.js           |  26 +--
 packages/react/src/ReactElement.js            |  11 +-
 packages/react/unstable-shared-subset.js      |   1 +
 packages/scheduler/src/forks/SchedulerMock.js |   1 +
 packages/shared/ReactErrorUtils.js            |   4 +-
 packages/shared/checkPropTypes.js             |   1 +
 .../forks/invokeGuardedCallbackImpl.www.js    |  12 +-
 packages/shared/invariant.js                  |   1 +
 packages/shared/invokeGuardedCallbackImpl.js  |  26 +--
 .../transform-error-messages.js.snap          |  35 ++++
 .../__tests__/transform-error-messages.js     |  57 +++++++
 scripts/error-codes/codes.json                |  13 +-
 scripts/error-codes/extract-errors.js         |   4 +-
 .../error-codes/transform-error-messages.js   | 106 +++++++++++--
 .../prod-error-codes-test.internal.js         |  77 +++++++++
 scripts/eslint-rules/index.js                 |   1 +
 scripts/eslint-rules/prod-error-codes.js      |  79 ++++++++++
 scripts/print-warnings/print-warnings.js      |   4 +-
 scripts/rollup/build.js                       |  17 +-
 scripts/rollup/bundles.js                     |  63 ++++++++
 scripts/shared/__tests__/evalToString-test.js |   4 +-
 scripts/shared/evalToString.js                |  40 ++++-
 yarn.lock                                     |   1 -
 128 files changed, 2118 insertions(+), 1519 deletions(-)
 create mode 100644 scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
 create mode 100644 scripts/eslint-rules/prod-error-codes.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 23d5ab76c32bc..d464e83b453aa 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -127,6 +127,41 @@ module.exports = {
   },
 
   overrides: [
+    {
+      // By default, anything error message that appears the packages directory
+      // must have a corresponding error code. The exceptions are defined
+      // in the next override entry.
+      files: ['packages/**/*.js'],
+      rules: {
+        'react-internal/prod-error-codes': ERROR,
+      },
+    },
+    {
+      // These are files where it's OK to have unminified error messages. These
+      // are environments where bundle size isn't a concern, like tests
+      // or Node.
+      files: [
+        'packages/react-dom/src/test-utils/**/*.js',
+        'packages/react-devtools-shared/**/*.js',
+        'packages/react-noop-renderer/**/*.js',
+        'packages/react-pg/**/*.js',
+        'packages/react-fs/**/*.js',
+        'packages/react-refresh/**/*.js',
+        'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-test-renderer/**/*.js',
+        'packages/react-debug-tools/**/*.js',
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-scheduling-profiler/**/*.js',
+        'packages/react-native-renderer/**/*.js',
+        'packages/eslint-plugin-react-hooks/**/*.js',
+        'packages/jest-react/**/*.js',
+        'packages/**/__tests__/*.js',
+        'packages/**/npm/*.js',
+      ],
+      rules: {
+        'react-internal/prod-error-codes': OFF,
+      },
+    },
     {
       // We apply these settings to files that we ship through npm.
       // They must be ES5.
diff --git a/packages/create-subscription/src/createSubscription.js b/packages/create-subscription/src/createSubscription.js
index 30d7b669f65fe..329a238fc238a 100644
--- a/packages/create-subscription/src/createSubscription.js
+++ b/packages/create-subscription/src/createSubscription.js
@@ -8,7 +8,6 @@
  */
 
 import * as React from 'react';
-import invariant from 'shared/invariant';
 
 type Unsubscribe = () => void;
 
@@ -128,10 +127,12 @@ export function createSubscription<Property, Value>(
 
         // Store the unsubscribe method for later (in case the subscribable prop changes).
         const unsubscribe = subscribe(source, callback);
-        invariant(
-          typeof unsubscribe === 'function',
-          'A subscription must return an unsubscribe function.',
-        );
+
+        if (typeof unsubscribe !== 'function') {
+          throw new Error(
+            'A subscription must return an unsubscribe function.',
+          );
+        }
 
         // It's safe to store unsubscribe on the instance because
         // We only read or write that property during the "commit" phase.
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
index b4688f1ff980a..92f7e7cdb192d 100644
--- a/packages/jest-react/src/JestReact.js
+++ b/packages/jest-react/src/JestReact.js
@@ -7,7 +7,6 @@
 
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 export {act} from './internalAct';
@@ -31,11 +30,12 @@ function captureAssertion(fn) {
 function assertYieldsWereCleared(root) {
   const Scheduler = root._Scheduler;
   const actualYields = Scheduler.unstable_clearYields();
-  invariant(
-    actualYields.length === 0,
-    'Log of yielded values is not empty. ' +
-      'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
-  );
+  if (actualYields.length !== 0) {
+    throw new Error(
+      'Log of yielded values is not empty. ' +
+        'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
+    );
+  }
 }
 
 export function unstable_toMatchRenderedOutput(root, expectedJSX) {
diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index f9971b5bb0360..ec702bf9a70d4 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -7,7 +7,6 @@
 
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
-import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
@@ -248,8 +247,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 export function appendInitialChild(parentInstance, child) {
   if (typeof child === 'string') {
     // Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>)
-    invariant(false, 'Text children should already be flattened.');
-    return;
+    throw new Error('Text children should already be flattened.');
   }
 
   child.inject(parentInstance);
@@ -282,7 +280,9 @@ export function createInstance(type, props, internalInstanceHandle) {
       break;
   }
 
-  invariant(instance, 'ReactART does not support the type "%s"', type);
+  if (!instance) {
+    throw new Error(`ReactART does not support the type "${type}"`);
+  }
 
   instance._applyProps(instance, props);
 
@@ -367,18 +367,18 @@ export function appendChildToContainer(parentInstance, child) {
 }
 
 export function insertBefore(parentInstance, child, beforeChild) {
-  invariant(
-    child !== beforeChild,
-    'ReactART: Can not insert node before itself',
-  );
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
   child.injectBefore(beforeChild);
 }
 
 export function insertInContainerBefore(parentInstance, child, beforeChild) {
-  invariant(
-    child !== beforeChild,
-    'ReactART: Can not insert node before itself',
-  );
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
   child.injectBefore(beforeChild);
 }
 
@@ -433,25 +433,25 @@ export function clearContainer(container) {
 }
 
 export function getInstanceFromNode(node) {
-  throw new Error('Not yet implemented.');
+  throw new Error('Not implemented.');
 }
 
 export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function makeOpaqueHydratingObject(
   attemptToReadValue: () => void,
 ): OpaqueIDType {
-  throw new Error('Not yet implemented.');
+  throw new Error('Not implemented.');
 }
 
 export function makeClientId(): OpaqueIDType {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
index 77768dfcf2163..f8b33434b7c76 100644
--- a/packages/react-cache/src/ReactCacheOld.js
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -49,6 +49,8 @@ const ReactCurrentDispatcher =
 function readContext(Context) {
   const dispatcher = ReactCurrentDispatcher.current;
   if (dispatcher === null) {
+    // This wasn't being minified but we're going to retire this package anyway.
+    // eslint-disable-next-line react-internal/prod-error-codes
     throw new Error(
       'react-cache: read and preload may only be called from within a ' +
         "component's render. They are not supported in event handlers or " +
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 983e3edc93802..9d5ac3680a8a0 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -397,6 +397,7 @@ export function resolveError(
   message: string,
   stack: string,
 ): void {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const error = new Error(message);
   error.stack = stack;
   const chunks = response._chunks;
diff --git a/packages/react-client/src/ReactFlightClientHostConfig.js b/packages/react-client/src/ReactFlightClientHostConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-client/src/ReactFlightClientHostConfig.js
+++ b/packages/react-client/src/ReactFlightClientHostConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-client/src/ReactFlightClientHostConfigNoStream.js b/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
index 17f29a9f26c50..8c453832bd3b2 100644
--- a/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
+++ b/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
@@ -12,6 +12,7 @@ export type StringDecoder = void;
 export const supportsBinaryStreams = false;
 
 export function createStringDecoder(): void {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
 
@@ -19,6 +20,7 @@ export function readPartialStringChunk(
   decoder: StringDecoder,
   buffer: Uint8Array,
 ): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
 
@@ -26,5 +28,6 @@ export function readFinalStringChunk(
   decoder: StringDecoder,
   buffer: Uint8Array,
 ): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index aa4d2d60fdf63..957838ed58a9c 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -23,7 +23,6 @@ import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
-import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
@@ -107,7 +106,7 @@ function nextHook(): null | Hook {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index a1bb39c929d43..8e37995cb7364 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -39,7 +39,6 @@ import {
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 import {
   warnUnstableRenderSubtreeIntoContainer,
   enableNewReconciler,
@@ -108,10 +107,10 @@ function createPortal(
   container: Container,
   key: ?string = null,
 ): React$Portal {
-  invariant(
-    isValidContainer(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   // TODO: pass ReactDOM portal implementation as third argument
   // $FlowFixMe The Flow type is opaque but there's no way to actually create it.
   return createPortalImpl(children, container, null, key);
diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js
index 2afe66035f364..58e5d72acd581 100644
--- a/packages/react-dom/src/client/ReactDOMComponentTree.js
+++ b/packages/react-dom/src/client/ReactDOMComponentTree.js
@@ -30,7 +30,6 @@ import {
 
 import {getParentSuspenseInstance} from './ReactDOMHostConfig';
 
-import invariant from 'shared/invariant';
 import {enableScopeAPI} from 'shared/ReactFeatureFlags';
 
 const randomKey = Math.random()
@@ -190,7 +189,7 @@ export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
 
   // Without this first invariant, passing a non-DOM-component triggers the next
   // invariant for a missing parent, which is super confusing.
-  invariant(false, 'getNodeFromInstance: Invalid argument.');
+  throw new Error('getNodeFromInstance: Invalid argument.');
 }
 
 export function getFiberCurrentPropsFromNode(
diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
index 80834c32834d2..0fd0cd1599780 100644
--- a/packages/react-dom/src/client/ReactDOMEventHandle.js
+++ b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -28,7 +28,6 @@ import {
   enableScopeAPI,
   enableCreateEventHandleAPI,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 
 type EventHandleOptions = {|
   capture?: boolean,
@@ -73,8 +72,7 @@ function registerReactDOMEvent(
       eventTarget,
     );
   } else {
-    invariant(
-      false,
+    throw new Error(
       'ReactDOM.createEventHandle: setter called on an invalid ' +
         'target. Provide a valid EventTarget or an element managed by React.',
     );
@@ -97,11 +95,11 @@ export function createEventHandle(
     // Unfortunately, the downside of this invariant is that *removing* a native
     // event from the list of known events has now become a breaking change for
     // any code relying on the createEventHandle API.
-    invariant(
-      allNativeEvents.has(domEventName),
-      'Cannot call unstable_createEventHandle with "%s", as it is not an event known to React.',
-      domEventName,
-    );
+    if (!allNativeEvents.has(domEventName)) {
+      throw new Error(
+        `Cannot call unstable_createEventHandle with "${domEventName}", as it is not an event known to React.`,
+      );
+    }
 
     let isCapturePhaseListener = false;
     if (options != null) {
@@ -115,11 +113,13 @@ export function createEventHandle(
       target: EventTarget | ReactScopeInstance,
       callback: (SyntheticEvent<EventTarget>) => void,
     ) => {
-      invariant(
-        typeof callback === 'function',
-        'ReactDOM.createEventHandle: setter called with an invalid ' +
-          'callback. The callback must be a function.',
-      );
+      if (typeof callback !== 'function') {
+        throw new Error(
+          'ReactDOM.createEventHandle: setter called with an invalid ' +
+            'callback. The callback must be a function.',
+        );
+      }
+
       if (!doesTargetHaveEventHandle(target, eventHandle)) {
         addEventHandleToTarget(target, eventHandle);
         registerReactDOMEvent(target, domEventName, isCapturePhaseListener);
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 4fabc1fb9ada9..8f5098405b576 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -9,7 +9,6 @@
 
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
-import invariant from 'shared/invariant';
 
 import {setValueForProperty} from './DOMPropertyOperations';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
@@ -383,11 +382,13 @@ function updateNamedCousins(rootNode, props) {
       // That's probably okay; we don't support it just as we don't support
       // mixing React radio buttons with non-React ones.
       const otherProps = getFiberCurrentPropsFromNode(otherNode);
-      invariant(
-        otherProps,
-        'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
-          'same `name` is not supported.',
-      );
+
+      if (!otherProps) {
+        throw new Error(
+          'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
+            'same `name` is not supported.',
+        );
+      }
 
       // We need update the tracked value on the named cousin since the value
       // was changed but the input saw no event or value set
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 70dcddc502763..ac12f18bee509 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -36,7 +36,6 @@ import {
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {has as hasInstance} from 'shared/ReactInstanceMap';
 
@@ -238,10 +237,10 @@ export function hydrate(
     );
   }
 
-  invariant(
-    isValidContainerLegacy(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   if (__DEV__) {
     const isModernRoot =
       isContainerMarkedAsRoot(container) &&
@@ -278,10 +277,10 @@ export function render(
     );
   }
 
-  invariant(
-    isValidContainerLegacy(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   if (__DEV__) {
     const isModernRoot =
       isContainerMarkedAsRoot(container) &&
@@ -309,14 +308,14 @@ export function unstable_renderSubtreeIntoContainer(
   containerNode: Container,
   callback: ?Function,
 ) {
-  invariant(
-    isValidContainerLegacy(containerNode),
-    'Target container is not a DOM element.',
-  );
-  invariant(
-    parentComponent != null && hasInstance(parentComponent),
-    'parentComponent must be a valid React Component',
-  );
+  if (!isValidContainerLegacy(containerNode)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
+  if (parentComponent == null || !hasInstance(parentComponent)) {
+    throw new Error('parentComponent must be a valid React Component');
+  }
+
   return legacyRenderSubtreeIntoContainer(
     parentComponent,
     element,
@@ -327,10 +326,11 @@ export function unstable_renderSubtreeIntoContainer(
 }
 
 export function unmountComponentAtNode(container: Container) {
-  invariant(
-    isValidContainerLegacy(container),
-    'unmountComponentAtNode(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error(
+      'unmountComponentAtNode(...): Target container is not a DOM element.',
+    );
+  }
 
   if (__DEV__) {
     const isModernRoot =
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 1a027d9a1e6a9..38f2100cb5418 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -65,7 +65,6 @@ import {
   flushSync,
   isAlreadyRendering,
 } from 'react-reconciler/src/ReactFiberReconciler';
-import invariant from 'shared/invariant';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
@@ -76,7 +75,7 @@ function ReactDOMRoot(internalRoot: FiberRoot) {
 ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   const root = this._internalRoot;
   if (root === null) {
-    invariant(false, 'Cannot update an unmounted root.');
+    throw new Error('Cannot update an unmounted root.');
   }
 
   if (__DEV__) {
@@ -138,10 +137,10 @@ export function createRoot(
   container: Container,
   options?: CreateRootOptions,
 ): RootType {
-  invariant(
-    isValidContainerLegacy(container),
-    'createRoot(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('createRoot(...): Target container is not a DOM element.');
+  }
+
   warnIfReactDOMContainerInDEV(container);
 
   // TODO: Delete these options
@@ -195,10 +194,10 @@ export function hydrateRoot(
   initialChildren: ReactNodeList,
   options?: HydrateRootOptions,
 ): RootType {
-  invariant(
-    isValidContainer(container),
-    'hydrateRoot(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainer(container)) {
+    throw new Error('hydrateRoot(...): Target container is not a DOM element.');
+  }
+
   warnIfReactDOMContainerInDEV(container);
 
   // For now we reuse the whole bag of options since they contain
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 6e8aed5cc43cd..6834b16e4e97c 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
@@ -40,10 +39,12 @@ type TextAreaWithWrapperState = HTMLTextAreaElement & {|
 
 export function getHostProps(element: Element, props: Object) {
   const node = ((element: any): TextAreaWithWrapperState);
-  invariant(
-    props.dangerouslySetInnerHTML == null,
-    '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
-  );
+
+  if (props.dangerouslySetInnerHTML != null) {
+    throw new Error(
+      '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+    );
+  }
 
   // Always set children to the same thing. In IE9, the selection range will
   // get reset if `textContent` is mutated.  We could add a check in setTextContent
@@ -96,15 +97,17 @@ export function initWrapperState(element: Element, props: Object) {
         );
       }
       if (!disableTextareaChildren) {
-        invariant(
-          defaultValue == null,
-          'If you supply `defaultValue` on a <textarea>, do not pass children.',
-        );
-        if (isArray(children)) {
-          invariant(
-            children.length <= 1,
-            '<textarea> can only have at most one child.',
+        if (defaultValue != null) {
+          throw new Error(
+            'If you supply `defaultValue` on a <textarea>, do not pass children.',
           );
+        }
+
+        if (isArray(children)) {
+          if (children.length > 1) {
+            throw new Error('<textarea> can only have at most one child.');
+          }
+
           children = children[0];
         }
 
diff --git a/packages/react-dom/src/events/ReactDOMControlledComponent.js b/packages/react-dom/src/events/ReactDOMControlledComponent.js
index 5b4dc59232902..59f9f5262798a 100644
--- a/packages/react-dom/src/events/ReactDOMControlledComponent.js
+++ b/packages/react-dom/src/events/ReactDOMControlledComponent.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {
   getInstanceFromNode,
   getFiberCurrentPropsFromNode,
@@ -27,11 +26,14 @@ function restoreStateOfTarget(target: Node) {
     // Unmounted
     return;
   }
-  invariant(
-    typeof restoreImpl === 'function',
-    'setRestoreImplementation() needs to be called to handle a target for controlled ' +
-      'events. This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (typeof restoreImpl !== 'function') {
+    throw new Error(
+      'setRestoreImplementation() needs to be called to handle a target for controlled ' +
+        'events. This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   const stateNode = internalInstance.stateNode;
   // Guard against Fiber being unmounted.
   if (stateNode) {
diff --git a/packages/react-dom/src/events/getListener.js b/packages/react-dom/src/events/getListener.js
index 71e498bbf6e7d..0b92c3898ff3e 100644
--- a/packages/react-dom/src/events/getListener.js
+++ b/packages/react-dom/src/events/getListener.js
@@ -9,7 +9,6 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Props} from '../client/ReactDOMHostConfig';
 
-import invariant from 'shared/invariant';
 import {getFiberCurrentPropsFromNode} from '../client/ReactDOMComponentTree';
 
 function isInteractive(tag: string): boolean {
@@ -67,11 +66,12 @@ export default function getListener(
   if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
     return null;
   }
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 8982d4d9341bd..338c77de436d7 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -8,7 +8,6 @@
  */
 
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
@@ -77,13 +76,16 @@ function renderToStringImpl(
   if (didFatal) {
     throw fatalError;
   }
-  invariant(
-    readyToStream,
-    'A React component suspended while rendering, but no fallback UI was specified.\n' +
-      '\n' +
-      'Add a <Suspense fallback=...> component higher in the tree to ' +
-      'provide a loading indicator or placeholder to display.',
-  );
+
+  if (!readyToStream) {
+    throw new Error(
+      'A React component suspended while rendering, but no fallback UI was specified.\n' +
+        '\n' +
+        'Add a <Suspense fallback=...> component higher in the tree to ' +
+        'provide a loading indicator or placeholder to display.',
+    );
+  }
+
   return result;
 }
 
@@ -102,16 +104,14 @@ function renderToStaticMarkup(
 }
 
 function renderToNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToString() instead.',
   );
 }
 
 function renderToStaticNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
   );
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 954cc1ef689f5..0c4b155bb881d 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -49,7 +49,6 @@ import warnValidStyle from '../shared/warnValidStyle';
 
 import escapeTextForBrowser from './escapeTextForBrowser';
 import hyphenateStyleName from '../shared/hyphenateStyleName';
-import invariant from 'shared/invariant';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
 import isArray from 'shared/isArray';
@@ -192,10 +191,12 @@ export type OpaqueIDType = string;
 export function makeServerID(
   responseState: null | ResponseState,
 ): OpaqueIDType {
-  invariant(
-    responseState !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-  );
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
+  }
+
   // TODO: This is not deterministic since it's created during render.
   return (
     responseState.opaqueIdentifierPrefix +
@@ -244,12 +245,13 @@ function pushStyle(
   responseState: ResponseState,
   style: Object,
 ): void {
-  invariant(
-    typeof style === 'object',
-    'The `style` prop expects a mapping from style properties to values, ' +
-      "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-      'using JSX.',
-  );
+  if (typeof style !== 'object') {
+    throw new Error(
+      'The `style` prop expects a mapping from style properties to values, ' +
+        "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+        'using JSX.',
+    );
+  }
 
   let isFirst = true;
   for (const styleName in style) {
@@ -498,17 +500,20 @@ function pushInnerHTML(
   children,
 ) {
   if (innerHTML != null) {
-    invariant(
-      children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
+    if (children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
 
-    invariant(
-      typeof innerHTML === 'object' && '__html' in innerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
     const html = innerHTML.__html;
     if (html !== null && html !== undefined) {
       if (__DEV__) {
@@ -799,11 +804,9 @@ function pushInput(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
-            '%s is a self-closing tag and must neither have `children` nor ' +
+          throw new Error(
+            `${'input'} is a self-closing tag and must neither have \`children\` nor ` +
               'use `dangerouslySetInnerHTML`.',
-            'input',
           );
         // eslint-disable-next-line-no-fallthrough
         case 'defaultChecked':
@@ -885,8 +888,7 @@ function pushStartTextArea(
           defaultValue = propValue;
           break;
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
+          throw new Error(
             '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
           );
         // eslint-disable-next-line-no-fallthrough
@@ -910,15 +912,18 @@ function pushStartTextArea(
           'children on <textarea>.',
       );
     }
-    invariant(
-      value == null,
-      'If you supply `defaultValue` on a <textarea>, do not pass children.',
-    );
-    if (isArray(children)) {
-      invariant(
-        children.length <= 1,
-        '<textarea> can only have at most one child.',
+
+    if (value != null) {
+      throw new Error(
+        'If you supply `defaultValue` on a <textarea>, do not pass children.',
       );
+    }
+
+    if (isArray(children)) {
+      if (children.length > 1) {
+        throw new Error('<textarea> can only have at most one child.');
+      }
+
       // TODO: remove the coercion and the DEV check below because it will
       // always be overwritten by the coercion several lines below it. #22309
       if (__DEV__) {
@@ -966,11 +971,9 @@ function pushSelfClosing(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
-            '%s is a self-closing tag and must neither have `children` nor ' +
+          throw new Error(
+            `${tag} is a self-closing tag and must neither have \`children\` nor ` +
               'use `dangerouslySetInnerHTML`.',
-            tag,
           );
         // eslint-disable-next-line-no-fallthrough
         default:
@@ -1000,8 +1003,7 @@ function pushStartMenuItem(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
+          throw new Error(
             'menuitems cannot have `children` nor `dangerouslySetInnerHTML`.',
           );
         // eslint-disable-next-line-no-fallthrough
@@ -1158,17 +1160,20 @@ function pushStartPreformattedElement(
   // TODO: This doesn't deal with the case where the child is an array
   // or component that returns a string.
   if (innerHTML != null) {
-    invariant(
-      children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
+    if (children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
 
-    invariant(
-      typeof innerHTML === 'object' && '__html' in innerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
     const html = innerHTML.__html;
     if (html !== null && html !== undefined) {
       if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
@@ -1195,7 +1200,10 @@ const validatedTagCache = new Map();
 function startChunkForTag(tag: string): PrecomputedChunk {
   let tagStartChunk = validatedTagCache.get(tag);
   if (tagStartChunk === undefined) {
-    invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);
+    if (!VALID_TAG_REGEX.test(tag)) {
+      throw new Error(`Invalid tag: ${tag}`);
+    }
+
     tagStartChunk = stringToPrecomputedChunk('<' + tag);
     validatedTagCache.set(tag, tagStartChunk);
   }
@@ -1405,10 +1413,13 @@ export function writeStartPendingSuspenseBoundary(
   id: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, startPendingSuspenseBoundary1);
-  invariant(
-    id !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (id === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   writeChunk(destination, id);
   return writeChunk(destination, startPendingSuspenseBoundary2);
 }
@@ -1528,7 +1539,7 @@ export function writeStartSegment(
       return writeChunk(destination, startSegmentColGroup2);
     }
     default: {
-      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+      throw new Error('Unknown insertion mode. This is a bug in React.');
     }
   }
 }
@@ -1560,7 +1571,7 @@ export function writeEndSegment(
       return writeChunk(destination, endSegmentColGroup);
     }
     default: {
-      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+      throw new Error('Unknown insertion mode. This is a bug in React.');
     }
   }
 }
@@ -1729,10 +1740,13 @@ export function writeCompletedBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeBoundaryScript1Partial);
   }
-  invariant(
-    boundaryID !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (boundaryID === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, boundaryID);
   writeChunk(destination, completeBoundaryScript2);
@@ -1760,10 +1774,13 @@ export function writeClientRenderBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, clientRenderScript1Partial);
   }
-  invariant(
-    boundaryID !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (boundaryID === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   writeChunk(destination, boundaryID);
   return writeChunk(destination, clientRenderScript2);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
index 4424040496b99..f810d7472b013 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
@@ -6,21 +6,18 @@
  */
 
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 
 import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';
 
 function renderToNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToString() instead.',
   );
 }
 
 function renderToStaticNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
   );
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 56231cf5a0187..479a828a46e1f 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -13,7 +13,6 @@ import type {LazyComponent} from 'react/src/ReactLazy';
 import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
@@ -213,7 +212,10 @@ const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
 const validatedTagCache = {};
 function validateDangerousTag(tag) {
   if (!validatedTagCache.hasOwnProperty(tag)) {
-    invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);
+    if (!VALID_TAG_REGEX.test(tag)) {
+      throw new Error(`Invalid tag: ${tag}`);
+    }
+
     validatedTagCache[tag] = true;
   }
 }
@@ -729,12 +731,12 @@ function resolve(
         if (typeof childContextTypes === 'object') {
           childContext = inst.getChildContext();
           for (const contextKey in childContext) {
-            invariant(
-              contextKey in childContextTypes,
-              '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-              getComponentNameFromType(Component) || 'Unknown',
-              contextKey,
-            );
+            if (!(contextKey in childContextTypes)) {
+              throw new Error(
+                `${getComponentNameFromType(Component) ||
+                  'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+              );
+            }
           }
         } else {
           if (__DEV__) {
@@ -944,11 +946,14 @@ class ReactDOMServerRenderer {
               suspended = false;
               // If rendering was suspended at this boundary, render the fallbackFrame
               const fallbackFrame = frame.fallbackFrame;
-              invariant(
-                fallbackFrame,
-                'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
-                  'This is a bug in React. Please file an issue.',
-              );
+
+              if (!fallbackFrame) {
+                throw new Error(
+                  'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
+                    'This is a bug in React. Please file an issue.',
+                );
+              }
+
               this.stack.push(fallbackFrame);
               out[this.suspenseDepth] += '<!--$!-->';
               // Skip flushing output since we're switching to the fallback
@@ -975,17 +980,19 @@ class ReactDOMServerRenderer {
         } catch (err) {
           if (err != null && typeof err.then === 'function') {
             if (enableSuspenseServerRenderer) {
-              invariant(
-                this.suspenseDepth > 0,
-                // TODO: include component name. This is a bit tricky with current factoring.
-                'A React component suspended while rendering, but no fallback UI was specified.\n' +
-                  '\n' +
-                  'Add a <Suspense fallback=...> component higher in the tree to ' +
-                  'provide a loading indicator or placeholder to display.',
-              );
+              if (this.suspenseDepth <= 0) {
+                throw new Error(
+                  // TODO: include component name. This is a bit tricky with current factoring.
+                  'A React component suspended while rendering, but no fallback UI was specified.\n' +
+                    '\n' +
+                    'Add a <Suspense fallback=...> component higher in the tree to ' +
+                    'provide a loading indicator or placeholder to display.',
+                );
+              }
+
               suspended = true;
             } else {
-              invariant(false, 'ReactDOMServer does not yet support Suspense.');
+              throw new Error('ReactDOMServer does not yet support Suspense.');
             }
           } else {
             throw err;
@@ -1035,17 +1042,18 @@ class ReactDOMServerRenderer {
         if (nextChild != null && nextChild.$$typeof != null) {
           // Catch unexpected special types early.
           const $$typeof = nextChild.$$typeof;
-          invariant(
-            $$typeof !== REACT_PORTAL_TYPE,
-            'Portals are not currently supported by the server renderer. ' +
-              'Render them conditionally so that they only appear on the client render.',
-          );
+
+          if ($$typeof === REACT_PORTAL_TYPE) {
+            throw new Error(
+              'Portals are not currently supported by the server renderer. ' +
+                'Render them conditionally so that they only appear on the client render.',
+            );
+          }
+
           // Catch-all to prevent an infinite loop if React.Children.toArray() supports some new type.
-          invariant(
-            false,
-            'Unknown element-like object type: %s. This is likely a bug in React. ' +
+          throw new Error(
+            `Unknown element-like object type: ${($$typeof: any).toString()}. This is likely a bug in React. ` +
               'Please file an issue.',
-            ($$typeof: any).toString(),
           );
         }
         const nextChildren = toArray(nextChild);
@@ -1134,7 +1142,7 @@ class ReactDOMServerRenderer {
             this.suspenseDepth++;
             return '<!--$-->';
           } else {
-            invariant(false, 'ReactDOMServer does not yet support Suspense.');
+            throw new Error('ReactDOMServer does not yet support Suspense.');
           }
         }
         // eslint-disable-next-line-no-fallthrough
@@ -1157,8 +1165,7 @@ class ReactDOMServerRenderer {
             this.stack.push(frame);
             return '';
           }
-          invariant(
-            false,
+          throw new Error(
             'ReactDOMServer does not yet support scope components.',
           );
         }
@@ -1338,13 +1345,13 @@ class ReactDOMServerRenderer {
           info += '\n\nCheck the render method of `' + ownerName + '`.';
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'Element type is invalid: expected a string (for built-in ' +
           'components) or a class/function (for composite components) ' +
-          'but got: %s.%s',
-        elementType == null ? elementType : typeof elementType,
-        info,
+          `but got: ${
+            elementType == null ? elementType : typeof elementType
+          }.${info}`,
       );
     }
   }
@@ -1464,15 +1471,18 @@ class ReactDOMServerRenderer {
                 'children on <textarea>.',
             );
           }
-          invariant(
-            defaultValue == null,
-            'If you supply `defaultValue` on a <textarea>, do not pass children.',
-          );
-          if (isArray(textareaChildren)) {
-            invariant(
-              textareaChildren.length <= 1,
-              '<textarea> can only have at most one child.',
+
+          if (defaultValue != null) {
+            throw new Error(
+              'If you supply `defaultValue` on a <textarea>, do not pass children.',
             );
+          }
+
+          if (isArray(textareaChildren)) {
+            if (textareaChildren.length > 1) {
+              throw new Error('<textarea> can only have at most one child.');
+            }
+
             textareaChildren = textareaChildren[0];
           }
 
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index edc5df3dce4bd..6e2b715382a0a 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -19,7 +19,6 @@ import type PartialRenderer from './ReactPartialRenderer';
 
 import {validateContextBounds} from './ReactPartialRendererContext';
 
-import invariant from 'shared/invariant';
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -63,15 +62,17 @@ let isInHookUserCodeInDev = false;
 let currentHookNameInDev: ?string;
 
 function resolveCurrentlyRenderingComponent(): Object {
-  invariant(
-    currentlyRenderingComponent !== null,
-    '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:\n' +
-      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-      '2. You might be breaking the Rules of Hooks\n' +
-      '3. You might have more than one copy of React in the same app\n' +
-      'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-  );
+  if (currentlyRenderingComponent === null) {
+    throw new 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:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  }
+
   if (__DEV__) {
     if (isInHookUserCodeInDev) {
       console.error(
@@ -127,7 +128,7 @@ function areHookInputsEqual(
 
 function createHook(): Hook {
   if (numberOfReRenders > 0) {
-    invariant(false, 'Rendered more hooks than during the previous render');
+    throw new Error('Rendered more hooks than during the previous render');
   }
   return {
     memoizedState: null,
@@ -216,7 +217,7 @@ export function resetHooksState(): void {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
@@ -423,11 +424,12 @@ function dispatchAction<A>(
   queue: UpdateQueue<A>,
   action: A,
 ) {
-  invariant(
-    numberOfReRenders < RE_RENDER_LIMIT,
-    'Too many re-renders. React limits the number of renders to prevent ' +
-      'an infinite loop.',
-  );
+  if (numberOfReRenders >= RE_RENDER_LIMIT) {
+    throw new Error(
+      'Too many re-renders. React limits the number of renders to prevent ' +
+        'an infinite loop.',
+    );
+  }
 
   if (componentIdentity === currentlyRenderingComponent) {
     // This is a render phase update. Stash it in a lazily-created map of
@@ -484,8 +486,7 @@ function useSyncExternalStore<T>(
   getServerSnapshot?: () => T,
 ): T {
   if (getServerSnapshot === undefined) {
-    invariant(
-      false,
+    throw new Error(
       'Missing getServerSnapshot, which is required for ' +
         'server-rendered content. Will revert to client rendering.',
     );
@@ -515,7 +516,7 @@ function useOpaqueIdentifier(): OpaqueIDType {
 }
 
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function noop(): void {}
diff --git a/packages/react-dom/src/server/ReactThreadIDAllocator.js b/packages/react-dom/src/server/ReactThreadIDAllocator.js
index 5f4ab5b600006..fabf9fef98843 100644
--- a/packages/react-dom/src/server/ReactThreadIDAllocator.js
+++ b/packages/react-dom/src/server/ReactThreadIDAllocator.js
@@ -11,8 +11,6 @@
 // indices can be used to reference a tightly packed array. As opposed to being used in a Map.
 // The first allocated index is 1.
 
-import invariant from 'shared/invariant';
-
 export type ThreadID = number;
 
 let nextAvailableThreadIDs = new Uint16Array(16);
@@ -25,13 +23,16 @@ function growThreadCountAndReturnNextAvailable() {
   const oldArray = nextAvailableThreadIDs;
   const oldSize = oldArray.length;
   const newSize = oldSize * 2;
-  invariant(
-    newSize <= 0x10000,
-    'Maximum number of concurrent React renderers exceeded. ' +
-      'This can happen if you are not properly destroying the Readable provided by React. ' +
-      'Ensure that you call .destroy() on it if you no longer want to read from it, ' +
-      'and did not read to the end. If you use .pipe() this should be automatic.',
-  );
+
+  if (newSize > 0x10000) {
+    throw new Error(
+      'Maximum number of concurrent React renderers exceeded. ' +
+        'This can happen if you are not properly destroying the Readable provided by React. ' +
+        'Ensure that you call .destroy() on it if you no longer want to read from it, ' +
+        'and did not read to the end. If you use .pipe() this should be automatic.',
+    );
+  }
+
   const newArray = new Uint16Array(newSize);
   newArray.set(oldArray);
   nextAvailableThreadIDs = newArray;
diff --git a/packages/react-dom/src/shared/assertValidProps.js b/packages/react-dom/src/shared/assertValidProps.js
index 26ed1cd958175..762ebfd91ef08 100644
--- a/packages/react-dom/src/shared/assertValidProps.js
+++ b/packages/react-dom/src/shared/assertValidProps.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 import voidElementTags from './voidElementTags';
 
 const HTML = '__html';
@@ -17,25 +15,30 @@ function assertValidProps(tag: string, props: ?Object) {
   }
   // Note the use of `==` which checks for null or undefined.
   if (voidElementTags[tag]) {
-    invariant(
-      props.children == null && props.dangerouslySetInnerHTML == null,
-      '%s is a void element tag and must neither have `children` nor ' +
-        'use `dangerouslySetInnerHTML`.',
-      tag,
-    );
+    if (props.children != null || props.dangerouslySetInnerHTML != null) {
+      throw new Error(
+        `${tag} is a void element tag and must neither have \`children\` nor ` +
+          'use `dangerouslySetInnerHTML`.',
+      );
+    }
   }
   if (props.dangerouslySetInnerHTML != null) {
-    invariant(
-      props.children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
-    invariant(
-      typeof props.dangerouslySetInnerHTML === 'object' &&
-        HTML in props.dangerouslySetInnerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
+    if (props.children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (
+      typeof props.dangerouslySetInnerHTML !== 'object' ||
+      !(HTML in props.dangerouslySetInnerHTML)
+    ) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
   }
   if (__DEV__) {
     if (
@@ -51,12 +54,14 @@ function assertValidProps(tag: string, props: ?Object) {
       );
     }
   }
-  invariant(
-    props.style == null || typeof props.style === 'object',
-    'The `style` prop expects a mapping from style properties to values, ' +
-      "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-      'using JSX.',
-  );
+
+  if (props.style != null && typeof props.style !== 'object') {
+    throw new Error(
+      'The `style` prop expects a mapping from style properties to values, ' +
+        "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
+        'using JSX.',
+    );
+  }
 }
 
 export default assertValidProps;
diff --git a/packages/react-dom/src/shared/sanitizeURL.js b/packages/react-dom/src/shared/sanitizeURL.js
index 81d54478a9d76..0f3b988332890 100644
--- a/packages/react-dom/src/shared/sanitizeURL.js
+++ b/packages/react-dom/src/shared/sanitizeURL.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
 
 // A javascript: URL can contain leading C0 control or \u0020 SPACE,
@@ -26,10 +25,11 @@ let didWarn = false;
 
 function sanitizeURL(url: string) {
   if (disableJavaScriptURLs) {
-    invariant(
-      !isJavaScriptProtocol.test(url),
-      'React has blocked a javascript: URL as a security precaution.',
-    );
+    if (isJavaScriptProtocol.test(url)) {
+      throw new Error(
+        'React has blocked a javascript: URL as a security precaution.',
+      );
+    }
   } else if (__DEV__) {
     if (!didWarn && isJavaScriptProtocol.test(url)) {
       didWarn = true;
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index da0d16ade6a09..1aadc90b250a8 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -16,7 +16,6 @@ import {
   HostText,
 } from 'react-reconciler/src/ReactWorkTags';
 import {SyntheticEvent} from '../events/SyntheticEvent';
-import invariant from 'shared/invariant';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 import {
   rethrowCaughtError,
@@ -105,12 +104,10 @@ function validateClassInstance(inst, methodName) {
   } else {
     received = stringified;
   }
-  invariant(
-    false,
-    '%s(...): the first argument must be a React class instance. ' +
-      'Instead received: %s.',
-    methodName,
-    received,
+
+  throw new Error(
+    `${methodName}(...): the first argument must be a React class instance. ` +
+      `Instead received: ${received}.`,
   );
 }
 
@@ -197,11 +194,13 @@ function scryRenderedDOMComponentsWithClass(root, classNames) {
       const classList = className.split(/\s+/);
 
       if (!isArray(classNames)) {
-        invariant(
-          classNames !== undefined,
-          'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
-            'className as a second argument.',
-        );
+        if (classNames === undefined) {
+          throw new Error(
+            'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
+              'className as a second argument.',
+          );
+        }
+
         classNames = classNames.split(/\s+/);
       }
       return classNames.every(function(name) {
@@ -478,12 +477,13 @@ function getListener(inst: Fiber, registrationName: string) {
   if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
     return null;
   }
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
 
@@ -564,17 +564,20 @@ const directDispatchEventTypes = new Set([
  */
 function makeSimulator(eventType) {
   return function(domNode, eventData) {
-    invariant(
-      !React.isValidElement(domNode),
-      'TestUtils.Simulate expected a DOM node as the first argument but received ' +
-        'a React element. Pass the DOM node you wish to simulate the event on instead. ' +
-        'Note that TestUtils.Simulate will not work if you are using shallow rendering.',
-    );
-    invariant(
-      !isCompositeComponent(domNode),
-      'TestUtils.Simulate expected a DOM node as the first argument but received ' +
-        'a component instance. Pass the DOM node you wish to simulate the event on instead.',
-    );
+    if (React.isValidElement(domNode)) {
+      throw new Error(
+        'TestUtils.Simulate expected a DOM node as the first argument but received ' +
+          'a React element. Pass the DOM node you wish to simulate the event on instead. ' +
+          'Note that TestUtils.Simulate will not work if you are using shallow rendering.',
+      );
+    }
+
+    if (isCompositeComponent(domNode)) {
+      throw new Error(
+        'TestUtils.Simulate expected a DOM node as the first argument but received ' +
+          'a component instance. Pass the DOM node you wish to simulate the event on instead.',
+      );
+    }
 
     const reactName = 'on' + eventType[0].toUpperCase() + eventType.slice(1);
     const fakeNativeEvent = new Event();
diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index fbf5b50b2f29e..41df29c8afcc2 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -129,6 +129,7 @@ function preloadRecord(url: string, options: mixed): Record {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
         // TODO: figure out what to do with POST.
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw Error('Unsupported option');
       }
     }
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index 727c43abec415..2b1ef5f200cb1 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -177,6 +177,7 @@ function preloadRecord(url: string, options: mixed): Record<FetchResponse> {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
         // TODO: figure out what to do with POST.
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw Error('Unsupported option');
       }
     }
diff --git a/packages/react-native-renderer/src/ReactFabricComponentTree.js b/packages/react-native-renderer/src/ReactFabricComponentTree.js
index 5d62539be6b84..47e60e7f6779d 100644
--- a/packages/react-native-renderer/src/ReactFabricComponentTree.js
+++ b/packages/react-native-renderer/src/ReactFabricComponentTree.js
@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 function getInstanceFromInstance(instanceHandle) {
   return instanceHandle;
 }
 
 function getTagFromInstance(inst) {
   const nativeInstance = inst.stateNode.canonical;
-  invariant(
-    nativeInstance._nativeTag,
-    'All native instances should have a tag.',
-  );
+
+  if (!nativeInstance._nativeTag) {
+    throw new Error('All native instances should have a tag.');
+  }
+
   return nativeInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
index f63d21199fc66..212b181c08294 100644
--- a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
+++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
@@ -10,7 +10,6 @@
 import type {AnyNativeEvent} from './legacy-events/PluginModuleType';
 import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
 import SyntheticEvent from './legacy-events/SyntheticEvent';
-import invariant from 'shared/invariant';
 
 // Module provided by RN:
 import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
@@ -148,11 +147,14 @@ const ReactNativeBridgeEventPlugin = {
     }
     const bubbleDispatchConfig = customBubblingEventTypes[topLevelType];
     const directDispatchConfig = customDirectEventTypes[topLevelType];
-    invariant(
-      bubbleDispatchConfig || directDispatchConfig,
-      'Unsupported top level event type "%s" dispatched',
-      topLevelType,
-    );
+
+    if (!bubbleDispatchConfig && !directDispatchConfig) {
+      throw new Error(
+        // $FlowFixMe - Flow doesn't like this string coercion because DOMTopLevelEventType is opaque
+        `Unsupported top level event type "${topLevelType}" dispatched`,
+      );
+    }
+
     const event = SyntheticEvent.getPooled(
       bubbleDispatchConfig || directDispatchConfig,
       targetInst,
diff --git a/packages/react-native-renderer/src/ReactNativeComponentTree.js b/packages/react-native-renderer/src/ReactNativeComponentTree.js
index 23748937e2ace..c0f21b875a82f 100644
--- a/packages/react-native-renderer/src/ReactNativeComponentTree.js
+++ b/packages/react-native-renderer/src/ReactNativeComponentTree.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 const instanceCache = new Map();
 const instanceProps = new Map();
 
@@ -30,7 +28,11 @@ function getTagFromInstance(inst) {
     nativeInstance = nativeInstance.canonical;
     tag = nativeInstance._nativeTag;
   }
-  invariant(tag, 'All native instances should have a tag.');
+
+  if (!tag) {
+    throw new Error('All native instances should have a tag.');
+  }
+
   return nativeInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
index 9579384ef5e97..a0f543a9c4e43 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -16,7 +16,6 @@ import {
 } from 'react-reconciler/src/ReactFiberTreeReflection';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 // Module provided by RN:
 import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 import {enableGetInspectorDataForInstanceInProduction} from 'shared/ReactFeatureFlags';
@@ -250,8 +249,7 @@ if (__DEV__) {
   };
 } else {
   getInspectorDataForViewTag = () => {
-    invariant(
-      false,
+    throw new Error(
       'getInspectorDataForViewTag() is not available in production',
     );
   };
@@ -263,8 +261,7 @@ if (__DEV__) {
     locationY: number,
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ): void => {
-    invariant(
-      false,
+    throw new Error(
       'getInspectorDataForViewAtPoint() is not available in production.',
     );
   };
diff --git a/packages/react-native-renderer/src/ReactNativeGetListener.js b/packages/react-native-renderer/src/ReactNativeGetListener.js
index 8a3476f9a6ad0..4f76fddd29e7b 100644
--- a/packages/react-native-renderer/src/ReactNativeGetListener.js
+++ b/packages/react-native-renderer/src/ReactNativeGetListener.js
@@ -8,7 +8,6 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
-import invariant from 'shared/invariant';
 import {getFiberCurrentPropsFromNode} from './legacy-events/EventPluginUtils';
 
 export default function getListener(
@@ -26,11 +25,12 @@ export default function getListener(
     return null;
   }
   const listener = props[registrationName];
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 205f8189b7a7c..769f46e852a2f 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -9,8 +9,6 @@
 
 import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
 
-import invariant from 'shared/invariant';
-
 // Modules provided by RN:
 import {
   ReactNativeViewConfigRegistry,
@@ -147,10 +145,9 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  invariant(
-    hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
-  );
+  if (!hostContext.isInAParentText) {
+    throw new Error('Text strings must be rendered within a <Text> component.');
+  }
 
   const tag = allocateTag();
 
@@ -411,10 +408,9 @@ export function insertInContainerBefore(
   // We create a wrapper object for the container in ReactNative render()
   // Or we refactor to remove wrapper objects entirely.
   // For more info on pros/cons see PR #8560 description.
-  invariant(
-    typeof parentInstance !== 'number',
-    'Container does not support insertBefore operation',
-  );
+  if (typeof parentInstance === 'number') {
+    throw new Error('Container does not support insertBefore operation');
+  }
 }
 
 export function removeChild(
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index ee3c7df98508d..d4218ab247347 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -11,8 +11,6 @@
 
 // Mock of the Native Hooks
 
-import invariant from 'shared/invariant';
-
 const roots = new Map();
 const allocatedTags = new Set();
 
@@ -54,11 +52,10 @@ const RCTFabricUIManager = {
     props,
     eventTarget,
   ) {
-    invariant(
-      !allocatedTags.has(reactTag),
-      'Created two native views with tag %s',
-      reactTag,
-    );
+    if (allocatedTags.has(reactTag)) {
+      throw new Error(`Created two native views with tag ${reactTag}`);
+    }
+
     allocatedTags.add(reactTag);
     return {
       reactTag: reactTag,
@@ -127,27 +124,29 @@ const RCTFabricUIManager = {
   registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
 
   measure: jest.fn(function measure(node, callback) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host node.',
-    );
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
     callback(10, 10, 100, 100, 0, 0);
   }),
   measureInWindow: jest.fn(function measureInWindow(node, callback) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host node.',
-    );
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
     callback(10, 10, 100, 100);
   }),
   measureLayout: jest.fn(function measureLayout(
@@ -156,24 +155,26 @@ const RCTFabricUIManager = {
     fail,
     success,
   ) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host node.',
-    );
-    invariant(
-      typeof relativeNode === 'object',
-      'Expected relative node to be an object, was passed "%s"',
-      typeof relativeNode,
-    );
-    invariant(
-      typeof relativeNode.viewName === 'string',
-      'Expected relative node to be a host node.',
-    );
+    if (typeof node !== 'object') {
+      throw new Error(
+        `Expected node to be an object, was passed "${typeof node}"`,
+      );
+    }
+
+    if (typeof node.viewName !== 'string') {
+      throw new Error('Expected node to be a host node.');
+    }
+
+    if (typeof relativeNode !== 'object') {
+      throw new Error(
+        `Expected relative node to be an object, was passed "${typeof relativeNode}"`,
+      );
+    }
+
+    if (typeof relativeNode.viewName !== 'string') {
+      throw new Error('Expected relative node to be a host node.');
+    }
+
     success(1, 1, 100, 100);
   }),
   setIsJSResponder: jest.fn(),
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
index 39813814dae1c..ce0975ea950a5 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -16,8 +16,6 @@ import type {
   ViewConfigGetter,
 } from './ReactNativeTypes';
 
-import invariant from 'shared/invariant';
-
 // Event configs
 const customBubblingEventTypes = {};
 const customDirectEventTypes = {};
@@ -38,11 +36,11 @@ function processEventTypes(
   if (__DEV__) {
     if (bubblingEventTypes != null && directEventTypes != null) {
       for (const topLevelType in directEventTypes) {
-        invariant(
-          bubblingEventTypes[topLevelType] == null,
-          'Event cannot be both direct and bubbling: %s',
-          topLevelType,
-        );
+        if (bubblingEventTypes[topLevelType] != null) {
+          throw new Error(
+            `Event cannot be both direct and bubbling: ${topLevelType}`,
+          );
+        }
       }
     }
   }
@@ -73,17 +71,18 @@ function processEventTypes(
  * This is done to avoid causing Prepack deopts.
  */
 exports.register = function(name: string, callback: ViewConfigGetter): string {
-  invariant(
-    !viewConfigCallbacks.has(name),
-    'Tried to register two views with the same name %s',
-    name,
-  );
-  invariant(
-    typeof callback === 'function',
-    'View config getter callback for component `%s` must be a function (received `%s`)',
-    name,
-    callback === null ? 'null' : typeof callback,
-  );
+  if (viewConfigCallbacks.has(name)) {
+    throw new Error(`Tried to register two views with the same name ${name}`);
+  }
+
+  if (typeof callback !== 'function') {
+    throw new Error(
+      `View config getter callback for component \`${name}\` must be a function (received \`${
+        callback === null ? 'null' : typeof callback
+      }\`)`,
+    );
+  }
+
   viewConfigCallbacks.set(name, callback);
   return name;
 };
@@ -98,14 +97,14 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);
     if (typeof callback !== 'function') {
-      invariant(
-        false,
-        'View config getter callback for component `%s` must be a function (received `%s`).%s',
-        name,
-        callback === null ? 'null' : typeof callback,
-        typeof name[0] === 'string' && /[a-z]/.test(name[0])
-          ? ' Make sure to start component names with a capital letter.'
-          : '',
+      throw new Error(
+        `View config getter callback for component \`${name}\` must be a function (received \`${
+          callback === null ? 'null' : typeof callback
+        }\`).${
+          typeof name[0] === 'string' && /[a-z]/.test(name[0])
+            ? ' Make sure to start component names with a capital letter.'
+            : ''
+        }`,
       );
     }
     viewConfig = callback();
@@ -118,6 +117,10 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
   } else {
     viewConfig = viewConfigs.get(name);
   }
-  invariant(viewConfig, 'View config not found for name %s', name);
+
+  if (!viewConfig) {
+    throw new Error(`View config not found for name ${name}`);
+  }
+
   return viewConfig;
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
index 245eecc4dc7ea..346c4aa45c5f5 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -11,8 +11,6 @@
 
 // Mock of the Native Hooks
 
-import invariant from 'shared/invariant';
-
 // Map of viewTag -> {children: [childTag], parent: ?parentTag}
 const roots = [];
 const views = new Map();
@@ -33,18 +31,21 @@ function autoCreateRoot(tag) {
 function insertSubviewAtIndex(parent, child, index) {
   const parentInfo = views.get(parent);
   const childInfo = views.get(child);
-  invariant(
-    childInfo.parent === null,
-    'Inserting view %s %s which already has parent',
-    child,
-    JSON.stringify(childInfo.props),
-  );
-  invariant(
-    0 <= index && index <= parentInfo.children.length,
-    'Invalid index %s for children %s',
-    index,
-    parentInfo.children,
-  );
+
+  if (childInfo.parent !== null) {
+    throw new Error(
+      `Inserting view ${child} ${JSON.stringify(
+        childInfo.props,
+      )} which already has parent`,
+    );
+  }
+
+  if (0 > index || index > parentInfo.children.length) {
+    throw new Error(
+      `Invalid index ${index} for children ${parentInfo.children}`,
+    );
+  }
+
   parentInfo.children.splice(index, 0, child);
   childInfo.parent = parent;
 }
@@ -53,7 +54,11 @@ function removeChild(parent, child) {
   const parentInfo = views.get(parent);
   const childInfo = views.get(child);
   const index = parentInfo.children.indexOf(child);
-  invariant(index >= 0, 'Missing view %s during removal', child);
+
+  if (index < 0) {
+    throw new Error(`Missing view ${child} during removal`);
+  }
+
   parentInfo.children.splice(index, 1);
   childInfo.parent = null;
 }
@@ -75,11 +80,10 @@ const RCTUIManager = {
   },
   clearJSResponder: jest.fn(),
   createView: jest.fn(function createView(reactTag, viewName, rootTag, props) {
-    invariant(
-      !views.has(reactTag),
-      'Created two native views with tag %s',
-      reactTag,
-    );
+    if (views.has(reactTag)) {
+      throw new Error(`Created two native views with tag ${reactTag}`);
+    }
+
     views.set(reactTag, {
       children: [],
       parent: null,
@@ -92,12 +96,12 @@ const RCTUIManager = {
   setJSResponder: jest.fn(),
   setChildren: jest.fn(function setChildren(parentTag, reactTags) {
     autoCreateRoot(parentTag);
+
     // Native doesn't actually check this but it seems like a good idea
-    invariant(
-      views.get(parentTag).children.length === 0,
-      'Calling .setChildren on nonempty view %s',
-      parentTag,
-    );
+    if (views.get(parentTag).children.length !== 0) {
+      throw new Error(`Calling .setChildren on nonempty view ${parentTag}`);
+    }
+
     // This logic ported from iOS (RCTUIManager.m)
     reactTags.forEach((tag, i) => {
       insertSubviewAtIndex(parentTag, tag, i);
@@ -112,19 +116,20 @@ const RCTUIManager = {
     removeAtIndices = [],
   ) {
     autoCreateRoot(parentTag);
+
     // This logic ported from iOS (RCTUIManager.m)
-    invariant(
-      moveFromIndices.length === moveToIndices.length,
-      'Mismatched move indices %s and %s',
-      moveFromIndices,
-      moveToIndices,
-    );
-    invariant(
-      addChildReactTags.length === addAtIndices.length,
-      'Mismatched add indices %s and %s',
-      addChildReactTags,
-      addAtIndices,
-    );
+    if (moveFromIndices.length !== moveToIndices.length) {
+      throw new Error(
+        `Mismatched move indices ${moveFromIndices} and ${moveToIndices}`,
+      );
+    }
+
+    if (addChildReactTags.length !== addAtIndices.length) {
+      throw new Error(
+        `Mismatched add indices ${addChildReactTags} and ${addAtIndices}`,
+      );
+    }
+
     const parentInfo = views.get(parentTag);
     const permanentlyRemovedChildren = removeAtIndices.map(
       index => parentInfo.children[index],
@@ -157,19 +162,17 @@ const RCTUIManager = {
   }),
   replaceExistingNonRootView: jest.fn(),
   measure: jest.fn(function measure(tag, callback) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
     callback(10, 10, 100, 100, 0, 0);
   }),
   measureInWindow: jest.fn(function measureInWindow(tag, callback) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
     callback(10, 10, 100, 100);
   }),
   measureLayout: jest.fn(function measureLayout(
@@ -178,16 +181,16 @@ const RCTUIManager = {
     fail,
     success,
   ) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
-    invariant(
-      typeof relativeTag === 'number',
-      'Expected relativeTag to be a number, was passed %s',
-      relativeTag,
-    );
+    if (typeof tag !== 'number') {
+      throw new Error(`Expected tag to be a number, was passed ${tag}`);
+    }
+
+    if (typeof relativeTag !== 'number') {
+      throw new Error(
+        `Expected relativeTag to be a number, was passed ${relativeTag}`,
+      );
+    }
+
     success(1, 1, 100, 100);
   }),
   __takeSnapshot: jest.fn(),
diff --git a/packages/react-native-renderer/src/legacy-events/EventBatching.js b/packages/react-native-renderer/src/legacy-events/EventBatching.js
index bffc978ad6e21..22e20298c5a9f 100644
--- a/packages/react-native-renderer/src/legacy-events/EventBatching.js
+++ b/packages/react-native-renderer/src/legacy-events/EventBatching.js
@@ -6,7 +6,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {rethrowCaughtError} from 'shared/ReactErrorUtils';
 
 import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
@@ -56,11 +55,14 @@ export function runEventsInBatch(
   }
 
   forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
-  invariant(
-    !eventQueue,
-    'processEventQueue(): Additional events were enqueued while processing ' +
-      'an event queue. Support for this has not yet been implemented.',
-  );
+
+  if (eventQueue) {
+    throw new Error(
+      'processEventQueue(): Additional events were enqueued while processing ' +
+        'an event queue. Support for this has not yet been implemented.',
+    );
+  }
+
   // This would be a good time to rethrow if any of the event handlers threw.
   rethrowCaughtError();
 }
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
index ee3d9c53a37e1..3737d2c073b61 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
@@ -14,8 +14,6 @@ import type {
   LegacyPluginModule,
 } from './PluginModuleType';
 
-import invariant from 'shared/invariant';
-
 type NamesToPlugins = {
   [key: PluginName]: LegacyPluginModule<AnyNativeEvent>,
   ...,
@@ -45,34 +43,39 @@ function recomputePluginOrdering(): void {
   for (const pluginName in namesToPlugins) {
     const pluginModule = namesToPlugins[pluginName];
     const pluginIndex = eventPluginOrder.indexOf(pluginName);
-    invariant(
-      pluginIndex > -1,
-      'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
-        'the plugin ordering, `%s`.',
-      pluginName,
-    );
+
+    if (pluginIndex <= -1) {
+      throw new Error(
+        'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
+          `the plugin ordering, \`${pluginName}\`.`,
+      );
+    }
+
     if (plugins[pluginIndex]) {
       continue;
     }
-    invariant(
-      pluginModule.extractEvents,
-      'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
-        'method, but `%s` does not.',
-      pluginName,
-    );
+
+    if (!pluginModule.extractEvents) {
+      throw new Error(
+        'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
+          `method, but \`${pluginName}\` does not.`,
+      );
+    }
+
     plugins[pluginIndex] = pluginModule;
     const publishedEvents = pluginModule.eventTypes;
     for (const eventName in publishedEvents) {
-      invariant(
-        publishEventForPlugin(
+      if (
+        !publishEventForPlugin(
           publishedEvents[eventName],
           pluginModule,
           eventName,
-        ),
-        'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.',
-        eventName,
-        pluginName,
-      );
+        )
+      ) {
+        throw new Error(
+          `EventPluginRegistry: Failed to publish event \`${eventName}\` for plugin \`${pluginName}\`.`,
+        );
+      }
     }
   }
 }
@@ -90,12 +93,13 @@ function publishEventForPlugin(
   pluginModule: LegacyPluginModule<AnyNativeEvent>,
   eventName: string,
 ): boolean {
-  invariant(
-    !eventNameDispatchConfigs.hasOwnProperty(eventName),
-    'EventPluginRegistry: More than one plugin attempted to publish the same ' +
-      'event name, `%s`.',
-    eventName,
-  );
+  if (eventNameDispatchConfigs.hasOwnProperty(eventName)) {
+    throw new Error(
+      'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+        `event name, \`${eventName}\`.`,
+    );
+  }
+
   eventNameDispatchConfigs[eventName] = dispatchConfig;
 
   const phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
@@ -134,12 +138,13 @@ function publishRegistrationName(
   pluginModule: LegacyPluginModule<AnyNativeEvent>,
   eventName: string,
 ): void {
-  invariant(
-    !registrationNameModules[registrationName],
-    'EventPluginRegistry: More than one plugin attempted to publish the same ' +
-      'registration name, `%s`.',
-    registrationName,
-  );
+  if (registrationNameModules[registrationName]) {
+    throw new Error(
+      'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+        `registration name, \`${registrationName}\`.`,
+    );
+  }
+
   registrationNameModules[registrationName] = pluginModule;
   registrationNameDependencies[registrationName] =
     pluginModule.eventTypes[eventName].dependencies;
@@ -198,11 +203,13 @@ export const possibleRegistrationNames = __DEV__ ? {} : (null: any);
 export function injectEventPluginOrder(
   injectedEventPluginOrder: EventPluginOrder,
 ): void {
-  invariant(
-    !eventPluginOrder,
-    'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
-      'once. You are likely trying to load more than one copy of React.',
-  );
+  if (eventPluginOrder) {
+    throw new Error(
+      'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
+        'once. You are likely trying to load more than one copy of React.',
+    );
+  }
+
   // Clone the ordering so it cannot be dynamically mutated.
   eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
   recomputePluginOrdering();
@@ -230,12 +237,13 @@ export function injectEventPluginsByName(
       !namesToPlugins.hasOwnProperty(pluginName) ||
       namesToPlugins[pluginName] !== pluginModule
     ) {
-      invariant(
-        !namesToPlugins[pluginName],
-        'EventPluginRegistry: Cannot inject two different event plugins ' +
-          'using the same name, `%s`.',
-        pluginName,
-      );
+      if (namesToPlugins[pluginName]) {
+        throw new Error(
+          'EventPluginRegistry: Cannot inject two different event plugins ' +
+            `using the same name, \`${pluginName}\`.`,
+        );
+      }
+
       namesToPlugins[pluginName] = pluginModule;
       isOrderingDirty = true;
     }
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
index 381ebafc59bb3..382656992addf 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
@@ -6,7 +6,6 @@
  */
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 export let getFiberCurrentPropsFromNode = null;
@@ -150,10 +149,11 @@ export function executeDirectDispatch(event) {
   }
   const dispatchListener = event._dispatchListeners;
   const dispatchInstance = event._dispatchInstances;
-  invariant(
-    !isArray(dispatchListener),
-    'executeDirectDispatch(...): Invalid `event`.',
-  );
+
+  if (isArray(dispatchListener)) {
+    throw new Error('executeDirectDispatch(...): Invalid `event`.');
+  }
+
   event.currentTarget = dispatchListener
     ? getNodeFromInstance(dispatchInstance)
     : null;
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
index 78bef3bbcee99..2b3cbb347882c 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
@@ -29,7 +29,6 @@ import {
 import accumulateInto from './accumulateInto';
 import forEachAccumulated from './forEachAccumulated';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 
 /**
  * Instance of element that should respond to touch/move types of interactions,
@@ -249,12 +248,13 @@ function getListener(inst, registrationName) {
     return null;
   }
   const listener = props[registrationName];
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  if (listener && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+    );
+  }
+
   return listener;
 }
 
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
index 24d35b52a45d0..af63b1fb21e20 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
 
 /**
@@ -94,7 +92,10 @@ function resetTouchRecord(touchRecord: TouchRecord, touch: Touch): void {
 }
 
 function getTouchIdentifier({identifier}: Touch): number {
-  invariant(identifier != null, 'Touch object is missing identifier.');
+  if (identifier == null) {
+    throw new Error('Touch object is missing identifier.');
+  }
+
   if (__DEV__) {
     if (identifier > MAX_TOUCH_BANK) {
       console.error(
diff --git a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
index 329d89ec9f7d2..84d39bbd603d2 100644
--- a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
+++ b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
@@ -7,8 +7,6 @@
 
 /* eslint valid-typeof: 0 */
 
-import invariant from 'shared/invariant';
-
 const EVENT_POOL_SIZE = 10;
 
 /**
@@ -325,10 +323,13 @@ function createOrGetPooledEvent(
 
 function releasePooledEvent(event) {
   const EventConstructor = this;
-  invariant(
-    event instanceof EventConstructor,
-    'Trying to release an event instance into a pool of a different type.',
-  );
+
+  if (!(event instanceof EventConstructor)) {
+    throw new Error(
+      'Trying to release an event instance into a pool of a different type.',
+    );
+  }
+
   event.destructor();
   if (EventConstructor.eventPool.length < EVENT_POOL_SIZE) {
     EventConstructor.eventPool.push(event);
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
index af4da853934b0..0e19adc919e57 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulate.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 /**
@@ -21,10 +20,11 @@ function accumulate<T>(
   current: ?(T | Array<T>),
   next: T | Array<T>,
 ): T | Array<T> {
-  invariant(
-    next != null,
-    'accumulate(...): Accumulated items must not be null or undefined.',
-  );
+  if (next == null) {
+    throw new Error(
+      'accumulate(...): Accumulated items must not be null or undefined.',
+    );
+  }
 
   if (current == null) {
     return next;
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index d704733d9d455..974c0143a5504 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 /**
@@ -27,10 +26,11 @@ function accumulateInto<T>(
   current: ?(Array<T> | T),
   next: T | Array<T>,
 ): T | Array<T> {
-  invariant(
-    next != null,
-    'accumulateInto(...): Accumulated items must not be null or undefined.',
-  );
+  if (next == null) {
+    throw new Error(
+      'accumulateInto(...): Accumulated items must not be null or undefined.',
+    );
+  }
 
   if (current == null) {
     return next;
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index c530649ac5072..214561a788604 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -21,8 +21,6 @@ import {
   stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
-import invariant from 'shared/invariant';
-
 export const isPrimaryRenderer = true;
 
 // Every list of children or string is null terminated.
@@ -116,10 +114,12 @@ export type OpaqueIDType = number;
 export function makeServerID(
   responseState: null | ResponseState,
 ): OpaqueIDType {
-  invariant(
-    responseState !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-  );
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
+  }
+
   // TODO: This is not deterministic since it's created during render.
   return responseState.nextOpaqueID++;
 }
@@ -167,8 +167,7 @@ export function pushEndInstance(
 // IDs are formatted as little endian Uint16
 function formatID(id: number): Uint8Array {
   if (id > 0xffff) {
-    invariant(
-      false,
+    throw new Error(
       'More boundaries or placeholders than we expected to ever emit.',
     );
   }
diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
index ec49f8c043238..fc23025788780 100644
--- a/packages/react-pg/src/ReactPostgres.js
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -12,7 +12,6 @@ import type {Wakeable} from 'shared/ReactTypes';
 import {unstable_getCacheForType} from 'react';
 import {Pool as PostgresPool} from 'pg';
 import {prepareValue} from 'pg/lib/utils';
-import invariant from 'shared/invariant';
 
 const Pending = 0;
 const Resolved = 1;
@@ -92,8 +91,7 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
         nextMap = new Map();
         innerMap.set(key, nextMap);
       } else if (!(nextMap instanceof Map)) {
-        invariant(
-          false,
+        throw new Error(
           'This query has received more parameters than the last time ' +
             'the same query was used. Always pass the exact number of ' +
             'parameters that the query needs.',
@@ -113,8 +111,7 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
     record = createRecordFromThenable(thenable);
     innerMap.set(key, record);
   } else if (record instanceof Map) {
-    invariant(
-      false,
+    throw new Error(
       'This query has received fewer parameters than the last time ' +
         'the same query was used. Always pass the exact number of ' +
         'parameters that the query needs.',
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 91dcff903a63a..9071edc24f7a2 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -22,7 +22,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
@@ -69,11 +68,14 @@ if (__DEV__) {
     if (!child._store || child._store.validated || child.key != null) {
       return;
     }
-    invariant(
-      typeof child._store === 'object',
-      'React Component in warnForMissingKey should have a _store. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (typeof child._store !== 'object') {
+      throw new Error(
+        'React Component in warnForMissingKey should have a _store. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
@@ -149,21 +151,28 @@ function coerceRef(
       let inst;
       if (owner) {
         const ownerFiber = ((owner: any): Fiber);
-        invariant(
-          ownerFiber.tag === ClassComponent,
-          'Function components cannot have string refs. ' +
-            'We recommend using useRef() instead. ' +
-            'Learn more about using refs safely here: ' +
-            'https://reactjs.org/link/strict-mode-string-ref',
-        );
+
+        if (ownerFiber.tag !== ClassComponent) {
+          throw new Error(
+            'Function components cannot have string refs. ' +
+              'We recommend using useRef() instead. ' +
+              'Learn more about using refs safely here: ' +
+              'https://reactjs.org/link/strict-mode-string-ref',
+          );
+        }
+
         inst = ownerFiber.stateNode;
       }
-      invariant(
-        inst,
-        'Missing owner for string ref %s. This error is likely caused by a ' +
-          'bug in React. Please file an issue.',
-        mixedRef,
-      );
+
+      if (!inst) {
+        throw new Error(
+          `Missing owner for string ref ${mixedRef}. This error is likely caused by a ` +
+            'bug in React. Please file an issue.',
+        );
+      }
+      // Assigning this to a const so Flow knows it won't change in the closure
+      const resolvedInst = inst;
+
       if (__DEV__) {
         checkPropStringCoercion(mixedRef, 'ref');
       }
@@ -178,10 +187,10 @@ function coerceRef(
         return current.ref;
       }
       const ref = function(value) {
-        let refs = inst.refs;
+        let refs = resolvedInst.refs;
         if (refs === emptyRefsObject) {
           // This is a lazy pooled frozen object, so we need to initialize.
-          refs = inst.refs = {};
+          refs = resolvedInst.refs = {};
         }
         if (value === null) {
           delete refs[stringRef];
@@ -192,20 +201,22 @@ function coerceRef(
       ref._stringRef = stringRef;
       return ref;
     } else {
-      invariant(
-        typeof mixedRef === 'string',
-        'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
-      );
-      invariant(
-        element._owner,
-        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
-          ' the following reasons:\n' +
-          '1. You may be adding a ref to a function component\n' +
-          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-          '3. You have multiple copies of React loaded\n' +
-          'See https://reactjs.org/link/refs-must-have-owner for more information.',
-        mixedRef,
-      );
+      if (typeof mixedRef !== 'string') {
+        throw new Error(
+          'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
+        );
+      }
+
+      if (!element._owner) {
+        throw new Error(
+          `Element ref was specified as a string (${mixedRef}) but no owner was set. This could happen for one of` +
+            ' the following reasons:\n' +
+            '1. You may be adding a ref to a function component\n' +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            '3. You have multiple copies of React loaded\n' +
+            'See https://reactjs.org/link/refs-must-have-owner for more information.',
+        );
+      }
     }
   }
   return mixedRef;
@@ -213,14 +224,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   const childString = Object.prototype.toString.call(newChild);
-  invariant(
-    false,
-    'Objects are not valid as a React child (found: %s). ' +
+
+  throw new Error(
+    `Objects are not valid as a React child (found: ${
+      childString === '[object Object]'
+        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
+        : childString
+    }). ` +
       'If you meant to render a collection of children, use an array ' +
       'instead.',
-    childString === '[object Object]'
-      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-      : childString,
   );
 }
 
@@ -887,11 +899,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     // but using the iterator instead.
 
     const iteratorFn = getIteratorFn(newChildrenIterable);
-    invariant(
-      typeof iteratorFn === 'function',
-      'An object is not an iterable. This error is likely caused by a bug in ' +
-        'React. Please file an issue.',
-    );
+
+    if (typeof iteratorFn !== 'function') {
+      throw new Error(
+        'An object is not an iterable. This error is likely caused by a bug in ' +
+          'React. Please file an issue.',
+      );
+    }
 
     if (__DEV__) {
       // We don't support rendering Generators because it's a mutation.
@@ -938,7 +952,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     const newChildren = iteratorFn.call(newChildrenIterable);
-    invariant(newChildren != null, 'An iterable object provided no iterator.');
+
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
 
     let resultingFirstChild: Fiber | null = null;
     let previousNewFiber: Fiber | null = null;
@@ -1313,10 +1330,9 @@ export function cloneChildFibers(
   current: Fiber | null,
   workInProgress: Fiber,
 ): void {
-  invariant(
-    current === null || workInProgress.child === current.child,
-    'Resuming work not yet implemented.',
-  );
+  if (current !== null && workInProgress.child !== current.child) {
+    throw new Error('Resuming work not yet implemented.');
+  }
 
   if (workInProgress.child === null) {
     return;
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 9fafdf05f67a6..0128ca8f36f3d 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -22,7 +22,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
@@ -69,11 +68,14 @@ if (__DEV__) {
     if (!child._store || child._store.validated || child.key != null) {
       return;
     }
-    invariant(
-      typeof child._store === 'object',
-      'React Component in warnForMissingKey should have a _store. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (typeof child._store !== 'object') {
+      throw new Error(
+        'React Component in warnForMissingKey should have a _store. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
+
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
@@ -149,21 +151,28 @@ function coerceRef(
       let inst;
       if (owner) {
         const ownerFiber = ((owner: any): Fiber);
-        invariant(
-          ownerFiber.tag === ClassComponent,
-          'Function components cannot have string refs. ' +
-            'We recommend using useRef() instead. ' +
-            'Learn more about using refs safely here: ' +
-            'https://reactjs.org/link/strict-mode-string-ref',
-        );
+
+        if (ownerFiber.tag !== ClassComponent) {
+          throw new Error(
+            'Function components cannot have string refs. ' +
+              'We recommend using useRef() instead. ' +
+              'Learn more about using refs safely here: ' +
+              'https://reactjs.org/link/strict-mode-string-ref',
+          );
+        }
+
         inst = ownerFiber.stateNode;
       }
-      invariant(
-        inst,
-        'Missing owner for string ref %s. This error is likely caused by a ' +
-          'bug in React. Please file an issue.',
-        mixedRef,
-      );
+
+      if (!inst) {
+        throw new Error(
+          `Missing owner for string ref ${mixedRef}. This error is likely caused by a ` +
+            'bug in React. Please file an issue.',
+        );
+      }
+      // Assigning this to a const so Flow knows it won't change in the closure
+      const resolvedInst = inst;
+
       if (__DEV__) {
         checkPropStringCoercion(mixedRef, 'ref');
       }
@@ -178,10 +187,10 @@ function coerceRef(
         return current.ref;
       }
       const ref = function(value) {
-        let refs = inst.refs;
+        let refs = resolvedInst.refs;
         if (refs === emptyRefsObject) {
           // This is a lazy pooled frozen object, so we need to initialize.
-          refs = inst.refs = {};
+          refs = resolvedInst.refs = {};
         }
         if (value === null) {
           delete refs[stringRef];
@@ -192,20 +201,22 @@ function coerceRef(
       ref._stringRef = stringRef;
       return ref;
     } else {
-      invariant(
-        typeof mixedRef === 'string',
-        'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
-      );
-      invariant(
-        element._owner,
-        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
-          ' the following reasons:\n' +
-          '1. You may be adding a ref to a function component\n' +
-          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-          '3. You have multiple copies of React loaded\n' +
-          'See https://reactjs.org/link/refs-must-have-owner for more information.',
-        mixedRef,
-      );
+      if (typeof mixedRef !== 'string') {
+        throw new Error(
+          'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
+        );
+      }
+
+      if (!element._owner) {
+        throw new Error(
+          `Element ref was specified as a string (${mixedRef}) but no owner was set. This could happen for one of` +
+            ' the following reasons:\n' +
+            '1. You may be adding a ref to a function component\n' +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            '3. You have multiple copies of React loaded\n' +
+            'See https://reactjs.org/link/refs-must-have-owner for more information.',
+        );
+      }
     }
   }
   return mixedRef;
@@ -213,14 +224,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   const childString = Object.prototype.toString.call(newChild);
-  invariant(
-    false,
-    'Objects are not valid as a React child (found: %s). ' +
+
+  throw new Error(
+    `Objects are not valid as a React child (found: ${
+      childString === '[object Object]'
+        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
+        : childString
+    }). ` +
       'If you meant to render a collection of children, use an array ' +
       'instead.',
-    childString === '[object Object]'
-      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-      : childString,
   );
 }
 
@@ -887,11 +899,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     // but using the iterator instead.
 
     const iteratorFn = getIteratorFn(newChildrenIterable);
-    invariant(
-      typeof iteratorFn === 'function',
-      'An object is not an iterable. This error is likely caused by a bug in ' +
-        'React. Please file an issue.',
-    );
+
+    if (typeof iteratorFn !== 'function') {
+      throw new Error(
+        'An object is not an iterable. This error is likely caused by a bug in ' +
+          'React. Please file an issue.',
+      );
+    }
 
     if (__DEV__) {
       // We don't support rendering Generators because it's a mutation.
@@ -938,7 +952,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     const newChildren = iteratorFn.call(newChildrenIterable);
-    invariant(newChildren != null, 'An iterable object provided no iterator.');
+
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
 
     let resultingFirstChild: Fiber | null = null;
     let previousNewFiber: Fiber | null = null;
@@ -1313,10 +1330,9 @@ export function cloneChildFibers(
   current: Fiber | null,
   workInProgress: Fiber,
 ): void {
-  invariant(
-    current === null || workInProgress.child === current.child,
-    'Resuming work not yet implemented.',
-  );
+  if (current !== null && workInProgress.child !== current.child) {
+    throw new Error('Resuming work not yet implemented.');
+  }
 
   if (workInProgress.child === null) {
     return;
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index cbbbaa623385e..2e5c40c220a71 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -17,7 +17,6 @@ import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
-import invariant from 'shared/invariant';
 import {
   createRootStrictEffectsByDefault,
   enableCache,
@@ -565,13 +564,11 @@ export function createFiberFromTypeAndProps(
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
         }
-        invariant(
-          false,
+
+        throw new Error(
           'Element type is invalid: expected a string (for built-in ' +
             'components) or a class/function (for composite components) ' +
-            'but got: %s.%s',
-          type == null ? type : typeof type,
-          info,
+            `but got: ${type == null ? type : typeof type}.${info}`,
         );
       }
     }
@@ -604,7 +601,7 @@ export function createOffscreenHostContainerFiber(
     return fiber;
   } else {
     // Only implemented in persistent mode
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 6d99c6837ed21..9d559a3f7afb0 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -17,7 +17,6 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
-import invariant from 'shared/invariant';
 import {
   createRootStrictEffectsByDefault,
   enableCache,
@@ -565,13 +564,11 @@ export function createFiberFromTypeAndProps(
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
         }
-        invariant(
-          false,
+
+        throw new Error(
           'Element type is invalid: expected a string (for built-in ' +
             'components) or a class/function (for composite components) ' +
-            'but got: %s.%s',
-          type == null ? type : typeof type,
-          info,
+            `but got: ${type == null ? type : typeof type}.${info}`,
         );
       }
     }
@@ -604,7 +601,7 @@ export function createOffscreenHostContainerFiber(
     return fiber;
   } else {
     // Only implemented in persistent mode
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6ad63ae763c2a..4fe648bc3e767 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -92,7 +92,6 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1050,6 +1049,7 @@ function updateClassComponent(
       case true: {
         workInProgress.flags |= DidCapture;
         workInProgress.flags |= ShouldCapture;
+        // eslint-disable-next-line react-internal/prod-error-codes
         const error = new Error('Simulated error coming from DevTools');
         const lane = pickArbitraryLane(renderLanes);
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
@@ -1264,12 +1264,15 @@ function pushHostRootContext(workInProgress) {
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
-  invariant(
-    current !== null && updateQueue !== null,
-    'If the root does not have an updateQueue, we should have already ' +
-      'bailed out. This error is likely caused by a bug in React. Please ' +
-      'file an issue.',
-  );
+
+  if (current === null || updateQueue === null) {
+    throw new Error(
+      'If the root does not have an updateQueue, we should have already ' +
+        'bailed out. This error is likely caused by a bug in React. Please ' +
+        'file an issue.',
+    );
+  }
+
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
@@ -1496,15 +1499,13 @@ function mountLazyComponent(
       hint = ' Did you wrap a component in React.lazy() more than once?';
     }
   }
+
   // This message intentionally doesn't mention ForwardRef or MemoComponent
   // because the fact that it's a separate type of work is an
   // implementation detail.
-  invariant(
-    false,
-    'Element type is invalid. Received a promise that resolves to: %s. ' +
-      'Lazy element type must resolve to a class or function.%s',
-    Component,
-    hint,
+  throw new Error(
+    `Element type is invalid. Received a promise that resolves to: ${Component}. ` +
+      `Lazy element type must resolve to a class or function.${hint}`,
   );
 }
 
@@ -3317,6 +3318,7 @@ function remountFiber(
   if (__DEV__) {
     const returnFiber = oldWorkInProgress.return;
     if (returnFiber === null) {
+      // eslint-disable-next-line react-internal/prod-error-codes
       throw new Error('Cannot swap the root fiber.');
     }
 
@@ -3337,11 +3339,13 @@ function remountFiber(
     } else {
       let prevSibling = returnFiber.child;
       if (prevSibling === null) {
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw new Error('Expected parent to have a child.');
       }
       while (prevSibling.sibling !== oldWorkInProgress) {
         prevSibling = prevSibling.sibling;
         if (prevSibling === null) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           throw new Error('Expected to find the previous sibling.');
         }
       }
@@ -3836,11 +3840,10 @@ function beginWork(
       break;
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index ffa753593e1a4..f116897a8661b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -92,7 +92,6 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1050,6 +1049,7 @@ function updateClassComponent(
       case true: {
         workInProgress.flags |= DidCapture;
         workInProgress.flags |= ShouldCapture;
+        // eslint-disable-next-line react-internal/prod-error-codes
         const error = new Error('Simulated error coming from DevTools');
         const lane = pickArbitraryLane(renderLanes);
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
@@ -1264,12 +1264,15 @@ function pushHostRootContext(workInProgress) {
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
-  invariant(
-    current !== null && updateQueue !== null,
-    'If the root does not have an updateQueue, we should have already ' +
-      'bailed out. This error is likely caused by a bug in React. Please ' +
-      'file an issue.',
-  );
+
+  if (current === null || updateQueue === null) {
+    throw new Error(
+      'If the root does not have an updateQueue, we should have already ' +
+        'bailed out. This error is likely caused by a bug in React. Please ' +
+        'file an issue.',
+    );
+  }
+
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
@@ -1496,15 +1499,13 @@ function mountLazyComponent(
       hint = ' Did you wrap a component in React.lazy() more than once?';
     }
   }
+
   // This message intentionally doesn't mention ForwardRef or MemoComponent
   // because the fact that it's a separate type of work is an
   // implementation detail.
-  invariant(
-    false,
-    'Element type is invalid. Received a promise that resolves to: %s. ' +
-      'Lazy element type must resolve to a class or function.%s',
-    Component,
-    hint,
+  throw new Error(
+    `Element type is invalid. Received a promise that resolves to: ${Component}. ` +
+      `Lazy element type must resolve to a class or function.${hint}`,
   );
 }
 
@@ -3317,6 +3318,7 @@ function remountFiber(
   if (__DEV__) {
     const returnFiber = oldWorkInProgress.return;
     if (returnFiber === null) {
+      // eslint-disable-next-line react-internal/prod-error-codes
       throw new Error('Cannot swap the root fiber.');
     }
 
@@ -3337,11 +3339,13 @@ function remountFiber(
     } else {
       let prevSibling = returnFiber.child;
       if (prevSibling === null) {
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw new Error('Expected parent to have a child.');
       }
       while (prevSibling.sibling !== oldWorkInProgress) {
         prevSibling = prevSibling.sibling;
         if (prevSibling === null) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           throw new Error('Expected to find the previous sibling.');
         }
       }
@@ -3836,11 +3840,10 @@ function beginWork(
       break;
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 3cb67d045d410..18e56db09313c 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -35,7 +35,6 @@ import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
@@ -148,8 +147,7 @@ if (__DEV__) {
   Object.defineProperty(fakeInternalInstance, '_processChildContext', {
     enumerable: false,
     value: function() {
-      invariant(
-        false,
+      throw new Error(
         '_processChildContext is not available in React 16+. This likely ' +
           'means you have multiple copies of React and are attempting to nest ' +
           'a React 15 tree inside a React 16 tree using ' +
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 0e30466bf82be..a54dfabfca525 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -35,7 +35,6 @@ import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
@@ -148,8 +147,7 @@ if (__DEV__) {
   Object.defineProperty(fakeInternalInstance, '_processChildContext', {
     enumerable: false,
     value: function() {
-      invariant(
-        false,
+      throw new Error(
         '_processChildContext is not available in React 16+. This likely ' +
           'means you have multiple copies of React and are attempting to nest ' +
           'a React 15 tree inside a React 16 tree using ' +
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 699c6867fa103..95c2f3753bfd7 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -78,7 +78,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -473,8 +472,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
         // Nothing to do for these component types
         break;
       default: {
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -945,8 +943,7 @@ function commitLayoutEffectOnFiber(
       case LegacyHiddenComponent:
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -1432,8 +1429,8 @@ function commitContainer(finishedWork: Fiber) {
       return;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
@@ -1447,8 +1444,8 @@ function getHostParentFiber(fiber: Fiber): Fiber {
     }
     parent = parent.return;
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Expected to find a host parent. This error is likely caused by a bug ' +
       'in React. Please file an issue.',
   );
@@ -1535,8 +1532,7 @@ function commitPlacement(finishedWork: Fiber): void {
       break;
     // eslint-disable-next-line-no-fallthrough
     default:
-      invariant(
-        false,
+      throw new Error(
         'Invalid host parent fiber. This error is likely caused by a bug ' +
           'in React. Please file an issue.',
       );
@@ -1641,11 +1637,13 @@ function unmountHostComponents(
     if (!currentParentIsValid) {
       let parent = node.return;
       findParent: while (true) {
-        invariant(
-          parent !== null,
-          'Expected to find a host parent. This error is likely caused by ' +
-            'a bug in React. Please file an issue.',
-        );
+        if (parent === null) {
+          throw new Error(
+            'Expected to find a host parent. This error is likely caused by ' +
+              'a bug in React. Please file an issue.',
+          );
+        }
+
         const parentStateNode = parent.stateNode;
         switch (parent.tag) {
           case HostComponent:
@@ -1915,11 +1913,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostText: {
-      invariant(
-        finishedWork.stateNode !== null,
-        'This should have a text node initialized. This error is likely ' +
-          'caused by a bug in React. Please file an issue.',
-      );
+      if (finishedWork.stateNode === null) {
+        throw new Error(
+          'This should have a text node initialized. This error is likely ' +
+            'caused by a bug in React. Please file an issue.',
+        );
+      }
+
       const textInstance: TextInstance = finishedWork.stateNode;
       const newText: string = finishedWork.memoizedProps;
       // For hydration we reuse the update path but we treat the oldProps
@@ -1965,8 +1965,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       break;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 53294e67498b0..8057c415e7459 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -78,7 +78,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -473,8 +472,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
         // Nothing to do for these component types
         break;
       default: {
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -945,8 +943,7 @@ function commitLayoutEffectOnFiber(
       case LegacyHiddenComponent:
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
             'likely caused by a bug in React. Please file an issue.',
         );
@@ -1432,8 +1429,8 @@ function commitContainer(finishedWork: Fiber) {
       return;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
@@ -1447,8 +1444,8 @@ function getHostParentFiber(fiber: Fiber): Fiber {
     }
     parent = parent.return;
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Expected to find a host parent. This error is likely caused by a bug ' +
       'in React. Please file an issue.',
   );
@@ -1535,8 +1532,7 @@ function commitPlacement(finishedWork: Fiber): void {
       break;
     // eslint-disable-next-line-no-fallthrough
     default:
-      invariant(
-        false,
+      throw new Error(
         'Invalid host parent fiber. This error is likely caused by a bug ' +
           'in React. Please file an issue.',
       );
@@ -1641,11 +1637,13 @@ function unmountHostComponents(
     if (!currentParentIsValid) {
       let parent = node.return;
       findParent: while (true) {
-        invariant(
-          parent !== null,
-          'Expected to find a host parent. This error is likely caused by ' +
-            'a bug in React. Please file an issue.',
-        );
+        if (parent === null) {
+          throw new Error(
+            'Expected to find a host parent. This error is likely caused by ' +
+              'a bug in React. Please file an issue.',
+          );
+        }
+
         const parentStateNode = parent.stateNode;
         switch (parent.tag) {
           case HostComponent:
@@ -1915,11 +1913,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostText: {
-      invariant(
-        finishedWork.stateNode !== null,
-        'This should have a text node initialized. This error is likely ' +
-          'caused by a bug in React. Please file an issue.',
-      );
+      if (finishedWork.stateNode === null) {
+        throw new Error(
+          'This should have a text node initialized. This error is likely ' +
+            'caused by a bug in React. Please file an issue.',
+        );
+      }
+
       const textInstance: TextInstance = finishedWork.stateNode;
       const newText: string = finishedWork.memoizedProps;
       // For hydration we reuse the update path but we treat the oldProps
@@ -1965,8 +1965,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       break;
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'This unit of work tag should not have side-effects. This error is ' +
       'likely caused by a bug in React. Please file an issue.',
   );
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 03136ce30ba7b..a15702985e9a0 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -73,7 +73,6 @@ import {
   StaticMask,
   MutationMask,
 } from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createInstance,
@@ -897,11 +896,13 @@ function completeWork(
         }
       } else {
         if (!newProps) {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
+
           // This can happen when we abort work.
           bubbleProperties(workInProgress);
           return null;
@@ -973,11 +974,12 @@ function completeWork(
         updateHostText(current, workInProgress, oldText, newText);
       } else {
         if (typeof newText !== 'string') {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
           // This can happen when we abort work.
         }
         const rootContainerInstance = getRootHostContainer();
@@ -1007,11 +1009,14 @@ function completeWork(
         if (nextState !== null && nextState.dehydrated !== null) {
           if (current === null) {
             const wasHydrated = popHydrationState(workInProgress);
-            invariant(
-              wasHydrated,
-              'A dehydrated suspense component was completed without a hydrated node. ' +
-                'This is probably a bug in React.',
-            );
+
+            if (!wasHydrated) {
+              throw new Error(
+                'A dehydrated suspense component was completed without a hydrated node. ' +
+                  'This is probably a bug in React.',
+              );
+            }
+
             prepareToHydrateHostSuspenseInstance(workInProgress);
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
@@ -1478,11 +1483,10 @@ function completeWork(
       }
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1155a817d61b6..89b8b980bc3e3 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -73,7 +73,6 @@ import {
   StaticMask,
   MutationMask,
 } from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createInstance,
@@ -897,11 +896,13 @@ function completeWork(
         }
       } else {
         if (!newProps) {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
+
           // This can happen when we abort work.
           bubbleProperties(workInProgress);
           return null;
@@ -973,11 +974,12 @@ function completeWork(
         updateHostText(current, workInProgress, oldText, newText);
       } else {
         if (typeof newText !== 'string') {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          if (workInProgress.stateNode === null) {
+            throw new Error(
+              'We must have new props for new mounts. This error is likely ' +
+                'caused by a bug in React. Please file an issue.',
+            );
+          }
           // This can happen when we abort work.
         }
         const rootContainerInstance = getRootHostContainer();
@@ -1007,11 +1009,14 @@ function completeWork(
         if (nextState !== null && nextState.dehydrated !== null) {
           if (current === null) {
             const wasHydrated = popHydrationState(workInProgress);
-            invariant(
-              wasHydrated,
-              'A dehydrated suspense component was completed without a hydrated node. ' +
-                'This is probably a bug in React.',
-            );
+
+            if (!wasHydrated) {
+              throw new Error(
+                'A dehydrated suspense component was completed without a hydrated node. ' +
+                  'This is probably a bug in React.',
+              );
+            }
+
             prepareToHydrateHostSuspenseInstance(workInProgress);
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
@@ -1478,11 +1483,10 @@ function completeWork(
       }
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberContext.new.js b/packages/react-reconciler/src/ReactFiberContext.new.js
index a7735f7b56e16..43d5e68abb05d 100644
--- a/packages/react-reconciler/src/ReactFiberContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberContext.new.js
@@ -14,7 +14,6 @@ import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 import {createCursor, push, pop} from './ReactFiberStack.new';
@@ -161,11 +160,12 @@ function pushTopLevelContextObject(
   if (disableLegacyContext) {
     return;
   } else {
-    invariant(
-      contextStackCursor.current === emptyContextObject,
-      'Unexpected context found on stack. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (contextStackCursor.current !== emptyContextObject) {
+      throw new Error(
+        'Unexpected context found on stack. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     push(contextStackCursor, context, fiber);
     push(didPerformWorkStackCursor, didChange, fiber);
@@ -205,12 +205,12 @@ function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromFiber(fiber) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromFiber(fiber) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromFiber(fiber) || 'Unknown';
@@ -256,11 +256,13 @@ function invalidateContextProvider(
     return;
   } else {
     const instance = workInProgress.stateNode;
-    invariant(
-      instance,
-      'Expected to have an instance by this point. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (!instance) {
+      throw new Error(
+        'Expected to have an instance by this point. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     if (didChange) {
       // Merge parent and own context.
@@ -293,11 +295,12 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
   } else {
     // Currently this is only used with renderSubtreeIntoContainer; not sure if it
     // makes sense elsewhere
-    invariant(
-      isFiberMounted(fiber) && fiber.tag === ClassComponent,
-      'Expected subtree parent to be a mounted class component. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (!isFiberMounted(fiber) || fiber.tag !== ClassComponent) {
+      throw new Error(
+        'Expected subtree parent to be a mounted class component. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     let node = fiber;
     do {
@@ -314,8 +317,8 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
       }
       node = node.return;
     } while (node !== null);
-    invariant(
-      false,
+
+    throw new Error(
       'Found unexpected detached subtree parent. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/react-reconciler/src/ReactFiberContext.old.js b/packages/react-reconciler/src/ReactFiberContext.old.js
index c4736bcbd3103..82bf05e6687c0 100644
--- a/packages/react-reconciler/src/ReactFiberContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberContext.old.js
@@ -14,7 +14,6 @@ import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 import {createCursor, push, pop} from './ReactFiberStack.old';
@@ -161,11 +160,12 @@ function pushTopLevelContextObject(
   if (disableLegacyContext) {
     return;
   } else {
-    invariant(
-      contextStackCursor.current === emptyContextObject,
-      'Unexpected context found on stack. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (contextStackCursor.current !== emptyContextObject) {
+      throw new Error(
+        'Unexpected context found on stack. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     push(contextStackCursor, context, fiber);
     push(didPerformWorkStackCursor, didChange, fiber);
@@ -205,12 +205,12 @@ function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromFiber(fiber) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromFiber(fiber) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromFiber(fiber) || 'Unknown';
@@ -256,11 +256,13 @@ function invalidateContextProvider(
     return;
   } else {
     const instance = workInProgress.stateNode;
-    invariant(
-      instance,
-      'Expected to have an instance by this point. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (!instance) {
+      throw new Error(
+        'Expected to have an instance by this point. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     if (didChange) {
       // Merge parent and own context.
@@ -293,11 +295,12 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
   } else {
     // Currently this is only used with renderSubtreeIntoContainer; not sure if it
     // makes sense elsewhere
-    invariant(
-      isFiberMounted(fiber) && fiber.tag === ClassComponent,
-      'Expected subtree parent to be a mounted class component. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (!isFiberMounted(fiber) || fiber.tag !== ClassComponent) {
+      throw new Error(
+        'Expected subtree parent to be a mounted class component. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     let node = fiber;
     do {
@@ -314,8 +317,8 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
       }
       node = node.return;
     } while (node !== null);
-    invariant(
-      false,
+
+    throw new Error(
       'Found unexpected detached subtree parent. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d6123454972ac..b66b62c9ade73 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -88,7 +88,6 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 
-import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
@@ -310,8 +309,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
 }
 
 function throwInvalidHookError() {
-  invariant(
-    false,
+  throw new 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:\n' +
       '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
@@ -436,11 +434,13 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      invariant(
-        numberOfReRenders < RE_RENDER_LIMIT,
-        'Too many re-renders. React limits the number of renders to prevent ' +
-          'an infinite loop.',
-      );
+
+      if (numberOfReRenders >= RE_RENDER_LIMIT) {
+        throw new Error(
+          'Too many re-renders. React limits the number of renders to prevent ' +
+            'an infinite loop.',
+        );
+      }
 
       numberOfReRenders += 1;
       if (__DEV__) {
@@ -516,11 +516,12 @@ export function renderWithHooks<Props, SecondArg>(
 
   didScheduleRenderPhaseUpdate = false;
 
-  invariant(
-    !didRenderTooFewHooks,
-    'Rendered fewer hooks than expected. This may be caused by an accidental ' +
-      'early return statement.',
-  );
+  if (didRenderTooFewHooks) {
+    throw new Error(
+      'Rendered fewer hooks than expected. This may be caused by an accidental ' +
+        'early return statement.',
+    );
+  }
 
   if (enableLazyContextPropagation) {
     if (current !== null) {
@@ -669,10 +670,10 @@ function updateWorkInProgressHook(): Hook {
   } else {
     // Clone from the current hook.
 
-    invariant(
-      nextCurrentHook !== null,
-      'Rendered more hooks than during the previous render.',
-    );
+    if (nextCurrentHook === null) {
+      throw new Error('Rendered more hooks than during the previous render.');
+    }
+
     currentHook = nextCurrentHook;
 
     const newHook: Hook = {
@@ -745,10 +746,12 @@ function updateReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -900,10 +903,12 @@ function rerenderReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -1037,8 +1042,7 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
 
     // We expect this error not to be thrown during the synchronous retry,
     // because we blocked interleaved mutations.
-    invariant(
-      false,
+    throw new Error(
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
@@ -1051,10 +1055,12 @@ function useMutableSource<Source, Snapshot>(
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
+
+  if (root === null) {
+    throw new Error(
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+  }
 
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
@@ -1242,8 +1248,7 @@ function mountSyncExternalStore<T>(
   const isHydrating = getIsHydrating();
   if (isHydrating) {
     if (getServerSnapshot === undefined) {
-      invariant(
-        false,
+      throw new Error(
         'Missing getServerSnapshot, which is required for ' +
           'server-rendered content. Will revert to client rendering.',
       );
@@ -1279,10 +1284,13 @@ function mountSyncExternalStore<T>(
     // the content is stale, it's already visible anyway. Instead we'll patch
     // it up in a passive effect.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1376,10 +1384,13 @@ function updateSyncExternalStore<T>(
     // Right before committing, we will walk the tree and check if any of the
     // stores were mutated.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1532,6 +1543,7 @@ function pushEffect(tag, create, destroy, deps) {
 let stackContainsErrorMessage: boolean | null = null;
 
 function getCallerStackFrame(): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const stackFrames = new Error('Error message').stack.split('\n');
 
   // Some browsers (e.g. Chrome) include the error message in the stack
@@ -2051,8 +2063,8 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
           setId(makeId());
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
           'passed through to attributes only. Do not read the value directly.',
       );
@@ -2383,7 +2395,7 @@ function markUpdateInDevTools(fiber, lane, action) {
 
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
   let cacheForType: T | void = (cache.get(resourceType): any);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index d4dacbc8833ce..af21b5f6f9da3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -88,7 +88,6 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 
-import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
@@ -310,8 +309,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
 }
 
 function throwInvalidHookError() {
-  invariant(
-    false,
+  throw new 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:\n' +
       '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
@@ -436,11 +434,13 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      invariant(
-        numberOfReRenders < RE_RENDER_LIMIT,
-        'Too many re-renders. React limits the number of renders to prevent ' +
-          'an infinite loop.',
-      );
+
+      if (numberOfReRenders >= RE_RENDER_LIMIT) {
+        throw new Error(
+          'Too many re-renders. React limits the number of renders to prevent ' +
+            'an infinite loop.',
+        );
+      }
 
       numberOfReRenders += 1;
       if (__DEV__) {
@@ -516,11 +516,12 @@ export function renderWithHooks<Props, SecondArg>(
 
   didScheduleRenderPhaseUpdate = false;
 
-  invariant(
-    !didRenderTooFewHooks,
-    'Rendered fewer hooks than expected. This may be caused by an accidental ' +
-      'early return statement.',
-  );
+  if (didRenderTooFewHooks) {
+    throw new Error(
+      'Rendered fewer hooks than expected. This may be caused by an accidental ' +
+        'early return statement.',
+    );
+  }
 
   if (enableLazyContextPropagation) {
     if (current !== null) {
@@ -669,10 +670,10 @@ function updateWorkInProgressHook(): Hook {
   } else {
     // Clone from the current hook.
 
-    invariant(
-      nextCurrentHook !== null,
-      'Rendered more hooks than during the previous render.',
-    );
+    if (nextCurrentHook === null) {
+      throw new Error('Rendered more hooks than during the previous render.');
+    }
+
     currentHook = nextCurrentHook;
 
     const newHook: Hook = {
@@ -745,10 +746,12 @@ function updateReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -900,10 +903,12 @@ function rerenderReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -1037,8 +1042,7 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
 
     // We expect this error not to be thrown during the synchronous retry,
     // because we blocked interleaved mutations.
-    invariant(
-      false,
+    throw new Error(
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
@@ -1051,10 +1055,12 @@ function useMutableSource<Source, Snapshot>(
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
+
+  if (root === null) {
+    throw new Error(
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+  }
 
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
@@ -1242,8 +1248,7 @@ function mountSyncExternalStore<T>(
   const isHydrating = getIsHydrating();
   if (isHydrating) {
     if (getServerSnapshot === undefined) {
-      invariant(
-        false,
+      throw new Error(
         'Missing getServerSnapshot, which is required for ' +
           'server-rendered content. Will revert to client rendering.',
       );
@@ -1279,10 +1284,13 @@ function mountSyncExternalStore<T>(
     // the content is stale, it's already visible anyway. Instead we'll patch
     // it up in a passive effect.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1376,10 +1384,13 @@ function updateSyncExternalStore<T>(
     // Right before committing, we will walk the tree and check if any of the
     // stores were mutated.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1532,6 +1543,7 @@ function pushEffect(tag, create, destroy, deps) {
 let stackContainsErrorMessage: boolean | null = null;
 
 function getCallerStackFrame(): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const stackFrames = new Error('Error message').stack.split('\n');
 
   // Some browsers (e.g. Chrome) include the error message in the stack
@@ -2051,8 +2063,8 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
           setId(makeId());
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
           'passed through to attributes only. Do not read the value directly.',
       );
@@ -2383,7 +2395,7 @@ function markUpdateInDevTools(fiber, lane, action) {
 
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
   let cacheForType: T | void = (cache.get(resourceType): any);
diff --git a/packages/react-reconciler/src/ReactFiberHostConfig.js b/packages/react-reconciler/src/ReactFiberHostConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfig.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index c57b313fd90fa..b95fd52d189b5 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support hydration
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support hydration. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
index 4d88494862016..5c55d9d59b01f 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support microtasks
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support microtasks. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
index 50e6758a8d3e1..59e8c450861f0 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support mutation
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support mutation. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
index 824cdeacc73fd..9f194fbc8a8df 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support persistence
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support persistence. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
index 9c9c893767789..6eb3d08a4de64 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support React Scopes
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support React Scopes. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
index b8c9777f7bd5f..964bf4b2c43d5 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support test selectors
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support test selectors. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.new.js b/packages/react-reconciler/src/ReactFiberHostContext.new.js
index 298a96afecac6..e7d9433136ad9 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.new.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Container, HostContext} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
-
 import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 
@@ -30,11 +28,13 @@ const rootInstanceStackCursor: StackCursor<
 > = createCursor(NO_CONTEXT);
 
 function requiredContext<Value>(c: Value | NoContextT): Value {
-  invariant(
-    c !== NO_CONTEXT,
-    'Expected host context to exist. This error is likely caused by a bug ' +
-      'in React. Please file an issue.',
-  );
+  if (c === NO_CONTEXT) {
+    throw new Error(
+      'Expected host context to exist. This error is likely caused by a bug ' +
+        'in React. Please file an issue.',
+    );
+  }
+
   return (c: any);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.old.js b/packages/react-reconciler/src/ReactFiberHostContext.old.js
index bfecfb7f525a0..667aeaf0ddefc 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.old.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Container, HostContext} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
-
 import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 
@@ -30,11 +28,13 @@ const rootInstanceStackCursor: StackCursor<
 > = createCursor(NO_CONTEXT);
 
 function requiredContext<Value>(c: Value | NoContextT): Value {
-  invariant(
-    c !== NO_CONTEXT,
-    'Expected host context to exist. This error is likely caused by a bug ' +
-      'in React. Please file an issue.',
-  );
+  if (c === NO_CONTEXT) {
+    throw new Error(
+      'Expected host context to exist. This error is likely caused by a bug ' +
+        'in React. Please file an issue.',
+    );
+  }
+
   return (c: any);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index 4c9eaf010125c..0867ffeb78439 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+/* eslint-disable react-internal/prod-error-codes */
+
 import type {ReactElement} from 'shared/ReactElementType';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index ee0616fae79c0..4a5f53d3be731 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+/* eslint-disable react-internal/prod-error-codes */
+
 import type {ReactElement} from 'shared/ReactElementType';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 2ebb1386a5684..f694d8407ecdf 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -25,7 +25,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -293,8 +292,7 @@ function prepareToHydrateHostInstance(
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -321,8 +319,7 @@ function prepareToHydrateHostInstance(
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostTextInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -369,8 +366,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
 function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -379,11 +375,14 @@ function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   hydrateSuspenseInstance(suspenseInstance, fiber);
 }
 
@@ -391,8 +390,7 @@ function skipPastDehydratedSuspenseInstance(
   fiber: Fiber,
 ): null | HydratableInstance {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -400,11 +398,14 @@ function skipPastDehydratedSuspenseInstance(
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index c8e17e0b6374f..3918c014ca146 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -25,7 +25,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -293,8 +292,7 @@ function prepareToHydrateHostInstance(
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -321,8 +319,7 @@ function prepareToHydrateHostInstance(
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostTextInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -369,8 +366,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
 function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -379,11 +375,14 @@ function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   hydrateSuspenseInstance(suspenseInstance, fiber);
 }
 
@@ -391,8 +390,7 @@ function skipPastDehydratedSuspenseInstance(
   fiber: Fiber,
 ): null | HydratableInstance {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -400,11 +398,14 @@ function skipPastDehydratedSuspenseInstance(
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  if (!suspenseInstance) {
+    throw new Error(
+      'Expected to have a hydrated suspense instance. ' +
+        'This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 421351b3bda56..2f59cbec27f29 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -38,7 +38,6 @@ import {
   NeedsPropagation,
 } from './ReactFiberFlags';
 
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.new';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
@@ -269,10 +268,13 @@ function propagateContextChange_eager<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -388,10 +390,13 @@ function propagateContextChanges<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -493,10 +498,11 @@ function propagateParentContextChanges(
 
     if (parent.tag === ContextProvider) {
       const currentParent = parent.alternate;
-      invariant(
-        currentParent !== null,
-        'Should have a current fiber. This is a bug in React.',
-      );
+
+      if (currentParent === null) {
+        throw new Error('Should have a current fiber. This is a bug in React.');
+      }
+
       const oldProps = currentParent.memoizedProps;
       if (oldProps !== null) {
         const providerType: ReactProviderType<any> = parent.type;
@@ -631,13 +637,14 @@ export function readContext<T>(context: ReactContext<T>): T {
     };
 
     if (lastContextDependency === null) {
-      invariant(
-        currentlyRenderingFiber !== null,
-        'Context can only be read while React is rendering. ' +
-          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-          'In function components, you can read it directly in the function body, but not ' +
-          'inside Hooks like useReducer() or useMemo().',
-      );
+      if (currentlyRenderingFiber === null) {
+        throw new Error(
+          'Context can only be read while React is rendering. ' +
+            'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+            'In function components, you can read it directly in the function body, but not ' +
+            'inside Hooks like useReducer() or useMemo().',
+        );
+      }
 
       // This is the first dependency for this component. Create a new list.
       lastContextDependency = contextItem;
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 24fd5f6e4331e..0d492397afd8e 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -38,7 +38,6 @@ import {
   NeedsPropagation,
 } from './ReactFiberFlags';
 
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.old';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
@@ -269,10 +268,13 @@ function propagateContextChange_eager<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -388,10 +390,13 @@ function propagateContextChanges<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === null) {
+        throw new Error(
+          'We just came from a parent so we must have had a parent. This is a bug in React.',
+        );
+      }
+
       parentSuspense.lanes = mergeLanes(parentSuspense.lanes, renderLanes);
       const alternate = parentSuspense.alternate;
       if (alternate !== null) {
@@ -493,10 +498,11 @@ function propagateParentContextChanges(
 
     if (parent.tag === ContextProvider) {
       const currentParent = parent.alternate;
-      invariant(
-        currentParent !== null,
-        'Should have a current fiber. This is a bug in React.',
-      );
+
+      if (currentParent === null) {
+        throw new Error('Should have a current fiber. This is a bug in React.');
+      }
+
       const oldProps = currentParent.memoizedProps;
       if (oldProps !== null) {
         const providerType: ReactProviderType<any> = parent.type;
@@ -631,13 +637,14 @@ export function readContext<T>(context: ReactContext<T>): T {
     };
 
     if (lastContextDependency === null) {
-      invariant(
-        currentlyRenderingFiber !== null,
-        'Context can only be read while React is rendering. ' +
-          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-          'In function components, you can read it directly in the function body, but not ' +
-          'inside Hooks like useReducer() or useMemo().',
-      );
+      if (currentlyRenderingFiber === null) {
+        throw new Error(
+          'Context can only be read while React is rendering. ' +
+            'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
+            'In function components, you can read it directly in the function body, but not ' +
+            'inside Hooks like useReducer() or useMemo().',
+        );
+      }
 
       // This is the first dependency for this component. Create a new list.
       lastContextDependency = contextItem;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 95844fcbf2e8d..6c42165a30347 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -33,7 +33,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -153,12 +152,11 @@ function findHostInstance(component: Object): PublicInstance | null {
   const fiber = getInstance(component);
   if (fiber === undefined) {
     if (typeof component.render === 'function') {
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     } else {
-      invariant(
-        false,
-        'Argument appears to not be a ReactComponent. Keys: %s',
-        Object.keys(component),
+      const keys = Object.keys(component).join(',');
+      throw new Error(
+        `Argument appears to not be a ReactComponent. Keys: ${keys}`,
       );
     }
   }
@@ -177,12 +175,11 @@ function findHostInstanceWithWarning(
     const fiber = getInstance(component);
     if (fiber === undefined) {
       if (typeof component.render === 'function') {
-        invariant(false, 'Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       } else {
-        invariant(
-          false,
-          'Argument appears to not be a ReactComponent. Keys: %s',
-          Object.keys(component),
+        const keys = Object.keys(component).join(',');
+        throw new Error(
+          `Argument appears to not be a ReactComponent. Keys: ${keys}`,
         );
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 802b1bc97111b..7693cc7fe4006 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -33,7 +33,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -153,12 +152,11 @@ function findHostInstance(component: Object): PublicInstance | null {
   const fiber = getInstance(component);
   if (fiber === undefined) {
     if (typeof component.render === 'function') {
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     } else {
-      invariant(
-        false,
-        'Argument appears to not be a ReactComponent. Keys: %s',
-        Object.keys(component),
+      const keys = Object.keys(component).join(',');
+      throw new Error(
+        `Argument appears to not be a ReactComponent. Keys: ${keys}`,
       );
     }
   }
@@ -177,12 +175,11 @@ function findHostInstanceWithWarning(
     const fiber = getInstance(component);
     if (fiber === undefined) {
       if (typeof component.render === 'function') {
-        invariant(false, 'Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       } else {
-        invariant(
-          false,
-          'Argument appears to not be a ReactComponent. Keys: %s',
-          Object.keys(component),
+        const keys = Object.keys(component).join(',');
+        throw new Error(
+          `Argument appears to not be a ReactComponent. Keys: ${keys}`,
         );
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 78e88f125a1aa..85728d96bb730 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -474,7 +474,8 @@ function throwException(
       return;
     } else {
       // No boundary was found. Fallthrough to error mode.
-      // TODO: Use invariant so the message is stripped in prod?
+      // TODO: We should never call getComponentNameFromFiber in production.
+      // Log a warning or something to prevent us from accidentally bundling it.
       value = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index d2d39793a3bc0..27b0719ba8532 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -474,7 +474,8 @@ function throwException(
       return;
     } else {
       // No boundary was found. Fallthrough to error mode.
-      // TODO: Use invariant so the message is stripped in prod?
+      // TODO: We should never call getComponentNameFromFiber in production.
+      // Log a warning or something to prevent us from accidentally bundling it.
       value = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index 510c58eaf2b31..4aa5a203ae3a9 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Container, SuspenseInstance} from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 
-import invariant from 'shared/invariant';
-
 import {get as getInstance} from 'shared/ReactInstanceMap';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -116,10 +114,9 @@ export function isMounted(component: React$Component<any, any>): boolean {
 }
 
 function assertIsMounted(fiber) {
-  invariant(
-    getNearestMountedFiber(fiber) === fiber,
-    'Unable to find node on an unmounted component.',
-  );
+  if (getNearestMountedFiber(fiber) !== fiber) {
+    throw new Error('Unable to find node on an unmounted component.');
+  }
 }
 
 export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
@@ -127,10 +124,11 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
   if (!alternate) {
     // If there is no alternate, then we only need to check if it is mounted.
     const nearestMounted = getNearestMountedFiber(fiber);
-    invariant(
-      nearestMounted !== null,
-      'Unable to find node on an unmounted component.',
-    );
+
+    if (nearestMounted === null) {
+      throw new Error('Unable to find node on an unmounted component.');
+    }
+
     if (nearestMounted !== fiber) {
       return null;
     }
@@ -180,9 +178,10 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
         }
         child = child.sibling;
       }
+
       // We should never have an alternate for any mounting node. So the only
       // way this could possibly happen is if this was unmounted, if at all.
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     }
 
     if (a.return !== b.return) {
@@ -233,26 +232,30 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
           }
           child = child.sibling;
         }
-        invariant(
-          didFindChild,
-          'Child was not found in either parent set. This indicates a bug ' +
-            'in React related to the return pointer. Please file an issue.',
-        );
+
+        if (!didFindChild) {
+          throw new Error(
+            'Child was not found in either parent set. This indicates a bug ' +
+              'in React related to the return pointer. Please file an issue.',
+          );
+        }
       }
     }
 
-    invariant(
-      a.alternate === b,
-      "Return fibers should always be each others' alternates. " +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (a.alternate !== b) {
+      throw new Error(
+        "Return fibers should always be each others' alternates. " +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
   }
+
   // If the root is not a host container, we're in a disconnected tree. I.e.
   // unmounted.
-  invariant(
-    a.tag === HostRoot,
-    'Unable to find node on an unmounted component.',
-  );
+  if (a.tag !== HostRoot) {
+    throw new Error('Unable to find node on an unmounted component.');
+  }
+
   if (a.stateNode.current === a) {
     // We've determined that A is the current branch.
     return fiber;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 152837286f5d2..ba8bd4b573957 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -51,8 +51,6 @@ import {
 } from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 
-import invariant from 'shared/invariant';
-
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   switch (workInProgress.tag) {
     case ClassComponent: {
@@ -85,11 +83,14 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-      invariant(
-        (flags & DidCapture) === NoFlags,
-        'The root failed to unmount after an error. This is likely a bug in ' +
-          'React. Please file an issue.',
-      );
+
+      if ((flags & DidCapture) !== NoFlags) {
+        throw new Error(
+          'The root failed to unmount after an error. This is likely a bug in ' +
+            'React. Please file an issue.',
+        );
+      }
+
       workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
       return workInProgress;
     }
@@ -104,11 +105,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
         const suspenseState: null | SuspenseState =
           workInProgress.memoizedState;
         if (suspenseState !== null && suspenseState.dehydrated !== null) {
-          invariant(
-            workInProgress.alternate !== null,
-            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
-              'React. Please file an issue.',
-          );
+          if (workInProgress.alternate === null) {
+            throw new Error(
+              'Threw in newly mounted dehydrated component. This is likely a bug in ' +
+                'React. Please file an issue.',
+            );
+          }
+
           resetHydrationState();
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 88861db778be3..ad8e479700db0 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -51,8 +51,6 @@ import {
 } from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 
-import invariant from 'shared/invariant';
-
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   switch (workInProgress.tag) {
     case ClassComponent: {
@@ -85,11 +83,14 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-      invariant(
-        (flags & DidCapture) === NoFlags,
-        'The root failed to unmount after an error. This is likely a bug in ' +
-          'React. Please file an issue.',
-      );
+
+      if ((flags & DidCapture) !== NoFlags) {
+        throw new Error(
+          'The root failed to unmount after an error. This is likely a bug in ' +
+            'React. Please file an issue.',
+        );
+      }
+
       workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
       return workInProgress;
     }
@@ -104,11 +105,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
         const suspenseState: null | SuspenseState =
           workInProgress.memoizedState;
         if (suspenseState !== null && suspenseState.dehydrated !== null) {
-          invariant(
-            workInProgress.alternate !== null,
-            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
-              'React. Please file an issue.',
-          );
+          if (workInProgress.alternate === null) {
+            throw new Error(
+              'Threw in newly mounted dehydrated component. This is likely a bug in ' +
+                'React. Please file an issue.',
+            );
+          }
+
           resetHydrationState();
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 830ae6500663e..aaeac5fdb22e1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -34,7 +34,6 @@ import {
   warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 
 import {
@@ -737,10 +736,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   currentEventTime = NoTimestamp;
   currentEventTransitionLane = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   // Flush any pending passive effects before deciding which lanes to work on,
   // in case they schedule additional work.
@@ -878,7 +876,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
     case RootFatalErrored: {
-      invariant(false, 'Root did not complete. This is a bug in React.');
+      throw new Error('Root did not complete. This is a bug in React.');
     }
     // Flow knows about invariant, so it complains if I add a break
     // statement, but eslint doesn't know about invariant, so it complains
@@ -981,7 +979,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       break;
     }
     default: {
-      invariant(false, 'Unknown root exit status.');
+      throw new Error('Unknown root exit status.');
     }
   }
 }
@@ -1055,10 +1053,9 @@ function performSyncWorkOnRoot(root) {
     syncNestedUpdateFlag();
   }
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   flushPassiveEffects();
 
@@ -1525,8 +1522,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 
   if (workInProgress !== null) {
     // This is a sync render, so we should have finished the whole tree.
-    invariant(
-      false,
+    throw new Error(
       'Cannot commit an incomplete root. This error is likely caused by a ' +
         'bug in React. Please file an issue.',
     );
@@ -1796,10 +1792,9 @@ function commitRootImpl(root, renderPriorityLevel) {
   } while (rootWithPendingPassiveEffects !== null);
   flushRenderPhaseStrictModeWarningsInDEV();
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   const finishedWork = root.finishedWork;
   const lanes = root.finishedLanes;
@@ -1839,11 +1834,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
-  invariant(
-    finishedWork !== root.current,
-    'Cannot commit the same tree as before. This error is likely caused by ' +
-      'a bug in React. Please file an issue.',
-  );
+  if (finishedWork === root.current) {
+    throw new Error(
+      'Cannot commit the same tree as before. This error is likely caused by ' +
+        'a bug in React. Please file an issue.',
+    );
+  }
 
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
@@ -2154,10 +2150,9 @@ function flushPassiveEffectsImpl() {
   // because it's only used for profiling), but it's a refactor hazard.
   pendingPassiveEffectsLanes = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Cannot flush passive effects while already rendering.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Cannot flush passive effects while already rendering.');
+  }
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2418,8 +2413,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
         retryCache = boundaryFiber.stateNode;
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'Pinged unknown suspense boundary type. ' +
             'This is probably a bug in React.',
         );
@@ -2466,8 +2460,8 @@ function checkForNestedUpdates() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
     rootWithNestedUpdates = null;
-    invariant(
-      false,
+
+    throw new Error(
       'Maximum update depth exceeded. This can happen when a component ' +
         'repeatedly calls setState inside componentWillUpdate or ' +
         'componentDidUpdate. React limits the number of nested updates to ' +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 9cfea1563a18e..67984298a5dea 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -34,7 +34,6 @@ import {
   warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 
 import {
@@ -737,10 +736,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   currentEventTime = NoTimestamp;
   currentEventTransitionLane = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   // Flush any pending passive effects before deciding which lanes to work on,
   // in case they schedule additional work.
@@ -878,7 +876,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
     case RootFatalErrored: {
-      invariant(false, 'Root did not complete. This is a bug in React.');
+      throw new Error('Root did not complete. This is a bug in React.');
     }
     // Flow knows about invariant, so it complains if I add a break
     // statement, but eslint doesn't know about invariant, so it complains
@@ -981,7 +979,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       break;
     }
     default: {
-      invariant(false, 'Unknown root exit status.');
+      throw new Error('Unknown root exit status.');
     }
   }
 }
@@ -1055,10 +1053,9 @@ function performSyncWorkOnRoot(root) {
     syncNestedUpdateFlag();
   }
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   flushPassiveEffects();
 
@@ -1525,8 +1522,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 
   if (workInProgress !== null) {
     // This is a sync render, so we should have finished the whole tree.
-    invariant(
-      false,
+    throw new Error(
       'Cannot commit an incomplete root. This error is likely caused by a ' +
         'bug in React. Please file an issue.',
     );
@@ -1796,10 +1792,9 @@ function commitRootImpl(root, renderPriorityLevel) {
   } while (rootWithPendingPassiveEffects !== null);
   flushRenderPhaseStrictModeWarningsInDEV();
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   const finishedWork = root.finishedWork;
   const lanes = root.finishedLanes;
@@ -1839,11 +1834,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
-  invariant(
-    finishedWork !== root.current,
-    'Cannot commit the same tree as before. This error is likely caused by ' +
-      'a bug in React. Please file an issue.',
-  );
+  if (finishedWork === root.current) {
+    throw new Error(
+      'Cannot commit the same tree as before. This error is likely caused by ' +
+        'a bug in React. Please file an issue.',
+    );
+  }
 
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
@@ -2154,10 +2150,9 @@ function flushPassiveEffectsImpl() {
   // because it's only used for profiling), but it's a refactor hazard.
   pendingPassiveEffectsLanes = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Cannot flush passive effects while already rendering.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Cannot flush passive effects while already rendering.');
+  }
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2418,8 +2413,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
         retryCache = boundaryFiber.stateNode;
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'Pinged unknown suspense boundary type. ' +
             'This is probably a bug in React.',
         );
@@ -2466,8 +2460,8 @@ function checkForNestedUpdates() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
     rootWithNestedUpdates = null;
-    invariant(
-      false,
+
+    throw new Error(
       'Maximum update depth exceeded. This can happen when a component ' +
         'repeatedly calls setState inside componentWillUpdate or ' +
         'componentDidUpdate. React limits the number of nested updates to ' +
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index 58e888c168585..adadc8ed73e80 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -10,7 +10,6 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Instance} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {
@@ -116,17 +115,22 @@ export function createTestNameSelector(id: string): TestNameSelector {
 function findFiberRootForHostRoot(hostRoot: Instance): Fiber {
   const maybeFiber = getInstanceFromNode((hostRoot: any));
   if (maybeFiber != null) {
-    invariant(
-      typeof maybeFiber.memoizedProps['data-testname'] === 'string',
-      'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
-    );
+    if (typeof maybeFiber.memoizedProps['data-testname'] !== 'string') {
+      throw new Error(
+        'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
+      );
+    }
+
     return ((maybeFiber: any): Fiber);
   } else {
     const fiberRoot = findFiberRoot(hostRoot);
-    invariant(
-      fiberRoot !== null,
-      'Could not find React container within specified host subtree.',
-    );
+
+    if (fiberRoot === null) {
+      throw new Error(
+        'Could not find React container within specified host subtree.',
+      );
+    }
+
     // The Flow type for FiberRoot is a little funky.
     // createFiberRoot() cheats this by treating the root as :any and adding stateNode lazily.
     return ((fiberRoot: any).stateNode.current: Fiber);
@@ -179,8 +183,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
       }
       break;
     default:
-      invariant(null, 'Invalid selector type %s specified.', selector);
-      break;
+      throw new Error('Invalid selector type specified.');
   }
 
   return false;
@@ -200,11 +203,8 @@ function selectorToString(selector: Selector): string | null {
     case TEST_NAME_TYPE:
       return `[data-testname="${((selector: any): TestNameSelector).value}"]`;
     default:
-      invariant(null, 'Invalid selector type %s specified.', selector);
-      break;
+      throw new Error('Invalid selector type specified.');
   }
-
-  return null;
 }
 
 function findPaths(root: Fiber, selectors: Array<Selector>): Array<Fiber> {
@@ -277,7 +277,7 @@ export function findAllNodes(
   selectors: Array<Selector>,
 ): Array<Instance> {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -311,7 +311,7 @@ export function getFindAllNodesFailureDescription(
   selectors: Array<Selector>,
 ): string | null {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -376,7 +376,7 @@ export function findBoundingRects(
   selectors: Array<Selector>,
 ): Array<BoundingRect> {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const instanceRoots = findAllNodes(hostRoot, selectors);
@@ -466,7 +466,7 @@ export function focusWithin(
   selectors: Array<Selector>,
 ): boolean {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -516,7 +516,7 @@ export function observeVisibleRects(
   options?: IntersectionObserverOptions,
 ): {|disconnect: () => void|} {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const instanceRoots = findAllNodes(hostRoot, selectors);
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index cbfe307b903f2..c9a980890a0ad 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -112,8 +112,6 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
-import invariant from 'shared/invariant';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -656,12 +654,13 @@ export function processUpdateQueue<State>(
 }
 
 function callCallback(callback, context) {
-  invariant(
-    typeof callback === 'function',
-    'Invalid argument passed as callback. Expected a function. Instead ' +
-      'received: %s',
-    callback,
-  );
+  if (typeof callback !== 'function') {
+    throw new Error(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        `received: ${callback}`,
+    );
+  }
+
   callback.call(context);
 }
 
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index ece4321d6bfdb..9ef09b17efd10 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -112,8 +112,6 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
-import invariant from 'shared/invariant';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -656,12 +654,13 @@ export function processUpdateQueue<State>(
 }
 
 function callCallback(callback, context) {
-  invariant(
-    typeof callback === 'function',
-    'Invalid argument passed as callback. Expected a function. Instead ' +
-      'received: %s',
-    callback,
-  );
+  if (typeof callback !== 'function') {
+    throw new Error(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        `received: ${callback}`,
+    );
+  }
+
   callback.call(context);
 }
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
index f0bd70db61426..33fc912b90e6c 100644
--- a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
+++ b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
@@ -15,12 +15,11 @@ import {ClassComponent} from '../ReactWorkTags';
 // Module provided by RN:
 import {ReactFiberErrorDialog as RNImpl} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
-import invariant from 'shared/invariant';
-
-invariant(
-  typeof RNImpl.showErrorDialog === 'function',
-  'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
-);
+if (typeof RNImpl.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
 
 export function showErrorDialog(
   boundary: Fiber,
diff --git a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
index f0a9d92593b1a..617e8afbde90e 100644
--- a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
+++ b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
@@ -12,14 +12,14 @@ import type {CapturedValue} from '../ReactCapturedValue';
 
 import {ClassComponent} from '../ReactWorkTags';
 
-import invariant from 'shared/invariant';
-
 // Provided by www
 const ReactFiberErrorDialogWWW = require('ReactFiberErrorDialog');
-invariant(
-  typeof ReactFiberErrorDialogWWW.showErrorDialog === 'function',
-  'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
-);
+
+if (typeof ReactFiberErrorDialogWWW.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
 
 export function showErrorDialog(
   boundary: Fiber,
diff --git a/packages/react-server/src/ReactFizzContext.js b/packages/react-server/src/ReactFizzContext.js
index 7837d15753d49..3834a6f1076ff 100644
--- a/packages/react-server/src/ReactFizzContext.js
+++ b/packages/react-server/src/ReactFizzContext.js
@@ -9,7 +9,6 @@
 
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 let warnedAboutMissingGetChildContext;
@@ -77,12 +76,12 @@ export function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromType(type) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromType(type) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromType(type) || 'Unknown';
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 860dc63962dab..6370f61b37735 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -22,7 +22,6 @@ import {readContext as readContextImpl} from './ReactFizzNewContext';
 
 import {makeServerID} from './ReactServerFormatConfig';
 
-import invariant from 'shared/invariant';
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -64,15 +63,17 @@ let isInHookUserCodeInDev = false;
 let currentHookNameInDev: ?string;
 
 function resolveCurrentlyRenderingComponent(): Object {
-  invariant(
-    currentlyRenderingComponent !== null,
-    '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:\n' +
-      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-      '2. You might be breaking the Rules of Hooks\n' +
-      '3. You might have more than one copy of React in the same app\n' +
-      'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-  );
+  if (currentlyRenderingComponent === null) {
+    throw new 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:\n' +
+        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+        '2. You might be breaking the Rules of Hooks\n' +
+        '3. You might have more than one copy of React in the same app\n' +
+        'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  }
+
   if (__DEV__) {
     if (isInHookUserCodeInDev) {
       console.error(
@@ -128,7 +129,7 @@ function areHookInputsEqual(
 
 function createHook(): Hook {
   if (numberOfReRenders > 0) {
-    invariant(false, 'Rendered more hooks than during the previous render');
+    throw new Error('Rendered more hooks than during the previous render');
   }
   return {
     memoizedState: null,
@@ -219,7 +220,7 @@ export function resetHooksState(): void {
 function getCacheForType<T>(resourceType: () => T): T {
   // TODO: This should silently mark this as client rendered since it's not necesssarily
   // considered an error. It needs to work for things like Flight though.
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
@@ -406,11 +407,12 @@ function dispatchAction<A>(
   queue: UpdateQueue<A>,
   action: A,
 ) {
-  invariant(
-    numberOfReRenders < RE_RENDER_LIMIT,
-    'Too many re-renders. React limits the number of renders to prevent ' +
-      'an infinite loop.',
-  );
+  if (numberOfReRenders >= RE_RENDER_LIMIT) {
+    throw new Error(
+      'Too many re-renders. React limits the number of renders to prevent ' +
+        'an infinite loop.',
+    );
+  }
 
   if (componentIdentity === currentlyRenderingComponent) {
     // This is a render phase update. Stash it in a lazily-created map of
@@ -467,8 +469,7 @@ function useSyncExternalStore<T>(
   getServerSnapshot?: () => T,
 ): T {
   if (getServerSnapshot === undefined) {
-    invariant(
-      false,
+    throw new Error(
       'Missing getServerSnapshot, which is required for ' +
         'server-rendered content. Will revert to client rendering.',
     );
@@ -482,7 +483,7 @@ function useDeferredValue<T>(value: T): T {
 }
 
 function unsupportedStartTransition() {
-  invariant(false, 'startTransition cannot be called during server rendering.');
+  throw new Error('startTransition cannot be called during server rendering.');
 }
 
 function useTransition(): [boolean, (callback: () => void) => void] {
@@ -495,7 +496,7 @@ function useOpaqueIdentifier(): OpaqueIDType {
 }
 
 function unsupportedRefresh() {
-  invariant(false, 'Cache cannot be refreshed during server rendering.');
+  throw new Error('Cache cannot be refreshed during server rendering.');
 }
 
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
index 43f364717d81f..0cb879ef780d6 100644
--- a/packages/react-server/src/ReactFizzNewContext.js
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -11,8 +11,6 @@ import type {ReactContext} from 'shared/ReactTypes';
 
 import {isPrimaryRenderer} from './ReactServerFormatConfig';
 
-import invariant from 'shared/invariant';
-
 let rendererSigil;
 if (__DEV__) {
   // Use this to detect multiple renderers using the same context
@@ -67,15 +65,18 @@ function popToNearestCommonAncestor(
     const parentPrev = prev.parent;
     const parentNext = next.parent;
     if (parentPrev === null) {
-      invariant(
-        parentNext === null,
-        'The stacks must reach the root at the same time. This is a bug in React.',
-      );
+      if (parentNext !== null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.',
+        );
+      }
     } else {
-      invariant(
-        parentNext !== null,
-        'The stacks must reach the root at the same time. This is a bug in React.',
-      );
+      if (parentNext === null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.',
+        );
+      }
+
       popToNearestCommonAncestor(parentPrev, parentNext);
       // On the way back, we push the new ones that weren't common.
       pushNode(next);
@@ -105,10 +106,13 @@ function popPreviousToCommonLevel(
 ): void {
   popNode(prev);
   const parentPrev = prev.parent;
-  invariant(
-    parentPrev !== null,
-    'The depth must equal at least at zero before reaching the root. This is a bug in React.',
-  );
+
+  if (parentPrev === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.',
+    );
+  }
+
   if (parentPrev.depth === next.depth) {
     // We found the same level. Now we just need to find a shared ancestor.
     popToNearestCommonAncestor(parentPrev, next);
@@ -123,10 +127,13 @@ function popNextToCommonLevel(
   next: ContextNode<any>,
 ): void {
   const parentNext = next.parent;
-  invariant(
-    parentNext !== null,
-    'The depth must equal at least at zero before reaching the root. This is a bug in React.',
-  );
+
+  if (parentNext === null) {
+    throw new Error(
+      'The depth must equal at least at zero before reaching the root. This is a bug in React.',
+    );
+  }
+
   if (prev.depth === parentNext.depth) {
     // We found the same level. Now we just need to find a shared ancestor.
     popToNearestCommonAncestor(prev, parentNext);
@@ -221,10 +228,13 @@ export function pushProvider<T>(
 
 export function popProvider<T>(context: ReactContext<T>): ContextSnapshot {
   const prevSnapshot = currentActiveSnapshot;
-  invariant(
-    prevSnapshot !== null,
-    'Tried to pop a Context at the root of the app. This is a bug in React.',
-  );
+
+  if (prevSnapshot === null) {
+    throw new Error(
+      'Tried to pop a Context at the root of the app. This is a bug in React.',
+    );
+  }
+
   if (__DEV__) {
     if (prevSnapshot.context !== context) {
       console.error(
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index e9396c861ee4c..4ab2f06d518db 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -113,7 +113,6 @@ import {
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
@@ -984,7 +983,7 @@ function renderElement(
         renderNodeDestructive(request, task, props.children);
         return;
       }
-      invariant(false, 'ReactDOMServer does not yet support scope components.');
+      throw new Error('ReactDOMServer does not yet support scope components.');
     }
     // eslint-disable-next-line-no-fallthrough
     case REACT_SUSPENSE_TYPE: {
@@ -1039,13 +1038,11 @@ function renderElement(
         'named imports.';
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Element type is invalid: expected a string (for built-in ' +
       'components) or a class/function (for composite components) ' +
-      'but got: %s.%s',
-    type == null ? type : typeof type,
-    info,
+      `but got: ${type == null ? type : typeof type}.${info}`,
   );
 }
 
@@ -1106,8 +1103,7 @@ function renderNodeDestructive(
         return;
       }
       case REACT_PORTAL_TYPE:
-        invariant(
-          false,
+        throw new Error(
           'Portals are not currently supported by the server renderer. ' +
             'Render them conditionally so that they only appear on the client render.',
         );
@@ -1157,14 +1153,15 @@ function renderNodeDestructive(
     }
 
     const childString = Object.prototype.toString.call(node);
-    invariant(
-      false,
-      'Objects are not valid as a React child (found: %s). ' +
+
+    throw new Error(
+      `Objects are not valid as a React child (found: ${
+        childString === '[object Object]'
+          ? 'object with keys {' + Object.keys(node).join(', ') + '}'
+          : childString
+      }). ` +
         'If you meant to render a collection of children, use an array ' +
         'instead.',
-      childString === '[object Object]'
-        ? 'object with keys {' + Object.keys(node).join(', ') + '}'
-        : childString,
     );
   }
 
@@ -1370,10 +1367,12 @@ function finishedTask(
 ) {
   if (boundary === null) {
     if (segment.parentFlushed) {
-      invariant(
-        request.completedRootSegment === null,
-        'There can only be one root segment. This is a bug in React.',
-      );
+      if (request.completedRootSegment !== null) {
+        throw new Error(
+          'There can only be one root segment. This is a bug in React.',
+        );
+      }
+
       request.completedRootSegment = segment;
     }
     request.pendingRootTasks--;
@@ -1557,8 +1556,7 @@ function flushSubtree(
       return r;
     }
     default: {
-      invariant(
-        false,
+      throw new Error(
         'Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.',
       );
     }
@@ -1640,10 +1638,13 @@ function flushSegment(
     writeStartCompletedSuspenseBoundary(destination, request.responseState);
 
     const completedSegments = boundary.completedSegments;
-    invariant(
-      completedSegments.length === 1,
-      'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
-    );
+
+    if (completedSegments.length !== 1) {
+      throw new Error(
+        'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
+      );
+    }
+
     const contentSegment = completedSegments[0];
     flushSegment(request, destination, contentSegment);
 
@@ -1741,10 +1742,13 @@ function flushPartiallyCompletedSegment(
     // This segment wasn't previously referred to. This happens at the root of
     // a boundary. We make kind of a leap here and assume this is the root.
     const rootSegmentID = (segment.id = boundary.rootSegmentID);
-    invariant(
-      rootSegmentID !== -1,
-      'A root segment ID must have been assigned by now. This is a bug in React.',
-    );
+
+    if (rootSegmentID === -1) {
+      throw new Error(
+        'A root segment ID must have been assigned by now. This is a bug in React.',
+      );
+    }
+
     return flushSegmentContainer(request, destination, segment);
   } else {
     flushSegmentContainer(request, destination, segment);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 8247a904ec997..7bd7a95c25611 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -43,7 +43,6 @@ import {
 } from 'shared/ReactSymbols';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 type ReactJSONValue =
@@ -141,8 +140,7 @@ function attemptResolveElement(
     // When the ref moves to the regular props object this will implicitly
     // throw for functions. We could probably relax it to a DEV warning for other
     // cases.
-    invariant(
-      false,
+    throw new Error(
       'Refs cannot be used in server components, nor passed to client components.',
     );
   }
@@ -178,10 +176,8 @@ function attemptResolveElement(
       }
     }
   }
-  invariant(
-    false,
-    'Unsupported server component type: %s',
-    describeValueForErrorMessage(type),
+  throw new Error(
+    `Unsupported server component type: ${describeValueForErrorMessage(type)}`,
   );
 }
 
@@ -395,8 +391,7 @@ export function resolveModelToJSON(
     case REACT_ELEMENT_TYPE:
       return '$';
     case REACT_LAZY_TYPE:
-      invariant(
-        false,
+      throw new Error(
         'React Lazy Components are not yet supported on the server.',
       );
   }
@@ -537,23 +532,25 @@ export function resolveModelToJSON(
 
   if (typeof value === 'function') {
     if (/^on[A-Z]/.test(key)) {
-      invariant(
-        false,
+      throw new Error(
         'Event handlers cannot be passed to client component props. ' +
-          'Remove %s from these props if possible: %s\n' +
+          `Remove ${describeKeyForErrorMessage(
+            key,
+          )} from these props if possible: ${describeObjectForErrorMessage(
+            parent,
+          )}
+` +
           'If you need interactivity, consider converting part of this to a client component.',
-        describeKeyForErrorMessage(key),
-        describeObjectForErrorMessage(parent),
       );
     } else {
-      invariant(
-        false,
+      throw new Error(
         'Functions cannot be passed directly to client components ' +
           "because they're not serializable. " +
-          'Remove %s (%s) from this object, or avoid the entire object: %s',
-        describeKeyForErrorMessage(key),
-        value.displayName || value.name || 'function',
-        describeObjectForErrorMessage(parent),
+          `Remove ${describeKeyForErrorMessage(key)} (${value.displayName ||
+            value.name ||
+            'function'}) from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+            parent,
+          )}`,
       );
     }
   }
@@ -565,15 +562,19 @@ export function resolveModelToJSON(
       return serializeByValueID(existingId);
     }
     const name = value.description;
-    invariant(
-      Symbol.for(name) === value,
-      'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
-        'The symbol Symbol.for(%s) cannot be found among global symbols. ' +
-        'Remove %s from this object, or avoid the entire object: %s',
-      value.description,
-      describeKeyForErrorMessage(key),
-      describeObjectForErrorMessage(parent),
-    );
+
+    if (Symbol.for(name) !== value) {
+      throw new Error(
+        'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
+          `The symbol Symbol.for(${value.description}) cannot be found among global symbols. ` +
+          `Remove ${describeKeyForErrorMessage(
+            key,
+          )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+            parent,
+          )}`,
+      );
+    }
+
     request.pendingChunks++;
     const symbolId = request.nextChunkId++;
     emitSymbolChunk(request, symbolId, name);
@@ -583,23 +584,23 @@ export function resolveModelToJSON(
 
   // $FlowFixMe: bigint isn't added to Flow yet.
   if (typeof value === 'bigint') {
-    invariant(
-      false,
-      'BigInt (%s) is not yet supported in client component props. ' +
-        'Remove %s from this object or use a plain number instead: %s',
-      value,
-      describeKeyForErrorMessage(key),
-      describeObjectForErrorMessage(parent),
+    throw new Error(
+      `BigInt (${value}) is not yet supported in client component props. ` +
+        `Remove ${describeKeyForErrorMessage(
+          key,
+        )} from this object or use a plain number instead: ${describeObjectForErrorMessage(
+          parent,
+        )}`,
     );
   }
 
-  invariant(
-    false,
-    'Type %s is not supported in client component props. ' +
-      'Remove %s from this object, or avoid the entire object: %s',
-    typeof value,
-    describeKeyForErrorMessage(key),
-    describeObjectForErrorMessage(parent),
+  throw new Error(
+    `Type ${typeof value} is not supported in client component props. ` +
+      `Remove ${describeKeyForErrorMessage(
+        key,
+      )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+        parent,
+      )}`,
   );
 }
 
@@ -799,14 +800,15 @@ export function startFlowing(request: Request, destination: Destination): void {
 }
 
 function unsupportedHook(): void {
-  invariant(false, 'This Hook is not supported in Server Components.');
+  throw new Error('This Hook is not supported in Server Components.');
 }
 
 function unsupportedRefresh(): void {
-  invariant(
-    currentCache,
-    'Refreshing the cache is not supported in Server Components.',
-  );
+  if (!currentCache) {
+    throw new Error(
+      'Refreshing the cache is not supported in Server Components.',
+    );
+  }
 }
 
 let currentCache: Map<Function, mixed> | null = null;
@@ -822,10 +824,10 @@ const Dispatcher: DispatcherType = {
   useDeferredValue: (unsupportedHook: any),
   useTransition: (unsupportedHook: any),
   getCacheForType<T>(resourceType: () => T): T {
-    invariant(
-      currentCache,
-      'Reading the cache is only supported while rendering.',
-    );
+    if (!currentCache) {
+      throw new Error('Reading the cache is only supported while rendering.');
+    }
+
     let entry: T | void = (currentCache.get(resourceType): any);
     if (entry === undefined) {
       entry = resourceType();
diff --git a/packages/react-server/src/ReactFlightServerConfig.js b/packages/react-server/src/ReactFlightServerConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-server/src/ReactFlightServerConfig.js
+++ b/packages/react-server/src/ReactFlightServerConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactServerFormatConfig.js b/packages/react-server/src/ReactServerFormatConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-server/src/ReactServerFormatConfig.js
+++ b/packages/react-server/src/ReactServerFormatConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactServerStreamConfig.js b/packages/react-server/src/ReactServerStreamConfig.js
index 49c9752540528..2829adc569256 100644
--- a/packages/react-server/src/ReactServerStreamConfig.js
+++ b/packages/react-server/src/ReactServerStreamConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* eslint-disable react-internal/prod-error-codes */
 
 // We expect that our Rollup, Jest, and Flow configurations
 // always shim this module with the corresponding host config
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index b4b57c68b5f56..a3fe873729828 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -9,12 +9,11 @@
 
 import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function unsupported() {
-  invariant(false, 'This feature is not supported by ReactSuspenseTestUtils.');
+  throw new Error('This feature is not supported by ReactSuspenseTestUtils.');
 }
 
 export function waitForSuspense<T>(fn: () => T): Promise<T> {
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index b6d047e0e4810..2e49968e85ded 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -40,7 +40,6 @@ import {
   IncompleteClassComponent,
   ScopeComponent,
 } from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
@@ -219,10 +218,8 @@ function toTree(node: ?Fiber) {
     case ScopeComponent:
       return childrenToTree(node.child);
     default:
-      invariant(
-        false,
-        'toTree() does not yet know how to handle nodes with tag=%s',
-        node.tag,
+      throw new Error(
+        `toTree() does not yet know how to handle nodes with tag=${node.tag}`,
       );
   }
 }
@@ -282,21 +279,25 @@ class ReactTestInstance {
   _currentFiber(): Fiber {
     // Throws if this component has been unmounted.
     const fiber = findCurrentFiberUsingSlowPath(this._fiber);
-    invariant(
-      fiber !== null,
-      "Can't read from currently-mounting component. This error is likely " +
-        'caused by a bug in React. Please file an issue.',
-    );
+
+    if (fiber === null) {
+      throw new Error(
+        "Can't read from currently-mounting component. This error is likely " +
+          'caused by a bug in React. Please file an issue.',
+      );
+    }
+
     return fiber;
   }
 
   constructor(fiber: Fiber) {
-    invariant(
-      validWrapperTypes.has(fiber.tag),
-      'Unexpected object passed to ReactTestInstance constructor (tag: %s). ' +
-        'This is probably a bug in React.',
-      fiber.tag,
-    );
+    if (!validWrapperTypes.has(fiber.tag)) {
+      throw new Error(
+        `Unexpected object passed to ReactTestInstance constructor (tag: ${fiber.tag}). ` +
+          'This is probably a bug in React.',
+      );
+    }
+
     this._fiber = fiber;
   }
 
@@ -471,7 +472,11 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isStrictMode,
     concurrentUpdatesByDefault,
   );
-  invariant(root != null, 'something went wrong');
+
+  if (root == null) {
+    throw new Error('something went wrong');
+  }
+
   updateContainer(element, root, null, null);
 
   const entry = {
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
index 586c99d2a3758..25456f7f1ec1e 100644
--- a/packages/react/src/ReactAct.js
+++ b/packages/react/src/ReactAct.js
@@ -9,7 +9,6 @@
 
 import type {Thenable} from 'shared/ReactTypes';
 import ReactCurrentActQueue from './ReactCurrentActQueue';
-import invariant from 'shared/invariant';
 import enqueueTask from 'shared/enqueueTask';
 
 let actScopeDepth = 0;
@@ -151,10 +150,7 @@ export function act<T>(callback: () => T | Thenable<T>): Thenable<T> {
       }
     }
   } else {
-    invariant(
-      false,
-      'act(...) is not supported in production builds of React.',
-    );
+    throw new Error('act(...) is not supported in production builds of React.');
   }
 }
 
diff --git a/packages/react/src/ReactBaseClasses.js b/packages/react/src/ReactBaseClasses.js
index 94dbd19eb8110..e2a004bcc0467 100644
--- a/packages/react/src/ReactBaseClasses.js
+++ b/packages/react/src/ReactBaseClasses.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
 
 const emptyObject = {};
@@ -55,13 +53,17 @@ Component.prototype.isReactComponent = {};
  * @protected
  */
 Component.prototype.setState = function(partialState, callback) {
-  invariant(
-    typeof partialState === 'object' ||
-      typeof partialState === 'function' ||
-      partialState == null,
-    'setState(...): takes an object of state variables to update or a ' +
-      'function which returns an object of state variables.',
-  );
+  if (
+    typeof partialState !== 'object' &&
+    typeof partialState !== 'function' &&
+    partialState != null
+  ) {
+    throw new Error(
+      'setState(...): takes an object of state variables to update or a ' +
+        'function which returns an object of state variables.',
+    );
+  }
+
   this.updater.enqueueSetState(this, partialState, callback, 'setState');
 };
 
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index dab75998bb8e0..d0562f53e3bc9 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -9,7 +9,6 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   getIteratorFn,
@@ -205,14 +204,17 @@ function mapIntoArray(
     } else if (type === 'object') {
       // eslint-disable-next-line react-internal/safe-string-coercion
       const childrenString = String((children: any));
-      invariant(
-        false,
-        'Objects are not valid as a React child (found: %s). ' +
+
+      throw new Error(
+        `Objects are not valid as a React child (found: ${
+          childrenString === '[object Object]'
+            ? 'object with keys {' +
+              Object.keys((children: any)).join(', ') +
+              '}'
+            : childrenString
+        }). ` +
           'If you meant to render a collection of children, use an array ' +
           'instead.',
-        childrenString === '[object Object]'
-          ? 'object with keys {' + Object.keys((children: any)).join(', ') + '}'
-          : childrenString,
       );
     }
   }
@@ -323,10 +325,12 @@ function toArray(children: ?ReactNodeList): Array<React$Node> {
  * structure.
  */
 function onlyChild<T>(children: T): T {
-  invariant(
-    isValidElement(children),
-    'React.Children.only expected to receive a single React element child.',
-  );
+  if (!isValidElement(children)) {
+    throw new Error(
+      'React.Children.only expected to receive a single React element child.',
+    );
+  }
+
   return children;
 }
 
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 25179e2b2c4f1..e87f31d1ae36c 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -6,7 +6,6 @@
  */
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
@@ -484,11 +483,11 @@ export function cloneAndReplaceKey(oldElement, newKey) {
  * See https://reactjs.org/docs/react-api.html#cloneelement
  */
 export function cloneElement(element, config, children) {
-  invariant(
-    !(element === null || element === undefined),
-    'React.cloneElement(...): The argument must be a React element, but you passed %s.',
-    element,
-  );
+  if (element === null || element === undefined) {
+    throw new Error(
+      `React.cloneElement(...): The argument must be a React element, but you passed ${element}.`,
+    );
+  }
 
   let propName;
 
diff --git a/packages/react/unstable-shared-subset.js b/packages/react/unstable-shared-subset.js
index e2ae4ad2f62d6..a91fe77a1dc0d 100644
--- a/packages/react/unstable-shared-subset.js
+++ b/packages/react/unstable-shared-subset.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+// eslint-disable-next-line react-internal/prod-error-codes
 throw new Error(
   'This entry point is not yet supported outside of experimental channels',
 );
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 21c258a6b528c..5f7c8dc8e83aa 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -7,6 +7,7 @@
  */
 
 /* eslint-disable no-var */
+/* eslint-disable react-internal/prod-error-codes */
 
 import {
   enableSchedulerDebugging,
diff --git a/packages/shared/ReactErrorUtils.js b/packages/shared/ReactErrorUtils.js
index 1742788778b4d..ae344d302f441 100644
--- a/packages/shared/ReactErrorUtils.js
+++ b/packages/shared/ReactErrorUtils.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import invokeGuardedCallbackImpl from './invokeGuardedCallbackImpl';
 
 // Used by Fiber to simulate a try-catch.
@@ -117,8 +116,7 @@ export function clearCaughtError() {
     caughtError = null;
     return error;
   } else {
-    invariant(
-      false,
+    throw new Error(
       'clearCaughtError was called but no error was captured. This error ' +
         'is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/shared/checkPropTypes.js b/packages/shared/checkPropTypes.js
index 1558a407c3888..5aee8fede8330 100644
--- a/packages/shared/checkPropTypes.js
+++ b/packages/shared/checkPropTypes.js
@@ -52,6 +52,7 @@ export default function checkPropTypes(
           // This is intentionally an invariant that gets caught. It's the same
           // behavior as without this statement except with a better message.
           if (typeof typeSpecs[typeSpecName] !== 'function') {
+            // eslint-disable-next-line react-internal/prod-error-codes
             const err = Error(
               (componentName || 'React class') +
                 ': ' +
diff --git a/packages/shared/forks/invokeGuardedCallbackImpl.www.js b/packages/shared/forks/invokeGuardedCallbackImpl.www.js
index 01005167e5fcc..72c21bb8b788f 100644
--- a/packages/shared/forks/invokeGuardedCallbackImpl.www.js
+++ b/packages/shared/forks/invokeGuardedCallbackImpl.www.js
@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 // Provided by www
 const ReactFbErrorUtils = require('ReactFbErrorUtils');
-invariant(
-  typeof ReactFbErrorUtils.invokeGuardedCallback === 'function',
-  'Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.',
-);
+
+if (typeof ReactFbErrorUtils.invokeGuardedCallback !== 'function') {
+  throw new Error(
+    'Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.',
+  );
+}
 
 const invokeGuardedCallbackImpl = function<A, B, C, D, E, F, Context>(
   name: string | null,
diff --git a/packages/shared/invariant.js b/packages/shared/invariant.js
index 747961671f1ea..68a1928c02d38 100644
--- a/packages/shared/invariant.js
+++ b/packages/shared/invariant.js
@@ -18,6 +18,7 @@
  */
 
 export default function invariant(condition, format, a, b, c, d, e, f) {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error(
     'Internal React error: invariant() is meant to be replaced at compile ' +
       'time. There is no runtime version.',
diff --git a/packages/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js
index 215a8ae91c513..c33820080054a 100644
--- a/packages/shared/invokeGuardedCallbackImpl.js
+++ b/packages/shared/invokeGuardedCallbackImpl.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 function invokeGuardedCallbackProd<A, B, C, D, E, F, Context>(
   name: string | null,
   func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed,
@@ -83,16 +81,18 @@ if (__DEV__) {
       // when we call document.createEvent(). However this can cause confusing
       // errors: https://github.com/facebook/create-react-app/issues/3482
       // So we preemptively throw with a better message instead.
-      invariant(
-        typeof document !== 'undefined',
-        'The `document` global was defined when React was initialized, but is not ' +
-          'defined anymore. This can happen in a test environment if a component ' +
-          'schedules an update from an asynchronous callback, but the test has already ' +
-          'finished running. To solve this, you can either unmount the component at ' +
-          'the end of your test (and ensure that any asynchronous operations get ' +
-          'canceled in `componentWillUnmount`), or you can change the test itself ' +
-          'to be asynchronous.',
-      );
+      if (typeof document === 'undefined') {
+        throw new Error(
+          'The `document` global was defined when React was initialized, but is not ' +
+            'defined anymore. This can happen in a test environment if a component ' +
+            'schedules an update from an asynchronous callback, but the test has already ' +
+            'finished running. To solve this, you can either unmount the component at ' +
+            'the end of your test (and ensure that any asynchronous operations get ' +
+            'canceled in `componentWillUnmount`), or you can change the test itself ' +
+            'to be asynchronous.',
+        );
+      }
+
       const evt = document.createEvent('Event');
 
       let didCall = false;
@@ -201,6 +201,7 @@ if (__DEV__) {
       if (didCall && didError) {
         if (!didSetError) {
           // The callback errored, but the error event never fired.
+          // eslint-disable-next-line react-internal/prod-error-codes
           error = new Error(
             'An error was thrown inside one of your components, but React ' +
               "doesn't know what it was. This is likely due to browser " +
@@ -212,6 +213,7 @@ if (__DEV__) {
               'actually an issue with React, please file an issue.',
           );
         } else if (isCrossOriginError) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           error = new Error(
             "A cross-origin error was thrown. React doesn't have access to " +
               'the actual error object in development. ' +
diff --git a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
index f93b31a659dd2..bfb80ab375562 100644
--- a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -1,5 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`error transform handles escaped backticks in template string 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \`\\" + listener + \\"\` listener to be a function, instead got a value of \`\\" + type + \\"\` type.\\" : _formatProdErrorMessage(231, listener, type));"
+`;
+
 exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
 "import invariant from 'shared/invariant';
 
@@ -18,6 +23,21 @@ if (!condition) {
 }"
 `;
 
+exports[`error transform should not touch other calls or new expressions 1`] = `
+"new NotAnError();
+NotAnError();"
+`;
+
+exports[`error transform should replace error constructors (no new) 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+`;
+
+exports[`error transform should replace error constructors 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+`;
+
 exports[`error transform should replace simple invariant calls 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
@@ -29,6 +49,21 @@ if (!condition) {
 }"
 `;
 
+exports[`error transform should support error constructors with concatenated messages 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \\" + foo + \\" target to \\" + (\\"be an array; got \\" + bar) : _formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support interpolating arguments with concatenation 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Expected ' + foo + ' target to be an array; got ' + bar : _formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support interpolating arguments with template strings 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));"
+`;
+
 exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
index 4da00ac656b95..2bca7366321e2 100644
--- a/scripts/error-codes/__tests__/transform-error-messages.js
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -93,4 +93,61 @@ invariant(condition, 'Do not override existing functions.');
       )
     ).toMatchSnapshot();
   });
+
+  it('should replace error constructors', () => {
+    expect(
+      transform(`
+new Error('Do not override existing functions.');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should replace error constructors (no new)', () => {
+    expect(
+      transform(`
+Error('Do not override existing functions.');
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should not touch other calls or new expressions', () => {
+    expect(
+      transform(`
+new NotAnError();
+NotAnError();
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support interpolating arguments with template strings', () => {
+    expect(
+      transform(`
+new Error(\`Expected \${foo} target to be an array; got \${bar}\`);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support interpolating arguments with concatenation', () => {
+    expect(
+      transform(`
+new Error('Expected ' + foo + ' target to be an array; got ' + bar);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('should support error constructors with concatenated messages', () => {
+    expect(
+      transform(`
+new Error(\`Expected \${foo} target to \` + \`be an array; got \${bar}\`);
+`)
+    ).toMatchSnapshot();
+  });
+
+  it('handles escaped backticks in template string', () => {
+    expect(
+      transform(`
+new Error(\`Expected \\\`\$\{listener\}\\\` listener to be a function, instead got a value of \\\`\$\{type\}\\\` type.\`);
+`)
+    ).toMatchSnapshot();
+  });
 });
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 3206efa41349c..3920d0aa51c35 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -287,12 +287,10 @@
   "288": "It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `schedule/tracing` module with `schedule/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://reactjs.org/link/profiling",
   "289": "Function components cannot have refs.",
   "290": "Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://reactjs.org/link/refs-must-have-owner for more information.",
-  "291": "Log of yielded values is not empty. Call expect(Scheduler).toHaveYielded(...) first.",
   "292": "The matcher `toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(Scheduler).toHaveYielded(expectedYields)",
   "293": "Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.",
   "294": "ReactDOMServer does not yet support Suspense.",
   "295": "ReactDOMServer does not yet support lazy-loaded components.",
-  "296": "Log of yielded values is not empty. Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.",
   "297": "The matcher `unstable_toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(ReactTestRenderer).unstable_toHaveYielded(expectedYields)",
   "298": "Hooks can only be called inside the body of a function component.",
   "299": "createRoot(...): Target container is not a DOM element.",
@@ -353,7 +351,7 @@
   "362": "Could not find React container within specified host subtree.",
   "363": "Test selector API is not supported by this renderer.",
   "364": "Invalid host root specified. Should be either a React container or a node with a testname attribute.",
-  "365": "Invalid selector type %s specified.",
+  "365": "Invalid selector type specified.",
   "366": "ReactDOM.createEventHandle: setListener called on an target that did not have a corresponding root. This is likely a bug in React.",
   "367": "ReactDOM.createEventHandle: setListener called on an element target that is not managed by React. Ensure React rendered the DOM element.",
   "368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a valid EventTarget or an element managed by React.",
@@ -397,5 +395,12 @@
   "406": "act(...) is not supported in production builds of React.",
   "407": "Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.",
   "408": "Missing getServerSnapshot, which is required for server-rendered content.",
-  "409": "Cannot update an unmounted root."
+  "409": "Cannot update an unmounted root.",
+  "410": "%s suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.",
+  "411": "%s suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.",
+  "412": "Connection closed.",
+  "413": "Expected finished root and lanes to be set. This is a bug in React.",
+  "414": "Did not expect this call in production. This is a bug in React. Please file an issue.",
+  "415": "Error parsing the data. It's probably an error code or network corruption.",
+  "416": "This environment don't support binary chunks."
 }
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
index 58823cbe16873..d60ffe308cdbe 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -10,7 +10,7 @@ const parser = require('@babel/parser');
 const fs = require('fs');
 const path = require('path');
 const traverse = require('@babel/traverse').default;
-const evalToString = require('../shared/evalToString');
+const {evalStringConcat} = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 
 const babylonOptions = {
@@ -75,7 +75,7 @@ module.exports = function(opts) {
 
             // error messages can be concatenated (`+`) at runtime, so here's a
             // trivial partial evaluator that interprets the literal value
-            const errorMsgLiteral = evalToString(node.arguments[1]);
+            const errorMsgLiteral = evalStringConcat(node.arguments[1]);
             addToErrorMap(errorMsgLiteral);
           }
         },
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
index 6ebb68731f860..2baf4baa1c1a7 100644
--- a/scripts/error-codes/transform-error-messages.js
+++ b/scripts/error-codes/transform-error-messages.js
@@ -7,20 +7,114 @@
 'use strict';
 
 const fs = require('fs');
-const evalToString = require('../shared/evalToString');
+const {
+  evalStringConcat,
+  evalStringAndTemplateConcat,
+} = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 const helperModuleImports = require('@babel/helper-module-imports');
 
+const errorMap = invertObject(
+  JSON.parse(fs.readFileSync(__dirname + '/codes.json', 'utf-8'))
+);
+
+const SEEN_SYMBOL = Symbol('transform-error-messages.seen');
+
 module.exports = function(babel) {
   const t = babel.types;
 
+  // TODO: Instead of outputting __DEV__ conditions, only apply this transform
+  // in production.
   const DEV_EXPRESSION = t.identifier('__DEV__');
 
+  function CallOrNewExpression(path, file) {
+    // Turns this code:
+    //
+    // new Error(`A ${adj} message that contains ${noun}`);
+    //
+    // or this code (no constructor):
+    //
+    // Error(`A ${adj} message that contains ${noun}`);
+    //
+    // into this:
+    //
+    // Error(
+    //   __DEV__
+    //     ? `A ${adj} message that contains ${noun}`
+    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
+    // );
+    const node = path.node;
+    if (node[SEEN_SYMBOL]) {
+      return;
+    }
+    node[SEEN_SYMBOL] = true;
+
+    const errorMsgNode = node.arguments[0];
+    if (errorMsgNode === undefined) {
+      return;
+    }
+
+    const errorMsgExpressions = [];
+    const errorMsgLiteral = evalStringAndTemplateConcat(
+      errorMsgNode,
+      errorMsgExpressions
+    );
+
+    let prodErrorId = errorMap[errorMsgLiteral];
+    if (prodErrorId === undefined) {
+      // There is no error code for this message. We use a lint rule to
+      // enforce that messages can be minified, so assume this is
+      // intentional and exit gracefully.
+      return;
+    }
+    prodErrorId = parseInt(prodErrorId, 10);
+
+    // Import formatProdErrorMessage
+    const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
+      path,
+      'shared/formatProdErrorMessage',
+      {nameHint: 'formatProdErrorMessage'}
+    );
+
+    // Outputs:
+    //   formatProdErrorMessage(ERR_CODE, adj, noun);
+    const prodMessage = t.callExpression(formatProdErrorMessageIdentifier, [
+      t.numericLiteral(prodErrorId),
+      ...errorMsgExpressions,
+    ]);
+
+    // Outputs:
+    // Error(
+    //   __DEV__
+    //     ? `A ${adj} message that contains ${noun}`
+    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
+    // );
+    path.replaceWith(t.callExpression(t.identifier('Error'), [prodMessage]));
+    path.replaceWith(
+      t.callExpression(t.identifier('Error'), [
+        t.conditionalExpression(DEV_EXPRESSION, errorMsgNode, prodMessage),
+      ])
+    );
+  }
+
   return {
     visitor: {
+      NewExpression(path, file) {
+        const noMinify = file.opts.noMinify;
+        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
+          CallOrNewExpression(path, file);
+        }
+      },
+
       CallExpression(path, file) {
         const node = path.node;
         const noMinify = file.opts.noMinify;
+
+        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
+          CallOrNewExpression(path, file);
+          return;
+        }
+
         if (path.get('callee').isIdentifier({name: 'invariant'})) {
           // Turns this code:
           //
@@ -40,7 +134,7 @@ module.exports = function(babel) {
           // string) that references a verbose error message. The mapping is
           // stored in `scripts/error-codes/codes.json`.
           const condition = node.arguments[0];
-          const errorMsgLiteral = evalToString(node.arguments[1]);
+          const errorMsgLiteral = evalStringConcat(node.arguments[1]);
           const errorMsgExpressions = Array.from(node.arguments.slice(2));
           const errorMsgQuasis = errorMsgLiteral
             .split('%s')
@@ -81,12 +175,6 @@ module.exports = function(babel) {
             return;
           }
 
-          // Avoid caching because we write it as we go.
-          const existingErrorMap = JSON.parse(
-            fs.readFileSync(__dirname + '/codes.json', 'utf-8')
-          );
-          const errorMap = invertObject(existingErrorMap);
-
           let prodErrorId = errorMap[errorMsgLiteral];
 
           if (prodErrorId === undefined) {
@@ -117,7 +205,7 @@ module.exports = function(babel) {
           }
           prodErrorId = parseInt(prodErrorId, 10);
 
-          // Import ReactErrorProd
+          // Import formatProdErrorMessage
           const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
             path,
             'shared/formatProdErrorMessage',
diff --git a/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js b/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
new file mode 100644
index 0000000000000..674d952e9582c
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const rule = require('../prod-error-codes');
+const {RuleTester} = require('eslint');
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2017,
+  },
+});
+
+ruleTester.run('eslint-rules/prod-error-codes', rule, {
+  valid: [
+    'arbitraryFunction(a, b)',
+    'Error(`Expected ${foo} target to be an array; got ${bar}`)',
+    "Error('Expected ' + foo + ' target to be an array; got ' + bar)",
+    'Error(`Expected ${foo} target to ` + `be an array; got ${bar}`)',
+  ],
+  invalid: [
+    {
+      code: "Error('Not in error map')",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: "Error('Not in ' + 'error map')",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: 'Error(`Not in ` + `error map`)',
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in error map',
+        },
+      ],
+    },
+    {
+      code: "Error(`Not in ${'error'} map`)",
+      errors: [
+        {
+          message:
+            'Error message does not have a corresponding production error ' +
+            'code. Add the following message to codes.json so it can be stripped from ' +
+            'the production builds:\n\n' +
+            'Not in %s map',
+        },
+      ],
+    },
+  ],
+});
diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js
index 0e86334d26331..7dfac457ec062 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -6,6 +6,7 @@ module.exports = {
     'no-to-warn-dev-within-to-throw': require('./no-to-warn-dev-within-to-throw'),
     'warning-args': require('./warning-args'),
     'invariant-args': require('./invariant-args'),
+    'prod-error-codes': require('./prod-error-codes'),
     'no-production-logging': require('./no-production-logging'),
     'no-cross-fork-imports': require('./no-cross-fork-imports'),
     'no-cross-fork-types': require('./no-cross-fork-types'),
diff --git a/scripts/eslint-rules/prod-error-codes.js b/scripts/eslint-rules/prod-error-codes.js
new file mode 100644
index 0000000000000..2c9815fb9ab12
--- /dev/null
+++ b/scripts/eslint-rules/prod-error-codes.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const errorMap = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '../error-codes/codes.json'))
+);
+const errorMessages = new Set();
+Object.keys(errorMap).forEach(key => errorMessages.add(errorMap[key]));
+
+function nodeToErrorTemplate(node) {
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
+  } else if (node.type === 'BinaryExpression' && node.operator === '+') {
+    const l = nodeToErrorTemplate(node.left);
+    const r = nodeToErrorTemplate(node.right);
+    return l + r;
+  } else if (node.type === 'TemplateLiteral') {
+    let elements = [];
+    for (let i = 0; i < node.quasis.length; i++) {
+      const elementNode = node.quasis[i];
+      if (elementNode.type !== 'TemplateElement') {
+        throw new Error('Unsupported type ' + node.type);
+      }
+      elements.push(elementNode.value.cooked);
+    }
+    return elements.join('%s');
+  } else {
+    return '%s';
+  }
+}
+
+module.exports = {
+  meta: {
+    schema: [],
+  },
+  create(context) {
+    function ErrorCallExpression(node) {
+      const errorMessageNode = node.arguments[0];
+      if (errorMessageNode === undefined) {
+        return;
+      }
+      const errorMessage = nodeToErrorTemplate(errorMessageNode);
+      if (errorMessages.has(errorMessage)) {
+        return;
+      }
+      context.report({
+        node,
+        message:
+          'Error message does not have a corresponding production error code. Add ' +
+          'the following message to codes.json so it can be stripped ' +
+          'from the production builds:\n\n' +
+          errorMessage,
+      });
+    }
+
+    return {
+      NewExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'Error') {
+          ErrorCallExpression(node);
+        }
+      },
+      CallExpression(node) {
+        if (node.callee.type === 'Identifier' && node.callee.name === 'Error') {
+          ErrorCallExpression(node);
+        }
+      },
+    };
+  },
+};
diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index 9bdd6543d2a3d..8e23dd880e92b 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -12,7 +12,7 @@ const through = require('through2');
 const traverse = require('@babel/traverse').default;
 const gs = require('glob-stream');
 
-const evalToString = require('../shared/evalToString');
+const {evalStringConcat} = require('../shared/evalToString');
 
 const parserOptions = {
   sourceType: 'module',
@@ -64,7 +64,7 @@ function transform(file, enc, cb) {
             // warning messages can be concatenated (`+`) at runtime, so here's
             // a trivial partial evaluator that interprets the literal value
             try {
-              const warningMsgLiteral = evalToString(node.arguments[0]);
+              const warningMsgLiteral = evalStringConcat(node.arguments[0]);
               warnings.add(JSON.stringify(warningMsgLiteral));
             } catch (error) {
               console.error(
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 41b0685098fa0..4f7d26cddbec9 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -149,7 +149,8 @@ function getBabelConfig(
   bundleType,
   packageName,
   externals,
-  isDevelopment
+  isDevelopment,
+  bundle
 ) {
   const canAccessReactObject =
     packageName === 'react' || externals.indexOf('react') !== -1;
@@ -179,12 +180,6 @@ function getBabelConfig(
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case FB_WWW_PROFILING:
-      return Object.assign({}, options, {
-        plugins: options.plugins.concat([
-          // Minify invariant messages
-          require('../error-codes/transform-error-messages'),
-        ]),
-      });
     case RN_OSS_DEV:
     case RN_OSS_PROD:
     case RN_OSS_PROFILING:
@@ -195,8 +190,9 @@ function getBabelConfig(
         plugins: options.plugins.concat([
           [
             require('../error-codes/transform-error-messages'),
-            // Preserve full error messages in React Native build
-            {noMinify: true},
+            // Controls whether to replace error messages with error codes
+            // in production. By default, error messages are replaced.
+            {noMinify: bundle.minifyWithProdErrorCodes === false},
           ],
         ]),
       });
@@ -390,7 +386,8 @@ function getPlugins(
         bundleType,
         packageName,
         externals,
-        !isProduction
+        !isProduction,
+        bundle
       )
     ),
     // Remove 'use strict' from individual source files.
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index b9ae507b1a305..c24281d43ef08 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -79,6 +79,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react',
     global: 'React',
+    minifyWithProdErrorCodes: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -88,6 +89,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/unstable-shared-subset',
     global: 'React',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -105,6 +107,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-runtime',
     global: 'JSXRuntime',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -124,6 +127,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-dev-runtime',
     global: 'JSXDEVRuntime',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -133,6 +137,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.browser',
     global: 'ReactFetch',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -142,6 +147,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.node',
     global: 'ReactFetch',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'http', 'https'],
   },
 
@@ -151,6 +157,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -160,6 +167,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.node.server',
     global: 'ReactFilesystem',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'fs/promises', 'path'],
   },
 
@@ -169,6 +177,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -178,6 +187,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.node.server',
     global: 'ReactPostgres',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'pg'],
   },
 
@@ -197,6 +207,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-dom',
     global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -207,6 +218,7 @@ const bundles = [
     entry: 'react-dom',
     global: 'ReactDOMForked',
     enableNewReconciler: true,
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -216,15 +228,18 @@ const bundles = [
     bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     entry: 'react-dom/test-utils',
     global: 'ReactTestUtils',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'react-dom'],
   },
 
+  // TODO: We don't use this bundle anymore
   /******* React DOM - www - Testing *******/
   {
     moduleType: RENDERER,
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
     entry: 'react-dom/testing',
     global: 'ReactDOMTesting',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -237,6 +252,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser',
     name: 'react-dom-server-legacy.browser',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
     babel: opts =>
       Object.assign({}, opts, {
@@ -251,6 +267,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMLegacyServerNode',
     name: 'react-dom-server-legacy.node',
     externals: ['react', 'stream'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -266,6 +283,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMFizzServerBrowser',
     name: 'react-dom-server.browser',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
   {
@@ -274,6 +292,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMFizzServerNode',
     name: 'react-dom-server.node',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
   {
@@ -281,6 +300,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/src/ReactDOMServerFB',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -290,6 +310,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.browser.server',
     global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
   {
@@ -297,6 +318,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.node.server',
     global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -306,6 +328,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack',
     global: 'ReactServerDOMReader',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -315,6 +338,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/plugin',
     global: 'ReactServerWebpackPlugin',
+    minifyWithProdErrorCodes: false,
     externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
@@ -324,6 +348,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-loader',
     global: 'ReactServerWebpackNodeLoader',
+    minifyWithProdErrorCodes: false,
     externals: ['acorn'],
   },
 
@@ -333,6 +358,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-register',
     global: 'ReactFlightWebpackNodeRegister',
+    minifyWithProdErrorCodes: false,
     externals: ['url', 'module'],
   },
 
@@ -342,6 +368,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/server',
     global: 'ReactFlightDOMRelayServer', // TODO: Rename to Writer
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'ReactFlightDOMRelayServerIntegration',
@@ -355,6 +382,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay',
     global: 'ReactFlightDOMRelayClient', // TODO: Rename to Reader
+    minifyWithProdErrorCodes: true,
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
@@ -368,6 +396,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-native-relay/server',
     global: 'ReactFlightNativeRelayServer', // TODO: Rename to Writer
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'ReactFlightNativeRelayServerIntegration',
@@ -382,6 +411,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-native-relay',
     global: 'ReactFlightNativeRelayClient', // TODO: Rename to Reader
+    minifyWithProdErrorCodes: true,
     externals: [
       'react',
       'ReactFlightNativeRelayClientIntegration',
@@ -396,6 +426,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-suspense-test-utils',
     global: 'ReactSuspenseTestUtils',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -413,6 +444,7 @@ const bundles = [
     entry: 'react-art',
     global: 'ReactART',
     externals: ['react'],
+    minifyWithProdErrorCodes: true,
     babel: opts =>
       Object.assign({}, opts, {
         // Include JSX
@@ -435,6 +467,7 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -448,6 +481,7 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -465,6 +499,7 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -478,6 +513,7 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -507,6 +543,7 @@ const bundles = [
       'scheduler/unstable_mock',
       'ReactNativeInternalFeatureFlags',
     ],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -521,6 +558,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer',
     global: 'ReactNoopRenderer',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
   },
 
@@ -530,6 +568,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/persistent',
     global: 'ReactNoopRendererPersistent',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -539,6 +578,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/server',
     global: 'ReactNoopRendererServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -548,6 +588,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/flight-server',
     global: 'ReactNoopFlightServer',
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'scheduler',
@@ -562,6 +603,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/flight-client',
     global: 'ReactNoopFlightClient',
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'scheduler',
@@ -576,6 +618,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-reconciler',
     global: 'ReactReconciler',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -585,6 +628,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-server',
     global: 'ReactServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -594,6 +638,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-server/flight',
     global: 'ReactFlightServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -603,6 +648,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-client/flight',
     global: 'ReactFlightClient',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -612,6 +658,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     entry: 'react-reconciler/reflection',
     global: 'ReactFiberTreeReflection',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -621,6 +668,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     entry: 'react-reconciler/constants',
     global: 'ReactReconcilerConstants',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -637,6 +685,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-is',
     global: 'ReactIs',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -646,6 +695,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-debug-tools',
     global: 'ReactDebugTools',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 
@@ -657,6 +707,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-cache',
     global: 'ReactCacheOld',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'scheduler'],
   },
 
@@ -667,6 +718,7 @@ const bundles = [
     entry: 'create-subscription',
     global: 'createSubscription',
     externals: ['react'],
+    minifyWithProdErrorCodes: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -681,6 +733,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-subscription',
     global: 'useSubscription',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -690,6 +743,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store',
     global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -699,6 +753,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store/extra',
     global: 'useSyncExternalStoreExtra',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'use-sync-external-store'],
   },
 
@@ -708,6 +763,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store/index.native',
     global: 'useSyncExternalStoreNative',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -726,6 +782,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler',
     global: 'Scheduler',
+    minifyWithProdErrorCodes: true,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -744,6 +801,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler/unstable_mock',
     global: 'SchedulerMock',
+    minifyWithProdErrorCodes: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -759,6 +817,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler/unstable_post_task',
     global: 'SchedulerPostTask',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -768,6 +827,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'jest-react',
     global: 'JestReact',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
   },
 
@@ -781,6 +841,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'eslint-plugin-react-hooks',
     global: 'ESLintPluginReactHooks',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 
@@ -790,6 +851,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-refresh/babel',
     global: 'ReactFreshBabelPlugin',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
   {
@@ -797,6 +859,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-refresh/runtime',
     global: 'ReactFreshRuntime',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 ];
diff --git a/scripts/shared/__tests__/evalToString-test.js b/scripts/shared/__tests__/evalToString-test.js
index 3f6c3adbb372a..bc0cb600d57e4 100644
--- a/scripts/shared/__tests__/evalToString-test.js
+++ b/scripts/shared/__tests__/evalToString-test.js
@@ -6,12 +6,12 @@
  */
 'use strict';
 
-const evalToString = require('../evalToString');
+const {evalStringConcat} = require('../evalToString');
 const parser = require('@babel/parser');
 
 const parse = source => parser.parse(`(${source});`).program.body[0].expression; // quick way to get an exp node
 
-const parseAndEval = source => evalToString(parse(source));
+const parseAndEval = source => evalStringConcat(parse(source));
 
 describe('evalToString', () => {
   it('should support StringLiteral', () => {
diff --git a/scripts/shared/evalToString.js b/scripts/shared/evalToString.js
index aad199da5d75b..318925cc0969e 100644
--- a/scripts/shared/evalToString.js
+++ b/scripts/shared/evalToString.js
@@ -8,7 +8,7 @@
  */
 'use strict';
 
-function evalToString(ast /* : Object */) /* : string */ {
+function evalStringConcat(ast /* : Object */) /* : string */ {
   switch (ast.type) {
     case 'StringLiteral':
     case 'Literal': // ESLint
@@ -17,10 +17,44 @@ function evalToString(ast /* : Object */) /* : string */ {
       if (ast.operator !== '+') {
         throw new Error('Unsupported binary operator ' + ast.operator);
       }
-      return evalToString(ast.left) + evalToString(ast.right);
+      return evalStringConcat(ast.left) + evalStringConcat(ast.right);
     default:
       throw new Error('Unsupported type ' + ast.type);
   }
 }
+exports.evalStringConcat = evalStringConcat;
 
-module.exports = evalToString;
+function evalStringAndTemplateConcat(
+  ast /* : Object */,
+  args /* : Array<mixed> */
+) /* : string */ {
+  switch (ast.type) {
+    case 'StringLiteral':
+      return ast.value;
+    case 'BinaryExpression': // `+`
+      if (ast.operator !== '+') {
+        throw new Error('Unsupported binary operator ' + ast.operator);
+      }
+      return (
+        evalStringAndTemplateConcat(ast.left, args) +
+        evalStringAndTemplateConcat(ast.right, args)
+      );
+    case 'TemplateLiteral': {
+      let elements = [];
+      for (let i = 0; i < ast.quasis.length; i++) {
+        const elementNode = ast.quasis[i];
+        if (elementNode.type !== 'TemplateElement') {
+          throw new Error('Unsupported type ' + ast.type);
+        }
+        elements.push(elementNode.value.cooked);
+      }
+      args.push(...ast.expressions);
+      return elements.join('%s');
+    }
+    default:
+      // Anything that's not a string is interpreted as an argument.
+      args.push(ast);
+      return '%s';
+  }
+}
+exports.evalStringAndTemplateConcat = evalStringAndTemplateConcat;
diff --git a/yarn.lock b/yarn.lock
index 9deb96000d4e5..0055fc9a6d2f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6442,7 +6442,6 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
-  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"

From 2825a08dc0981b7e745b2742a84195f75e4d6f72 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 30 Sep 2021 17:19:07 -0400
Subject: [PATCH 013/109] [DevTools] Log basic usage events (#22478)

---
 .../react-devtools-extensions/src/main.js     |  3 ++
 packages/react-devtools-shared/src/Logger.js  | 26 ++++++++++------
 .../src/devtools/views/DevTools.js            | 31 ++++++++++++++++---
 .../src/hookNamesCache.js                     |  2 +-
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index f22649c06394c..58a4dcfd0850e 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -21,6 +21,7 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
@@ -449,6 +450,7 @@ function createPanelIfReactLoaded() {
               ensureInitialHTMLIsCleared(componentsPortalContainer);
               render('components');
               panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-components-tab'});
             }
           });
           extensionPanel.onHidden.addListener(panel => {
@@ -474,6 +476,7 @@ function createPanelIfReactLoaded() {
               ensureInitialHTMLIsCleared(profilerPortalContainer);
               render('profiler');
               panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-profiler-tab'});
             }
           });
         },
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index ac8577e2105c7..bdf1823cd8eb0 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -9,17 +9,23 @@
 
 import {enableLogger} from 'react-devtools-feature-flags';
 
-type LoadHookNamesEvent = {|
-  +event_name: 'loadHookNames',
-  +event_status: 'success' | 'error' | 'timeout' | 'unknown',
-  +duration_ms: number,
-  +inspected_element_display_name: string | null,
-  +inspected_element_number_of_hooks: number | null,
-|};
-
-// prettier-ignore
 export type LogEvent =
-  | LoadHookNamesEvent;
+  | {|
+      +event_name: 'loaded-dev-tools',
+    |}
+  | {|
+      +event_name: 'selected-components-tab',
+    |}
+  | {|
+      +event_name: 'selected-profiler-tab',
+    |}
+  | {|
+      +event_name: 'load-hook-names',
+      +event_status: 'success' | 'error' | 'timeout' | 'unknown',
+      +duration_ms: number,
+      +inspected_element_display_name: string | null,
+      +inspected_element_number_of_hooks: number | null,
+    |};
 
 export type LogFunction = LogEvent => void;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 6461441710ec5..0fa4a440136aa 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -13,7 +13,7 @@ import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
 import * as React from 'react';
-import {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import Store from '../store';
 import {
   BridgeContext,
@@ -47,6 +47,7 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContext';
 import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import {logEvent} from '../../Logger';
 
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
@@ -152,6 +153,24 @@ export default function DevTools({
     tab = overrideTab;
   }
 
+  const selectTab = useCallback(
+    (tabId: TabID) => {
+      // We show the TabBar when DevTools is NOT rendered as a browser extension.
+      // In this case, we want to capture when people select tabs with the TabBar.
+      // When DevTools is rendered as an extension, we capture this event when
+      // the browser devtools panel changes.
+      if (showTabBar === true) {
+        if (tabId === 'components') {
+          logEvent({event_name: 'selected-components-tab'});
+        } else {
+          logEvent({event_name: 'selected-profiler-tab'});
+        }
+      }
+      setTab(tabId);
+    },
+    [setTab, showTabBar],
+  );
+
   const options = useMemo(
     () => ({
       readOnly: readOnly || false,
@@ -204,12 +223,12 @@ export default function DevTools({
       if (event.ctrlKey || event.metaKey) {
         switch (event.key) {
           case '1':
-            setTab(tabs[0].id);
+            selectTab(tabs[0].id);
             event.preventDefault();
             event.stopPropagation();
             break;
           case '2':
-            setTab(tabs[1].id);
+            selectTab(tabs[1].id);
             event.preventDefault();
             event.stopPropagation();
             break;
@@ -232,6 +251,10 @@ export default function DevTools({
       }
     };
   }, [bridge]);
+
+  useEffect(() => {
+    logEvent({event_name: 'loaded-dev-tools'});
+  }, []);
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
@@ -265,7 +288,7 @@ export default function DevTools({
                                     <TabBar
                                       currentTab={tab}
                                       id="DevTools"
-                                      selectTab={setTab}
+                                      selectTab={selectTab}
                                       tabs={tabs}
                                       type="navigation"
                                     />
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 8926f3feb9a51..eee340844fe01 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -116,7 +116,7 @@ export function loadHookNames(
     const handleLoadComplete = (durationMs: number): void => {
       // Log duration for parsing hook names
       logEvent({
-        event_name: 'loadHookNames',
+        event_name: 'load-hook-names',
         event_status: status,
         duration_ms: durationMs,
         inspected_element_display_name: element.displayName,

From bdd6d5064dd820705de4ce4b5a92f9d055550ced Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 1 Oct 2021 11:50:05 -0400
Subject: [PATCH 014/109] React DevTools 4.19.0 -> 4.19.1 (#22480)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 5 +++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 4c6d33dbd585e..0c40a3cd990c3 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index e20186cc22c52..627a5a62a754c 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.19.0",
-  "version_name": "4.19.0",
+  "version": "4.19.1",
+  "version_name": "4.19.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index ad8d5eade5d30..f5bf6c606a29a 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.19.0",
-  "version_name": "4.19.0",
+  "version": "4.19.1",
+  "version_name": "4.19.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 56b0ee91269ca..662d749bbfad6 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index a3905de97f0b6..e7580779b9d9d 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 4b10d75406d3b..467ea10a8b616 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index e4ca09b65faf7..8f3243607f629 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.19.1 (October 1, 2021)
+
+#### Bugfix
+* Fixed potential cache miss when insepcting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472))
+
 ## 4.19.0 (September 29, 2021)
 
 #### Features
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 6ff26538ca967..12bef99648f14 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.19.0",
+    "react-devtools-core": "4.19.1",
     "update-notifier": "^2.1.0"
   }
 }

From 5f3b376c56c6c523e7018f5128a768cbd67a8a6f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 1 Oct 2021 15:03:36 -0400
Subject: [PATCH 015/109] Show different error boundary UI for timeouts than
 normal errors (#22483)

---
 .../react-devtools-shared/src/TimeoutError.js | 21 +++++++
 .../react-devtools-shared/src/backendAPI.js   |  7 ++-
 .../views/ErrorBoundary/ErrorBoundary.js      | 55 +++++++++++++------
 .../devtools/views/ErrorBoundary/ErrorView.js |  6 +-
 .../views/ErrorBoundary/TimeoutView.js        | 51 +++++++++++++++++
 .../devtools/views/ErrorBoundary/shared.css   | 29 ++++++++--
 .../src/inspectedElementCache.js              |  8 ++-
 7 files changed, 146 insertions(+), 31 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/TimeoutError.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js

diff --git a/packages/react-devtools-shared/src/TimeoutError.js b/packages/react-devtools-shared/src/TimeoutError.js
new file mode 100644
index 0000000000000..351e88dfb8e0f
--- /dev/null
+++ b/packages/react-devtools-shared/src/TimeoutError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export default class TimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, TimeoutError);
+    }
+
+    this.name = 'TimeoutError';
+  }
+}
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 2aa5b30cd22e6..23b975e38d6ea 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -10,6 +10,7 @@
 import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
 import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 import Store from 'react-devtools-shared/src/devtools/store';
+import TimeoutError from 'react-devtools-shared/src/TimeoutError';
 
 import type {
   InspectedElement as InspectedElementBackend,
@@ -102,6 +103,7 @@ export function inspectElement({
     requestID,
     'inspectedElement',
     bridge,
+    `Timed out while inspecting element ${id}.`,
   );
 
   bridge.send('inspectElement', {
@@ -144,6 +146,7 @@ function getPromiseForRequestID<T>(
   requestID: number,
   eventType: $Keys<BackendEvents>,
   bridge: FrontendBridge,
+  timeoutMessage: string,
 ): Promise<T> {
   return new Promise((resolve, reject) => {
     const cleanup = () => {
@@ -161,9 +164,7 @@ function getPromiseForRequestID<T>(
 
     const onTimeout = () => {
       cleanup();
-      reject(
-        new Error(`Timed out waiting for event '${eventType}' from bridge`),
-      );
+      reject(new TimeoutError(timeoutMessage));
     };
 
     bridge.addListener(eventType, onInspectedElement);
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index ea4f54b1a9b8b..3dbfb21abafc2 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -13,6 +13,8 @@ import Store from 'react-devtools-shared/src/devtools/store';
 import ErrorView from './ErrorView';
 import SearchingGitHubIssues from './SearchingGitHubIssues';
 import SuspendingErrorView from './SuspendingErrorView';
+import TimeoutView from './TimeoutView';
+import TimeoutError from 'react-devtools-shared/src/TimeoutError';
 
 type Props = {|
   children: React$Node,
@@ -27,6 +29,7 @@ type State = {|
   componentStack: string | null,
   errorMessage: string | null,
   hasError: boolean,
+  isTimeout: boolean,
 |};
 
 const InitialState: State = {
@@ -35,6 +38,7 @@ const InitialState: State = {
   componentStack: null,
   errorMessage: null,
   hasError: false,
+  isTimeout: false,
 };
 
 export default class ErrorBoundary extends Component<Props, State> {
@@ -48,6 +52,8 @@ export default class ErrorBoundary extends Component<Props, State> {
         ? error.message
         : String(error);
 
+    const isTimeout = error instanceof TimeoutError;
+
     const callStack =
       typeof error === 'object' &&
       error !== null &&
@@ -62,6 +68,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       callStack,
       errorMessage,
       hasError: true,
+      isTimeout,
     };
   }
 
@@ -93,26 +100,40 @@ export default class ErrorBoundary extends Component<Props, State> {
       componentStack,
       errorMessage,
       hasError,
+      isTimeout,
     } = this.state;
 
     if (hasError) {
-      return (
-        <ErrorView
-          callStack={callStack}
-          componentStack={componentStack}
-          dismissError={
-            canDismissProp || canDismissState ? this._dismissError : null
-          }
-          errorMessage={errorMessage}>
-          <Suspense fallback={<SearchingGitHubIssues />}>
-            <SuspendingErrorView
-              callStack={callStack}
-              componentStack={componentStack}
-              errorMessage={errorMessage}
-            />
-          </Suspense>
-        </ErrorView>
-      );
+      if (isTimeout) {
+        return (
+          <TimeoutView
+            callStack={callStack}
+            componentStack={componentStack}
+            dismissError={
+              canDismissProp || canDismissState ? this._dismissError : null
+            }
+            errorMessage={errorMessage}
+          />
+        );
+      } else {
+        return (
+          <ErrorView
+            callStack={callStack}
+            componentStack={componentStack}
+            dismissError={
+              canDismissProp || canDismissState ? this._dismissError : null
+            }
+            errorMessage={errorMessage}>
+            <Suspense fallback={<SearchingGitHubIssues />}>
+              <SuspendingErrorView
+                callStack={callStack}
+                componentStack={componentStack}
+                errorMessage={errorMessage}
+              />
+            </Suspense>
+          </ErrorView>
+        );
+      }
     }
 
     return children;
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
index baff24e522e1b..7443707496aa8 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -32,7 +32,7 @@ export default function ErrorView({
       {children}
       <div className={styles.ErrorInfo}>
         <div className={styles.HeaderRow}>
-          <div className={styles.Header}>
+          <div className={styles.ErrorHeader}>
             Uncaught Error: {errorMessage || ''}
           </div>
           {dismissError !== null && (
@@ -43,12 +43,12 @@ export default function ErrorView({
           )}
         </div>
         {!!callStack && (
-          <div className={styles.Stack}>
+          <div className={styles.ErrorStack}>
             The error was thrown {callStack.trim()}
           </div>
         )}
         {!!componentStack && (
-          <div className={styles.Stack}>
+          <div className={styles.ErrorStack}>
             The error occurred {componentStack.trim()}
           </div>
         )}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
new file mode 100644
index 0000000000000..45c64312be137
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import styles from './shared.css';
+
+type Props = {|
+  callStack: string | null,
+  children: React$Node,
+  componentStack: string | null,
+  dismissError: Function,
+  errorMessage: string | null,
+|};
+
+export default function TimeoutView({
+  callStack,
+  children,
+  componentStack,
+  dismissError = null,
+  errorMessage,
+}: Props) {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.HeaderRow}>
+          <div className={styles.TimeoutHeader}>
+            {errorMessage || 'Timed out waiting'}
+          </div>
+          <Button className={styles.CloseButton} onClick={dismissError}>
+            Retry
+            <ButtonIcon className={styles.CloseButtonIcon} type="close" />
+          </Button>
+        </div>
+        {!!componentStack && (
+          <div className={styles.TimeoutStack}>
+            The timeout occurred {componentStack.trim()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
index bef5c945c226e..ce8ad5f79ce24 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
@@ -30,6 +30,7 @@
   background-color: var(--color-background);
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--color-border);
 }
 
 .ErrorInfo {
@@ -42,10 +43,10 @@
   flex-direction: row;
   font-size: var(--font-size-sans-large);
   font-weight: bold;
-  color: var(--color-error-text);
 }
 
-.Header {
+.ErrorHeader,
+.TimeoutHeader {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -53,17 +54,35 @@
   min-width: 0;
 }
 
-.Stack {
+.ErrorHeader {
+  color: var(--color-error-text);
+}
+.TimeoutHeader {
+  color: var(--color-text);
+}
+
+.ErrorStack,
+.TimeoutStack {
   margin-top: 0.5rem;
   white-space: pre-wrap;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
   -webkit-font-smoothing: initial;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  overflow: auto;
+}
+
+.ErrorStack {
   background-color: var(--color-error-background);
   border: 1px solid var(--color-error-border);
   color: var(--color-error-text);
-  border-radius: 0.25rem;
-  padding: 0.5rem;
+}
+
+.TimeoutStack {
+  background-color: var(--color-console-warning-background);
+  color: var(--color-console-warning-text);
+  border: var(--color-console-warning-border)
 }
 
 .LoadingIcon {
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index e0e43e4022b20..6442a84b0be64 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -38,7 +38,7 @@ type ResolvedRecord<T> = {|
 
 type RejectedRecord = {|
   status: 2,
-  value: string,
+  value: Error | string,
 |};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
@@ -113,7 +113,9 @@ export function inspectElement(
     if (rendererID == null) {
       const rejectedRecord = ((newRecord: any): RejectedRecord);
       rejectedRecord.status = Rejected;
-      rejectedRecord.value = `Could not inspect element with id "${element.id}". No renderer found.`;
+      rejectedRecord.value = new Error(
+        `Could not inspect element with id "${element.id}". No renderer found.`,
+      );
 
       map.set(element, record);
 
@@ -139,7 +141,7 @@ export function inspectElement(
 
         const rejectedRecord = ((newRecord: any): RejectedRecord);
         rejectedRecord.status = Rejected;
-        rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
+        rejectedRecord.value = error;
 
         wake();
       },

From a4bc8ae4c1db471bb34d908dd890a09d4c774303 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Sat, 2 Oct 2021 19:56:15 +0530
Subject: [PATCH 016/109] Reopen #22481 Fixed modal closing issue (#22484)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
---
 packages/react-devtools-shared/src/devtools/views/hooks.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 247a865060cd5..76dad56774540 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -239,7 +239,7 @@ export function useModalDismissSignal(
       ownerDocument = ((modalRef.current: any): HTMLDivElement).ownerDocument;
       ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
       if (dismissOnClickOutside) {
-        ownerDocument.addEventListener('click', handleDocumentClick);
+        ownerDocument.addEventListener('click', handleDocumentClick, true);
       }
     }, 0);
 
@@ -250,7 +250,7 @@ export function useModalDismissSignal(
 
       if (ownerDocument !== null) {
         ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
-        ownerDocument.removeEventListener('click', handleDocumentClick);
+        ownerDocument.removeEventListener('click', handleDocumentClick, true);
       }
     };
   }, [modalRef, dismissCallback, dismissOnClickOutside]);

From 0ecbbe142201ef65830f0b7a19d52c1f77043e86 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Mon, 4 Oct 2021 09:54:33 -0400
Subject: [PATCH 017/109] Sync hydrate discrete events in capture phase and
 dont replay discrete events (#22448)

---
 ...DOMServerPartialHydration-test.internal.js |  93 ++++++-
 ...MServerSelectiveHydration-test.internal.js | 260 ++++++++++++++----
 .../src/events/ReactDOMEventListener.js       |  42 ++-
 .../src/events/ReactDOMEventReplaying.js      |  87 +++---
 .../DOMPluginEventSystem-test.internal.js     |  11 +-
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 15 files changed, 402 insertions(+), 102 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 9f954f4581d3c..b1a88868b3389 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1905,10 +1905,19 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    expect(clicks).toBe(1);
-
-    expect(container.textContent).toBe('Hello');
 
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+      expect(container.textContent).toBe('Click meHello');
+    } else {
+      expect(clicks).toBe(1);
+      expect(container.textContent).toBe('Hello');
+    }
     document.body.removeChild(container);
   });
 
@@ -1991,7 +2000,16 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(onEvent).toHaveBeenCalledTimes(2);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(onEvent).toHaveBeenCalledTimes(0);
+    } else {
+      expect(onEvent).toHaveBeenCalledTimes(2);
+    }
 
     document.body.removeChild(container);
   });
@@ -2072,7 +2090,17 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    expect(clicks).toBe(2);
+
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+    } else {
+      expect(clicks).toBe(2);
+    }
 
     document.body.removeChild(container);
   });
@@ -2158,7 +2186,16 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    expect(onEvent).toHaveBeenCalledTimes(2);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(onEvent).toHaveBeenCalledTimes(0);
+    } else {
+      expect(onEvent).toHaveBeenCalledTimes(2);
+    }
 
     document.body.removeChild(container);
   });
@@ -2231,9 +2268,19 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(clicksOnChild).toBe(1);
-    // This will be zero due to the stopPropagation.
-    expect(clicksOnParent).toBe(0);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicksOnChild).toBe(0);
+      expect(clicksOnParent).toBe(0);
+    } else {
+      expect(clicksOnChild).toBe(1);
+      // This will be zero due to the stopPropagation.
+      expect(clicksOnParent).toBe(0);
+    }
 
     document.body.removeChild(container);
   });
@@ -2310,8 +2357,16 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     // We're now full hydrated.
-
-    expect(clicks).toBe(1);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+    } else {
+      expect(clicks).toBe(1);
+    }
 
     document.body.removeChild(parentContainer);
   });
@@ -2580,8 +2635,20 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(submits).toBe(1);
-    expect(container.textContent).toBe('Hello');
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // discrete event not replayed
+      expect(submits).toBe(0);
+      expect(container.textContent).toBe('Click meHello');
+    } else {
+      expect(submits).toBe(1);
+      expect(container.textContent).toBe('Hello');
+    }
+
     document.body.removeChild(container);
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 76d9b43d07f61..bb04b46df1c40 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -14,6 +14,7 @@ import {createEventTarget} from 'dom-event-testing-library';
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactFeatureFlags;
 let Scheduler;
 let Suspense;
 let act;
@@ -112,7 +113,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
 
-    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableCreateEventHandleAPI = true;
     React = require('react');
     ReactDOM = require('react-dom');
@@ -266,9 +267,19 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    // After the click, we should prioritize D and the Click first,
-    // and only after that render A and C.
-    expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(Scheduler).toHaveYielded(['D', 'A']);
+    } else {
+      // After the click, we should prioritize D and the Click first,
+      // and only after that render A and C.
+      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    }
 
     document.body.removeChild(container);
   });
@@ -343,7 +354,16 @@ describe('ReactDOMServerSelectiveHydration', () => {
     dispatchClickEvent(spanC);
     dispatchClickEvent(spanD);
 
-    expect(Scheduler).toHaveYielded(['App']);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    } else {
+      expect(Scheduler).toHaveYielded(['App']);
+    }
 
     await act(async () => {
       suspend = false;
@@ -351,18 +371,29 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    // We should prioritize hydrating A, C and D first since we clicked in
-    // them. Only after they're done will we hydrate B.
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'Clicked A',
-      'C',
-      'Clicked C',
-      'D',
-      'Clicked D',
-      // B should render last since it wasn't clicked.
-      'B',
-    ]);
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    } else {
+      // We should prioritize hydrating A, C and D first since we clicked in
+      // them. Only after they're done will we hydrate B.
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'Clicked A',
+        'C',
+        'Clicked C',
+        'D',
+        'Clicked D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -519,7 +550,17 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // no replay
+      expect(Scheduler).toHaveYielded(['D', 'A']);
+    } else {
+      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    }
 
     document.body.removeChild(container);
   });
@@ -599,26 +640,42 @@ describe('ReactDOMServerSelectiveHydration', () => {
     createEventTarget(spanC).virtualclick();
     createEventTarget(spanD).virtualclick();
 
-    expect(Scheduler).toHaveYielded(['App']);
-
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    } else {
+      expect(Scheduler).toHaveYielded(['App']);
+    }
     await act(async () => {
       suspend = false;
       resolve();
       await promise;
     });
 
-    // We should prioritize hydrating A, C and D first since we clicked in
-    // them. Only after they're done will we hydrate B.
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'Clicked A',
-      'C',
-      'Clicked C',
-      'D',
-      'Clicked D',
-      // B should render last since it wasn't clicked.
-      'B',
-    ]);
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    } else {
+      // We should prioritize hydrating A, C and D first since we clicked in
+      // them. Only after they're done will we hydrate B.
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'Clicked A',
+        'C',
+        'Clicked C',
+        'D',
+        'Clicked D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -707,20 +764,37 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    // We should prioritize hydrating D first because we clicked it.
-    // Next we should hydrate C since that's the current hover target.
-    // To simplify implementation details we hydrate both B and C at
-    // the same time since B was already scheduled.
-    // This is ok because it will at least not continue for nested
-    // boundary. See the next test below.
-    expect(Scheduler).toHaveYielded([
-      'D',
-      'Clicked D',
-      'B', // Ideally this should be later.
-      'C',
-      'Hover C',
-      'A',
-    ]);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // We should prioritize hydrating D first because we clicked it.
+      // but event isnt replayed
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    } else {
+      // We should prioritize hydrating D first because we clicked it.
+      // Next we should hydrate C since that's the current hover target.
+      // To simplify implementation details we hydrate both B and C at
+      // the same time since B was already scheduled.
+      // This is ok because it will at least not continue for nested
+      // boundary. See the next test below.
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'Clicked D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -796,16 +870,18 @@ describe('ReactDOMServerSelectiveHydration', () => {
     dispatchMouseHoverEvent(spanB, spanD);
     dispatchMouseHoverEvent(spanC, spanB);
 
-    suspend = false;
-    resolve();
-    await promise;
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
 
     // We should prioritize hydrating D first because we clicked it.
     // Next we should hydrate C since that's the current hover target.
     // Next it doesn't matter if we hydrate A or B first but as an
     // implementation detail we're currently hydrating B first since
     // we at one point hovered over it and we never deprioritized it.
-    expect(Scheduler).toFlushAndYield(['App', 'C', 'Hover C', 'A', 'B', 'D']);
+    expect(Scheduler).toHaveYielded(['App', 'C', 'Hover C', 'A', 'B', 'D']);
 
     document.body.removeChild(container);
   });
@@ -970,4 +1046,88 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     document.body.removeChild(container);
   });
+
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+  it('fires capture event handlers and native events if content is hydratable during discrete event', async () => {
+    spyOnDev(console, 'error');
+    function Child({text}) {
+      Scheduler.unstable_yieldValue(text);
+      const ref = React.useRef();
+      React.useLayoutEffect(() => {
+        if (!ref.current) {
+          return;
+        }
+        ref.current.onclick = () => {
+          Scheduler.unstable_yieldValue('Native Click ' + text);
+        };
+      }, [text]);
+      return (
+        <span
+          ref={ref}
+          onClickCapture={() => {
+            Scheduler.unstable_yieldValue('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML;
+    expect(() => {
+      finalHTML = ReactDOMServer.renderToString(<App />);
+    }).toErrorDev([
+      'useLayoutEffect does nothing on the server',
+      'useLayoutEffect does nothing on the server',
+    ]);
+
+    expect(Scheduler).toHaveYielded(['App', 'A', 'B']);
+
+    const container = document.createElement('div');
+    // We need this to be in the document since we'll dispatch events on it.
+    document.body.appendChild(container);
+
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[1];
+
+    ReactDOM.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // This should synchronously hydrate the root App and the second suspense
+    // boundary.
+    dispatchClickEvent(span);
+
+    // We rendered App, B and then invoked the event without rendering A.
+    expect(Scheduler).toHaveYielded([
+      'App',
+      'B',
+      'Capture Clicked B',
+      'Native Click B',
+      'Clicked B',
+    ]);
+
+    // After continuing the scheduler, we finally hydrate A.
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    document.body.removeChild(container);
+  });
 });
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index dfe3c2e3c00c0..6467421d4f635 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,13 +11,18 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
-
+import {
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+  enableSelectiveHydration,
+} from 'shared/ReactFeatureFlags';
 import {
   isReplayableDiscreteEvent,
   queueDiscreteEvent,
   hasQueuedDiscreteEvents,
   clearIfContinuousEvent,
   queueIfContinuousEvent,
+  attemptSynchronousHydration,
+  isCapturePhaseSynchronouslyHydratableEvent,
 } from './ReactDOMEventReplaying';
 import {
   getNearestMountedFiber,
@@ -28,7 +33,10 @@ import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {type EventSystemFlags, IS_CAPTURE_PHASE} from './EventSystemFlags';
 
 import getEventTarget from './getEventTarget';
-import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
+import {
+  getInstanceFromNode,
+  getClosestInstanceFromNode,
+} from '../client/ReactDOMComponentTree';
 
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 
@@ -176,7 +184,7 @@ export function dispatchEvent(
     return;
   }
 
-  const blockedOn = attemptToDispatchEvent(
+  let blockedOn = attemptToDispatchEvent(
     domEventName,
     eventSystemFlags,
     targetContainer,
@@ -192,7 +200,10 @@ export function dispatchEvent(
   }
 
   if (allowReplay) {
-    if (isReplayableDiscreteEvent(domEventName)) {
+    if (
+      !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
+      isReplayableDiscreteEvent(domEventName)
+    ) {
       // This this to be replayed later once the target is available.
       queueDiscreteEvent(
         blockedOn,
@@ -219,6 +230,29 @@ export function dispatchEvent(
     clearIfContinuousEvent(domEventName, nativeEvent);
   }
 
+  if (
+    enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
+    enableSelectiveHydration &&
+    isCapturePhaseSynchronouslyHydratableEvent(domEventName)
+  ) {
+    while (blockedOn !== null) {
+      const fiber = getInstanceFromNode(blockedOn);
+      if (fiber !== null) {
+        attemptSynchronousHydration(fiber);
+      }
+      const nextBlockedOn = attemptToDispatchEvent(
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        nativeEvent,
+      );
+      if (nextBlockedOn === blockedOn) {
+        break;
+      }
+      blockedOn = nextBlockedOn;
+    }
+  }
+
   // This is not replayable so we'll invoke it but without a target,
   // in case the event system needs to trace it.
   dispatchEventForPluginEventSystem(
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index eab9b4650c108..c363721bcd848 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -14,7 +14,10 @@ import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
-import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
+import {
+  enableSelectiveHydration,
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+} from 'shared/ReactFeatureFlags';
 import {
   unstable_scheduleCallback as scheduleCallback,
   unstable_NormalPriority as NormalPriority,
@@ -32,10 +35,14 @@ import {
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
-let attemptSynchronousHydration: (fiber: Object) => void;
+let _attemptSynchronousHydration: (fiber: Object) => void;
 
 export function setAttemptSynchronousHydration(fn: (fiber: Object) => void) {
-  attemptSynchronousHydration = fn;
+  _attemptSynchronousHydration = fn;
+}
+
+export function attemptSynchronousHydration(fiber: Object) {
+  _attemptSynchronousHydration(fiber);
 }
 
 let attemptDiscreteHydration: (fiber: Object) => void;
@@ -180,6 +187,9 @@ export function queueDiscreteEvent(
   targetContainer: EventTarget,
   nativeEvent: AnyNativeEvent,
 ): void {
+  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    return;
+  }
   const queuedEvent = createQueuedReplayableEvent(
     blockedOn,
     domEventName,
@@ -290,6 +300,13 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
   return existingQueuedEvent;
 }
 
+export function isCapturePhaseSynchronouslyHydratableEvent(
+  eventName: DOMEventName,
+) {
+  // TODO: maybe include more events
+  return isReplayableDiscreteEvent(eventName);
+}
+
 export function queueIfContinuousEvent(
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,
@@ -483,39 +500,41 @@ function attemptReplayContinuousQueuedEventInMap(
 
 function replayUnblockedEvents() {
   hasScheduledReplayAttempt = false;
-  // First replay discrete events.
-  while (queuedDiscreteEvents.length > 0) {
-    const nextDiscreteEvent = queuedDiscreteEvents[0];
-    if (nextDiscreteEvent.blockedOn !== null) {
-      // We're still blocked.
-      // Increase the priority of this boundary to unblock
-      // the next discrete event.
-      const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
-      if (fiber !== null) {
-        attemptDiscreteHydration(fiber);
-      }
-      break;
-    }
-    const targetContainers = nextDiscreteEvent.targetContainers;
-    while (targetContainers.length > 0) {
-      const targetContainer = targetContainers[0];
-      const nextBlockedOn = attemptToDispatchEvent(
-        nextDiscreteEvent.domEventName,
-        nextDiscreteEvent.eventSystemFlags,
-        targetContainer,
-        nextDiscreteEvent.nativeEvent,
-      );
-      if (nextBlockedOn !== null) {
-        // We're still blocked. Try again later.
-        nextDiscreteEvent.blockedOn = nextBlockedOn;
+  if (!enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    // First replay discrete events.
+    while (queuedDiscreteEvents.length > 0) {
+      const nextDiscreteEvent = queuedDiscreteEvents[0];
+      if (nextDiscreteEvent.blockedOn !== null) {
+        // We're still blocked.
+        // Increase the priority of this boundary to unblock
+        // the next discrete event.
+        const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+        if (fiber !== null) {
+          attemptDiscreteHydration(fiber);
+        }
         break;
       }
-      // This target container was successfully dispatched. Try the next.
-      targetContainers.shift();
-    }
-    if (nextDiscreteEvent.blockedOn === null) {
-      // We've successfully replayed the first event. Let's try the next one.
-      queuedDiscreteEvents.shift();
+      const targetContainers = nextDiscreteEvent.targetContainers;
+      while (targetContainers.length > 0) {
+        const targetContainer = targetContainers[0];
+        const nextBlockedOn = attemptToDispatchEvent(
+          nextDiscreteEvent.domEventName,
+          nextDiscreteEvent.eventSystemFlags,
+          targetContainer,
+          nextDiscreteEvent.nativeEvent,
+        );
+        if (nextBlockedOn !== null) {
+          // We're still blocked. Try again later.
+          nextDiscreteEvent.blockedOn = nextBlockedOn;
+          break;
+        }
+        // This target container was successfully dispatched. Try the next.
+        targetContainers.shift();
+      }
+      if (nextDiscreteEvent.blockedOn === null) {
+        // We've successfully replayed the first event. Let's try the next one.
+        queuedDiscreteEvents.shift();
+      }
     }
   }
   // Next replay any continuous events.
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 4f2df6fffc495..1b2bfbb0bef4d 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -649,7 +649,16 @@ describe('DOMPluginEventSystem', () => {
 
           // We're now full hydrated.
 
-          expect(clicks).toBe(1);
+          if (
+            gate(
+              flags =>
+                flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+            )
+          ) {
+            expect(clicks).toBe(0);
+          } else {
+            expect(clicks).toBe(1);
+          }
 
           document.body.removeChild(parentContainer);
         });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 608db694be518..f5d34e2ff6539 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -103,6 +103,8 @@ export const warnOnSubscriptionInsideStartTransition = false;
 
 export const enableSuspenseAvoidThisFallback = false;
 
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+
 export const enableComponentStackLocations = true;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 9c3d45528c5af..5a1c1ed8d9c60 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,6 +50,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index bf96cc00e687c..3c11070d6ecb3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 0d2b226adf2f6..4b0457c219587 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f760425ce03cb..2c54c1fb77c20 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,6 +51,7 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index cb0efcc34bdcd..be60bcfbddb77 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d1cfdbb749565..76af047ab6d4e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 62a10f475acaa..6fc6cf3c68367 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 6400ef0422503..ef980529f3f21 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -27,6 +27,7 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const warnOnSubscriptionInsideStartTransition = __VARIANT__;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c5dde53578c95..0f1ce6eb1f9f7 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,6 +32,7 @@ export const {
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
   warnOnSubscriptionInsideStartTransition,
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From f2c381131fb58c107e6153255bc8d1d6340db506 Mon Sep 17 00:00:00 2001
From: Daishi Kato <dai-shi@users.noreply.github.com>
Date: Mon, 4 Oct 2021 23:39:51 +0900
Subject: [PATCH 018/109] fix: useSyncExternalStoreExtra (#22500)

* move setting memoizedSnapshot

* Revert "move setting memoizedSnapshot"

This reverts commit f01320689cebfcbc4f3a53208f879ed4a8d6613d.

* add failed tests

* Revert "Revert "move setting memoizedSnapshot""

This reverts commit cb43c4fdc6b0dcab3480f27d6fbbb3137dbc47bb.
---
 .../useSyncExternalStoreShared-test.js        | 89 +++++++++++++++++++
 .../src/useSyncExternalStoreExtra.js          |  2 +-
 2 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 6536f65b7f2a2..ab8143f24034c 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -818,4 +818,93 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       'Sibling: 1',
     ]);
   });
+
+  describe('selector and isEqual error handling in extra', () => {
+    let ErrorBoundary;
+    beforeAll(() => {
+      spyOnDev(console, 'warn');
+      ErrorBoundary = class extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          return {error};
+        }
+        render() {
+          if (this.state.error) {
+            return <Text text={this.state.error.message} />;
+          }
+          return this.props.children;
+        }
+      };
+    });
+
+    it('selector can throw on update', async () => {
+      const store = createExternalStore({a: 'a'});
+      const selector = state => state.a.toUpperCase();
+
+      function App() {
+        const a = useSyncExternalStoreExtra(
+          store.subscribe,
+          store.getState,
+          null,
+          selector,
+        );
+        return <Text text={a} />;
+      }
+
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() =>
+        root.render(
+          <ErrorBoundary>
+            <App />
+          </ErrorBoundary>,
+        ),
+      );
+
+      expect(container.textContent).toEqual('A');
+
+      await act(() => {
+        store.set({});
+      });
+      expect(container.textContent).toEqual(
+        "Cannot read property 'toUpperCase' of undefined",
+      );
+    });
+
+    it('isEqual can throw on update', async () => {
+      const store = createExternalStore({a: 'A'});
+      const selector = state => state.a;
+      const isEqual = (left, right) => left.a.trim() === right.a.trim();
+
+      function App() {
+        const a = useSyncExternalStoreExtra(
+          store.subscribe,
+          store.getState,
+          null,
+          selector,
+          isEqual,
+        );
+        return <Text text={a} />;
+      }
+
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() =>
+        root.render(
+          <ErrorBoundary>
+            <App />
+          </ErrorBoundary>,
+        ),
+      );
+
+      expect(container.textContent).toEqual('A');
+
+      await act(() => {
+        store.set({});
+      });
+      expect(container.textContent).toEqual(
+        "Cannot read property 'trim' of undefined",
+      );
+    });
+  });
 });
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
index f4a1885aec5b9..aa4957b534753 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
@@ -76,7 +76,6 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
       }
 
       // The snapshot has changed, so we need to compute a new selection.
-      memoizedSnapshot = nextSnapshot;
       const nextSelection = selector(nextSnapshot);
 
       // If a custom isEqual function is provided, use that to check if the data
@@ -87,6 +86,7 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
         return prevSelection;
       }
 
+      memoizedSnapshot = nextSnapshot;
       memoizedSelection = nextSelection;
       return nextSelection;
     };

From cadf94df1f77a75f3cc67f284fa951c6024e51d2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Oct 2021 11:58:54 -0400
Subject: [PATCH 019/109] Add new Jest --compact-console flag for DevTools
 tests (#22495)

---
 .../src/__tests__/setupTests.js               | 20 +++++++++++++++++++
 scripts/jest/jest-cli.js                      | 19 ++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index c2db1ae546f65..4224bde3b97d1 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -7,11 +7,31 @@
  * @flow
  */
 
+import {CustomConsole} from '@jest/console';
+
 import type {
   BackendBridge,
   FrontendBridge,
 } from 'react-devtools-shared/src/bridge';
 
+// Argument is serialized when passed from jest-cli script through to setupTests.
+const compactConsole = process.env.compactConsole === 'true';
+if (compactConsole) {
+  const formatter = (type, message) => {
+    switch (type) {
+      case 'error':
+        return '\x1b[31m' + message + '\x1b[0m';
+      case 'warn':
+        return '\x1b[33m' + message + '\x1b[0m';
+      case 'log':
+      default:
+        return message;
+    }
+  };
+
+  global.console = new CustomConsole(process.stdout, process.stderr, formatter);
+}
+
 const env = jasmine.getEnv();
 env.beforeEach(() => {
   global.mockClipboardCopy = jest.fn();
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 68ed9688bb31b..4d523c6429548 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -97,6 +97,13 @@ const argv = yargs
       requiresArg: true,
       type: 'string',
     },
+    compactConsole: {
+      alias: 'c',
+      describe: 'Compact console output (hide file locations).',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
   }).argv;
 
 function logError(message) {
@@ -159,6 +166,11 @@ function validateOptions() {
       logError('DevTool tests require --build.');
       success = false;
     }
+  } else {
+    if (argv.compactConsole) {
+      logError('Only DevTool tests support compactConsole flag.');
+      success = false;
+    }
   }
 
   if (isWWWConfig()) {
@@ -284,6 +296,10 @@ function getEnvars() {
     RELEASE_CHANNEL: argv.releaseChannel.match(/modern|experimental/)
       ? 'experimental'
       : 'stable',
+
+    // Pass this flag through to the confit environment
+    // so the base config can conditionally load the console setup file.
+    compactConsole: argv.compactConsole,
   };
 
   if (argv.prod) {
@@ -306,7 +322,9 @@ function main() {
     console.log(chalk.red(`\nPlease run: \`${argv.deprecated}\` instead.\n`));
     return;
   }
+
   validateOptions();
+
   const args = getCommandArgs();
   const envars = getEnvars();
   const env = Object.entries(envars).map(([k, v]) => `${k}=${v}`);
@@ -334,6 +352,7 @@ function main() {
     stdio: 'inherit',
     env: {...envars, ...process.env},
   });
+
   // Ensure we close our process when we get a failure case.
   jest.on('close', code => {
     // Forward the exit code from the Jest process.

From 6485ef747249295c7bfb8e599b9dde76df143cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 5 Oct 2021 22:59:46 -0400
Subject: [PATCH 020/109] Remove duplicate error code (#22513)

---
 scripts/error-codes/codes.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 3920d0aa51c35..d1688e84bc7a8 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -396,7 +396,6 @@
   "407": "Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.",
   "408": "Missing getServerSnapshot, which is required for server-rendered content.",
   "409": "Cannot update an unmounted root.",
-  "410": "%s suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.",
   "411": "%s suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.",
   "412": "Connection closed.",
   "413": "Expected finished root and lanes to be set. This is a bug in React.",

From 579c008a752fae70f670047d0ab687552fd8d160 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 6 Oct 2021 00:31:06 -0400
Subject: [PATCH 021/109] [Fizz/Flight] pipeToNodeWritable(...,
 writable).startWriting() -> renderToPipeableStream(...).pipe(writable)
 (#22450)

* Rename pipeToNodeWritable to renderToNodePipe

* Add startWriting API to Flight

We don't really need it in this case because there's way less reason to
delay the stream in Flight.

* Pass the destination to startWriting instead of renderToNode

* Rename startWriting to pipe

This mirrors the ReadableStream API in Node

* Error codes

* Rename to renderToPipeableStream

This mimics the renderToReadableStream API for the browser.
---
 fixtures/flight/server/handler.server.js      |   8 +-
 fixtures/ssr/server/render.js                 |  30 ++--
 fixtures/ssr2/server/render.js                |   7 +-
 packages/react-dom/npm/server.node.js         |   2 +-
 packages/react-dom/server.node.js             |   4 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  | 151 +++++++-----------
 .../__tests__/ReactDOMFizzServerNode-test.js  |  60 ++++---
 .../src/server/ReactDOMFizzServerNode.js      |  14 +-
 .../src/ReactFlightDOMServerNode.js           |  27 +++-
 .../src/__tests__/ReactFlightDOM-test.js      |  41 +++--
 scripts/error-codes/codes.json                |   3 +-
 11 files changed, 169 insertions(+), 178 deletions(-)

diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index cd4af7319f01f..b6745c0332791 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');
+const {renderToPipeableStream} = require('react-server-dom-webpack/writer');
 const {readFile} = require('fs');
 const {resolve} = require('path');
 const React = require('react');
@@ -20,7 +20,11 @@ module.exports = function(req, res) {
         const App = m.default.default || m.default;
         res.setHeader('Access-Control-Allow-Origin', '*');
         const moduleMap = JSON.parse(data);
-        pipeToNodeWritable(React.createElement(App), res, moduleMap);
+        const {pipe} = renderToPipeableStream(
+          React.createElement(App),
+          moduleMap
+        );
+        pipe(res);
       }
     );
   });
diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index ababbc4ccd72a..e0fc50f3f9538 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {pipeToNodeWritable} from 'react-dom/server';
+import {renderToPipeableStream} from 'react-dom/server';
 
 import App from '../src/components/App';
 
@@ -20,22 +20,18 @@ export default function render(url, res) {
     console.error('Fatal', error);
   });
   let didError = false;
-  const {startWriting, abort} = pipeToNodeWritable(
-    <App assets={assets} />,
-    res,
-    {
-      onCompleteShell() {
-        // If something errored before we started streaming, we set the error code appropriately.
-        res.statusCode = didError ? 500 : 200;
-        res.setHeader('Content-type', 'text/html');
-        startWriting();
-      },
-      onError(x) {
-        didError = true;
-        console.error(x);
-      },
-    }
-  );
+  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    onCompleteShell() {
+      // If something errored before we started streaming, we set the error code appropriately.
+      res.statusCode = didError ? 500 : 200;
+      res.setHeader('Content-type', 'text/html');
+      pipe(res);
+    },
+    onError(x) {
+      didError = true;
+      console.error(x);
+    },
+  });
   // Abandon and switch to client rendering after 5 seconds.
   // Try lowering this to see the client recover.
   setTimeout(abort, 5000);
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index b5d919e82ca6d..5ebbed0313c69 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -8,7 +8,7 @@
 
 import * as React from 'react';
 // import {renderToString} from 'react-dom/server';
-import {pipeToNodeWritable} from 'react-dom/server';
+import {renderToPipeableStream} from 'react-dom/server';
 import App from '../src/App';
 import {DataProvider} from '../src/data';
 import {API_DELAY, ABORT_DELAY} from './delays';
@@ -37,17 +37,16 @@ module.exports = function render(url, res) {
   });
   let didError = false;
   const data = createServerData();
-  const {startWriting, abort} = pipeToNodeWritable(
+  const {pipe, abort} = renderToPipeableStream(
     <DataProvider data={data}>
       <App assets={assets} />
     </DataProvider>,
-    res,
     {
       onCompleteShell() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');
-        startWriting();
+        pipe(res);
       },
       onError(x) {
         didError = true;
diff --git a/packages/react-dom/npm/server.node.js b/packages/react-dom/npm/server.node.js
index e7d3251c4d3dd..2eb97e80354c8 100644
--- a/packages/react-dom/npm/server.node.js
+++ b/packages/react-dom/npm/server.node.js
@@ -14,4 +14,4 @@ exports.renderToString = l.renderToString;
 exports.renderToStaticMarkup = l.renderToStaticMarkup;
 exports.renderToNodeStream = l.renderToNodeStream;
 exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
-exports.pipeToNodeWritable = s.pipeToNodeWritable;
+exports.renderToPipeableStream = s.renderToPipeableStream;
diff --git a/packages/react-dom/server.node.js b/packages/react-dom/server.node.js
index 7fb8cfaeb5a82..1fcab6c8c9ad4 100644
--- a/packages/react-dom/server.node.js
+++ b/packages/react-dom/server.node.js
@@ -36,8 +36,8 @@ export function renderToStaticNodeStream() {
   );
 }
 
-export function pipeToNodeWritable() {
-  return require('./src/server/ReactDOMFizzServerNode').pipeToNodeWritable.apply(
+export function renderToPipeableStream() {
+  return require('./src/server/ReactDOMFizzServerNode').renderToPipeableStream.apply(
     this,
     arguments,
   );
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d786062043dee..cd0c87a1df3b2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -239,7 +239,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <div>
             <Suspense fallback={<Text text="Loading..." />}>
@@ -252,9 +252,8 @@ describe('ReactDOMFizzServer', () => {
             </Suspense>
           </div>
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
       <div>
@@ -304,16 +303,16 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
 
@@ -356,15 +355,14 @@ describe('ReactDOMFizzServer', () => {
     });
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <Suspense fallback={<Text text="Loading..." />}>
             {lazyElement}
           </Suspense>
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
     await act(async () => {
@@ -396,16 +394,16 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
 
@@ -441,15 +439,14 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should asynchronously load the suspense boundary', async () => {
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <Suspense fallback={<Text text="Loading..." />}>
             <AsyncText text="Hello World" />
           </Suspense>
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
     await act(async () => {
@@ -475,11 +472,8 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-        <App />,
-        writable,
-      );
-      startWriting();
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -550,16 +544,16 @@ describe('ReactDOMFizzServer', () => {
 
     // We originally suspend the boundary and start streaming the loading state.
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -633,11 +627,10 @@ describe('ReactDOMFizzServer', () => {
 
     // We originally suspend the boundary and start streaming the loading state.
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App showMore={false} />,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
 
     const root = ReactDOM.createRoot(container, {hydrate: true});
@@ -701,8 +694,8 @@ describe('ReactDOMFizzServer', () => {
 
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.pipeToNodeWritable(<App />, writable);
-      controls.startWriting();
+      controls = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      controls.pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -753,7 +746,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         // We use two nested boundaries to flush out coverage of an old reentrancy bug.
         <Suspense fallback="Loading...">
           <Suspense fallback={<Text text="Loading A..." />}>
@@ -765,12 +758,11 @@ describe('ReactDOMFizzServer', () => {
             </>
           </Suspense>
         </Suspense>,
-        writableA,
         {
           identifierPrefix: 'A_',
           onCompleteShell() {
             writableA.write('<div id="container-A">');
-            startWriting();
+            pipe(writableA);
             writableA.write('</div>');
           },
         },
@@ -778,19 +770,18 @@ describe('ReactDOMFizzServer', () => {
     });
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback={<Text text="Loading B..." />}>
           <Text text="This will show B: " />
           <div>
             <AsyncText text="B" />
           </div>
         </Suspense>,
-        writableB,
         {
           identifierPrefix: 'B_',
           onCompleteShell() {
             writableB.write('<div id="container-B">');
-            startWriting();
+            pipe(writableB);
             writableB.write('</div>');
           },
         },
@@ -876,11 +867,8 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-        <App />,
-        writable,
-      );
-      startWriting();
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
     });
 
     expect(getVisibleChildren(container)).toEqual(
@@ -967,11 +955,8 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-        <App />,
-        writable,
-      );
-      startWriting();
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
     });
 
     expect(getVisibleChildren(container)).toEqual(
@@ -1024,14 +1009,14 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App />,
-        writable,
+
         {
           namespaceURI: 'http://www.w3.org/2000/svg',
           onCompleteShell() {
             writable.write('<svg>');
-            startWriting();
+            pipe(writable);
             writable.write('</svg>');
           },
         },
@@ -1111,11 +1096,8 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <A />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<A />);
+        pipe(writable);
       });
 
       expect(getVisibleChildren(container)).toEqual(
@@ -1213,7 +1195,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <TestProvider ctx="A">
           <div>
             <Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>
@@ -1224,9 +1206,8 @@ describe('ReactDOMFizzServer', () => {
             </Suspense>
           </div>
         </TestProvider>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
       <div>
@@ -1272,7 +1253,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <PrintA />
           <div>
@@ -1287,9 +1268,8 @@ describe('ReactDOMFizzServer', () => {
           </div>
           <PrintA />
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
       <div>
@@ -1335,7 +1315,7 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <PrintA />
           <div>
@@ -1355,14 +1335,14 @@ describe('ReactDOMFizzServer', () => {
           </div>
           <PrintA />
         </div>,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(loggedErrors.length).toBe(1);
     expect(loggedErrors[0].message).toEqual('A0.1.1');
@@ -1396,16 +1376,16 @@ describe('ReactDOMFizzServer', () => {
     const loggedErrors = [];
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.pipeToNodeWritable(
+      controls = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      controls.startWriting();
+      controls.pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -1456,7 +1436,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should be able to abort the fallback if the main content finishes first', async () => {
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback={<Text text="Loading Outer" />}>
           <div>
             <Suspense
@@ -1470,9 +1450,8 @@ describe('ReactDOMFizzServer', () => {
             </Suspense>
           </div>
         </Suspense>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual('Loading Outer');
     // We should have received a partial segment containing the a partial of the fallback.
@@ -1554,11 +1533,10 @@ describe('ReactDOMFizzServer', () => {
     await jest.runAllTimers();
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
 
     // Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved
@@ -1669,18 +1647,18 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(Scheduler).toHaveYielded(['server']);
 
@@ -1752,18 +1730,18 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(Scheduler).toHaveYielded(['server']);
 
@@ -1838,11 +1816,8 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <App />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
 
@@ -1922,11 +1897,8 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <App />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
 
@@ -1997,11 +1969,8 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <App />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 949ddcb04fa2d..7fa1c208dffc9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -57,13 +57,12 @@ describe('ReactDOMFizzServer', () => {
   }
 
   // @gate experimental
-  it('should call pipeToNodeWritable', () => {
+  it('should call renderToPipeableStream', () => {
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>hello world</div>,
-      writable,
     );
-    startWriting();
+    pipe(writable);
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
@@ -71,13 +70,12 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should emit DOCTYPE at the root of the document', () => {
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <html>
         <body>hello world</body>
       </html>,
-      writable,
     );
-    startWriting();
+    pipe(writable);
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(
       `"<!DOCTYPE html><html><body>hello world</body></html>"`,
@@ -85,18 +83,17 @@ describe('ReactDOMFizzServer', () => {
   });
 
   // @gate experimental
-  it('should start writing after startWriting', () => {
+  it('should start writing after pipe', () => {
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>hello world</div>,
-      writable,
     );
     jest.runAllTimers();
     // First we write our header.
     output.result +=
       '<!doctype html><html><head><title>test</title><head><body>';
     // Then React starts writing.
-    startWriting();
+    pipe(writable);
     expect(output.result).toMatchInlineSnapshot(
       `"<!doctype html><html><head><title>test</title><head><body><div>hello world</div>"`,
     );
@@ -115,13 +112,13 @@ describe('ReactDOMFizzServer', () => {
     }
     let isCompleteCalls = 0;
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback="Loading">
           <Wait />
         </Suspense>
       </div>,
-      writable,
+
       {
         onCompleteAll() {
           isCompleteCalls++;
@@ -144,7 +141,7 @@ describe('ReactDOMFizzServer', () => {
     output.result +=
       '<!doctype html><html><head><title>test</title><head><body>';
     // Then React starts writing.
-    startWriting();
+    pipe(writable);
     expect(output.result).toMatchInlineSnapshot(
       `"<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!-- --><!--/$--></div>"`,
     );
@@ -154,11 +151,11 @@ describe('ReactDOMFizzServer', () => {
   it('should error the stream when an error is thrown at the root', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Throw />
       </div>,
-      writable,
+
       {
         onError(x) {
           reportedErrors.push(x);
@@ -167,7 +164,7 @@ describe('ReactDOMFizzServer', () => {
     );
 
     // The stream is errored once we start writing.
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -181,20 +178,20 @@ describe('ReactDOMFizzServer', () => {
   it('should error the stream when an error is thrown inside a fallback', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback={<Throw />}>
           <InfiniteSuspend />
         </Suspense>
       </div>,
-      writable,
+
       {
         onError(x) {
           reportedErrors.push(x);
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -207,20 +204,20 @@ describe('ReactDOMFizzServer', () => {
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Throw />
         </Suspense>
       </div>,
-      writable,
+
       {
         onError(x) {
           reportedErrors.push(x);
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -242,13 +239,12 @@ describe('ReactDOMFizzServer', () => {
     function Content() {
       return 'Hi';
     }
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <Suspense fallback={<Fallback />}>
         <Content />
       </Suspense>,
-      writable,
     );
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -261,20 +257,20 @@ describe('ReactDOMFizzServer', () => {
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     let isCompleteCalls = 0;
     const {writable, output, completed} = getTestWritable();
-    const {startWriting, abort} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <InfiniteSuspend />
         </Suspense>
       </div>,
-      writable,
+
       {
         onCompleteAll() {
           isCompleteCalls++;
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     jest.runAllTimers();
 
@@ -294,7 +290,7 @@ describe('ReactDOMFizzServer', () => {
   it('should be able to complete by abort when the fallback is also suspended', async () => {
     let isCompleteCalls = 0;
     const {writable, output, completed} = getTestWritable();
-    const {startWriting, abort} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback="Loading">
           <Suspense fallback={<InfiniteSuspend />}>
@@ -302,14 +298,14 @@ describe('ReactDOMFizzServer', () => {
           </Suspense>
         </Suspense>
       </div>,
-      writable,
+
       {
         onCompleteAll() {
           isCompleteCalls++;
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     jest.runAllTimers();
 
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index fb1939f0c404f..4233a88e1fb94 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -41,7 +41,7 @@ type Controls = {|
   // Cancel any pending I/O and put anything remaining into
   // client rendered mode.
   abort(): void,
-  startWriting(): void,
+  pipe<T: Writable>(destination: T): T,
 |};
 
 function createRequestImpl(children: ReactNodeList, options: void | Options) {
@@ -56,22 +56,24 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
   );
 }
 
-function pipeToNodeWritable(
+function renderToPipeableStream(
   children: ReactNodeList,
-  destination: Writable,
   options?: Options,
 ): Controls {
   const request = createRequestImpl(children, options);
   let hasStartedFlowing = false;
   startWork(request);
   return {
-    startWriting() {
+    pipe<T: Writable>(destination: T): T {
       if (hasStartedFlowing) {
-        return;
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
       }
       hasStartedFlowing = true;
       startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
+      return destination;
     },
     abort() {
       abort(request);
@@ -79,4 +81,4 @@ function pipeToNodeWritable(
   };
 }
 
-export {pipeToNodeWritable, ReactVersion as version};
+export {renderToPipeableStream, ReactVersion as version};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 35773279890ca..5f992d4b03e9b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -25,20 +25,35 @@ type Options = {
   onError?: (error: mixed) => void,
 };
 
-function pipeToNodeWritable(
+type Controls = {|
+  pipe<T: Writable>(destination: T): T,
+|};
+
+function renderToPipeableStream(
   model: ReactModel,
-  destination: Writable,
   webpackMap: BundlerConfig,
   options?: Options,
-): void {
+): Controls {
   const request = createRequest(
     model,
     webpackMap,
     options ? options.onError : undefined,
   );
+  let hasStartedFlowing = false;
   startWork(request);
-  startFlowing(request, destination);
-  destination.on('drain', createDrainHandler(destination, request));
+  return {
+    pipe<T: Writable>(destination: T): T {
+      if (hasStartedFlowing) {
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
+      }
+      hasStartedFlowing = true;
+      startFlowing(request, destination);
+      destination.on('drain', createDrainHandler(destination, request));
+      return destination;
+    },
+  };
 }
 
-export {pipeToNodeWritable};
+export {renderToPipeableStream};
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 60fbac215f73d..bcae6c50f7c7f 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -57,8 +57,8 @@ describe('ReactFlightDOM', () => {
       },
     });
     return {
-      writable,
       readable,
+      writable,
     };
   }
 
@@ -113,7 +113,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(<App />, writable, webpackMap);
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <App />,
+      webpackMap,
+    );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
     await waitForSuspense(() => {
       const model = response.readRoot();
@@ -162,11 +166,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <RootModel />,
-      writable,
       webpackMap,
     );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -200,11 +204,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <RootModel />,
-      writable,
       webpackMap,
     );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -236,11 +240,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <RootModel />,
-      writable,
       webpackMap,
     );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -371,11 +375,16 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(model, writable, webpackMap, {
-      onError(x) {
-        reportedErrors.push(x);
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      model,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
       },
-    });
+    );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -481,11 +490,11 @@ describe('ReactFlightDOM', () => {
     const root = ReactDOM.createRoot(container);
 
     const stream1 = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <App color="red" />,
-      stream1.writable,
       webpackMap,
     );
+    pipe(stream1.writable);
     const response1 = ReactServerDOMReader.createFromReadableStream(
       stream1.readable,
     );
@@ -509,11 +518,11 @@ describe('ReactFlightDOM', () => {
     inputB.value = 'goodbye';
 
     const stream2 = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe: pipe2} = ReactServerDOMWriter.renderToPipeableStream(
       <App color="blue" />,
-      stream2.writable,
       webpackMap,
     );
+    pipe2(stream2.writable);
     const response2 = ReactServerDOMReader.createFromReadableStream(
       stream2.readable,
     );
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index d1688e84bc7a8..aab5d62476cc3 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -401,5 +401,6 @@
   "413": "Expected finished root and lanes to be set. This is a bug in React.",
   "414": "Did not expect this call in production. This is a bug in React. Please file an issue.",
   "415": "Error parsing the data. It's probably an error code or network corruption.",
-  "416": "This environment don't support binary chunks."
+  "416": "This environment don't support binary chunks.",
+  "417": "React currently only supports piping to one writable stream."
 }

From 6ecad79ccf2c683cb21ac40dee5678358c7b6208 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Wed, 6 Oct 2021 08:31:21 -0400
Subject: [PATCH 022/109] Test that discrete events that aren't hydratable do
 not propagate (#22502)

* test that discrete events that arent hydratable do not propagate

* lint

* feedback

* feedback

* lint

* better test

* nits

* lint
---
 ...MServerSelectiveHydration-test.internal.js | 63 +++++++++++++++++++
 .../src/events/ReactDOMEventListener.js       | 20 +++---
 .../src/events/ReactDOMEventReplaying.js      | 11 +---
 3 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index bb04b46df1c40..5c29513cf6bfd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -1130,4 +1130,67 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     document.body.removeChild(container);
   });
+
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+  it('does not propagate discrete event if it cannot be synchronously hydrated', async () => {
+    let triggeredParent = false;
+    let triggeredChild = false;
+    let suspend = false;
+    const promise = new Promise(() => {});
+    function Child() {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue('Child');
+      return (
+        <span
+          onClickCapture={e => {
+            e.stopPropagation();
+            triggeredChild = true;
+          }}>
+          Click me
+        </span>
+      );
+    }
+    function App() {
+      const onClick = () => {
+        triggeredParent = true;
+      };
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div
+          ref={n => {
+            if (n) n.onclick = onClick;
+          }}
+          onClick={onClick}>
+          <Suspense fallback={null}>
+            <Child />
+          </Suspense>
+        </div>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'Child']);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+
+    suspend = true;
+
+    ReactDOM.hydrateRoot(container, <App />);
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    const span = container.getElementsByTagName('span')[0];
+    dispatchClickEvent(span);
+
+    expect(Scheduler).toHaveYielded(['App']);
+
+    dispatchClickEvent(span);
+
+    expect(triggeredParent).toBe(false);
+    expect(triggeredChild).toBe(false);
+  });
 });
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 6467421d4f635..86924e7c2673d 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,18 +11,14 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
+import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags';
 import {
-  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-  enableSelectiveHydration,
-} from 'shared/ReactFeatureFlags';
-import {
-  isReplayableDiscreteEvent,
+  isDiscreteEventThatRequiresHydration,
   queueDiscreteEvent,
   hasQueuedDiscreteEvents,
   clearIfContinuousEvent,
   queueIfContinuousEvent,
   attemptSynchronousHydration,
-  isCapturePhaseSynchronouslyHydratableEvent,
 } from './ReactDOMEventReplaying';
 import {
   getNearestMountedFiber,
@@ -169,7 +165,7 @@ export function dispatchEvent(
   if (
     allowReplay &&
     hasQueuedDiscreteEvents() &&
-    isReplayableDiscreteEvent(domEventName)
+    isDiscreteEventThatRequiresHydration(domEventName)
   ) {
     // If we already have a queue of discrete events, and this is another discrete
     // event, then we can't dispatch it regardless of its target, since they
@@ -202,7 +198,7 @@ export function dispatchEvent(
   if (allowReplay) {
     if (
       !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
-      isReplayableDiscreteEvent(domEventName)
+      isDiscreteEventThatRequiresHydration(domEventName)
     ) {
       // This this to be replayed later once the target is available.
       queueDiscreteEvent(
@@ -232,8 +228,8 @@ export function dispatchEvent(
 
   if (
     enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
-    enableSelectiveHydration &&
-    isCapturePhaseSynchronouslyHydratableEvent(domEventName)
+    eventSystemFlags & IS_CAPTURE_PHASE &&
+    isDiscreteEventThatRequiresHydration(domEventName)
   ) {
     while (blockedOn !== null) {
       const fiber = getInstanceFromNode(blockedOn);
@@ -251,6 +247,10 @@ export function dispatchEvent(
       }
       blockedOn = nextBlockedOn;
     }
+    if (blockedOn) {
+      nativeEvent.stopPropagation();
+      return;
+    }
   }
 
   // This is not replayable so we'll invoke it but without a target,
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index c363721bcd848..ed31f20e51185 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -160,7 +160,9 @@ const discreteReplayableEvents: Array<DOMEventName> = [
   'submit',
 ];
 
-export function isReplayableDiscreteEvent(eventType: DOMEventName): boolean {
+export function isDiscreteEventThatRequiresHydration(
+  eventType: DOMEventName,
+): boolean {
   return discreteReplayableEvents.indexOf(eventType) > -1;
 }
 
@@ -300,13 +302,6 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
   return existingQueuedEvent;
 }
 
-export function isCapturePhaseSynchronouslyHydratableEvent(
-  eventName: DOMEventName,
-) {
-  // TODO: maybe include more events
-  return isReplayableDiscreteEvent(eventName);
-}
-
 export function queueIfContinuousEvent(
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,

From 784a725fe139b88c37f8b16d1d2225e88caf2612 Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Fri, 8 Oct 2021 04:22:08 +0530
Subject: [PATCH 023/109] Added Devtools Extension link for Microsoft Edge
 (#22515)

---
 packages/react-devtools-extensions/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md
index 8117ffaad03f3..b5c7daf34f7be 100644
--- a/packages/react-devtools-extensions/README.md
+++ b/packages/react-devtools-extensions/README.md
@@ -5,6 +5,7 @@ This is the source code for the React DevTools browser extension.
 The easiest way to install this extension is as a browser add-on:
 * [Chrome web store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 * [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+* [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
 
 ## Local development
 You can also build and install this extension from source.
@@ -36,4 +37,7 @@ yarn run test:chrome # Test Chrome extension
 
 yarn build:firefox # => packages/react-devtools-extensions/firefox/build
 yarn run test:firefox # Test Firefox extension
+
+yarn build:edge # => packages/react-devtools-extensions/edge/build
+yarn run test:edge # Test Edge extension
 ```

From 5fa4d79b00988f354073bc27313363dd5cce9cd3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 8 Oct 2021 08:38:11 -0400
Subject: [PATCH 024/109] [DevTools] Register logger for standalone DevTools
 (#22524)

---
 .../react-devtools-core/src/standalone.js     | 12 ++++-
 .../react-devtools-core/webpack.standalone.js |  3 ++
 .../react-devtools-extensions/src/main.js     |  4 +-
 .../config/DevToolsFeatureFlags.core-fb.js    |  2 +-
 .../src/registerDevToolsEventLogger.js}       | 51 ++++++++++---------
 5 files changed, 42 insertions(+), 30 deletions(-)
 rename packages/{react-devtools-extensions/src/registerExtensionsEventLogger.js => react-devtools-shared/src/registerDevToolsEventLogger.js} (63%)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index bb6bd3d0c4cfa..c37bb945338c2 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -23,6 +23,7 @@ import {
   getShowInlineWarningsAndErrors,
   getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
 import {Server} from 'ws';
 import {join} from 'path';
 import {readFileSync} from 'fs';
@@ -255,16 +256,23 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
-type ServerOptions = {
+type ServerOptions = {|
   key?: string,
   cert?: string,
-};
+|};
+
+type LoggerOptions = {|
+  surface?: ?string,
+|};
 
 function startServer(
   port?: number = 8097,
   host?: string = 'localhost',
   httpsOptions?: ServerOptions,
+  loggerOptions?: LoggerOptions,
 ) {
+  registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
+
   const useHttps = !!httpsOptions;
   const httpServer = useHttps
     ? require('https').createServer(httpsOptions)
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 17135f0677431..fe7c1220f15d6 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -30,6 +30,8 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const LOGGING_URL = process.env.LOGGING_URL || null;
+
 const featureFlagTarget =
   process.env.FEATURE_FLAG_TARGET || 'core/standalone-oss';
 
@@ -82,6 +84,7 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
       'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 58a4dcfd0850e..6a3836839a4ea 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -6,6 +6,7 @@ import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {getBrowserName, getBrowserTheme} from './utils';
 import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
 import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
@@ -20,7 +21,6 @@ import {
 } from 'react-devtools-shared/src/storage';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
-import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -89,7 +89,7 @@ function createPanelIfReactLoaded() {
 
       const tabId = chrome.devtools.inspectedWindow.tabId;
 
-      registerExtensionsEventLogger();
+      registerDevToolsEventLogger('extension');
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index f0278aa0804a7..50eb47967baff 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -16,7 +16,7 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 export const enableNamedHooksFeature = true;
-export const enableLogger = false;
+export const enableLogger = true;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
diff --git a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
similarity index 63%
rename from packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
rename to packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 90917ef3a1d21..d475bc3e7de3d 100644
--- a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -14,38 +14,39 @@ import {enableLogger} from 'react-devtools-feature-flags';
 
 let loggingIFrame = null;
 let missedEvents = [];
-function logEvent(event: LogEvent) {
-  if (enableLogger) {
-    if (loggingIFrame != null) {
-      loggingIFrame.contentWindow.postMessage(
-        {
-          source: 'react-devtools-logging',
-          event: event,
-          context: {
-            surface: 'extension',
+
+export function registerDevToolsEventLogger(surface: string) {
+  function logEvent(event: LogEvent) {
+    if (enableLogger) {
+      if (loggingIFrame != null) {
+        loggingIFrame.contentWindow.postMessage(
+          {
+            source: 'react-devtools-logging',
+            event: event,
+            context: {
+              surface,
+            },
           },
-        },
-        '*',
-      );
-    } else {
-      missedEvents.push(event);
+          '*',
+        );
+      } else {
+        missedEvents.push(event);
+      }
     }
   }
-}
 
-function handleLoggingIFrameLoaded(iframe) {
-  if (loggingIFrame != null) {
-    return;
-  }
+  function handleLoggingIFrameLoaded(iframe) {
+    if (loggingIFrame != null) {
+      return;
+    }
 
-  loggingIFrame = iframe;
-  if (missedEvents.length > 0) {
-    missedEvents.forEach(logEvent);
-    missedEvents = [];
+    loggingIFrame = iframe;
+    if (missedEvents.length > 0) {
+      missedEvents.forEach(logEvent);
+      missedEvents = [];
+    }
   }
-}
 
-export function registerExtensionsEventLogger() {
   // If logger is enabled, register a logger that captures logged events
   // and render iframe where the logged events will be reported to
   if (enableLogger) {

From 20ca9b565a3649b57b28e2455801c218ec5e71c7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Oct 2021 13:51:25 -0400
Subject: [PATCH 025/109] React DevTools 4.19.1 -> 4.19.2

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 ++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 0c40a3cd990c3..06d2c5526a8c7 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 627a5a62a754c..9b76afb845862 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.19.1",
-  "version_name": "4.19.1",
+  "version": "4.19.2",
+  "version_name": "4.19.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index f5bf6c606a29a..31dac5b50f5be 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.19.1",
-  "version_name": "4.19.1",
+  "version": "4.19.2",
+  "version_name": "4.19.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 662d749bbfad6..27f17a8b74db7 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index e7580779b9d9d..e05417ee8f41f 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 467ea10a8b616..3bff9a9b93d9f 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 8f3243607f629..033c714bb54c1 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.19.2 (October 8, 2021)
+
+#### Bugfix
+* Show different error boundary UI for timeouts than normal errors ([bvaughn](https://github.com/bvaughn) in [#22483](https://github.com/facebook/react/pull/22483))
+* Fixed bug where deleting a component filter would also close the settings modal ([Biki-das](https://github.com/Biki-das) in [#22484](https://github.com/facebook/react/pull/22484))
+
 ## 4.19.1 (October 1, 2021)
 
 #### Bugfix
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 12bef99648f14..71d0dfbeb14cc 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.19.1",
+    "react-devtools-core": "4.19.2",
     "update-notifier": "^2.1.0"
   }
 }

From afcb9cdc9343ddc134b03dcf4d7fbc0810b6002b Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 8 Oct 2021 16:19:54 -0400
Subject: [PATCH 026/109] [DevTools] Update Fiber logic in backend renderer to
 match implementation in React (#22527)

* [DevTools] Update isMountedImpl to match implementation in React

* Also sync findCurrentFiberUsingSlowPathById
---
 .../src/backend/renderer.js                   | 94 ++++++++-----------
 1 file changed, 40 insertions(+), 54 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 011f055e505a8..19155cb4e354f 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -128,6 +128,7 @@ type ReactTypeOfSideEffectType = {|
   PerformedWork: number,
   Placement: number,
   Incomplete: number,
+  Hydrating: number,
 |};
 
 function getFiberFlags(fiber: Fiber): number {
@@ -156,6 +157,7 @@ export function getInternalReactConstants(
     PerformedWork: 0b01,
     Placement: 0b10,
     Incomplete: 0b10000000000000,
+    Hydrating: 0b1000000000000,
   };
 
   // **********************************************************
@@ -526,7 +528,7 @@ export function attach(
   } = getInternalReactConstants(version);
   const {
     DidCapture,
-    Incomplete,
+    Hydrating,
     NoFlags,
     PerformedWork,
     Placement,
@@ -2707,51 +2709,33 @@ export function attach(
     return null;
   }
 
-  const MOUNTING = 1;
-  const MOUNTED = 2;
-  const UNMOUNTED = 3;
+  // This function is copied from React and should be kept in sync:
+  // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  function assertIsMounted(fiber) {
+    if (getNearestMountedFiber(fiber) !== fiber) {
+      throw new Error('Unable to find node on an unmounted component.');
+    }
+  }
 
   // This function is copied from React and should be kept in sync:
   // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js
-  function isFiberMountedImpl(fiber: Fiber): number {
+  function getNearestMountedFiber(fiber: Fiber): null | Fiber {
     let node = fiber;
-    let prevNode = null;
+    let nearestMounted = fiber;
     if (!fiber.alternate) {
       // If there is no alternate, this might be a new tree that isn't inserted
       // yet. If it is, then it will have a pending insertion effect on it.
-      if ((getFiberFlags(node) & Placement) !== NoFlags) {
-        return MOUNTING;
-      }
-      // This indicates an error during render.
-      if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
-        return UNMOUNTED;
-      }
-      while (node.return) {
-        prevNode = node;
-        node = node.return;
-
-        if ((getFiberFlags(node) & Placement) !== NoFlags) {
-          return MOUNTING;
-        }
-        // This indicates an error during render.
-        if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
-          return UNMOUNTED;
-        }
-
-        // If this node is inside of a timed out suspense subtree, we should also ignore errors/warnings.
-        const isTimedOutSuspense =
-          node.tag === SuspenseComponent && node.memoizedState !== null;
-        if (isTimedOutSuspense) {
-          // Note that this does not include errors/warnings in the Fallback tree though!
-          const primaryChildFragment = node.child;
-          const fallbackChildFragment = primaryChildFragment
-            ? primaryChildFragment.sibling
-            : null;
-          if (prevNode !== fallbackChildFragment) {
-            return UNMOUNTED;
-          }
+      let nextNode = node;
+      do {
+        node = nextNode;
+        if ((node.flags & (Placement | Hydrating)) !== NoFlags) {
+          // This is an insertion or in-progress hydration. The nearest possible
+          // mounted fiber is the parent but we need to continue to figure out
+          // if that one is still mounted.
+          nearestMounted = node.return;
         }
-      }
+        nextNode = node.return;
+      } while (nextNode);
     } else {
       while (node.return) {
         node = node.return;
@@ -2760,11 +2744,11 @@ export function attach(
     if (node.tag === HostRoot) {
       // TODO: Check if this was a nested HostRoot when used with
       // renderContainerIntoSubtree.
-      return MOUNTED;
+      return nearestMounted;
     }
     // If we didn't hit the root, that means that we're in an disconnected tree
     // that has been unmounted.
-    return UNMOUNTED;
+    return null;
   }
 
   // This function is copied from React and should be kept in sync:
@@ -2781,11 +2765,13 @@ export function attach(
     const alternate = fiber.alternate;
     if (!alternate) {
       // If there is no alternate, then we only need to check if it is mounted.
-      const state = isFiberMountedImpl(fiber);
-      if (state === UNMOUNTED) {
-        throw Error('Unable to find node on an unmounted component.');
+      const nearestMounted = getNearestMountedFiber(fiber);
+
+      if (nearestMounted === null) {
+        throw new Error('Unable to find node on an unmounted component.');
       }
-      if (state === MOUNTING) {
+
+      if (nearestMounted !== fiber) {
         return null;
       }
       return fiber;
@@ -2824,23 +2810,20 @@ export function attach(
         while (child) {
           if (child === a) {
             // We've determined that A is the current branch.
-            if (isFiberMountedImpl(parentA) !== MOUNTED) {
-              throw Error('Unable to find node on an unmounted component.');
-            }
+            assertIsMounted(parentA);
             return fiber;
           }
           if (child === b) {
             // We've determined that B is the current branch.
-            if (isFiberMountedImpl(parentA) !== MOUNTED) {
-              throw Error('Unable to find node on an unmounted component.');
-            }
+            assertIsMounted(parentA);
             return alternate;
           }
           child = child.sibling;
         }
+
         // We should never have an alternate for any mounting node. So the only
         // way this could possibly happen is if this was unmounted, if at all.
-        throw Error('Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       }
 
       if (a.return !== b.return) {
@@ -2891,8 +2874,9 @@ export function attach(
             }
             child = child.sibling;
           }
+
           if (!didFindChild) {
-            throw Error(
+            throw new Error(
               'Child was not found in either parent set. This indicates a bug ' +
                 'in React related to the return pointer. Please file an issue.',
             );
@@ -2901,17 +2885,19 @@ export function attach(
       }
 
       if (a.alternate !== b) {
-        throw Error(
+        throw new Error(
           "Return fibers should always be each others' alternates. " +
             'This error is likely caused by a bug in React. Please file an issue.',
         );
       }
     }
+
     // If the root is not a host container, we're in a disconnected tree. I.e.
     // unmounted.
     if (a.tag !== HostRoot) {
-      throw Error('Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     }
+
     if (a.stateNode.current === a) {
       // We've determined that A is the current branch.
       return fiber;

From 55d75005bc26aa41cddc090273f82aa106729fb8 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Mon, 11 Oct 2021 18:50:15 +0530
Subject: [PATCH 027/109] duplicate value in variable (#22390)

---
 packages/shared/shallowEqual.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/shared/shallowEqual.js b/packages/shared/shallowEqual.js
index 92c66e5a1ece6..33d0004eb45fe 100644
--- a/packages/shared/shallowEqual.js
+++ b/packages/shared/shallowEqual.js
@@ -38,9 +38,10 @@ function shallowEqual(objA: mixed, objB: mixed): boolean {
 
   // Test for A's keys different from B.
   for (let i = 0; i < keysA.length; i++) {
+    const currentKey = keysA[i];
     if (
-      !hasOwnProperty.call(objB, keysA[i]) ||
-      !is(objA[keysA[i]], objB[keysA[i]])
+      !hasOwnProperty.call(objB, currentKey) ||
+      !is(objA[currentKey], objB[currentKey])
     ) {
       return false;
     }

From c16b005f2d71acde26658f035ff491a5e027da39 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 11 Oct 2021 18:40:42 -0400
Subject: [PATCH 028/109] Update test and stack frame code to support newer V8
 stack formats (#22477)

---
 packages/shared/ReactComponentStackFrame.js   | 10 +++-
 scripts/jest/matchers/toThrow.js              | 50 +++++++++++++++++++
 scripts/jest/setupTests.js                    |  3 +-
 .../spec-equivalence-reporter/setupTests.js   |  3 +-
 4 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 scripts/jest/matchers/toThrow.js

diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
index 0e6b8a03c1258..c101003e569e1 100644
--- a/packages/shared/ReactComponentStackFrame.js
+++ b/packages/shared/ReactComponentStackFrame.js
@@ -168,7 +168,15 @@ export function describeNativeComponentFrame(
               // The next one that isn't the same should be our match though.
               if (c < 0 || sampleLines[s] !== controlLines[c]) {
                 // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
-                const frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+                let frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+
+                // If our component frame is labeled "<anonymous>"
+                // but we have a user-provided "displayName"
+                // splice it in to make the stack more readable.
+                if (fn.displayName && frame.includes('<anonymous>')) {
+                  frame = frame.replace('<anonymous>', fn.displayName);
+                }
+
                 if (__DEV__) {
                   if (typeof fn === 'function') {
                     componentFrameCache.set(fn, frame);
diff --git a/scripts/jest/matchers/toThrow.js b/scripts/jest/matchers/toThrow.js
new file mode 100644
index 0000000000000..148fd49fa099d
--- /dev/null
+++ b/scripts/jest/matchers/toThrow.js
@@ -0,0 +1,50 @@
+'use strict';
+
+// V8 uses a different message format when reading properties of null or undefined.
+// Older versions use e.g. "Cannot read property 'world' of undefined"
+// Newer versions use e.g. "Cannot read properties of undefined (reading 'world')"
+// This file overrides the built-in toThrow() matches to handle both cases,
+// enabling the React project to support Node 12-16 witout forking tests.
+
+const toThrowMatchers = require('expect/build/toThrowMatchers').default;
+const builtInToThrow = toThrowMatchers.toThrow;
+
+// Detect the newer stack format:
+let newErrorFormat = false;
+try {
+  null.test();
+} catch (error) {
+  if (error.message.includes('Cannot read properties of null')) {
+    newErrorFormat = true;
+  }
+}
+
+// Detect the message pattern we need to rename:
+const regex = /Cannot read property '([^']+)' of (.+)/;
+
+// Massage strings (written in the older format) to match the newer format
+// if tests are currently running on Node 16+
+function normalizeErrorMessage(message) {
+  if (newErrorFormat) {
+    const match = message.match(regex);
+    if (match) {
+      return `Cannot read properties of ${match[2]} (reading '${match[1]}')`;
+    }
+  }
+
+  return message;
+}
+
+function toThrow(value, expectedValue) {
+  if (typeof expectedValue === 'string') {
+    expectedValue = normalizeErrorMessage(expectedValue);
+  } else if (expectedValue instanceof Error) {
+    expectedValue.message = normalizeErrorMessage(expectedValue.message);
+  }
+
+  return builtInToThrow.call(this, value, expectedValue);
+}
+
+module.exports = {
+  toThrow,
+};
diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js
index abb358f817aa2..63dbcf27ebcfe 100644
--- a/scripts/jest/setupTests.js
+++ b/scripts/jest/setupTests.js
@@ -45,8 +45,9 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
   }
 
   expect.extend({
-    ...require('./matchers/toWarnDev'),
     ...require('./matchers/reactTestMatchers'),
+    ...require('./matchers/toThrow'),
+    ...require('./matchers/toWarnDev'),
   });
 
   // We have a Babel transform that inserts guards against infinite loops.
diff --git a/scripts/jest/spec-equivalence-reporter/setupTests.js b/scripts/jest/spec-equivalence-reporter/setupTests.js
index 31814bb754d95..7d6989d146359 100644
--- a/scripts/jest/spec-equivalence-reporter/setupTests.js
+++ b/scripts/jest/spec-equivalence-reporter/setupTests.js
@@ -46,8 +46,9 @@ global.spyOnProd = function(...args) {
 };
 
 expect.extend({
-  ...require('../matchers/toWarnDev'),
   ...require('../matchers/reactTestMatchers'),
+  ...require('../matchers/toThrow'),
+  ...require('../matchers/toWarnDev'),
 });
 
 beforeEach(() => (numExpectations = 0));

From 1e247ff892985488c6bcb87e924d7881f5c37261 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 12 Oct 2021 11:04:10 -0400
Subject: [PATCH 029/109] Enabled scheduling profiler marks for React Native FB
 target (#22544)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 5a1c1ed8d9c60..c86d00217cc97 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -20,7 +20,7 @@ export const {enablePersistentOffscreenHostContainer} = dynamicFlags;
 
 // The rest of the flags are static for better dead code elimination.
 export const enableDebugTracing = false;
-export const enableSchedulingProfiler = false;
+export const enableSchedulingProfiler = true;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;

From 8ee4ff88361eff8e8a8aeec32ba3315ad2065131 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Oct 2021 10:35:21 -0400
Subject: [PATCH 030/109] Surface backend errors during inspection in the
 frontend UI (#22546)

---
 .../src/__tests__/inspectedElement-test.js    | 84 ++++++++++++++++---
 .../src/backend/renderer.js                   | 15 +++-
 .../src/backend/types.js                      | 10 +++
 .../src/devtools/views/Components/types.js    |  1 +
 .../src/inspectedElementMutableSource.js      | 10 +++
 5 files changed, 107 insertions(+), 13 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 211cd27b1522f..68d014de3ad47 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -35,6 +35,9 @@ describe('InspectedElement', () => {
   let legacyRender;
   let testRendererInstance;
 
+  let ErrorBoundary;
+  let errorBoundaryInstance;
+
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -69,6 +72,23 @@ describe('InspectedElement', () => {
     testRendererInstance = TestRenderer.create(null, {
       unstable_isConcurrent: true,
     });
+
+    errorBoundaryInstance = null;
+
+    ErrorBoundary = class extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        errorBoundaryInstance = this;
+
+        if (this.state.error) {
+          return null;
+        }
+        return this.props.children;
+      }
+    };
   });
 
   afterEach(() => {
@@ -109,7 +129,11 @@ describe('InspectedElement', () => {
 
   function noop() {}
 
-  async function inspectElementAtIndex(index, useCustomHook = noop) {
+  async function inspectElementAtIndex(
+    index,
+    useCustomHook = noop,
+    shouldThrow = false,
+  ) {
     let didFinish = false;
     let inspectedElement = null;
 
@@ -124,17 +148,21 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(() => {
       testRendererInstance.update(
-        <Contexts
-          defaultSelectedElementID={id}
-          defaultSelectedElementIndex={index}>
-          <React.Suspense fallback={null}>
-            <Suspender id={id} index={index} />
-          </React.Suspense>
-        </Contexts>,
+        <ErrorBoundary>
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={index}>
+            <React.Suspense fallback={null}>
+              <Suspender id={id} index={index} />
+            </React.Suspense>
+          </Contexts>
+        </ErrorBoundary>,
       );
     }, false);
 
-    expect(didFinish).toBe(true);
+    if (!shouldThrow) {
+      expect(didFinish).toBe(true);
+    }
 
     return inspectedElement;
   }
@@ -2069,6 +2097,37 @@ describe('InspectedElement', () => {
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
   });
 
+  it('should gracefully surface backend errors on the frontend rather than timing out', async () => {
+    spyOn(console, 'error');
+
+    let shouldThrow = false;
+
+    const Example = () => {
+      const [count] = React.useState(0);
+
+      if (shouldThrow) {
+        throw Error('Expected');
+      } else {
+        return count;
+      }
+    };
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      ReactDOM.createRoot(container).render(<Example />);
+    }, false);
+
+    shouldThrow = true;
+
+    const value = await inspectElementAtIndex(0, noop, true);
+
+    expect(value).toBe(null);
+
+    const error = errorBoundaryInstance.state.error;
+    expect(error.message).toBe('Expected');
+    expect(error.stack).toContain('inspectHooksOfFiber');
+  });
+
   describe('$r', () => {
     it('should support function components', async () => {
       const Example = () => {
@@ -2656,7 +2715,7 @@ describe('InspectedElement', () => {
 
   describe('error boundary', () => {
     it('can toggle error', async () => {
-      class ErrorBoundary extends React.Component<any> {
+      class LocalErrorBoundary extends React.Component<any> {
         state = {hasError: false};
         static getDerivedStateFromError(error) {
           return {hasError: true};
@@ -2666,13 +2725,14 @@ describe('InspectedElement', () => {
           return hasError ? 'has-error' : this.props.children;
         }
       }
+
       const Example = () => 'example';
 
       await utils.actAsync(() =>
         legacyRender(
-          <ErrorBoundary>
+          <LocalErrorBoundary>
             <Example />
-          </ErrorBoundary>,
+          </LocalErrorBoundary>,
           document.createElement('div'),
         ),
       );
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 19155cb4e354f..218b255388371 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -3471,7 +3471,20 @@ export function attach(
 
     hasElementUpdatedSinceLastInspected = false;
 
-    mostRecentlyInspectedElement = inspectElementRaw(id);
+    try {
+      mostRecentlyInspectedElement = inspectElementRaw(id);
+    } catch (error) {
+      console.error('Error inspecting element.\n\n', error);
+
+      return {
+        type: 'error',
+        id,
+        responseID: requestID,
+        message: error.message,
+        stack: error.stack,
+      };
+    }
+
     if (mostRecentlyInspectedElement === null) {
       return {
         id,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index bbf574ed21a50..3f623ea656e48 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -267,10 +267,19 @@ export type InspectedElement = {|
   rendererVersion: string | null,
 |};
 
+export const InspectElementErrorType = 'error';
 export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
 
+export type InspectElementError = {|
+  id: number,
+  responseID: number,
+  type: 'error',
+  message: string,
+  stack: string,
+|};
+
 export type InspectElementFullData = {|
   id: number,
   responseID: number,
@@ -299,6 +308,7 @@ export type InspectElementNotFound = {|
 |};
 
 export type InspectedElementPayload =
+  | InspectElementError
   | InspectElementFullData
   | InspectElementHydratedPath
   | InspectElementNoChange
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index d48e8e32e1f2b..a40b72f4cc8e0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -58,6 +58,7 @@ export type OwnersList = {|
 |};
 
 export type InspectedElementResponseType =
+  | 'error'
   | 'full-data'
   | 'hydrated-path'
   | 'no-change'
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index 9302cd782a0cf..5cb5370d1c21d 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -18,6 +18,7 @@ import {fillInPath} from 'react-devtools-shared/src/hydration';
 import type {LRUCache} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {
+  InspectElementError,
   InspectElementFullData,
   InspectElementHydratedPath,
 } from 'react-devtools-shared/src/backend/types';
@@ -79,6 +80,15 @@ export function inspectElement({
 
     let inspectedElement;
     switch (type) {
+      case 'error':
+        const {message, stack} = ((data: any): InspectElementError);
+
+        // The backend's stack (where the error originated) is more meaningful than this stack.
+        const error = new Error(message);
+        error.stack = stack;
+
+        throw error;
+
       case 'no-change':
         // This is a no-op for the purposes of our cache.
         inspectedElement = inspectedElementCache.get(id);

From 7142d110b00ecb5bb7566128c431fee02963e543 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 13 Oct 2021 18:44:36 -0400
Subject: [PATCH 031/109] Bugfix: Nested useOpaqueIdentifier references
 (#22553)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Handle render phase updates explicitly

We fire a warning in development if a component is updated during
the render phase (with the exception of local hook updates, which have
their own defined behavior).

Because it's not a supported React pattern, we don't have that many
tests that trigger this path. But it is meant to have reasonable
semantics when it does happen, so that if it accidentally ships to
production, the app doesn't crash unnecessarily. The behavior is not
super well-defined, though.

There are also some _internal_ React implementation details that
intentionally to rely on this behavior. Most prominently, selective
hydration and useOpaqueIdentifier.

I need to tweak the behavior of render phase updates slightly as part
of a fix for useOpaqueIdentifier. This shouldn't cause a user-facing
change in behavior outside of useOpaqueIdentifier, but it does require
that we explicitly model render phase updates.

* Bugfix: Nested useOpaqueIdentifier calls

Fixes an issue where multiple useOpaqueIdentifier hooks are upgraded
to client ids within the same render.

The way the upgrade works is that useOpaqueIdentifier schedules a
render phase update then throws an error to trigger React's error
recovery mechanism.

The normal error recovery mechanism is designed for errors that occur
as a result of interleaved mutations, so we usually only retry a single
time, synchronously, before giving up.

useOpaqueIdentifier is different because the error its throws when
upgrading is not caused by an interleaved mutation. Rather, it happens
when an ID is referenced for the first time inside a client-rendered
tree (i.e. sommething that wasn't part of the initial server render).
The fact that it relies on the error recovery mechanism is an
implementation detail. And a single recovery attempt may be
insufficient. For example, if a parent and a child component may
reference different ids, and both are mounted as a result of the same
client update, that will trigger two separate error recovery attempts.

Because render phase updates are not allowed when triggered from
userspace — we log a warning in developement to prevent them —
we can assume that if something does update during the render phase, it
is one of our "legit" implementation details like useOpaqueIdentifier.
So we can keep retrying until we succeed — up to a limit, to protect
against inifite loops. I chose 50 since that's the limit we use for
commit phase updates.
---
 .../ReactDOMServerIntegrationHooks-test.js    |  35 ++++
 .../src/ReactFiberWorkLoop.new.js             | 193 ++++++++++--------
 .../src/ReactFiberWorkLoop.old.js             | 193 ++++++++++--------
 ...tIncrementalErrorHandling-test.internal.js |  59 ++++++
 4 files changed, 314 insertions(+), 166 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index a27954785f7ea..daf3453314183 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -1975,5 +1975,40 @@ describe('ReactDOMServerHooks', () => {
         container.getElementsByTagName('span')[0].getAttribute('id'),
       ).not.toBeNull();
     });
+
+    it('useOpaqueIdentifier with multiple ids in nested components', async () => {
+      function DivWithId({id, children}) {
+        return <div id={id}>{children}</div>;
+      }
+
+      let setShowMore;
+      function App() {
+        const outerId = useOpaqueIdentifier();
+        const innerId = useOpaqueIdentifier();
+        const [showMore, _setShowMore] = useState(false);
+        setShowMore = _setShowMore;
+        return showMore ? (
+          <DivWithId id={outerId}>
+            <DivWithId id={innerId} />
+          </DivWithId>
+        ) : null;
+      }
+
+      const container = document.createElement('div');
+      container.innerHTML = ReactDOMServer.renderToString(<App />);
+
+      await act(async () => {
+        ReactDOM.hydrateRoot(container, <App />);
+      });
+
+      // Show additional content that wasn't part of the initial server-
+      // rendered repsonse.
+      await act(async () => {
+        setShowMore(true);
+      });
+      const [div1, div2] = container.getElementsByTagName('div');
+      expect(typeof div1.getAttribute('id')).toBe('string');
+      expect(typeof div2.getAttribute('id')).toBe('string');
+    });
   });
 });
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index aaeac5fdb22e1..884f8cc22aa5d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -294,7 +294,9 @@ let workInProgressRootIncludedLanes: Lanes = NoLanes;
 // includes unprocessed updates, not work in bailed out children.
 let workInProgressRootSkippedLanes: Lanes = NoLanes;
 // Lanes that were updated (in an interleaved event) during this render.
-let workInProgressRootUpdatedLanes: Lanes = NoLanes;
+let workInProgressRootInterleavedUpdatedLanes: Lanes = NoLanes;
+// Lanes that were updated during the render phase (*not* an interleaved event).
+let workInProgressRootRenderPhaseUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
 
@@ -454,86 +456,105 @@ export function scheduleUpdateOnFiber(
   eventTime: number,
 ): FiberRoot | null {
   checkForNestedUpdates();
-  warnAboutRenderPhaseUpdatesInDEV(fiber);
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
   }
 
-  if (enableUpdaterTracking) {
-    if (isDevToolsPresent) {
-      addFiberToLanesMap(root, fiber, lane);
-    }
-  }
-
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
-  if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
-    if (
-      (executionContext & CommitContext) !== NoContext &&
-      root === rootCommittingMutationOrLayoutEffects
-    ) {
-      if (fiber.mode & ProfileMode) {
-        let current = fiber;
-        while (current !== null) {
-          if (current.tag === Profiler) {
-            const {id, onNestedUpdateScheduled} = current.memoizedProps;
-            if (typeof onNestedUpdateScheduled === 'function') {
-              onNestedUpdateScheduled(id);
+  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
+    // and useOpaqueIdentifier.
+    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 (enableUpdaterTracking) {
+      if (isDevToolsPresent) {
+        addFiberToLanesMap(root, fiber, lane);
+      }
+    }
+
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      if (
+        (executionContext & CommitContext) !== NoContext &&
+        root === rootCommittingMutationOrLayoutEffects
+      ) {
+        if (fiber.mode & ProfileMode) {
+          let current = fiber;
+          while (current !== null) {
+            if (current.tag === Profiler) {
+              const {id, onNestedUpdateScheduled} = current.memoizedProps;
+              if (typeof onNestedUpdateScheduled === 'function') {
+                onNestedUpdateScheduled(id);
+              }
             }
+            current = current.return;
           }
-          current = current.return;
         }
       }
     }
-  }
 
-  // TODO: Consolidate with `isInterleavedUpdate` check
-  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.
+    // TODO: Consolidate with `isInterleavedUpdate` check
+    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 (
+        deferRenderPhaseUpdateToNextBatch ||
+        (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(root, workInProgressRootRenderLanes);
+      }
+    }
+
+    ensureRootIsScheduled(root, eventTime);
     if (
-      deferRenderPhaseUpdateToNextBatch ||
-      (executionContext & RenderContext) === NoContext
+      lane === SyncLane &&
+      executionContext === NoContext &&
+      (fiber.mode & ConcurrentMode) === NoMode &&
+      // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
     ) {
-      workInProgressRootUpdatedLanes = mergeLanes(
-        workInProgressRootUpdatedLanes,
-        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(root, workInProgressRootRenderLanes);
+      // 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();
     }
   }
-
-  ensureRootIsScheduled(root, eventTime);
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode &&
-    // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
-    !(__DEV__ && 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();
-  }
-
   return root;
 }
 
@@ -865,7 +886,25 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     clearContainer(root.containerInfo);
   }
 
-  const exitStatus = renderRootSync(root, errorRetryLanes);
+  let exitStatus;
+
+  const MAX_ERROR_RETRY_ATTEMPTS = 50;
+  for (let 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. This was likely a
+      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
+      // again. This time, the component will use a client ID and will proceed
+      // without throwing. If multiple IDs upgrade as a result of the same
+      // update, we will have to do multiple render passes. To protect against
+      // an inifinite loop, eventually we'll give up.
+      continue;
+    }
+    break;
+  }
 
   executionContext = prevExecutionContext;
 
@@ -1042,7 +1081,10 @@ function markRootSuspended(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_dontCallThisOneDirectly(root, suspendedLanes);
 }
 
@@ -1068,19 +1110,6 @@ function performSyncWorkOnRoot(root) {
 
   let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
-    const 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;
-      if (__DEV__) {
-        errorHydratingContainer(root.containerInfo);
-      }
-      clearContainer(root.containerInfo);
-    }
-
     // 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
@@ -1088,10 +1117,8 @@ function performSyncWorkOnRoot(root) {
     const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     if (errorRetryLanes !== NoLanes) {
       lanes = errorRetryLanes;
-      exitStatus = renderRootSync(root, lanes);
+      exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
     }
-
-    executionContext = prevExecutionContext;
   }
 
   if (exitStatus === RootFatalErrored) {
@@ -1300,7 +1327,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootExitStatus = RootIncomplete;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
-  workInProgressRootUpdatedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
 
   enqueueInterleavedUpdates();
@@ -1443,7 +1471,7 @@ export function renderDidSuspendDelayIfPossible(): void {
   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
@@ -2697,7 +2725,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
-      (executionContext & RenderContext) !== NoContext &&
       !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
     ) {
       switch (fiber.tag) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 67984298a5dea..db7a3de837b40 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -294,7 +294,9 @@ let workInProgressRootIncludedLanes: Lanes = NoLanes;
 // includes unprocessed updates, not work in bailed out children.
 let workInProgressRootSkippedLanes: Lanes = NoLanes;
 // Lanes that were updated (in an interleaved event) during this render.
-let workInProgressRootUpdatedLanes: Lanes = NoLanes;
+let workInProgressRootInterleavedUpdatedLanes: Lanes = NoLanes;
+// Lanes that were updated during the render phase (*not* an interleaved event).
+let workInProgressRootRenderPhaseUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
 
@@ -454,86 +456,105 @@ export function scheduleUpdateOnFiber(
   eventTime: number,
 ): FiberRoot | null {
   checkForNestedUpdates();
-  warnAboutRenderPhaseUpdatesInDEV(fiber);
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
   }
 
-  if (enableUpdaterTracking) {
-    if (isDevToolsPresent) {
-      addFiberToLanesMap(root, fiber, lane);
-    }
-  }
-
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
-  if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
-    if (
-      (executionContext & CommitContext) !== NoContext &&
-      root === rootCommittingMutationOrLayoutEffects
-    ) {
-      if (fiber.mode & ProfileMode) {
-        let current = fiber;
-        while (current !== null) {
-          if (current.tag === Profiler) {
-            const {id, onNestedUpdateScheduled} = current.memoizedProps;
-            if (typeof onNestedUpdateScheduled === 'function') {
-              onNestedUpdateScheduled(id);
+  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
+    // and useOpaqueIdentifier.
+    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 (enableUpdaterTracking) {
+      if (isDevToolsPresent) {
+        addFiberToLanesMap(root, fiber, lane);
+      }
+    }
+
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      if (
+        (executionContext & CommitContext) !== NoContext &&
+        root === rootCommittingMutationOrLayoutEffects
+      ) {
+        if (fiber.mode & ProfileMode) {
+          let current = fiber;
+          while (current !== null) {
+            if (current.tag === Profiler) {
+              const {id, onNestedUpdateScheduled} = current.memoizedProps;
+              if (typeof onNestedUpdateScheduled === 'function') {
+                onNestedUpdateScheduled(id);
+              }
             }
+            current = current.return;
           }
-          current = current.return;
         }
       }
     }
-  }
 
-  // TODO: Consolidate with `isInterleavedUpdate` check
-  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.
+    // TODO: Consolidate with `isInterleavedUpdate` check
+    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 (
+        deferRenderPhaseUpdateToNextBatch ||
+        (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(root, workInProgressRootRenderLanes);
+      }
+    }
+
+    ensureRootIsScheduled(root, eventTime);
     if (
-      deferRenderPhaseUpdateToNextBatch ||
-      (executionContext & RenderContext) === NoContext
+      lane === SyncLane &&
+      executionContext === NoContext &&
+      (fiber.mode & ConcurrentMode) === NoMode &&
+      // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
     ) {
-      workInProgressRootUpdatedLanes = mergeLanes(
-        workInProgressRootUpdatedLanes,
-        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(root, workInProgressRootRenderLanes);
+      // 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();
     }
   }
-
-  ensureRootIsScheduled(root, eventTime);
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode &&
-    // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
-    !(__DEV__ && 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();
-  }
-
   return root;
 }
 
@@ -865,7 +886,25 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     clearContainer(root.containerInfo);
   }
 
-  const exitStatus = renderRootSync(root, errorRetryLanes);
+  let exitStatus;
+
+  const MAX_ERROR_RETRY_ATTEMPTS = 50;
+  for (let 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. This was likely a
+      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
+      // again. This time, the component will use a client ID and will proceed
+      // without throwing. If multiple IDs upgrade as a result of the same
+      // update, we will have to do multiple render passes. To protect against
+      // an inifinite loop, eventually we'll give up.
+      continue;
+    }
+    break;
+  }
 
   executionContext = prevExecutionContext;
 
@@ -1042,7 +1081,10 @@ function markRootSuspended(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_dontCallThisOneDirectly(root, suspendedLanes);
 }
 
@@ -1068,19 +1110,6 @@ function performSyncWorkOnRoot(root) {
 
   let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
-    const 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;
-      if (__DEV__) {
-        errorHydratingContainer(root.containerInfo);
-      }
-      clearContainer(root.containerInfo);
-    }
-
     // 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
@@ -1088,10 +1117,8 @@ function performSyncWorkOnRoot(root) {
     const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     if (errorRetryLanes !== NoLanes) {
       lanes = errorRetryLanes;
-      exitStatus = renderRootSync(root, lanes);
+      exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
     }
-
-    executionContext = prevExecutionContext;
   }
 
   if (exitStatus === RootFatalErrored) {
@@ -1300,7 +1327,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootExitStatus = RootIncomplete;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
-  workInProgressRootUpdatedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
 
   enqueueInterleavedUpdates();
@@ -1443,7 +1471,7 @@ export function renderDidSuspendDelayIfPossible(): void {
   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
@@ -2697,7 +2725,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
-      (executionContext & RenderContext) !== NoContext &&
       !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
     ) {
       switch (fiber.tag) {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 716771a3778dd..cc842bd16d22f 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1915,6 +1915,65 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(root).toMatchRenderedOutput('Everything is fine.');
   });
 
+  it("does not infinite loop if there's a render phase update in the same render as an error", async () => {
+    // useOpaqueIdentifier uses an render phase update as an implementation
+    // detail. When an error is accompanied by a render phase update, we assume
+    // that it comes from useOpaqueIdentifier, because render phase updates
+    // triggered from userspace are not allowed (we log a warning). So we keep
+    // attempting to recover until no more opaque identifiers need to be
+    // upgraded. However, we should give up after some point to prevent an
+    // infinite loop in the case where there is (by accident) a render phase
+    // triggered from userspace.
+
+    spyOnDev(console, 'error');
+
+    let numberOfThrows = 0;
+
+    let setStateInRenderPhase;
+    function Child() {
+      const [, setState] = React.useState(0);
+      setStateInRenderPhase = setState;
+      return 'All good';
+    }
+
+    function App({shouldThrow}) {
+      if (shouldThrow) {
+        setStateInRenderPhase();
+        numberOfThrows++;
+        throw new Error('Oops!');
+      }
+      return <Child />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App shouldThrow={false} />);
+    });
+    expect(root).toMatchRenderedOutput('All good');
+
+    let error;
+    try {
+      await act(async () => {
+        root.render(<App shouldThrow={true} />);
+      });
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error.message).toBe('Oops!');
+    expect(numberOfThrows < 100).toBe(true);
+
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'Cannot update a component (`%s`) while rendering a different component',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toContain(
+        'The above error occurred in the <App> component',
+      );
+    }
+  });
+
   if (global.__PERSISTENT__) {
     it('regression test: should fatal if error is thrown at the root', () => {
       const root = ReactNoop.createRoot();

From 61455a25b7d5783f398b0a463f45b9b8d14a6ed6 Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Wed, 13 Oct 2021 16:39:29 -0700
Subject: [PATCH 032/109] Enable experimental Cache API in www TestRenderer
 (#22554)

---
 packages/shared/forks/ReactFeatureFlags.testing.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 6fc6cf3c68367..9eefdc2cca773 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = true;
 export const disableJavaScriptURLs = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;

From a45533cc2511cffa972bf58b68789c9b8aeea516 Mon Sep 17 00:00:00 2001
From: Gabriel Trompiz <gab.tc@icloud.com>
Date: Thu, 14 Oct 2021 07:31:45 -0500
Subject: [PATCH 033/109] Allow to use the Profiler when no client is connected
 in standalone DevTools (#22551)

---
 .../react-devtools-core/src/standalone.js     | 21 ++++++++++++++++++-
 .../react-devtools-shared/src/constants.js    |  2 ++
 .../src/devtools/views/DevTools.js            |  3 ++-
 packages/react-devtools/app.html              | 19 +++++++++++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index c37bb945338c2..fae70937ea0aa 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -30,7 +30,11 @@ import {readFileSync} from 'fs';
 import {installHook} from 'react-devtools-shared/src/hook';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {doesFilePathExist, launchEditor} from './editor';
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  __DEBUG__,
+  LOCAL_STORAGE_DEFAULT_TAB_KEY,
+} from 'react-devtools-shared/src/constants';
+import {localStorageSetItem} from '../../react-devtools-shared/src/storage';
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -179,6 +183,20 @@ function onError({code, message}) {
   }
 }
 
+function openProfiler() {
+  // Mocked up bridge and store to allow the DevTools to be rendered
+  bridge = new Bridge({listen: () => {}, send: () => {}});
+  store = new Store(bridge, {});
+
+  // Ensure the Profiler tab is shown initially.
+  localStorageSetItem(
+    LOCAL_STORAGE_DEFAULT_TAB_KEY,
+    JSON.stringify('profiler'),
+  );
+
+  reload();
+}
+
 function initialize(socket: WebSocket) {
   const listeners = [];
   socket.onmessage = event => {
@@ -372,6 +390,7 @@ const DevtoolsUI = {
   setProjectRoots,
   setStatusListener,
   startServer,
+  openProfiler,
 };
 
 export default DevtoolsUI;
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 60ce987e267f5..40c28a0f6abdf 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -20,6 +20,8 @@ export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
 export const TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5;
 export const TREE_OPERATION_REMOVE_ROOT = 6;
 
+export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
+
 export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 0fa4a440136aa..781ad9d902f68 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -38,6 +38,7 @@ import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
 import ThemeProvider from './ThemeProvider';
+import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants';
 
 import styles from './DevTools.css';
 
@@ -143,7 +144,7 @@ export default function DevTools({
   hideViewSourceAction,
 }: Props) {
   const [currentTab, setTab] = useLocalStorage<TabID>(
-    'React::DevTools::defaultTab',
+    LOCAL_STORAGE_DEFAULT_TAB_KEY,
     defaultTab,
   );
 
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
index c2193698fca75..fc631cea1ca6a 100644
--- a/packages/react-devtools/app.html
+++ b/packages/react-devtools/app.html
@@ -142,6 +142,16 @@
             <strong>before</strong> importing React DOM.
           </div>
         </div>
+        <div class="box">
+          <div class="box-header">Profiler</div>
+          <div class="box-content">
+            Open the <a
+              id="profiler"
+              class="link"
+              href="#"
+            >Profiler tab</a> to inspect saved profiles.
+          </div>
+        </div>
         <div id="loading-status">Starting the server…</div>
       </div>
     </div>
@@ -201,6 +211,12 @@
         }
       }
 
+      function openProfiler() {
+        window.devtools
+          .setContentDOMNode(document.getElementById("container"))
+          .openProfiler();
+      }
+
       const link = $('#rn-help-link');
       link.addEventListener('click', event => {
         event.preventDefault();
@@ -217,6 +233,9 @@
       $byIp.addEventListener('click', selectAllAndCopy);
       $byIp.addEventListener('focus', selectAllAndCopy);
 
+      const $profiler = $("#profiler");
+      $profiler.addEventListener('click', openProfiler);
+
       let devtools;
       try {
         devtools = require("react-devtools-core/standalone").default;

From c3a19e5af0b12f3535ad6f8dee8643252f985e74 Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Thu, 14 Oct 2021 20:24:06 +0530
Subject: [PATCH 034/109] Improved Workers filenames in devtools-core (#22559)

---
 packages/react-devtools-core/webpack.standalone.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index fe7c1220f15d6..9d7c1fc34a685 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -103,6 +103,7 @@ module.exports = {
             loader: 'workerize-loader',
             options: {
               inline: true,
+              name: '[name]',
             },
           },
           {

From 545d4c2de7934a43b0c5d3ce050d77b4c3113bd3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 14 Oct 2021 17:15:31 -0400
Subject: [PATCH 035/109] Prevent errors/crashing when multiple installs of
 DevTools are present (#22517)

## Summary

This commit is a proposal for handling duplicate installation of DevTools, in particular scoped to duplicates such as a dev build or the internal versions of DevTools installed alongside the Chrome Web Store extension.

Specifically, this commit makes it so when another instance of the DevTools extension is installed alongside the extension installed from the Chrome Web Store, we don't produce a stream of errors or crash Chrome, which is what would usually happen in this case.


### Detecting Duplicate Installations

- First, we check what type of installation the extension is: from the Chrome Web Store, the internal build of the extension, or a local development build.
- If the extension is from the **Chrome Web Store**:
  - During initialization, we first check if the internal or local builds of the extension have already been installed and are enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the internal and local builds of the extension using their extension IDs.
    - We can do this because the extension ID for the internal build (and for the Chrome Web Store) is a stable ID.
    - For the local build, at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds.
  - If we detect that the internal or local extensions are already installed, then we skip initializing the current extension altogether so as to not conflict with the other versions. This means we don't initialize the frontend or the backend at all.
- If the extension is the **Internal Build**:
  - During initialization, we first check if the local builds of the extension has already been installed and is enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the local build of the extension using its extension ID.
    - We can do this for the local build because at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds.
  - If we detect that the local extension is already installed, then we skip initializing the current extension altogether so as to not conflict with the that  version. This means we don't initialize the frontend or the backend at all.
- If the extension is a **Local Dev Build**:
  - Since other extensions check for the existence of this extension and disable themselves if they detect it, we don't need any special handling during initialization and assume that there are no duplicate extensions. This means that we will generally prefer keeping this extension enabled.

This behavior means that the order of priority for keeping an extension enabled is the following:

1. Local build
2. Internal build
3. Public build


### Preventing duplicate backend initialization

Note that the backend is injected and initialized by the content script listening to a message posted to the inspected window (via `postMessage`). Since the content script will be injected twice, once each by each instance of the extension, even if we initialize the extension once, both content scripts would still receive the single message posted from the single frontend, and it would then still inject and initialize the backend twice.

In order to prevent this, we also add the extension ID to the message for injecting the backend. That way each content script can check if the message comes from its own extension, and if not it can ignore the message and avoid double injecting the backend.

### Other approaches

- I considered using the [`chrome.management`](https://developer.chrome.com/docs/extensions/reference/management/) API generally to detect other installations, but that requires adding additional permissions to our production extension, which didn't seem ideal.
- I also considered a few options of writing a special flag to the inspected window and checking for it before initializing the extension. However, it's hard to avoid race conditions in that case, and it seemed more reliable to check specifically for the WebStore extension, which is realistically where we would encounter the overlap.

### Rollout

- This commit needs to be published and rolled out to the Chrome Web Store first.
- After this commit is published to the Chrome Web Store, any duplicate instances of the extension that are built and installed after this commit will no longer conflict with the Chrome Web Store version.

### Next Steps

- In a subsequent PR, I will extend this code to show a warning when duplicate extensions have been detected.

Part of #22486

## How did you test this change?

### Basic Testing

- yarn flow
- yarn test
- yarn test-build-devtools

### Double installation testing

Testing double-installed extensions for this commit is tricky because we are relying on the extension ID of the internal and Chrome Web Store extensions, but we obviously can't actually test the Web Store version (since we can't modify the already published version).

In order to simulate duplicate extensions installed, I did the following process:

- Built separate extensions where I hardcoded a constant for whether the extension is internal or public (e.g. `EXTENSION_INSTALLATION_TYPE = 'internal'`). Then I installed these built extensions corresponding to the "internal" and "Web Store" builds.
- Build and run the regular development extension (with `yarn build:chrome:dev && yarn test:chrome`), using the extension IDs of the previously built extensions as the "internal" and "public" extension IDs.

With this set up in place, I tested the following on pages both with and without React:

- When only the local extension enabled, DevTools works normally.
- When only the "internal" extension enabled, DevTools works normally.
- When only the "public" extension enabled, DevTools works normally.
- When "internal" and "public" extensions are installed, "public" extension is disabled and "internal" extension works normally.
- When the local extension runs alongside the other extensions, other extensions disable themselves and local build works normally.
- When we can't recognize what type of build the extension corresponds to, we show an error.
- When all 3 extensions are installed and enabled in all different combinations, DevTools no longer produces errors or crashes Chrome, and works normally.
---
 packages/react-devtools-extensions/build.js   |  11 +
 .../react-devtools-extensions/package.json    |   8 +-
 .../src/background.js                         |  10 +
 .../src/checkForDuplicateInstallations.js     | 129 ++++
 .../src/constants.js                          |  31 +
 .../src/injectGlobalHook.js                   |  19 +-
 .../react-devtools-extensions/src/main.js     | 716 +++++++++---------
 packages/react-devtools/CONTRIBUTING.md       |   2 +-
 8 files changed, 576 insertions(+), 350 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
 create mode 100644 packages/react-devtools-extensions/src/constants.js

diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
index eb39056eaa606..4701bbdcba9b1 100644
--- a/packages/react-devtools-extensions/build.js
+++ b/packages/react-devtools-extensions/build.js
@@ -102,6 +102,17 @@ const build = async (tempPath, manifestPath) => {
   }
   manifest.description += `\n\nCreated from revision ${commit} on ${dateString}.`;
 
+  if (process.env.NODE_ENV === 'development') {
+    // When building the local development version of the
+    // extension we want to be able to have a stable extension ID
+    // for the local build (in order to be able to reliably detect
+    // duplicate installations of DevTools).
+    // By specifying a key in the built manifest.json file,
+    // we can make it so the generated extension ID is stable.
+    // For more details see the docs here: https://developer.chrome.com/docs/extensions/mv2/manifest/key/
+    manifest.key = 'reactdevtoolslocalbuilduniquekey';
+  }
+
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 7d1f018a6bb2b..3a6bdfa7c044c 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
-    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev",
+    "build:local": "cross-env NODE_ENV=development yarn run build:chrome:local && yarn run build:firefox:local && yarn run build:edge:local",
     "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
     "build:chrome:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
-    "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
+    "build:chrome:local": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
-    "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
+    "build:firefox:local": "cross-env NODE_ENV=development node ./firefox/build",
     "build:edge": "cross-env NODE_ENV=production node ./edge/build",
     "build:edge:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./edge/build --crx",
-    "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
+    "build:edge:local": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",
diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 9e09513b78fb4..85595d26010bf 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -6,6 +6,8 @@ const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
+import {EXTENSION_INSTALL_CHECK_MESSAGE} from './constants';
+
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
   let name = null;
@@ -116,6 +118,14 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+chrome.runtime.onMessageExternal.addListener(
+  (request, sender, sendResponse) => {
+    if (request === EXTENSION_INSTALL_CHECK_MESSAGE) {
+      sendResponse(true);
+    }
+  },
+);
+
 chrome.runtime.onMessage.addListener((request, sender) => {
   const tab = sender.tab;
   if (tab) {
diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
new file mode 100644
index 0000000000000..e54476283cc61
--- /dev/null
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+declare var chrome: any;
+
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  EXTENSION_INSTALL_CHECK_MESSAGE,
+  EXTENSION_INSTALLATION_TYPE,
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+} from './constants';
+
+const UNRECOGNIZED_EXTENSION_WARNING =
+  'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
+  'Please make sure you only have a single version of the extension installed or enabled. ' +
+  'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
+
+export function checkForDuplicateInstallations(callback: boolean => void) {
+  switch (EXTENSION_INSTALLATION_TYPE) {
+    case 'public': {
+      // If this is the public extension (e.g. from Chrome Web Store), check if an internal
+      // or local build of the extension is also installed, and if so, disable this extension.
+      // TODO show warning if other installations are present.
+      checkForInstalledExtensions([
+        INTERNAL_EXTENSION_ID,
+        LOCAL_EXTENSION_ID,
+      ]).then(areExtensionsInstalled => {
+        if (areExtensionsInstalled.some(isInstalled => isInstalled)) {
+          callback(true);
+        } else {
+          callback(false);
+        }
+      });
+      break;
+    }
+    case 'internal': {
+      // If this is the internal extension, check if a local build of the extension
+      // is also installed, and if so, disable this extension.
+      // If the public version of the extension is also installed, that extension
+      // will disable itself.
+      // TODO show warning if other installations are present.
+      checkForInstalledExtension(LOCAL_EXTENSION_ID).then(isInstalled => {
+        if (isInstalled) {
+          callback(true);
+        } else {
+          callback(false);
+        }
+      });
+      break;
+    }
+    case 'local': {
+      if (__DEV__) {
+        // If this is the local extension (i.e. built locally during development),
+        // always keep this one enabled. Other installations disable themselves if
+        // they detect the local build is installed.
+        callback(false);
+        break;
+      }
+
+      // If this extension wasn't built locally during development, we can't reliably
+      // detect if there are other installations of DevTools present.
+      // In this case, assume there are no duplicate exensions and show a warning about
+      // potential conflicts.
+      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      chrome.devtools.inspectedWindow.eval(
+        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+      );
+      callback(false);
+      break;
+    }
+    case 'unknown': {
+      // If we don't know how this extension was built, we can't reliably detect if there
+      // are other installations of DevTools present.
+      // In this case, assume there are no duplicate exensions and show a warning about
+      // potential conflicts.
+      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      chrome.devtools.inspectedWindow.eval(
+        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+      );
+      callback(false);
+      break;
+    }
+    default: {
+      (EXTENSION_INSTALLATION_TYPE: empty);
+    }
+  }
+}
+
+function checkForInstalledExtensions(
+  extensionIds: string[],
+): Promise<boolean[]> {
+  return Promise.all(
+    extensionIds.map(extensionId => checkForInstalledExtension(extensionId)),
+  );
+}
+
+function checkForInstalledExtension(extensionId: string): Promise<boolean> {
+  return new Promise(resolve => {
+    chrome.runtime.sendMessage(
+      extensionId,
+      EXTENSION_INSTALL_CHECK_MESSAGE,
+      response => {
+        if (__DEBUG__) {
+          console.log(
+            'checkForDuplicateInstallations: Duplicate installation check responded with',
+            {
+              response,
+              error: chrome.runtime.lastError?.message,
+              currentExtension: EXTENSION_INSTALLATION_TYPE,
+              checkingExtension: extensionId,
+            },
+          );
+        }
+        if (chrome.runtime.lastError != null) {
+          resolve(false);
+        } else {
+          resolve(true);
+        }
+      },
+    );
+  });
+}
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
new file mode 100644
index 0000000000000..5e85e4aec40e7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/constants.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+declare var chrome: any;
+
+export const CURRENT_EXTENSION_ID = chrome.runtime.id;
+
+export const EXTENSION_INSTALL_CHECK_MESSAGE = 'extension-install-check';
+
+export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
+export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
+export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
+
+export const EXTENSION_INSTALLATION_TYPE:
+  | 'public'
+  | 'internal'
+  | 'local'
+  | 'unknown' =
+  CURRENT_EXTENSION_ID === CHROME_WEBSTORE_EXTENSION_ID
+    ? 'public'
+    : CURRENT_EXTENSION_ID === INTERNAL_EXTENSION_ID
+    ? 'internal'
+    : CURRENT_EXTENSION_ID === LOCAL_EXTENSION_ID
+    ? 'local'
+    : 'unknown';
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index 701d4927487d9..02d5109e291eb 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -2,7 +2,11 @@
 
 import nullthrows from 'nullthrows';
 import {installHook} from 'react-devtools-shared/src/hook';
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {
+  __DEBUG__,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+} from 'react-devtools-shared/src/constants';
+import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 
 function injectCode(code) {
@@ -27,7 +31,17 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-
+  if (data.extensionId !== CURRENT_EXTENSION_ID) {
+    if (__DEBUG__) {
+      console.log(
+        `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
+        {
+          currentExtension: EXTENSION_INSTALLATION_TYPE,
+        },
+      );
+    }
+    return;
+  }
   switch (data.source) {
     case 'react-devtools-detector':
       lastDetectionResult = {
@@ -102,6 +116,7 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType})
   window.postMessage({
     source: 'react-devtools-detector',
     reactBuildType,
+    extensionId: "${CURRENT_EXTENSION_ID}",
   }, '*');
 });
 `;
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 6a3836839a4ea..8280158e1db70 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -22,6 +22,8 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
+import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
+import {checkForDuplicateInstallations} from './checkForDuplicateInstallations';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
@@ -70,135 +72,158 @@ function createPanelIfReactLoaded() {
         return;
       }
 
-      panelCreated = true;
+      checkForDuplicateInstallations(hasDuplicateInstallation => {
+        if (hasDuplicateInstallation) {
+          if (__DEBUG__) {
+            console.log(
+              '[main] createPanelIfReactLoaded: Duplicate installation detected, skipping initialization of extension.',
+              {currentExtension: EXTENSION_INSTALLATION_TYPE},
+            );
+          }
+          panelCreated = true;
+          clearInterval(loadCheckInterval);
+          return;
+        }
 
-      clearInterval(loadCheckInterval);
+        if (__DEBUG__) {
+          console.log(
+            '[main] createPanelIfReactLoaded: No duplicate installations detected, continuing with initialization.',
+            {currentExtension: EXTENSION_INSTALLATION_TYPE},
+          );
+        }
 
-      let bridge = null;
-      let store = null;
+        panelCreated = true;
 
-      let profilingData = null;
+        clearInterval(loadCheckInterval);
 
-      let componentsPortalContainer = null;
-      let profilerPortalContainer = null;
+        let bridge = null;
+        let store = null;
 
-      let cloneStyleTags = null;
-      let mostRecentOverrideTab = null;
-      let render = null;
-      let root = null;
+        let profilingData = null;
 
-      const tabId = chrome.devtools.inspectedWindow.tabId;
+        let componentsPortalContainer = null;
+        let profilerPortalContainer = null;
 
-      registerDevToolsEventLogger('extension');
+        let cloneStyleTags = null;
+        let mostRecentOverrideTab = null;
+        let render = null;
+        let root = null;
 
-      function initBridgeAndStore() {
-        const port = chrome.runtime.connect({
-          name: String(tabId),
-        });
-        // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
-        // so it makes no sense to handle it here.
-
-        bridge = new Bridge({
-          listen(fn) {
-            const listener = message => fn(message);
-            // Store the reference so that we unsubscribe from the same object.
-            const portOnMessage = port.onMessage;
-            portOnMessage.addListener(listener);
-            return () => {
-              portOnMessage.removeListener(listener);
-            };
-          },
-          send(event: string, payload: any, transferable?: Array<any>) {
-            port.postMessage({event, payload}, transferable);
-          },
-        });
-        bridge.addListener('reloadAppForProfiling', () => {
-          localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
-          chrome.devtools.inspectedWindow.eval('window.location.reload();');
-        });
-        bridge.addListener('syncSelectionToNativeElementsPanel', () => {
-          setBrowserSelectionFromReact();
-        });
+        const tabId = chrome.devtools.inspectedWindow.tabId;
 
-        // This flag lets us tip the Store off early that we expect to be profiling.
-        // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
-        // after a user has clicked the "reload and profile" button.
-        let isProfiling = false;
-        let supportsProfiling = false;
-        if (
-          localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
-        ) {
-          supportsProfiling = true;
-          isProfiling = true;
-          localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
-        }
+        registerDevToolsEventLogger('extension');
 
-        if (store !== null) {
-          profilingData = store.profilerStore.profilingData;
-        }
+        function initBridgeAndStore() {
+          const port = chrome.runtime.connect({
+            name: String(tabId),
+          });
+          // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
+          // so it makes no sense to handle it here.
+
+          bridge = new Bridge({
+            listen(fn) {
+              const listener = message => fn(message);
+              // Store the reference so that we unsubscribe from the same object.
+              const portOnMessage = port.onMessage;
+              portOnMessage.addListener(listener);
+              return () => {
+                portOnMessage.removeListener(listener);
+              };
+            },
+            send(event: string, payload: any, transferable?: Array<any>) {
+              port.postMessage({event, payload}, transferable);
+            },
+          });
+          bridge.addListener('reloadAppForProfiling', () => {
+            localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+            chrome.devtools.inspectedWindow.eval('window.location.reload();');
+          });
+          bridge.addListener('syncSelectionToNativeElementsPanel', () => {
+            setBrowserSelectionFromReact();
+          });
 
-        bridge.addListener('extensionBackendInitialized', () => {
-          // Initialize the renderer's trace-updates setting.
-          // This handles the case of navigating to a new page after the DevTools have already been shown.
-          bridge.send(
-            'setTraceUpdatesEnabled',
-            localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
-              'true',
-          );
-        });
+          // This flag lets us tip the Store off early that we expect to be profiling.
+          // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
+          // after a user has clicked the "reload and profile" button.
+          let isProfiling = false;
+          let supportsProfiling = false;
+          if (
+            localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
+          ) {
+            supportsProfiling = true;
+            isProfiling = true;
+            localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
+          }
 
-        store = new Store(bridge, {
-          isProfiling,
-          supportsReloadAndProfile: isChrome,
-          supportsProfiling,
-          // At this time, the scheduling profiler can only parse Chrome performance profiles.
-          supportsSchedulingProfiler: isChrome,
-          supportsTraceUpdates: true,
-        });
-        store.profilerStore.profilingData = profilingData;
-
-        // Initialize the backend only once the Store has been initialized.
-        // Otherwise the Store may miss important initial tree op codes.
-        chrome.devtools.inspectedWindow.eval(
-          `window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
-          function(response, evalError) {
-            if (evalError) {
-              console.error(evalError);
-            }
-          },
-        );
+          if (store !== null) {
+            profilingData = store.profilerStore.profilingData;
+          }
 
-        const viewAttributeSourceFunction = (id, path) => {
-          const rendererID = store.getRendererIDForElement(id);
-          if (rendererID != null) {
-            // Ask the renderer interface to find the specified attribute,
-            // and store it as a global variable on the window.
-            bridge.send('viewAttributeSource', {id, path, rendererID});
+          bridge.addListener('extensionBackendInitialized', () => {
+            // Initialize the renderer's trace-updates setting.
+            // This handles the case of navigating to a new page after the DevTools have already been shown.
+            bridge.send(
+              'setTraceUpdatesEnabled',
+              localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
+                'true',
+            );
+          });
 
-            setTimeout(() => {
-              // Ask Chrome to display the location of the attribute,
-              // assuming the renderer found a match.
-              chrome.devtools.inspectedWindow.eval(`
+          store = new Store(bridge, {
+            isProfiling,
+            supportsReloadAndProfile: isChrome,
+            supportsProfiling,
+            // At this time, the scheduling profiler can only parse Chrome performance profiles.
+            supportsSchedulingProfiler: isChrome,
+            supportsTraceUpdates: true,
+          });
+          store.profilerStore.profilingData = profilingData;
+
+          // Initialize the backend only once the Store has been initialized.
+          // Otherwise the Store may miss important initial tree op codes.
+          chrome.devtools.inspectedWindow.eval(
+            `window.postMessage({
+               source: 'react-devtools-inject-backend',
+               extensionId: "${CURRENT_EXTENSION_ID}"
+             }, '*');`,
+            function(response, evalError) {
+              if (evalError) {
+                console.error(evalError);
+              }
+            },
+          );
+
+          const viewAttributeSourceFunction = (id, path) => {
+            const rendererID = store.getRendererIDForElement(id);
+            if (rendererID != null) {
+              // Ask the renderer interface to find the specified attribute,
+              // and store it as a global variable on the window.
+              bridge.send('viewAttributeSource', {id, path, rendererID});
+
+              setTimeout(() => {
+                // Ask Chrome to display the location of the attribute,
+                // assuming the renderer found a match.
+                chrome.devtools.inspectedWindow.eval(`
                 if (window.$attribute != null) {
                   inspect(window.$attribute);
                 }
               `);
-            }, 100);
-          }
-        };
+              }, 100);
+            }
+          };
 
-        const viewElementSourceFunction = id => {
-          const rendererID = store.getRendererIDForElement(id);
-          if (rendererID != null) {
-            // Ask the renderer interface to determine the component function,
-            // and store it as a global variable on the window
-            bridge.send('viewElementSource', {id, rendererID});
-
-            setTimeout(() => {
-              // Ask Chrome to display the location of the component function,
-              // or a render method if it is a Class (ideally Class instance, not type)
-              // assuming the renderer found one.
-              chrome.devtools.inspectedWindow.eval(`
+          const viewElementSourceFunction = id => {
+            const rendererID = store.getRendererIDForElement(id);
+            if (rendererID != null) {
+              // Ask the renderer interface to determine the component function,
+              // and store it as a global variable on the window
+              bridge.send('viewElementSource', {id, rendererID});
+
+              setTimeout(() => {
+                // Ask Chrome to display the location of the component function,
+                // or a render method if it is a Class (ideally Class instance, not type)
+                // assuming the renderer found one.
+                chrome.devtools.inspectedWindow.eval(`
                 if (window.$type != null) {
                   if (
                     window.$type &&
@@ -213,288 +238,293 @@ function createPanelIfReactLoaded() {
                   }
                 }
               `);
-            }, 100);
-          }
-        };
-
-        let debugIDCounter = 0;
+              }, 100);
+            }
+          };
 
-        // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
-        // never reaches the chrome.runtime.onMessage event listener.
-        let fetchFileWithCaching = null;
-        if (isChrome) {
-          const fetchFromNetworkCache = (url, resolve, reject) => {
-            // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
-            // while also still associating (potentially) interleaved logs with the original request.
-            let debugID = null;
+          let debugIDCounter = 0;
 
-            if (__DEBUG__) {
-              debugID = debugIDCounter++;
-              console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
-            }
+          // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
+          // never reaches the chrome.runtime.onMessage event listener.
+          let fetchFileWithCaching = null;
+          if (isChrome) {
+            const fetchFromNetworkCache = (url, resolve, reject) => {
+              // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
+              // while also still associating (potentially) interleaved logs with the original request.
+              let debugID = null;
 
-            chrome.devtools.network.getHAR(harLog => {
-              for (let i = 0; i < harLog.entries.length; i++) {
-                const entry = harLog.entries[i];
-                if (url === entry.request.url) {
-                  if (__DEBUG__) {
-                    console.log(
-                      `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
-                      url,
-                    );
-                  }
+              if (__DEBUG__) {
+                debugID = debugIDCounter++;
+                console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
+              }
 
-                  entry.getContent(content => {
-                    if (content) {
-                      if (__DEBUG__) {
-                        console.log(
-                          `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
-                        );
-                      }
+              chrome.devtools.network.getHAR(harLog => {
+                for (let i = 0; i < harLog.entries.length; i++) {
+                  const entry = harLog.entries[i];
+                  if (url === entry.request.url) {
+                    if (__DEBUG__) {
+                      console.log(
+                        `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
+                        url,
+                      );
+                    }
 
-                      resolve(content);
-                    } else {
-                      if (__DEBUG__) {
-                        console.log(
-                          `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
-                          content,
-                        );
+                    entry.getContent(content => {
+                      if (content) {
+                        if (__DEBUG__) {
+                          console.log(
+                            `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+                          );
+                        }
+
+                        resolve(content);
+                      } else {
+                        if (__DEBUG__) {
+                          console.log(
+                            `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
+                            content,
+                          );
+                        }
+
+                        // Edge case where getContent() returned null; fall back to fetch.
+                        fetchFromPage(url, resolve, reject);
                       }
+                    });
 
-                      // Edge case where getContent() returned null; fall back to fetch.
-                      fetchFromPage(url, resolve, reject);
-                    }
-                  });
+                    return;
+                  }
+                }
 
-                  return;
+                if (__DEBUG__) {
+                  console.log(
+                    `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
+                  );
                 }
-              }
 
+                // No matching URL found; fall back to fetch.
+                fetchFromPage(url, resolve, reject);
+              });
+            };
+
+            const fetchFromPage = (url, resolve, reject) => {
               if (__DEBUG__) {
-                console.log(
-                  `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
-                );
+                console.log('[main] fetchFromPage()', url);
               }
 
-              // No matching URL found; fall back to fetch.
-              fetchFromPage(url, resolve, reject);
-            });
-          };
-
-          const fetchFromPage = (url, resolve, reject) => {
-            if (__DEBUG__) {
-              console.log('[main] fetchFromPage()', url);
-            }
-
-            function onPortMessage({payload, source}) {
-              if (source === 'react-devtools-content-script') {
-                switch (payload?.type) {
-                  case 'fetch-file-with-cache-complete':
-                    chrome.runtime.onMessage.removeListener(onPortMessage);
-                    resolve(payload.value);
-                    break;
-                  case 'fetch-file-with-cache-error':
-                    chrome.runtime.onMessage.removeListener(onPortMessage);
-                    reject(payload.value);
-                    break;
+              function onPortMessage({payload, source}) {
+                if (source === 'react-devtools-content-script') {
+                  switch (payload?.type) {
+                    case 'fetch-file-with-cache-complete':
+                      chrome.runtime.onMessage.removeListener(onPortMessage);
+                      resolve(payload.value);
+                      break;
+                    case 'fetch-file-with-cache-error':
+                      chrome.runtime.onMessage.removeListener(onPortMessage);
+                      reject(payload.value);
+                      break;
+                  }
                 }
               }
-            }
 
-            chrome.runtime.onMessage.addListener(onPortMessage);
+              chrome.runtime.onMessage.addListener(onPortMessage);
 
-            chrome.devtools.inspectedWindow.eval(`
+              chrome.devtools.inspectedWindow.eval(`
               window.postMessage({
                 source: 'react-devtools-extension',
+                extensionId: "${CURRENT_EXTENSION_ID}"
                 payload: {
                   type: 'fetch-file-with-cache',
                   url: "${url}",
                 },
               });
             `);
-          };
+            };
 
-          // Fetching files from the extension won't make use of the network cache
-          // for resources that have already been loaded by the page.
-          // This helper function allows the extension to request files to be fetched
-          // by the content script (running in the page) to increase the likelihood of a cache hit.
-          fetchFileWithCaching = url => {
-            return new Promise((resolve, reject) => {
-              // Try fetching from the Network cache first.
-              // If DevTools was opened after the page started loading, we may have missed some requests.
-              // So fall back to a fetch() from the page and hope we get a cached response that way.
-              fetchFromNetworkCache(url, resolve, reject);
-            });
+            // Fetching files from the extension won't make use of the network cache
+            // for resources that have already been loaded by the page.
+            // This helper function allows the extension to request files to be fetched
+            // by the content script (running in the page) to increase the likelihood of a cache hit.
+            fetchFileWithCaching = url => {
+              return new Promise((resolve, reject) => {
+                // Try fetching from the Network cache first.
+                // If DevTools was opened after the page started loading, we may have missed some requests.
+                // So fall back to a fetch() from the page and hope we get a cached response that way.
+                fetchFromNetworkCache(url, resolve, reject);
+              });
+            };
+          }
+
+          // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+          const hookNamesModuleLoaderFunction = () =>
+            import(
+              /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+            );
+
+          root = createRoot(document.createElement('div'));
+
+          render = (overrideTab = mostRecentOverrideTab) => {
+            mostRecentOverrideTab = overrideTab;
+            root.render(
+              createElement(DevTools, {
+                bridge,
+                browserTheme: getBrowserTheme(),
+                componentsPortalContainer,
+                enabledInspectedElementContextMenu: true,
+                fetchFileWithCaching,
+                hookNamesModuleLoaderFunction,
+                overrideTab,
+                profilerPortalContainer,
+                showTabBar: false,
+                store,
+                warnIfUnsupportedVersionDetected: true,
+                viewAttributeSourceFunction,
+                viewElementSourceFunction,
+              }),
+            );
           };
-        }
 
-        // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
-        const hookNamesModuleLoaderFunction = () =>
-          import(
-            /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
-          );
+          render();
+        }
 
-        root = createRoot(document.createElement('div'));
-
-        render = (overrideTab = mostRecentOverrideTab) => {
-          mostRecentOverrideTab = overrideTab;
-          root.render(
-            createElement(DevTools, {
-              bridge,
-              browserTheme: getBrowserTheme(),
-              componentsPortalContainer,
-              enabledInspectedElementContextMenu: true,
-              fetchFileWithCaching,
-              hookNamesModuleLoaderFunction,
-              overrideTab,
-              profilerPortalContainer,
-              showTabBar: false,
-              store,
-              warnIfUnsupportedVersionDetected: true,
-              viewAttributeSourceFunction,
-              viewElementSourceFunction,
-            }),
-          );
+        cloneStyleTags = () => {
+          const linkTags = [];
+          // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+          for (const linkTag of document.getElementsByTagName('link')) {
+            if (linkTag.rel === 'stylesheet') {
+              const newLinkTag = document.createElement('link');
+              // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+              for (const attribute of linkTag.attributes) {
+                newLinkTag.setAttribute(
+                  attribute.nodeName,
+                  attribute.nodeValue,
+                );
+              }
+              linkTags.push(newLinkTag);
+            }
+          }
+          return linkTags;
         };
 
-        render();
-      }
+        initBridgeAndStore();
 
-      cloneStyleTags = () => {
-        const linkTags = [];
-        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (const linkTag of document.getElementsByTagName('link')) {
-          if (linkTag.rel === 'stylesheet') {
-            const newLinkTag = document.createElement('link');
-            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-            for (const attribute of linkTag.attributes) {
-              newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
-            }
-            linkTags.push(newLinkTag);
+        function ensureInitialHTMLIsCleared(container) {
+          if (container._hasInitialHTMLBeenCleared) {
+            return;
           }
+          container.innerHTML = '';
+          container._hasInitialHTMLBeenCleared = true;
         }
-        return linkTags;
-      };
 
-      initBridgeAndStore();
-
-      function ensureInitialHTMLIsCleared(container) {
-        if (container._hasInitialHTMLBeenCleared) {
-          return;
+        function setBrowserSelectionFromReact() {
+          // This is currently only called on demand when you press "view DOM".
+          // In the future, if Chrome adds an inspect() that doesn't switch tabs,
+          // we could make this happen automatically when you select another component.
+          chrome.devtools.inspectedWindow.eval(
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+              '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+              'false',
+            (didSelectionChange, evalError) => {
+              if (evalError) {
+                console.error(evalError);
+              }
+            },
+          );
         }
-        container.innerHTML = '';
-        container._hasInitialHTMLBeenCleared = true;
-      }
 
-      function setBrowserSelectionFromReact() {
-        // This is currently only called on demand when you press "view DOM".
-        // In the future, if Chrome adds an inspect() that doesn't switch tabs,
-        // we could make this happen automatically when you select another component.
-        chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-            '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
-            'false',
-          (didSelectionChange, evalError) => {
-            if (evalError) {
-              console.error(evalError);
-            }
-          },
-        );
-      }
-
-      function setReactSelectionFromBrowser() {
-        // When the user chooses a different node in the browser Elements tab,
-        // copy it over to the hook object so that we can sync the selection.
-        chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
-            'false',
-          (didSelectionChange, evalError) => {
-            if (evalError) {
-              console.error(evalError);
-            } else if (didSelectionChange) {
-              // Remember to sync the selection next time we show Components tab.
-              needsToSyncElementSelection = true;
-            }
-          },
-        );
-      }
+        function setReactSelectionFromBrowser() {
+          // When the user chooses a different node in the browser Elements tab,
+          // copy it over to the hook object so that we can sync the selection.
+          chrome.devtools.inspectedWindow.eval(
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+              '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+              'false',
+            (didSelectionChange, evalError) => {
+              if (evalError) {
+                console.error(evalError);
+              } else if (didSelectionChange) {
+                // Remember to sync the selection next time we show Components tab.
+                needsToSyncElementSelection = true;
+              }
+            },
+          );
+        }
 
-      setReactSelectionFromBrowser();
-      chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
         setReactSelectionFromBrowser();
-      });
+        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+          setReactSelectionFromBrowser();
+        });
 
-      let currentPanel = null;
-      let needsToSyncElementSelection = false;
-
-      chrome.devtools.panels.create(
-        isChrome ? '⚛️ Components' : 'Components',
-        '',
-        'panel.html',
-        extensionPanel => {
-          extensionPanel.onShown.addListener(panel => {
-            if (needsToSyncElementSelection) {
-              needsToSyncElementSelection = false;
-              bridge.send('syncSelectionFromNativeElementsPanel');
-            }
+        let currentPanel = null;
+        let needsToSyncElementSelection = false;
+
+        chrome.devtools.panels.create(
+          isChrome ? '⚛️ Components' : 'Components',
+          '',
+          'panel.html',
+          extensionPanel => {
+            extensionPanel.onShown.addListener(panel => {
+              if (needsToSyncElementSelection) {
+                needsToSyncElementSelection = false;
+                bridge.send('syncSelectionFromNativeElementsPanel');
+              }
 
-            if (currentPanel === panel) {
-              return;
-            }
+              if (currentPanel === panel) {
+                return;
+              }
 
-            currentPanel = panel;
-            componentsPortalContainer = panel.container;
+              currentPanel = panel;
+              componentsPortalContainer = panel.container;
 
-            if (componentsPortalContainer != null) {
-              ensureInitialHTMLIsCleared(componentsPortalContainer);
-              render('components');
-              panel.injectStyles(cloneStyleTags);
-              logEvent({event_name: 'selected-components-tab'});
-            }
-          });
-          extensionPanel.onHidden.addListener(panel => {
-            // TODO: Stop highlighting and stuff.
-          });
-        },
-      );
-
-      chrome.devtools.panels.create(
-        isChrome ? '⚛️ Profiler' : 'Profiler',
-        '',
-        'panel.html',
-        extensionPanel => {
-          extensionPanel.onShown.addListener(panel => {
-            if (currentPanel === panel) {
-              return;
-            }
+              if (componentsPortalContainer != null) {
+                ensureInitialHTMLIsCleared(componentsPortalContainer);
+                render('components');
+                panel.injectStyles(cloneStyleTags);
+                logEvent({event_name: 'selected-components-tab'});
+              }
+            });
+            extensionPanel.onHidden.addListener(panel => {
+              // TODO: Stop highlighting and stuff.
+            });
+          },
+        );
 
-            currentPanel = panel;
-            profilerPortalContainer = panel.container;
+        chrome.devtools.panels.create(
+          isChrome ? '⚛️ Profiler' : 'Profiler',
+          '',
+          'panel.html',
+          extensionPanel => {
+            extensionPanel.onShown.addListener(panel => {
+              if (currentPanel === panel) {
+                return;
+              }
 
-            if (profilerPortalContainer != null) {
-              ensureInitialHTMLIsCleared(profilerPortalContainer);
-              render('profiler');
-              panel.injectStyles(cloneStyleTags);
-              logEvent({event_name: 'selected-profiler-tab'});
-            }
-          });
-        },
-      );
+              currentPanel = panel;
+              profilerPortalContainer = panel.container;
 
-      chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
+              if (profilerPortalContainer != null) {
+                ensureInitialHTMLIsCleared(profilerPortalContainer);
+                render('profiler');
+                panel.injectStyles(cloneStyleTags);
+                logEvent({event_name: 'selected-profiler-tab'});
+              }
+            });
+          },
+        );
 
-      // Re-initialize DevTools panel when a new page is loaded.
-      chrome.devtools.network.onNavigated.addListener(function onNavigated() {
-        // Re-initialize saved filters on navigation,
-        // since global values stored on window get reset in this case.
-        syncSavedPreferences();
+        chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
-        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
-        // We can revisit this in the future as a small optimization.
-        flushSync(() => root.unmount());
+        // Re-initialize DevTools panel when a new page is loaded.
+        chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+          // Re-initialize saved filters on navigation,
+          // since global values stored on window get reset in this case.
+          syncSavedPreferences();
 
-        initBridgeAndStore();
+          // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+          // We can revisit this in the future as a small optimization.
+          flushSync(() => root.unmount());
+
+          initBridgeAndStore();
+        });
       });
     },
   );
diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 3b93022009617..06816532838fd 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -57,7 +57,7 @@ Some changes requiring testing in the browser extension (e.g. like "named hooks"
 ```sh
 cd <react-repo>
 cd packages/react-devtools-extensions
-yarn build:chrome && yarn test:chrome
+yarn build:chrome:local && yarn test:chrome
 ```
 This will launch a standalone version of Chrome with the locally built React DevTools pre-installed. If you are testing a specific URL, you can make your testing even faster by passing the `--url` argument to the test script:
 ```sh

From 23b7dfeff31abbf2ce69452e46075c5cb6da4a31 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Oct 2021 08:03:18 -0400
Subject: [PATCH 036/109] Enable scheduling profiler for RN FB profiling builds
 (#22566)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index c86d00217cc97..15a8c29f71799 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -20,7 +20,7 @@ export const {enablePersistentOffscreenHostContainer} = dynamicFlags;
 
 // The rest of the flags are static for better dead code elimination.
 export const enableDebugTracing = false;
-export const enableSchedulingProfiler = true;
+export const enableSchedulingProfiler = __PROFILE__;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;

From 9d3d03025cf2474286ee5d9ba642f3ea9377a435 Mon Sep 17 00:00:00 2001
From: Gabriel Trompiz <gab.tc@icloud.com>
Date: Fri, 15 Oct 2021 08:16:43 -0500
Subject: [PATCH 037/109] Reattachment of the splash page event listeners
 (#22558) (#22560)

---
 .../react-devtools-core/src/standalone.js     | 10 ++++
 packages/react-devtools/app.html              | 50 +++++++++++--------
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index fae70937ea0aa..1ef01e8ffc026 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -42,11 +42,13 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 installHook(window);
 
 export type StatusListener = (message: string) => void;
+export type OnDisconnectedCallback = () => void;
 
 let node: HTMLElement = ((null: any): HTMLElement);
 let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
 let statusListener: StatusListener = (message: string) => {};
+let disconnectedCallback: OnDisconnectedCallback = () => {};
 
 // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
 function hookNamesModuleLoaderFunction() {
@@ -73,6 +75,11 @@ function setStatusListener(value: StatusListener) {
   return DevtoolsUI;
 }
 
+function setDisconnectedCallback(value: OnDisconnectedCallback) {
+  disconnectedCallback = value;
+  return DevtoolsUI;
+}
+
 let bridge: FrontendBridge | null = null;
 let store: Store | null = null;
 let root = null;
@@ -153,6 +160,8 @@ function onDisconnected() {
   safeUnmount();
 
   node.innerHTML = nodeWaitingToConnectHTML;
+
+  disconnectedCallback();
 }
 
 function onError({code, message}) {
@@ -389,6 +398,7 @@ const DevtoolsUI = {
   setContentDOMNode,
   setProjectRoots,
   setStatusListener,
+  setDisconnectedCallback,
   startServer,
   openProfiler,
 };
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
index fc631cea1ca6a..b60ef3c094b8b 100644
--- a/packages/react-devtools/app.html
+++ b/packages/react-devtools/app.html
@@ -182,11 +182,9 @@
       const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
       const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
       const $ = document.querySelector.bind(document);
-      const $promptDiv = $("#box-content-prompt");
-      const $confirmationDiv = $("#box-content-confirmation");
-
+      
       let timeoutID;
-
+      
       function selectAllAndCopy(event) {
         const element = event.target;
         if (window.getSelection) {
@@ -196,7 +194,9 @@
           selection.removeAllRanges();
           selection.addRange(range);
           clipboard.writeText(event.target.textContent);
-
+          
+          const $promptDiv = $("#box-content-prompt");
+          const $confirmationDiv = $("#box-content-confirmation");
           $promptDiv.classList.add('hidden');
           $confirmationDiv.classList.remove('hidden');
 
@@ -217,24 +217,29 @@
           .openProfiler();
       }
 
-      const link = $('#rn-help-link');
-      link.addEventListener('click', event => {
-        event.preventDefault();
-        require('electron').shell.openExternal(link.href);
-      });
-
-      const $localhost = $("#localhost");
-      $localhost.innerText = `<script src="${server}"></` + 'script>';
-      $localhost.addEventListener('click', selectAllAndCopy);
-      $localhost.addEventListener('focus', selectAllAndCopy);
-
-      const $byIp = $("#byip");
-      $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
-      $byIp.addEventListener('click', selectAllAndCopy);
-      $byIp.addEventListener('focus', selectAllAndCopy);
+      function attachListeners() {
+        const link = $('#rn-help-link');
+        link.addEventListener('click', event => {
+          event.preventDefault();
+          require('electron').shell.openExternal(link.href);
+        });
+  
+        const $localhost = $("#localhost");
+        $localhost.innerText = `<script src="${server}"></` + 'script>';
+        $localhost.addEventListener('click', selectAllAndCopy);
+        $localhost.addEventListener('focus', selectAllAndCopy);
+  
+        const $byIp = $("#byip");
+        $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
+        $byIp.addEventListener('click', selectAllAndCopy);
+        $byIp.addEventListener('focus', selectAllAndCopy);
+  
+        const $profiler = $("#profiler");
+        $profiler.addEventListener('click', openProfiler);
+      };
 
-      const $profiler = $("#profiler");
-      $profiler.addEventListener('click', openProfiler);
+      // Initially attach the listeners
+      attachListeners();
 
       let devtools;
       try {
@@ -248,6 +253,7 @@
       window.devtools = devtools;
       window.server = devtools
         .setContentDOMNode(document.getElementById("container"))
+        .setDisconnectedCallback(attachListeners)
         .setStatusListener(function(status) {
           const element = document.getElementById("loading-status");
           if (element) {

From 930c9e7eeb4c9721e1b8dee074c2eef4d1eae5dc Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 11:27:13 -0400
Subject: [PATCH 038/109] Show warning in UI when duplicate installations of
 DevTools extension are detected (#22563)

---
 .../src/background.js                         | 16 ++++--
 .../src/checkForDuplicateInstallations.js     | 14 ++---
 .../src/constants.js                          |  4 +-
 .../react-devtools-extensions/src/main.js     | 35 +++++++++++-
 .../src/devtools/views/DevTools.js            |  4 ++
 .../views/DuplicateInstallationDialog.js      | 55 +++++++++++++++++++
 6 files changed, 115 insertions(+), 13 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 85595d26010bf..e8ff0f3f16202 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -1,12 +1,19 @@
-/* global chrome */
+// @flow strict-local
 
 'use strict';
 
-const ports = {};
+declare var chrome: any;
+
+const ports: {
+  [tab: string]: {|devtools: any, 'content-script': any|},
+} = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
-import {EXTENSION_INSTALL_CHECK_MESSAGE} from './constants';
+import {
+  EXTENSION_INSTALL_CHECK,
+  SHOW_DUPLICATE_EXTENSION_WARNING,
+} from './constants';
 
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
@@ -120,8 +127,9 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 
 chrome.runtime.onMessageExternal.addListener(
   (request, sender, sendResponse) => {
-    if (request === EXTENSION_INSTALL_CHECK_MESSAGE) {
+    if (request === EXTENSION_INSTALL_CHECK) {
       sendResponse(true);
+      chrome.runtime.sendMessage(SHOW_DUPLICATE_EXTENSION_WARNING);
     }
   },
 );
diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
index e54476283cc61..1ebafe50b8835 100644
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -11,13 +11,13 @@ declare var chrome: any;
 
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {
-  EXTENSION_INSTALL_CHECK_MESSAGE,
+  EXTENSION_INSTALL_CHECK,
   EXTENSION_INSTALLATION_TYPE,
   INTERNAL_EXTENSION_ID,
   LOCAL_EXTENSION_ID,
 } from './constants';
 
-const UNRECOGNIZED_EXTENSION_WARNING =
+const UNRECOGNIZED_EXTENSION_ERROR =
   'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
   'Please make sure you only have a single version of the extension installed or enabled. ' +
   'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
@@ -68,9 +68,9 @@ export function checkForDuplicateInstallations(callback: boolean => void) {
       // detect if there are other installations of DevTools present.
       // In this case, assume there are no duplicate exensions and show a warning about
       // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      console.error(UNRECOGNIZED_EXTENSION_ERROR);
       chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
       );
       callback(false);
       break;
@@ -80,9 +80,9 @@ export function checkForDuplicateInstallations(callback: boolean => void) {
       // are other installations of DevTools present.
       // In this case, assume there are no duplicate exensions and show a warning about
       // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      console.error(UNRECOGNIZED_EXTENSION_ERROR);
       chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
       );
       callback(false);
       break;
@@ -105,7 +105,7 @@ function checkForInstalledExtension(extensionId: string): Promise<boolean> {
   return new Promise(resolve => {
     chrome.runtime.sendMessage(
       extensionId,
-      EXTENSION_INSTALL_CHECK_MESSAGE,
+      EXTENSION_INSTALL_CHECK,
       response => {
         if (__DEBUG__) {
           console.log(
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
index 5e85e4aec40e7..310bbaca11563 100644
--- a/packages/react-devtools-extensions/src/constants.js
+++ b/packages/react-devtools-extensions/src/constants.js
@@ -11,7 +11,9 @@ declare var chrome: any;
 
 export const CURRENT_EXTENSION_ID = chrome.runtime.id;
 
-export const EXTENSION_INSTALL_CHECK_MESSAGE = 'extension-install-check';
+export const EXTENSION_INSTALL_CHECK = 'extension-install-check';
+export const SHOW_DUPLICATE_EXTENSION_WARNING =
+  'show-duplicate-extension-warning';
 
 export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
 export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 8280158e1db70..5203b511035d5 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -22,7 +22,11 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
-import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
+import {
+  CURRENT_EXTENSION_ID,
+  EXTENSION_INSTALLATION_TYPE,
+  SHOW_DUPLICATE_EXTENSION_WARNING,
+} from './constants';
 import {checkForDuplicateInstallations} from './checkForDuplicateInstallations';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -108,11 +112,39 @@ function createPanelIfReactLoaded() {
         let mostRecentOverrideTab = null;
         let render = null;
         let root = null;
+        let warnIfDuplicateInstallation = false;
 
         const tabId = chrome.devtools.inspectedWindow.tabId;
 
         registerDevToolsEventLogger('extension');
 
+        function onDuplicateExtensionMessage(message) {
+          if (message === SHOW_DUPLICATE_EXTENSION_WARNING) {
+            chrome.runtime.onMessage.removeListener(
+              onDuplicateExtensionMessage,
+            );
+
+            if (warnIfDuplicateInstallation === true) {
+              return;
+            }
+            warnIfDuplicateInstallation = true;
+            const errorMessage =
+              'React Developer Tools: We detected that there are multiple versions of React Developer Tools ' +
+              'installed and enabled in your browser at the same time, which will cause ' +
+              'issues while using the extension. ' +
+              'Please ensure that you have installed and enabled only a single ' +
+              'version of React Developer Tools before proceeding.';
+            console.error(errorMessage);
+            chrome.devtools.inspectedWindow.eval(
+              `console.error("${errorMessage}")`,
+            );
+            if (render != null) {
+              render();
+            }
+          }
+        }
+        chrome.runtime.onMessage.addListener(onDuplicateExtensionMessage);
+
         function initBridgeAndStore() {
           const port = chrome.runtime.connect({
             name: String(tabId),
@@ -374,6 +406,7 @@ function createPanelIfReactLoaded() {
                 hookNamesModuleLoaderFunction,
                 overrideTab,
                 profilerPortalContainer,
+                warnIfDuplicateInstallation,
                 showTabBar: false,
                 store,
                 warnIfUnsupportedVersionDetected: true,
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 781ad9d902f68..8f1b6a22c11bc 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -34,6 +34,7 @@ import {SchedulingProfilerContextController} from 'react-devtools-scheduling-pro
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
+import DuplicateInstallationDialog from './DuplicateInstallationDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
@@ -73,6 +74,7 @@ export type Props = {|
   enabledInspectedElementContextMenu?: boolean,
   showTabBar?: boolean,
   store: Store,
+  warnIfDuplicateInstallation?: boolean,
   warnIfLegacyBackendDetected?: boolean,
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
@@ -132,6 +134,7 @@ export default function DevTools({
   profilerPortalContainer,
   showTabBar = false,
   store,
+  warnIfDuplicateInstallation = false,
   warnIfLegacyBackendDetected = false,
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
@@ -319,6 +322,7 @@ export default function DevTools({
                 </ViewElementSourceContext.Provider>
               </SettingsContextController>
               <UnsupportedBridgeProtocolDialog />
+              {warnIfDuplicateInstallation && <DuplicateInstallationDialog />}
               {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
               {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
             </ModalDialogContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js b/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
new file mode 100644
index 0000000000000..12a32ce4b7f43
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import * as React from 'react';
+import {Fragment, useContext, useEffect} from 'react';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+import {ModalDialogContext} from './ModalDialog';
+
+export default function DuplicateInstallationDialog(_: {||}) {
+  const {dispatch} = useContext(ModalDialogContext);
+
+  useEffect(() => {
+    dispatch({
+      canBeDismissed: false,
+      id: 'DuplicateInstallationDialog',
+      type: 'SHOW',
+      title: 'Duplicate Installations of DevTools Detected',
+      content: <DialogContent />,
+    });
+  }, []);
+  return null;
+}
+
+function DialogContent(_: {||}) {
+  return (
+    <Fragment>
+      <p>
+        We detected that there are multiple versions of React Developer Tools
+        installed and enabled in your browser at the same time, which will cause
+        issues while using the extension.
+      </p>
+      {isInternalFacebookBuild ? (
+        <p>
+          Before proceeding, please ensure that the only enabled version of
+          React Developer Tools is the internal (Chef-installed) version. To
+          manage your extensions, visit the <code>about://extensions</code> page
+          in your browser.
+        </p>
+      ) : (
+        <p>
+          Please ensure that you have installed and enabled only a single
+          version of React Developer Tools before proceeding. To manage your
+          extensions, visit the <code>about://extensions</code> page in your
+          browser.
+        </p>
+      )}
+    </Fragment>
+  );
+}

From 1def0a4244fa0b221ba39e9bce9bc3b6d63220e3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 12:50:00 -0400
Subject: [PATCH 039/109] DevTools prepare release script resets patch version
 when bumping minor (#22568)

---
 scripts/devtools/prepare-release.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/devtools/prepare-release.js b/scripts/devtools/prepare-release.js
index 0fc8fc841f551..75e9615dc8382 100755
--- a/scripts/devtools/prepare-release.js
+++ b/scripts/devtools/prepare-release.js
@@ -38,7 +38,7 @@ async function main() {
   const {major, minor, patch} = semver(previousVersion);
   const nextVersion =
     releaseType === 'minor'
-      ? `${major}.${minor + 1}.${patch}`
+      ? `${major}.${minor + 1}.0`
       : `${major}.${minor}.${patch + 1}`;
 
   updatePackageVersions(previousVersion, nextVersion);

From e5f486b5a82c58001e526ade72525434dc1afca9 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 12:50:17 -0400
Subject: [PATCH 040/109] React DevTools 4.19.2 -> 4.20.2 (#22569)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 +-
 .../edge/manifest.json                        |  4 +-
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 .../package.json                              |  2 +-
 packages/react-devtools/CHANGELOG.md          | 15 +++++
 packages/react-devtools/package.json          |  4 +-
 scripts/devtools/yarn.lock                    | 57 +++++++++++++++++++
 9 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 06d2c5526a8c7..05192be2d0448 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 9b76afb845862..fdbf43719689e 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.19.2",
-  "version_name": "4.19.2",
+  "version": "4.20.0",
+  "version_name": "4.20.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 31dac5b50f5be..b5fd17dcb26fc 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.19.2",
-  "version_name": "4.19.2",
+  "version": "4.20.0",
+  "version_name": "4.20.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 27f17a8b74db7..4da3c73a5d3c0 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index e05417ee8f41f..16564ebc79b2a 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 3bff9a9b93d9f..fb56eb8c0861e 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 033c714bb54c1..1f42ca57c1b69 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.20.0 (October 15, 2021)
+
+#### Features
+* Allow to use the Profiler when no client is connected in standalone DevTools ([@gabrieltrompiz](https://github.com/gabrieltrompiz) in [#22551](https://github.com/facebook/react/pull/22551))
+
+#### Bugfix
+* Surface backend errors during inspection in the frontend UI ([@bvaughn](https://github.com/bvaughn) in [#22546](https://github.com/facebook/react/pull/22546))
+* Prevent splash page in standalone app from becoming unresponsive after the disconnection of a client  (#22558) ([@gabrieltrompiz](https://github.com/gabrieltrompiz) in [#22560](https://github.com/facebook/react/pull/22560))
+* Prevent errors/crashing when multiple installs of DevTools are present ([@jstejada](https://github.com/jstejada) in [#22517](https://github.com/facebook/react/pull/22517))
+* Update Fiber logic in backend renderer to match implementation in React ([@jstejada](https://github.com/jstejada) in [#22527](https://github.com/facebook/react/pull/22527))
+
+#### Misc
+* Show warning in UI when duplicate installations of DevTools extension are detected ([@jstejada](https://github.com/jstejada) in [#22563](https://github.com/facebook/react/pull/22563))
+* Improved filenames of built worker files ([@akgupta0777](https://github.com/akgupta0777) in [#22559](https://github.com/facebook/react/pull/22559))
+
 ## 4.19.2 (October 8, 2021)
 
 #### Bugfix
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 71d0dfbeb14cc..16b47c5e0f204 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.19.2",
+    "react-devtools-core": "4.20.0",
     "update-notifier": "^2.1.0"
   }
 }
diff --git a/scripts/devtools/yarn.lock b/scripts/devtools/yarn.lock
index 37c759ab79f05..fd79a7138bdbb 100644
--- a/scripts/devtools/yarn.lock
+++ b/scripts/devtools/yarn.lock
@@ -82,6 +82,15 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+child-process-promise@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/child-process-promise/-/child-process-promise-2.2.1.tgz#4730a11ef610fad450b8f223c79d31d7bdad8074"
+  integrity sha1-RzChHvYQ+tRQuPIjx50x172tgHQ=
+  dependencies:
+    cross-spawn "^4.0.2"
+    node-version "^1.0.0"
+    promise-polyfill "^6.0.1"
+
 cli-cursor@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -140,6 +149,14 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+cross-spawn@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+  integrity sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=
+  dependencies:
+    lru-cache "^4.0.1"
+    which "^1.2.9"
+
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
@@ -259,6 +276,11 @@ is-unicode-supported@^0.1.0:
   resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
   integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
 
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -293,6 +315,14 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
+lru-cache@^4.0.1:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -320,6 +350,11 @@ native-or-bluebird@^1.1.2:
   resolved "https://registry.yarnpkg.com/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz#39c47bfd7825d1fb9ffad32210ae25daadf101c9"
   integrity sha1-OcR7/Xgl0fuf+tMiEK4l2q3xAck=
 
+node-version@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.2.0.tgz#34fde3ffa8e1149bd323983479dda620e1b5060d"
+  integrity sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ==
+
 onetime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
@@ -364,6 +399,11 @@ progress-estimator@^0.2.1:
     humanize-duration "^3.15.3"
     log-update "^2.3.0"
 
+promise-polyfill@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.1.0.tgz#dfa96943ea9c121fca4de9b5868cb39d3472e057"
+  integrity sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=
+
 prompt-promise@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/prompt-promise/-/prompt-promise-1.0.3.tgz#78ce4fcb9a14a108c49174f2d808c440d1bde265"
@@ -372,6 +412,11 @@ prompt-promise@^1.0.3:
     keypress "~0.2.1"
     native-or-another "~2.0.0"
 
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
+
 readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -520,6 +565,13 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+which@^1.2.9:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
 wrap-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
@@ -527,3 +579,8 @@ wrap-ansi@^3.0.1:
   dependencies:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=

From b72dc8e9300f5ae997f7f5cfcd79b604cca3df0c Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 17:18:20 -0400
Subject: [PATCH 041/109] Only show DevTools warning about unrecognized build
 in Chrome (#22571)

---
 .../src/checkForDuplicateInstallations.js     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
index 1ebafe50b8835..d86cac7709295 100644
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -10,6 +10,7 @@
 declare var chrome: any;
 
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {getBrowserName} from './utils';
 import {
   EXTENSION_INSTALL_CHECK,
   EXTENSION_INSTALLATION_TYPE,
@@ -17,6 +18,8 @@ import {
   LOCAL_EXTENSION_ID,
 } from './constants';
 
+const IS_CHROME = getBrowserName() === 'Chrome';
+
 const UNRECOGNIZED_EXTENSION_ERROR =
   'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
   'Please make sure you only have a single version of the extension installed or enabled. ' +
@@ -76,14 +79,17 @@ export function checkForDuplicateInstallations(callback: boolean => void) {
       break;
     }
     case 'unknown': {
-      // If we don't know how this extension was built, we can't reliably detect if there
-      // are other installations of DevTools present.
-      // In this case, assume there are no duplicate exensions and show a warning about
-      // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_ERROR);
-      chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
-      );
+      // TODO: Support duplicate extension detection in other browsers
+      if (IS_CHROME) {
+        // If we don't know how this extension was built, we can't reliably detect if there
+        // are other installations of DevTools present.
+        // In this case, assume there are no duplicate exensions and show a warning about
+        // potential conflicts.
+        console.error(UNRECOGNIZED_EXTENSION_ERROR);
+        chrome.devtools.inspectedWindow.eval(
+          `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
+        );
+      }
       callback(false);
       break;
     }

From 163e81c1f88a47749e092f2d5b31b7c919f07de8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 18 Oct 2021 11:27:26 -0400
Subject: [PATCH 042/109] Support disabling spurious act warnings with a global
 environment flag (#22561)

* Extract `act` environment check into function

`act` checks the environment to determine whether to fire a warning.
We're changing how this check works in React 18. As a first step, this
refactors the logic into a single function. No behavior changes yet.

* Use IS_REACT_ACT_ENVIRONMENT to disable warnings

If `IS_REACT_ACT_ENVIRONMENT` is set to `false`, we will suppress
any `act` warnings. Otherwise, the behavior of `act` is the same as in
React 17: if `jest` is defined, it warns.

In concurrent mode, the plan is to remove the `jest` check and only warn
if `IS_REACT_ACT_ENVIRONMENT` is true. I have not implemented that
part yet.
---
 .eslintrc.js                                  |  1 +
 packages/jest-react/src/internalAct.js        |  9 ++---
 .../src/__tests__/ReactTestUtilsAct-test.js   | 34 ++++++++++++++++++
 .../react-reconciler/src/ReactFiberAct.new.js | 35 +++++++++++++++++++
 .../react-reconciler/src/ReactFiberAct.old.js | 35 +++++++++++++++++++
 .../src/ReactFiberHooks.new.js                | 13 +++----
 .../src/ReactFiberHooks.old.js                | 13 +++----
 .../src/ReactFiberWorkLoop.new.js             | 19 ++--------
 .../src/ReactFiberWorkLoop.old.js             | 19 ++--------
 packages/react/src/ReactCurrentActQueue.js    |  6 ----
 scripts/rollup/validate/eslintrc.cjs.js       |  3 ++
 scripts/rollup/validate/eslintrc.cjs2015.js   |  3 ++
 scripts/rollup/validate/eslintrc.esm.js       |  3 ++
 scripts/rollup/validate/eslintrc.fb.js        |  3 ++
 scripts/rollup/validate/eslintrc.rn.js        |  3 ++
 scripts/rollup/validate/eslintrc.umd.js       |  3 ++
 16 files changed, 142 insertions(+), 60 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberAct.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberAct.old.js

diff --git a/.eslintrc.js b/.eslintrc.js
index d464e83b453aa..b129af49d3d6a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -279,5 +279,6 @@ module.exports = {
     __VARIANT__: true,
     gate: true,
     trustedTypes: true,
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
 };
diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js
index 486d84c31f64a..9e6bf0e4fd66b 100644
--- a/packages/jest-react/src/internalAct.js
+++ b/packages/jest-react/src/internalAct.js
@@ -18,9 +18,7 @@ import type {Thenable} from 'shared/ReactTypes';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 
-import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
-const {ReactCurrentActQueue} = ReactSharedInternals;
 
 let actingUpdatesScopeDepth = 0;
 
@@ -37,15 +35,18 @@ export function act(scope: () => Thenable<mixed> | void) {
     );
   }
 
+  const previousIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
   const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
   actingUpdatesScopeDepth++;
   if (__DEV__ && actingUpdatesScopeDepth === 1) {
-    ReactCurrentActQueue.disableActWarning = true;
+    // Because this is not the "real" `act`, we set this to `false` so React
+    // knows not to fire `act` warnings.
+    global.IS_REACT_ACT_ENVIRONMENT = false;
   }
 
   const unwind = () => {
     if (__DEV__ && actingUpdatesScopeDepth === 1) {
-      ReactCurrentActQueue.disableActWarning = false;
+      global.IS_REACT_ACT_ENVIRONMENT = previousIsActEnvironment;
     }
     actingUpdatesScopeDepth--;
 
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index a47e234534db2..f5e33d789891c 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -273,6 +273,40 @@ function runActTests(label, render, unmount, rerender) {
         ]);
       });
 
+      // @gate __DEV__
+      it('does not warn if IS_REACT_ACT_ENVIRONMENT is set to false', () => {
+        let setState;
+        function App() {
+          const [state, _setState] = React.useState(0);
+          setState = _setState;
+          return state;
+        }
+
+        act(() => {
+          render(<App />, container);
+        });
+
+        // First show that it does warn
+        expect(() => setState(1)).toErrorDev(
+          'An update to App inside a test was not wrapped in act(...)',
+        );
+
+        // Now do the same thing again, but disable with the environment flag
+        const prevIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
+        global.IS_REACT_ACT_ENVIRONMENT = false;
+        try {
+          setState(2);
+        } finally {
+          global.IS_REACT_ACT_ENVIRONMENT = prevIsActEnvironment;
+        }
+
+        // When the flag is restored to its previous value, it should start
+        // warning again. This shows that React reads the flag each time.
+        expect(() => setState(3)).toErrorDev(
+          'An update to App inside a test was not wrapped in act(...)',
+        );
+      });
+
       describe('fake timers', () => {
         beforeEach(() => {
           jest.useFakeTimers();
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
new file mode 100644
index 0000000000000..4338a7d5cd459
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber.new';
+import {warnsIfNotActing} from './ReactFiberHostConfig';
+
+export function isActEnvironment(fiber: Fiber) {
+  if (__DEV__) {
+    const isReactActEnvironmentGlobal =
+      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
+    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
+    // $FlowExpectedError - Flow doesn't know about jest
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing &&
+      jestIsDefined &&
+      // Legacy mode 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.
+      isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
new file mode 100644
index 0000000000000..e477024a858f8
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber.old';
+import {warnsIfNotActing} from './ReactFiberHostConfig';
+
+export function isActEnvironment(fiber: Fiber) {
+  if (__DEV__) {
+    const isReactActEnvironmentGlobal =
+      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
+    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
+    // $FlowExpectedError - Flow doesn't know about jest
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing &&
+      jestIsDefined &&
+      // Legacy mode 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.
+      isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index b66b62c9ade73..afaebd20a5264 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -118,6 +118,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {isActEnvironment} from './ReactFiberAct.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1678,8 +1679,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -1709,8 +1709,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -2193,8 +2192,7 @@ function dispatchReducerAction<S, A>(
     enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
@@ -2279,8 +2277,7 @@ function dispatchSetState<S, A>(
       }
     }
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index af21b5f6f9da3..03df5b1444e62 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -118,6 +118,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {isActEnvironment} from './ReactFiberAct.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1678,8 +1679,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -1709,8 +1709,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -2193,8 +2192,7 @@ function dispatchReducerAction<S, A>(
     enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
@@ -2279,8 +2277,7 @@ function dispatchSetState<S, A>(
       }
     }
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 884f8cc22aa5d..89286bd573858 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -84,7 +84,6 @@ import {
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
-  warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
   getCurrentEventPriority,
@@ -2816,15 +2815,8 @@ function shouldForceFlushFallbacksInDEV() {
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       (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
+      ReactCurrentActQueue.current === null
     ) {
       console.error(
         'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@@ -2846,15 +2838,8 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
 function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       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
+      ReactCurrentActQueue.current === null
     ) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index db7a3de837b40..d5cb23483d2d0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -84,7 +84,6 @@ import {
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
-  warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
   getCurrentEventPriority,
@@ -2816,15 +2815,8 @@ function shouldForceFlushFallbacksInDEV() {
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       (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
+      ReactCurrentActQueue.current === null
     ) {
       console.error(
         'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@@ -2846,15 +2838,8 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
 function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       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
+      ReactCurrentActQueue.current === null
     ) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
diff --git a/packages/react/src/ReactCurrentActQueue.js b/packages/react/src/ReactCurrentActQueue.js
index 694907a10335e..690f2568c4184 100644
--- a/packages/react/src/ReactCurrentActQueue.js
+++ b/packages/react/src/ReactCurrentActQueue.js
@@ -11,12 +11,6 @@ type RendererTask = boolean => RendererTask | null;
 
 const ReactCurrentActQueue = {
   current: (null: null | Array<RendererTask>),
-  // Our internal tests use a custom implementation of `act` that works by
-  // mocking the Scheduler package. Use this field to 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.
-  disableActWarning: (false: boolean),
 
   // Used to reproduce behavior of `batchedUpdates` in legacy mode.
   isBatchingLegacy: false,
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 12b8931f06637..0adb5a197dd12 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -42,6 +42,9 @@ module.exports = {
     // jest
     expect: true,
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index d94b4bc4a02b0..721dd9b026bf1 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -42,6 +42,9 @@ module.exports = {
     // jest
     expect: true,
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 2015,
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index be4dbf621bf48..bbc94a7f4ee25 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -42,6 +42,9 @@ module.exports = {
     // jest
     expect: true,
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 2017,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index 5621d93f0f902..bd5881ca47531 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -38,6 +38,9 @@ module.exports = {
 
     // jest
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index a20cdeb4a37ea..0f2d7f808da81 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -34,6 +34,9 @@ module.exports = {
 
     // jest
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 95ef9550dd6ab..2077eec029484 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -47,6 +47,9 @@ module.exports = {
 
     // jest
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,

From 996da67b2991f480b6219471e38aeaa7280bd00c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 18 Oct 2021 11:59:18 -0400
Subject: [PATCH 043/109] Replace global `jest` heuristic with
 `IS_REACT_ACT_ENVIRONMENT` (#22562)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove `jest` global check in concurrent roots

In concurrent mode, instead of checking `jest`, we check the new
`IS_REACT_ACT_ENVIRONMENT` global. The default behavior is `false`.

Legacy mode behavior is unchanged.

React's own internal test suite use a custom version of `act` that works
by mocking the Scheduler — rather than the "real" act used publicly. So
we don't enable the flag in our repo.

* Warn if `act` is called in wrong environment

Adds a warning if `act` is called but `IS_REACT_ACT_ENVIRONMENT` is not
enabled. The goal is to prompt users to correctly configure their
testing environment, so that if they forget to use `act` in a different
test, we can detect and warn about.

It's expected that the environment flag will be configured by the
testing framework. For example, a Jest plugin. We will link to the
relevant documentation page, once it exists.

The warning only fires in concurrent mode. Legacy roots will keep the
existing behavior.
---
 .../__tests__/preprocessData-test.internal.js |   2 +
 .../src/__tests__/inspectedElement-test.js    |   2 +
 .../ReactDOMNativeEventHeuristic-test.js      |  26 +---
 .../src/__tests__/ReactTestUtilsAct-test.js   |   2 +
 .../react-reconciler/src/ReactFiberAct.new.js |  43 ++++--
 .../react-reconciler/src/ReactFiberAct.old.js |  43 ++++--
 .../__tests__/DebugTracing-test.internal.js   |   2 +
 .../src/__tests__/ReactActWarnings-test.js    | 130 ++++++++++++++++++
 .../SchedulingProfilerLabels-test.internal.js |   2 +
 9 files changed, 205 insertions(+), 47 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactActWarnings-test.js

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index e24611e9daea5..e458f8060f84b 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -17,6 +17,8 @@ import {
 } from '../../constants';
 import REACT_VERSION from 'shared/ReactVersion';
 
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
 describe('getLanesFromTransportDecimalBitmask', () => {
   it('should return array of lane numbers from bitmask string', () => {
     expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 68d014de3ad47..be5a852396538 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -38,6 +38,8 @@ describe('InspectedElement', () => {
   let ErrorBoundary;
   let errorBoundaryInstance;
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 702f213d7a2ed..94c5fe35290bd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -76,9 +76,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // Dispatch a click event on the Disable-button.
     const firstEvent = document.createEvent('Event');
     firstEvent.initEvent('click', true, true);
-    expect(() =>
-      dispatchAndSetCurrentEvent(disableButton, firstEvent),
-    ).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+    dispatchAndSetCurrentEvent(disableButton, firstEvent);
 
     // Discrete events should be flushed in a microtask.
     // Verify that the second button was removed.
@@ -134,9 +132,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // Dispatch a click event on the Disable-button.
     const firstEvent = document.createEvent('Event');
     firstEvent.initEvent('click', true, true);
-    expect(() => {
-      dispatchAndSetCurrentEvent(disableButton, firstEvent);
-    }).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+    dispatchAndSetCurrentEvent(disableButton, firstEvent);
 
     // There should now be a pending update to disable the form.
     // This should not have flushed yet since it's in concurrent mode.
@@ -196,9 +192,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // Dispatch a click event on the Enable-button.
     const firstEvent = document.createEvent('Event');
     firstEvent.initEvent('click', true, true);
-    expect(() => {
-      dispatchAndSetCurrentEvent(enableButton, firstEvent);
-    }).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+    dispatchAndSetCurrentEvent(enableButton, firstEvent);
 
     // There should now be a pending update to enable the form.
     // This should not have flushed yet since it's in concurrent mode.
@@ -344,9 +338,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     });
     expect(container.textContent).toEqual('Count: 0');
 
-    // Ignore act warning. We can't use act because it forces batched updates.
-    spyOnDev(console, 'error');
-
     const pressEvent = document.createEvent('Event');
     pressEvent.initEvent('click', true, true);
     dispatchAndSetCurrentEvent(target.current, pressEvent);
@@ -355,17 +346,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     await null;
     // If this is 2, that means the `setCount` calls were not batched.
     expect(container.textContent).toEqual('Count: 1');
-
-    // Assert that the `act` warnings were the only ones that fired.
-    if (__DEV__) {
-      expect(console.error).toHaveBeenCalledTimes(2);
-      expect(console.error.calls.argsFor(0)[0]).toContain(
-        'was not wrapped in act',
-      );
-      expect(console.error.calls.argsFor(1)[0]).toContain(
-        'was not wrapped in act',
-      );
-    }
   });
 
   it('should not flush discrete events at the end of outermost batchedUpdates', async () => {
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index f5e33d789891c..d0992dce53d41 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -16,6 +16,8 @@ let container;
 
 jest.useRealTimers();
 
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
 function sleep(period) {
   return new Promise(resolve => {
     setTimeout(() => {
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
index 4338a7d5cd459..18055e7c738c7 100644
--- a/packages/react-reconciler/src/ReactFiberAct.new.js
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -8,7 +8,13 @@
  */
 
 import type {Fiber} from './ReactFiber.new';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
 import {warnsIfNotActing} from './ReactFiberHostConfig';
+import {ConcurrentMode} from './ReactTypeOfMode';
+
+const {ReactCurrentActQueue} = ReactSharedInternals;
 
 export function isActEnvironment(fiber: Fiber) {
   if (__DEV__) {
@@ -18,18 +24,31 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
-    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
-    // $FlowExpectedError - Flow doesn't know about jest
-    const jestIsDefined = typeof jest !== 'undefined';
-    return (
-      warnsIfNotActing &&
-      jestIsDefined &&
-      // Legacy mode 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.
-      isReactActEnvironmentGlobal !== false
-    );
+    if (fiber.mode & ConcurrentMode) {
+      if (
+        !isReactActEnvironmentGlobal &&
+        ReactCurrentActQueue.current !== null
+      ) {
+        // TODO: Include link to relevant documentation page.
+        console.error(
+          'The current testing environment is not configured to support ' +
+            'act(...)',
+        );
+      }
+      return isReactActEnvironmentGlobal;
+    } else {
+      // 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.
+      // $FlowExpectedError - Flow doesn't know about jest
+      const jestIsDefined = typeof jest !== 'undefined';
+      return (
+        warnsIfNotActing &&
+        jestIsDefined &&
+        isReactActEnvironmentGlobal !== false
+      );
+    }
   }
   return false;
 }
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
index e477024a858f8..ddae518dcb631 100644
--- a/packages/react-reconciler/src/ReactFiberAct.old.js
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -8,7 +8,13 @@
  */
 
 import type {Fiber} from './ReactFiber.old';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
 import {warnsIfNotActing} from './ReactFiberHostConfig';
+import {ConcurrentMode} from './ReactTypeOfMode';
+
+const {ReactCurrentActQueue} = ReactSharedInternals;
 
 export function isActEnvironment(fiber: Fiber) {
   if (__DEV__) {
@@ -18,18 +24,31 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
-    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
-    // $FlowExpectedError - Flow doesn't know about jest
-    const jestIsDefined = typeof jest !== 'undefined';
-    return (
-      warnsIfNotActing &&
-      jestIsDefined &&
-      // Legacy mode 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.
-      isReactActEnvironmentGlobal !== false
-    );
+    if (fiber.mode & ConcurrentMode) {
+      if (
+        !isReactActEnvironmentGlobal &&
+        ReactCurrentActQueue.current !== null
+      ) {
+        // TODO: Include link to relevant documentation page.
+        console.error(
+          'The current testing environment is not configured to support ' +
+            'act(...)',
+        );
+      }
+      return isReactActEnvironmentGlobal;
+    } else {
+      // 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.
+      // $FlowExpectedError - Flow doesn't know about jest
+      const jestIsDefined = typeof jest !== 'undefined';
+      return (
+        warnsIfNotActing &&
+        jestIsDefined &&
+        isReactActEnvironmentGlobal !== false
+      );
+    }
   }
   return false;
 }
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 94431b435054e..ee93b3f992994 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -19,6 +19,8 @@ describe('DebugTracing', () => {
   const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000';
   const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   beforeEach(() => {
     jest.resetModules();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
new file mode 100644
index 0000000000000..058e01b1fe060
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+let React;
+let Scheduler;
+let ReactNoop;
+let useState;
+let act;
+
+// These tests are mostly concerned with concurrent roots. The legacy root
+// behavior is covered by other older test suites and is unchanged from
+// React 17.
+describe('act warnings', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    Scheduler = require('scheduler');
+    ReactNoop = require('react-noop-renderer');
+    act = React.unstable_act;
+    useState = React.useState;
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
+  function withActEnvironment(value, scope) {
+    const prevValue = global.IS_REACT_ACT_ENVIRONMENT;
+    global.IS_REACT_ACT_ENVIRONMENT = value;
+    try {
+      return scope();
+    } finally {
+      global.IS_REACT_ACT_ENVIRONMENT = prevValue;
+    }
+  }
+
+  test('warns about unwrapped updates only if environment flag is enabled', () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    expect(Scheduler).toFlushAndYield([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Default behavior. Flag is undefined. No warning.
+    expect(global.IS_REACT_ACT_ENVIRONMENT).toBe(undefined);
+    setState(1);
+    expect(Scheduler).toFlushAndYield([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Flag is true. Warn.
+    withActEnvironment(true, () => {
+      expect(() => setState(2)).toErrorDev(
+        'An update to App inside a test was not wrapped in act',
+      );
+      expect(Scheduler).toFlushAndYield([2]);
+      expect(root).toMatchRenderedOutput('2');
+    });
+
+    // Flag is false. No warning.
+    withActEnvironment(false, () => {
+      setState(3);
+      expect(Scheduler).toFlushAndYield([3]);
+      expect(root).toMatchRenderedOutput('3');
+    });
+  });
+
+  // @gate __DEV__
+  test('act warns if the environment flag is not enabled', () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    expect(Scheduler).toFlushAndYield([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Default behavior. Flag is undefined. Warn.
+    expect(global.IS_REACT_ACT_ENVIRONMENT).toBe(undefined);
+    expect(() => {
+      act(() => {
+        setState(1);
+      });
+    }).toErrorDev(
+      'The current testing environment is not configured to support act(...)',
+      {withoutStack: true},
+    );
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Flag is true. Don't warn.
+    withActEnvironment(true, () => {
+      act(() => {
+        setState(2);
+      });
+      expect(Scheduler).toHaveYielded([2]);
+      expect(root).toMatchRenderedOutput('2');
+    });
+
+    // Flag is false. Warn.
+    withActEnvironment(false, () => {
+      expect(() => {
+        act(() => {
+          setState(1);
+        });
+      }).toErrorDev(
+        'The current testing environment is not configured to support act(...)',
+        {withoutStack: true},
+      );
+      expect(Scheduler).toHaveYielded([1]);
+      expect(root).toMatchRenderedOutput('1');
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index 09fdb95b01e6c..13ca3988b2a71 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -21,6 +21,8 @@ describe('SchedulingProfiler labels', () => {
   let featureDetectionMarkName = null;
   let marks;
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   function polyfillJSDomUserTiming() {
     featureDetectionMarkName = null;
 

From b1acff0cc27a4c9844cb8049fae2ec6576a0f956 Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Mon, 18 Oct 2021 16:23:43 -0700
Subject: [PATCH 044/109] Enable cache in test renderer (#22580)

---
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index be60bcfbddb77..043ac7da254b9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = true;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;

From 2af4a79333108f59600970ef23e2614c3a5324e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 18 Oct 2021 20:44:34 -0400
Subject: [PATCH 045/109] Hydrate using SuspenseComponent as the parent
 (#22582)

* Add a failing test for Suspense hydration

* Include salazarm's changes to the test

* The hydration parent of a suspense boundary should be the boundary itself

This eventually got set when we popped back out of its children but it
doesn't start out that way.

This fixes it so that the boundary parent is always the suspense boundary.

* We now need to log errors with a suspense boundary as a parent

For now, we just log this with commentNode.parentNode as the parent for
purposes of the error message.

* Make a special getFirstHydratableChildWithinSuspenseInstance

We currently call getNextHydratableSibling but conceptually it's the child
of the boundary. It just happens to be that when we use comment nodes, we
need to call nextSibling in the DOM.

This makes this separation a bit clearer.

* Sync old fork

Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 ...DOMServerPartialHydration-test.internal.js | 58 ++++++++++++++
 .../src/client/ReactDOMHostConfig.js          | 74 +++++++++++++++--
 .../ReactFiberHostConfigWithNoHydration.js    | 14 +++-
 .../src/ReactFiberHydrationContext.new.js     | 80 ++++++++++++++++---
 .../src/ReactFiberHydrationContext.old.js     | 80 ++++++++++++++++---
 .../src/forks/ReactFiberHostConfig.custom.js  | 28 +++++--
 6 files changed, 293 insertions(+), 41 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index b1a88868b3389..4b647e00032bc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -160,6 +160,64 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
+  it('can hydrate siblings of a suspended component without errors', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+    function Child() {
+      if (suspend) {
+        throw promise;
+      } else {
+        return 'Hello';
+      }
+    }
+
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+          <Suspense fallback="Loading...">
+            <div>Hello</div>
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    // First we render the final HTML. With the streaming renderer
+    // this may have suspense points on the server but here we want
+    // to test the completed HTML. Don't suspend on the server.
+    suspend = false;
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    expect(container.textContent).toBe('HelloHello');
+
+    // On the client we don't have all data yet but we want to start
+    // hydrating anyway.
+    suspend = true;
+    ReactDOM.hydrateRoot(container, <App />);
+    expect(() => {
+      Scheduler.unstable_flushAll();
+    }).toErrorDev(
+      // TODO: This error should not be logged in this case. It's a false positive.
+      'Did not expect server HTML to contain the text node "Hello" in <div>.',
+    );
+    jest.runAllTimers();
+
+    // Expect the server-generated HTML to stay intact.
+    expect(container.textContent).toBe('HelloHello');
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+    // Hydration should not change anything.
+    expect(container.textContent).toBe('HelloHello');
+  });
+
   it('calls the hydration callbacks after hydration or deletion', async () => {
     let suspend = false;
     let resolve;
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 74877c1591e75..79b534d1e1812 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -764,11 +764,23 @@ export function getNextHydratableSibling(
 }
 
 export function getFirstHydratableChild(
-  parentInstance: Container | Instance,
+  parentInstance: Instance,
 ): null | HydratableInstance {
   return getNextHydratable(parentInstance.firstChild);
 }
 
+export function getFirstHydratableChildWithinContainer(
+  parentContainer: Container,
+): null | HydratableInstance {
+  return getNextHydratable(parentContainer.firstChild);
+}
+
+export function getFirstHydratableChildWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+): null | HydratableInstance {
+  return getNextHydratable(parentInstance.nextSibling);
+}
+
 export function hydrateInstance(
   instance: Instance,
   type: string,
@@ -917,7 +929,7 @@ export function didNotMatchHydratedTextInstance(
   }
 }
 
-export function didNotHydrateContainerInstance(
+export function didNotHydrateInstanceWithinContainer(
   parentContainer: Container,
   instance: HydratableInstance,
 ) {
@@ -932,6 +944,25 @@ export function didNotHydrateContainerInstance(
   }
 }
 
+export function didNotHydrateInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  instance: HydratableInstance,
+) {
+  if (__DEV__) {
+    // $FlowFixMe: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null) {
+      if (instance.nodeType === ELEMENT_NODE) {
+        warnForDeletedHydratableElement(parentNode, (instance: any));
+      } else if (instance.nodeType === COMMENT_NODE) {
+        // TODO: warnForDeletedHydratableSuspenseBoundary
+      } else {
+        warnForDeletedHydratableText(parentNode, (instance: any));
+      }
+    }
+  }
+}
+
 export function didNotHydrateInstance(
   parentType: string,
   parentProps: Props,
@@ -949,7 +980,7 @@ export function didNotHydrateInstance(
   }
 }
 
-export function didNotFindHydratableContainerInstance(
+export function didNotFindHydratableInstanceWithinContainer(
   parentContainer: Container,
   type: string,
   props: Props,
@@ -959,7 +990,7 @@ export function didNotFindHydratableContainerInstance(
   }
 }
 
-export function didNotFindHydratableContainerTextInstance(
+export function didNotFindHydratableTextInstanceWithinContainer(
   parentContainer: Container,
   text: string,
 ) {
@@ -968,7 +999,7 @@ export function didNotFindHydratableContainerTextInstance(
   }
 }
 
-export function didNotFindHydratableContainerSuspenseInstance(
+export function didNotFindHydratableSuspenseInstanceWithinContainer(
   parentContainer: Container,
 ) {
   if (__DEV__) {
@@ -976,6 +1007,39 @@ export function didNotFindHydratableContainerSuspenseInstance(
   }
 }
 
+export function didNotFindHydratableInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  type: string,
+  props: Props,
+) {
+  if (__DEV__) {
+    // $FlowFixMe: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null)
+      warnForInsertedHydratedElement(parentNode, type, props);
+  }
+}
+
+export function didNotFindHydratableTextInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  text: string,
+) {
+  if (__DEV__) {
+    // $FlowFixMe: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null) warnForInsertedHydratedText(parentNode, text);
+  }
+}
+
+export function didNotFindHydratableSuspenseInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+) {
+  if (__DEV__) {
+    // const parentNode: Element | Document | null = parentInstance.parentNode;
+    // TODO: warnForInsertedHydratedSuspense(parentNode);
+  }
+}
+
 export function didNotFindHydratableInstance(
   parentType: string,
   parentProps: Props,
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index b95fd52d189b5..1392cf8a26083 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -29,6 +29,8 @@ export const isSuspenseInstanceFallback = shim;
 export const registerSuspenseInstanceRetry = shim;
 export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
+export const getFirstHydratableChildWithinContainer = shim;
+export const getFirstHydratableChildWithinSuspenseInstance = shim;
 export const hydrateInstance = shim;
 export const hydrateTextInstance = shim;
 export const hydrateSuspenseInstance = shim;
@@ -40,11 +42,15 @@ export const clearSuspenseBoundaryFromContainer = shim;
 export const shouldDeleteUnhydratedTailInstances = shim;
 export const didNotMatchHydratedContainerTextInstance = shim;
 export const didNotMatchHydratedTextInstance = shim;
-export const didNotHydrateContainerInstance = shim;
+export const didNotHydrateInstanceWithinContainer = shim;
+export const didNotHydrateInstanceWithinSuspenseInstance = shim;
 export const didNotHydrateInstance = shim;
-export const didNotFindHydratableContainerInstance = shim;
-export const didNotFindHydratableContainerTextInstance = shim;
-export const didNotFindHydratableContainerSuspenseInstance = shim;
+export const didNotFindHydratableInstanceWithinContainer = shim;
+export const didNotFindHydratableTextInstanceWithinContainer = shim;
+export const didNotFindHydratableSuspenseInstanceWithinContainer = shim;
+export const didNotFindHydratableInstanceWithinSuspenseInstance = shim;
+export const didNotFindHydratableTextInstanceWithinSuspenseInstance = shim;
+export const didNotFindHydratableSuspenseInstanceWithinSuspenseInstance = shim;
 export const didNotFindHydratableInstance = shim;
 export const didNotFindHydratableTextInstance = shim;
 export const didNotFindHydratableSuspenseInstance = shim;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index f694d8407ecdf..6aad7f03339f5 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -38,6 +38,8 @@ import {
   canHydrateSuspenseInstance,
   getNextHydratableSibling,
   getFirstHydratableChild,
+  getFirstHydratableChildWithinContainer,
+  getFirstHydratableChildWithinSuspenseInstance,
   hydrateInstance,
   hydrateTextInstance,
   hydrateSuspenseInstance,
@@ -45,11 +47,15 @@ import {
   shouldDeleteUnhydratedTailInstances,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
-  didNotHydrateContainerInstance,
+  didNotHydrateInstanceWithinContainer,
+  didNotHydrateInstanceWithinSuspenseInstance,
   didNotHydrateInstance,
-  didNotFindHydratableContainerInstance,
-  didNotFindHydratableContainerTextInstance,
-  didNotFindHydratableContainerSuspenseInstance,
+  didNotFindHydratableInstanceWithinContainer,
+  didNotFindHydratableTextInstanceWithinContainer,
+  didNotFindHydratableSuspenseInstanceWithinContainer,
+  didNotFindHydratableInstanceWithinSuspenseInstance,
+  didNotFindHydratableTextInstanceWithinSuspenseInstance,
+  didNotFindHydratableSuspenseInstanceWithinSuspenseInstance,
   didNotFindHydratableInstance,
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
@@ -78,8 +84,10 @@ function enterHydrationState(fiber: Fiber): boolean {
     return false;
   }
 
-  const parentInstance = fiber.stateNode.containerInfo;
-  nextHydratableInstance = getFirstHydratableChild(parentInstance);
+  const parentInstance: Container = fiber.stateNode.containerInfo;
+  nextHydratableInstance = getFirstHydratableChildWithinContainer(
+    parentInstance,
+  );
   hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
@@ -92,8 +100,10 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   if (!supportsHydration) {
     return false;
   }
-  nextHydratableInstance = getNextHydratableSibling(suspenseInstance);
-  popToNextHostParent(fiber);
+  nextHydratableInstance = getFirstHydratableChildWithinSuspenseInstance(
+    suspenseInstance,
+  );
+  hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
 }
@@ -105,7 +115,7 @@ function deleteHydratableInstance(
   if (__DEV__) {
     switch (returnFiber.tag) {
       case HostRoot:
-        didNotHydrateContainerInstance(
+        didNotHydrateInstanceWithinContainer(
           returnFiber.stateNode.containerInfo,
           instance,
         );
@@ -118,6 +128,14 @@ function deleteHydratableInstance(
           instance,
         );
         break;
+      case SuspenseComponent:
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        if (suspenseState.dehydrated !== null)
+          didNotHydrateInstanceWithinSuspenseInstance(
+            suspenseState.dehydrated,
+            instance,
+          );
+        break;
     }
   }
 
@@ -144,14 +162,23 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
           case HostComponent:
             const type = fiber.type;
             const props = fiber.pendingProps;
-            didNotFindHydratableContainerInstance(parentContainer, type, props);
+            didNotFindHydratableInstanceWithinContainer(
+              parentContainer,
+              type,
+              props,
+            );
             break;
           case HostText:
             const text = fiber.pendingProps;
-            didNotFindHydratableContainerTextInstance(parentContainer, text);
+            didNotFindHydratableTextInstanceWithinContainer(
+              parentContainer,
+              text,
+            );
             break;
           case SuspenseComponent:
-            didNotFindHydratableContainerSuspenseInstance(parentContainer);
+            didNotFindHydratableSuspenseInstanceWithinContainer(
+              parentContainer,
+            );
             break;
         }
         break;
@@ -191,6 +218,35 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
         }
         break;
       }
+      case SuspenseComponent: {
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        const parentInstance = suspenseState.dehydrated;
+        if (parentInstance !== null)
+          switch (fiber.tag) {
+            case HostComponent:
+              const type = fiber.type;
+              const props = fiber.pendingProps;
+              didNotFindHydratableInstanceWithinSuspenseInstance(
+                parentInstance,
+                type,
+                props,
+              );
+              break;
+            case HostText:
+              const text = fiber.pendingProps;
+              didNotFindHydratableTextInstanceWithinSuspenseInstance(
+                parentInstance,
+                text,
+              );
+              break;
+            case SuspenseComponent:
+              didNotFindHydratableSuspenseInstanceWithinSuspenseInstance(
+                parentInstance,
+              );
+              break;
+          }
+        break;
+      }
       default:
         return;
     }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 3918c014ca146..fd0dd8e99a5b0 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -38,6 +38,8 @@ import {
   canHydrateSuspenseInstance,
   getNextHydratableSibling,
   getFirstHydratableChild,
+  getFirstHydratableChildWithinContainer,
+  getFirstHydratableChildWithinSuspenseInstance,
   hydrateInstance,
   hydrateTextInstance,
   hydrateSuspenseInstance,
@@ -45,11 +47,15 @@ import {
   shouldDeleteUnhydratedTailInstances,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
-  didNotHydrateContainerInstance,
+  didNotHydrateInstanceWithinContainer,
+  didNotHydrateInstanceWithinSuspenseInstance,
   didNotHydrateInstance,
-  didNotFindHydratableContainerInstance,
-  didNotFindHydratableContainerTextInstance,
-  didNotFindHydratableContainerSuspenseInstance,
+  didNotFindHydratableInstanceWithinContainer,
+  didNotFindHydratableTextInstanceWithinContainer,
+  didNotFindHydratableSuspenseInstanceWithinContainer,
+  didNotFindHydratableInstanceWithinSuspenseInstance,
+  didNotFindHydratableTextInstanceWithinSuspenseInstance,
+  didNotFindHydratableSuspenseInstanceWithinSuspenseInstance,
   didNotFindHydratableInstance,
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
@@ -78,8 +84,10 @@ function enterHydrationState(fiber: Fiber): boolean {
     return false;
   }
 
-  const parentInstance = fiber.stateNode.containerInfo;
-  nextHydratableInstance = getFirstHydratableChild(parentInstance);
+  const parentInstance: Container = fiber.stateNode.containerInfo;
+  nextHydratableInstance = getFirstHydratableChildWithinContainer(
+    parentInstance,
+  );
   hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
@@ -92,8 +100,10 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   if (!supportsHydration) {
     return false;
   }
-  nextHydratableInstance = getNextHydratableSibling(suspenseInstance);
-  popToNextHostParent(fiber);
+  nextHydratableInstance = getFirstHydratableChildWithinSuspenseInstance(
+    suspenseInstance,
+  );
+  hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
 }
@@ -105,7 +115,7 @@ function deleteHydratableInstance(
   if (__DEV__) {
     switch (returnFiber.tag) {
       case HostRoot:
-        didNotHydrateContainerInstance(
+        didNotHydrateInstanceWithinContainer(
           returnFiber.stateNode.containerInfo,
           instance,
         );
@@ -118,6 +128,14 @@ function deleteHydratableInstance(
           instance,
         );
         break;
+      case SuspenseComponent:
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        if (suspenseState.dehydrated !== null)
+          didNotHydrateInstanceWithinSuspenseInstance(
+            suspenseState.dehydrated,
+            instance,
+          );
+        break;
     }
   }
 
@@ -144,14 +162,23 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
           case HostComponent:
             const type = fiber.type;
             const props = fiber.pendingProps;
-            didNotFindHydratableContainerInstance(parentContainer, type, props);
+            didNotFindHydratableInstanceWithinContainer(
+              parentContainer,
+              type,
+              props,
+            );
             break;
           case HostText:
             const text = fiber.pendingProps;
-            didNotFindHydratableContainerTextInstance(parentContainer, text);
+            didNotFindHydratableTextInstanceWithinContainer(
+              parentContainer,
+              text,
+            );
             break;
           case SuspenseComponent:
-            didNotFindHydratableContainerSuspenseInstance(parentContainer);
+            didNotFindHydratableSuspenseInstanceWithinContainer(
+              parentContainer,
+            );
             break;
         }
         break;
@@ -191,6 +218,35 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
         }
         break;
       }
+      case SuspenseComponent: {
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        const parentInstance = suspenseState.dehydrated;
+        if (parentInstance !== null)
+          switch (fiber.tag) {
+            case HostComponent:
+              const type = fiber.type;
+              const props = fiber.pendingProps;
+              didNotFindHydratableInstanceWithinSuspenseInstance(
+                parentInstance,
+                type,
+                props,
+              );
+              break;
+            case HostText:
+              const text = fiber.pendingProps;
+              didNotFindHydratableTextInstanceWithinSuspenseInstance(
+                parentInstance,
+                text,
+              );
+              break;
+            case SuspenseComponent:
+              didNotFindHydratableSuspenseInstanceWithinSuspenseInstance(
+                parentInstance,
+              );
+              break;
+          }
+        break;
+      }
       default:
         return;
     }
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 1cc10a78cb013..29d4fd7e79893 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -150,6 +150,10 @@ export const registerSuspenseInstanceRetry =
   $$$hostConfig.registerSuspenseInstanceRetry;
 export const getNextHydratableSibling = $$$hostConfig.getNextHydratableSibling;
 export const getFirstHydratableChild = $$$hostConfig.getFirstHydratableChild;
+export const getFirstHydratableChildWithinContainer =
+  $$$hostConfig.getFirstHydratableChildWithinContainer;
+export const getFirstHydratableChildWithinSuspenseInstance =
+  $$$hostConfig.getFirstHydratableChildWithinSuspenseInstance;
 export const hydrateInstance = $$$hostConfig.hydrateInstance;
 export const hydrateTextInstance = $$$hostConfig.hydrateTextInstance;
 export const hydrateSuspenseInstance = $$$hostConfig.hydrateSuspenseInstance;
@@ -167,15 +171,23 @@ export const didNotMatchHydratedContainerTextInstance =
   $$$hostConfig.didNotMatchHydratedContainerTextInstance;
 export const didNotMatchHydratedTextInstance =
   $$$hostConfig.didNotMatchHydratedTextInstance;
-export const didNotHydrateContainerInstance =
-  $$$hostConfig.didNotHydrateContainerInstance;
+export const didNotHydrateInstanceWithinContainer =
+  $$$hostConfig.didNotHydrateInstanceWithinContainer;
+export const didNotHydrateInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotHydrateInstanceWithinSuspenseInstance;
 export const didNotHydrateInstance = $$$hostConfig.didNotHydrateInstance;
-export const didNotFindHydratableContainerInstance =
-  $$$hostConfig.didNotFindHydratableContainerInstance;
-export const didNotFindHydratableContainerTextInstance =
-  $$$hostConfig.didNotFindHydratableContainerTextInstance;
-export const didNotFindHydratableContainerSuspenseInstance =
-  $$$hostConfig.didNotFindHydratableContainerSuspenseInstance;
+export const didNotFindHydratableInstanceWithinContainer =
+  $$$hostConfig.didNotFindHydratableInstanceWithinContainer;
+export const didNotFindHydratableTextInstanceWithinContainer =
+  $$$hostConfig.didNotFindHydratableTextInstanceWithinContainer;
+export const didNotFindHydratableSuspenseInstanceWithinContainer =
+  $$$hostConfig.didNotFindHydratableSuspenseInstanceWithinContainer;
+export const didNotFindHydratableInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotFindHydratableInstanceWithinSuspenseInstance;
+export const didNotFindHydratableTextInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotFindHydratableTextInstanceWithinSuspenseInstance;
+export const didNotFindHydratableSuspenseInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotFindHydratableSuspenseInstanceWithinSuspenseInstance;
 export const didNotFindHydratableInstance =
   $$$hostConfig.didNotFindHydratableInstance;
 export const didNotFindHydratableTextInstance =

From 5b9d000c8aff1e9f8368ec3e03b9568c8852fe5e Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 19 Oct 2021 09:52:55 -0400
Subject: [PATCH 046/109] DevTools: Include Edge in browser name detection
 (#22584)

---
 .../react-devtools-extensions/src/utils.js    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
index 2c67e2cf047b4..ea2bd27ee992a 100644
--- a/packages/react-devtools-extensions/src/utils.js
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -2,12 +2,25 @@
 
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
+const IS_EDGE = navigator.userAgent.indexOf('Edg') >= 0;
+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
+const IS_CHROME = IS_EDGE === false && IS_FIREFOX === false;
 
-export type BrowserName = 'Chrome' | 'Firefox';
+export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';
 
 export function getBrowserName(): BrowserName {
-  return IS_CHROME ? 'Chrome' : 'Firefox';
+  if (IS_EDGE) {
+    return 'Edge';
+  }
+  if (IS_FIREFOX) {
+    return 'Firefox';
+  }
+  if (IS_CHROME) {
+    return 'Chrome';
+  }
+  throw new Error(
+    'Expected browser name to be one of Chrome, Edge or Firefox.',
+  );
 }
 
 export function getBrowserTheme(): BrowserTheme {

From b81de8633218b0efde8e534374db08eea9116473 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 19 Oct 2021 10:55:39 -0400
Subject: [PATCH 047/109] React DevTools 4.20.0 -> 4.20.1 (#22583)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 ++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 05192be2d0448..5f26b46c970fd 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index fdbf43719689e..21babe5e90691 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.20.0",
-  "version_name": "4.20.0",
+  "version": "4.20.1",
+  "version_name": "4.20.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index b5fd17dcb26fc..7dab50d1ba25f 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.20.0",
-  "version_name": "4.20.0",
+  "version": "4.20.1",
+  "version_name": "4.20.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 4da3c73a5d3c0..d83f2f3f50a2a 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 16564ebc79b2a..be6e005a07ae8 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index fb56eb8c0861e..6491132afa35b 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 1f42ca57c1b69..0e0aa89631937 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.20.1 (October 19, 2021)
+
+#### Bugfix
+* Only show DevTools warning about unrecognized build in Chrome ([@jstejada](https://github.com/jstejada) in [#22571](https://github.com/facebook/react/pull/22571))
+* DevTools: Include Edge in browser name detection ([@jstejada](https://github.com/jstejada) in [#22584](https://github.com/facebook/react/pull/22584))
+
 ## 4.20.0 (October 15, 2021)
 
 #### Features
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 16b47c5e0f204..b22ef0bab4334 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.20.0",
+    "react-devtools-core": "4.20.1",
     "update-notifier": "^2.1.0"
   }
 }

From 02f411578a8e58af8ec28e385f6b0dcb768cdc41 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Oct 2021 17:32:54 -0400
Subject: [PATCH 048/109] Upgrade useInsertionEffect to stable (#22589)

@huozhi tried this out and says it's working as expected. I think we
can go ahead and move this into the stable channel, so that it is
available in the React 18 alpha releases.
---
 .../src/__tests__/ReactHooksInspectionIntegration-test.js  | 3 +--
 .../src/__tests__/ReactDOMServerIntegrationHooks-test.js   | 3 +--
 .../src/__tests__/ReactHooksWithNoopRenderer-test.js       | 7 +------
 packages/react/index.classic.fb.js                         | 2 +-
 packages/react/index.experimental.js                       | 2 +-
 packages/react/index.js                                    | 2 +-
 packages/react/index.modern.fb.js                          | 2 +-
 packages/react/index.stable.js                             | 1 +
 packages/react/src/React.js                                | 2 +-
 9 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 013caecb11ba0..6937efd631572 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -268,9 +268,8 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental || www
   it('should inspect the current state of all stateful hooks, including useInsertionEffect', () => {
-    const useInsertionEffect = React.unstable_useInsertionEffect;
+    const useInsertionEffect = React.useInsertionEffect;
     const outsideRef = React.createRef();
     function effect() {}
     function Foo(props) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index daf3453314183..ba2b22437bc1b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -55,7 +55,7 @@ function initModules() {
   useRef = React.useRef;
   useDebugValue = React.useDebugValue;
   useImperativeHandle = React.useImperativeHandle;
-  useInsertionEffect = React.unstable_useInsertionEffect;
+  useInsertionEffect = React.useInsertionEffect;
   useLayoutEffect = React.useLayoutEffect;
   useOpaqueIdentifier = React.unstable_useOpaqueIdentifier;
   forwardRef = React.forwardRef;
@@ -641,7 +641,6 @@ describe('ReactDOMServerHooks', () => {
     });
   });
   describe('useInsertionEffect', () => {
-    // @gate experimental || www
     it('should warn when invoked during render', async () => {
       function Counter() {
         useInsertionEffect(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index f56577e8ffea9..bcd96d732e09e 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -47,7 +47,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     useState = React.useState;
     useReducer = React.useReducer;
     useEffect = React.useEffect;
-    useInsertionEffect = React.unstable_useInsertionEffect;
+    useInsertionEffect = React.useInsertionEffect;
     useLayoutEffect = React.useLayoutEffect;
     useCallback = React.useCallback;
     useMemo = React.useMemo;
@@ -2685,7 +2685,6 @@ describe('ReactHooksWithNoopRenderer', () => {
   });
 
   describe('useInsertionEffect', () => {
-    // @gate experimental || www
     it('fires insertion effects after snapshots on update', () => {
       function CounterA(props) {
         useInsertionEffect(() => {
@@ -2745,7 +2744,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    // @gate experimental || www
     it('fires insertion effects before layout effects', () => {
       let committedText = '(empty)';
 
@@ -2808,7 +2806,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toHaveYielded(['Destroy passive [current: 0]']);
     });
 
-    // @gate experimental || www
     it('force flushes passive effects before firing new insertion effects', () => {
       let committedText = '(empty)';
 
@@ -2876,7 +2873,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
     });
 
-    // @gate experimental || www
     it('fires all insertion effects (interleaved) before firing any layout effects', () => {
       let committedA = '(empty)';
       let committedB = '(empty)';
@@ -3043,7 +3039,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    // @gate experimental || www
     it('assumes insertion effect destroy function is either a function or undefined', () => {
       function App(props) {
         useInsertionEffect(() => {
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 7f8abc863157a..5335c4053a70e 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -48,7 +48,7 @@ export {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index a0a9bbaca216e..19490fb214c97 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -42,7 +42,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/index.js b/packages/react/index.js
index 1b4552a90f5d8..b4a3bf6e11b81 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -67,7 +67,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 819d5fe90afd3..2b847d2336312 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -46,7 +46,7 @@ export {
   useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
   useImperativeHandle,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 008875e4577e5..4e4682b8fc29f 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -36,6 +36,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 541e7a35d3d3e..2246d32db662e 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -92,7 +92,7 @@ export {
   useEffect,
   useImperativeHandle,
   useDebugValue,
-  useInsertionEffect as unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,

From fe0356ce2baa0b6569de6cbae6d54166bebb1fdb Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 19 Oct 2021 17:43:59 -0400
Subject: [PATCH 049/109] DevTools: Fix passing extensionId in evaled
 postMessage calls (#22590)

---
 .../react-devtools-extensions/src/main.js     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 5203b511035d5..60ed0fcb1a9ec 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -216,7 +216,7 @@ function createPanelIfReactLoaded() {
           chrome.devtools.inspectedWindow.eval(
             `window.postMessage({
                source: 'react-devtools-inject-backend',
-               extensionId: "${CURRENT_EXTENSION_ID}"
+               extensionId: "${CURRENT_EXTENSION_ID}",
              }, '*');`,
             function(response, evalError) {
               if (evalError) {
@@ -361,15 +361,15 @@ function createPanelIfReactLoaded() {
               chrome.runtime.onMessage.addListener(onPortMessage);
 
               chrome.devtools.inspectedWindow.eval(`
-              window.postMessage({
-                source: 'react-devtools-extension',
-                extensionId: "${CURRENT_EXTENSION_ID}"
-                payload: {
-                  type: 'fetch-file-with-cache',
-                  url: "${url}",
-                },
-              });
-            `);
+                window.postMessage({
+                  source: 'react-devtools-extension',
+                  extensionId: "${CURRENT_EXTENSION_ID}",
+                  payload: {
+                    type: 'fetch-file-with-cache',
+                    url: "${url}",
+                  },
+                }, '*');
+              `);
             };
 
             // Fetching files from the extension won't make use of the network cache

From 34e4c9756121ef89d4b31e75e590ebdd3f05587b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 19 Oct 2021 19:28:01 -0400
Subject: [PATCH 050/109] Clear extra nodes if there's a hydration mismatch
 within a suspense boundary  (#22592)

* Clear extra nodes if there's a mismatch within a suspense boundary

This usually happens when we exit out a DOM node but a suspense boundary
is a virtual DOM node and we didn't do it in that case because we took a
short cut by calling resetHydrationState directly since we know we won't
need to pop.

* Tighten up the types of getFirstHydratableChild

We currently call getFirstHydratableChild to step into the children of
a suspense boundary. This can be a text node or a suspense boundary
which isn't compatible with getFirstHydratableChild, and we cheat the type.

This accidentally works because .firstChild always returns null on those
nodes in the DOM.

This just makes that explicit.
---
 ...DOMServerPartialHydration-test.internal.js | 58 +++++++++++++++++++
 .../src/client/ReactDOMHostConfig.js          |  3 +
 .../src/ReactFiberCompleteWork.new.js         | 11 ++--
 .../src/ReactFiberCompleteWork.old.js         | 11 ++--
 .../src/ReactFiberHydrationContext.new.js     | 17 ++++--
 .../src/ReactFiberHydrationContext.old.js     | 17 ++++--
 6 files changed, 93 insertions(+), 24 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 4b647e00032bc..505a100df3aa6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -308,6 +308,64 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(deleted.length).toBe(1);
   });
 
+  it('hydrates an empty suspense boundary', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading..." />
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    ReactDOM.hydrateRoot(container, <App />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(container.innerHTML).toContain('<div>Sibling</div>');
+  });
+
+  it('recovers when server rendered additional nodes', async () => {
+    const ref = React.createRef();
+    function App({hasB}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <span ref={ref}>A</span>
+            {hasB ? <span>B</span> : null}
+          </Suspense>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    const span = container.getElementsByTagName('span')[0];
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).toContain('<span>B</span>');
+    expect(ref.current).toBe(null);
+
+    ReactDOM.hydrateRoot(container, <App hasB={false} />);
+    expect(() => {
+      Scheduler.unstable_flushAll();
+    }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+    jest.runAllTimers();
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    expect(ref.current).toBe(span);
+  });
+
   it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
     let suspend = false;
     const promise = new Promise(() => {});
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 79b534d1e1812..8a5417ae49272 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -751,6 +751,9 @@ function getNextHydratable(node) {
         ) {
           break;
         }
+        if (nodeData === SUSPENSE_END_DATA) {
+          return null;
+        }
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index a15702985e9a0..dadec516c3a4b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1007,16 +1007,16 @@ function completeWork(
 
       if (enableSuspenseServerRenderer) {
         if (nextState !== null && nextState.dehydrated !== null) {
+          // We might be inside a hydration state the first time we're picking up this
+          // Suspense boundary, and also after we've reentered it for further hydration.
+          const wasHydrated = popHydrationState(workInProgress);
           if (current === null) {
-            const wasHydrated = popHydrationState(workInProgress);
-
             if (!wasHydrated) {
               throw new Error(
                 'A dehydrated suspense component was completed without a hydrated node. ' +
                   'This is probably a bug in React.',
               );
             }
-
             prepareToHydrateHostSuspenseInstance(workInProgress);
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
@@ -1034,9 +1034,8 @@ function completeWork(
             }
             return null;
           } else {
-            // We should never have been in a hydration state if we didn't have a current.
-            // However, in some of those paths, we might have reentered a hydration state
-            // and then we might be inside a hydration state. In that case, we'll need to exit out of it.
+            // We might have reentered this boundary to hydrate it. If so, we need to reset the hydration
+            // state since we're now exiting out of it. popHydrationState doesn't do that for us.
             resetHydrationState();
             if ((workInProgress.flags & DidCapture) === NoFlags) {
               // This boundary did not suspend so it's now hydrated and unsuspended.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 89b8b980bc3e3..06fbf5abff50f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1007,16 +1007,16 @@ function completeWork(
 
       if (enableSuspenseServerRenderer) {
         if (nextState !== null && nextState.dehydrated !== null) {
+          // We might be inside a hydration state the first time we're picking up this
+          // Suspense boundary, and also after we've reentered it for further hydration.
+          const wasHydrated = popHydrationState(workInProgress);
           if (current === null) {
-            const wasHydrated = popHydrationState(workInProgress);
-
             if (!wasHydrated) {
               throw new Error(
                 'A dehydrated suspense component was completed without a hydrated node. ' +
                   'This is probably a bug in React.',
               );
             }
-
             prepareToHydrateHostSuspenseInstance(workInProgress);
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
@@ -1034,9 +1034,8 @@ function completeWork(
             }
             return null;
           } else {
-            // We should never have been in a hydration state if we didn't have a current.
-            // However, in some of those paths, we might have reentered a hydration state
-            // and then we might be inside a hydration state. In that case, we'll need to exit out of it.
+            // We might have reentered this boundary to hydrate it. If so, we need to reset the hydration
+            // state since we're now exiting out of it. popHydrationState doesn't do that for us.
             resetHydrationState();
             if ((workInProgress.flags & DidCapture) === NoFlags) {
               // This boundary did not suspend so it's now hydrated and unsuspended.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 6aad7f03339f5..7275f1663cad8 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -261,6 +261,8 @@ function tryHydrate(fiber, nextInstance) {
       const instance = canHydrateInstance(nextInstance, type, props);
       if (instance !== null) {
         fiber.stateNode = (instance: Instance);
+        hydrationParentFiber = fiber;
+        nextHydratableInstance = getFirstHydratableChild(instance);
         return true;
       }
       return false;
@@ -270,6 +272,9 @@ function tryHydrate(fiber, nextInstance) {
       const textInstance = canHydrateTextInstance(nextInstance, text);
       if (textInstance !== null) {
         fiber.stateNode = (textInstance: TextInstance);
+        hydrationParentFiber = fiber;
+        // Text Instances don't have children so there's nothing to hydrate.
+        nextHydratableInstance = null;
         return true;
       }
       return false;
@@ -294,6 +299,10 @@ function tryHydrate(fiber, nextInstance) {
           );
           dehydratedFragment.return = fiber;
           fiber.child = dehydratedFragment;
+          hydrationParentFiber = fiber;
+          // While a Suspense Instance does have children, we won't step into
+          // it during the first pass. Instead, we'll reenter it later.
+          nextHydratableInstance = null;
           return true;
         }
       }
@@ -322,6 +331,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
     nextInstance = getNextHydratableSibling(firstAttemptedInstance);
+    const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
     if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
       // Nothing to hydrate. Make it an insertion.
       insertNonHydratedInstance((hydrationParentFiber: any), fiber);
@@ -333,13 +343,8 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // superfluous and we'll delete it. Since we can't eagerly delete it
     // we'll have to schedule a deletion. To do that, this node needs a dummy
     // fiber associated with it.
-    deleteHydratableInstance(
-      (hydrationParentFiber: any),
-      firstAttemptedInstance,
-    );
+    deleteHydratableInstance(prevHydrationParentFiber, firstAttemptedInstance);
   }
-  hydrationParentFiber = fiber;
-  nextHydratableInstance = getFirstHydratableChild((nextInstance: any));
 }
 
 function prepareToHydrateHostInstance(
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index fd0dd8e99a5b0..654de3f9a2894 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -261,6 +261,8 @@ function tryHydrate(fiber, nextInstance) {
       const instance = canHydrateInstance(nextInstance, type, props);
       if (instance !== null) {
         fiber.stateNode = (instance: Instance);
+        hydrationParentFiber = fiber;
+        nextHydratableInstance = getFirstHydratableChild(instance);
         return true;
       }
       return false;
@@ -270,6 +272,9 @@ function tryHydrate(fiber, nextInstance) {
       const textInstance = canHydrateTextInstance(nextInstance, text);
       if (textInstance !== null) {
         fiber.stateNode = (textInstance: TextInstance);
+        hydrationParentFiber = fiber;
+        // Text Instances don't have children so there's nothing to hydrate.
+        nextHydratableInstance = null;
         return true;
       }
       return false;
@@ -294,6 +299,10 @@ function tryHydrate(fiber, nextInstance) {
           );
           dehydratedFragment.return = fiber;
           fiber.child = dehydratedFragment;
+          hydrationParentFiber = fiber;
+          // While a Suspense Instance does have children, we won't step into
+          // it during the first pass. Instead, we'll reenter it later.
+          nextHydratableInstance = null;
           return true;
         }
       }
@@ -322,6 +331,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
     nextInstance = getNextHydratableSibling(firstAttemptedInstance);
+    const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
     if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
       // Nothing to hydrate. Make it an insertion.
       insertNonHydratedInstance((hydrationParentFiber: any), fiber);
@@ -333,13 +343,8 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // superfluous and we'll delete it. Since we can't eagerly delete it
     // we'll have to schedule a deletion. To do that, this node needs a dummy
     // fiber associated with it.
-    deleteHydratableInstance(
-      (hydrationParentFiber: any),
-      firstAttemptedInstance,
-    );
+    deleteHydratableInstance(prevHydrationParentFiber, firstAttemptedInstance);
   }
-  hydrationParentFiber = fiber;
-  nextHydratableInstance = getFirstHydratableChild((nextInstance: any));
 }
 
 function prepareToHydrateHostInstance(

From 3677c019af7251207dee41df7689859ab991a665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 19 Oct 2021 21:14:26 -0400
Subject: [PATCH 051/109] Support nonce option to be passed to inline scripts
 (#22593)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 38 ++++++++++++++++++-
 .../src/server/ReactDOMFizzServerBrowser.js   |  6 ++-
 .../src/server/ReactDOMFizzServerNode.js      |  6 ++-
 .../src/server/ReactDOMServerFormatConfig.js  | 28 ++++++++++----
 .../ReactDOMServerLegacyFormatConfig.js       |  4 +-
 5 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index cd0c87a1df3b2..ec3a0bfadaee4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -23,6 +23,7 @@ let PropTypes;
 let textCache;
 let document;
 let writable;
+let CSPnonce = null;
 let container;
 let buffer = '';
 let hasErrored = false;
@@ -91,7 +92,10 @@ describe('ReactDOMFizzServer', () => {
     fakeBody.innerHTML = bufferedContent;
     while (fakeBody.firstChild) {
       const node = fakeBody.firstChild;
-      if (node.nodeName === 'SCRIPT') {
+      if (
+        node.nodeName === 'SCRIPT' &&
+        (CSPnonce === null || node.getAttribute('nonce') === CSPnonce)
+      ) {
         const script = document.createElement('script');
         script.textContent = node.textContent;
         fakeBody.removeChild(node);
@@ -281,6 +285,38 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  it('should support nonce scripts', async () => {
+    CSPnonce = 'R4nd0m';
+    try {
+      let resolve;
+      const Lazy = React.lazy(() => {
+        return new Promise(r => {
+          resolve = r;
+        });
+      });
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          <div>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Lazy text="Hello" />
+            </Suspense>
+          </div>,
+          {nonce: 'R4nd0m'},
+        );
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+      await act(async () => {
+        resolve({default: Text});
+      });
+      expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+    } finally {
+      CSPnonce = null;
+    }
+  });
+
   // @gate experimental
   it('should client render a boundary if a lazy component rejects', async () => {
     let rejectComponent;
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index d238201247626..2865ef46b2574 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -26,6 +26,7 @@ import {
 type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
+  nonce?: string,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onCompleteShell?: () => void,
@@ -39,7 +40,10 @@ function renderToReadableStream(
 ): ReadableStream {
   const request = createRequest(
     children,
-    createResponseState(options ? options.identifierPrefix : undefined),
+    createResponseState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.nonce : undefined,
+    ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 4233a88e1fb94..fe532a32c3b50 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -31,6 +31,7 @@ function createDrainHandler(destination, request) {
 type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
+  nonce?: string,
   progressiveChunkSize?: number,
   onCompleteShell?: () => void,
   onCompleteAll?: () => void,
@@ -47,7 +48,10 @@ type Controls = {|
 function createRequestImpl(children: ReactNodeList, options: void | Options) {
   return createRequest(
     children,
-    createResponseState(options ? options.identifierPrefix : undefined),
+    createResponseState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.nonce : undefined,
+    ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 0c4b155bb881d..67d90f8513452 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -59,6 +59,7 @@ export const isPrimaryRenderer = true;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
+  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
@@ -71,12 +72,22 @@ export type ResponseState = {
   ...
 };
 
+const startInlineScript = stringToPrecomputedChunk('<script>');
+
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
+  nonce: string | void,
 ): ResponseState {
   const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
+  const inlineScriptWithNonce =
+    nonce === undefined
+      ? startInlineScript
+      : stringToPrecomputedChunk(
+          '<script nonce="' + escapeTextForBrowser(nonce) + '">',
+        );
   return {
+    startInlineScript: inlineScriptWithNonce,
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
@@ -1689,9 +1700,9 @@ const clientRenderFunction =
   'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
-  '<script>' + completeSegmentFunction + ';$RS("',
+  completeSegmentFunction + ';$RS("',
 );
-const completeSegmentScript1Partial = stringToPrecomputedChunk('<script>$RS("');
+const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
 const completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
 
@@ -1700,6 +1711,7 @@ export function writeCompletedSegmentInstruction(
   responseState: ResponseState,
   contentSegmentID: number,
 ): boolean {
+  writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentCompleteSegmentFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentCompleteSegmentFunction = true;
@@ -1718,11 +1730,9 @@ export function writeCompletedSegmentInstruction(
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
-  '<script>' + completeBoundaryFunction + ';$RC("',
-);
-const completeBoundaryScript1Partial = stringToPrecomputedChunk(
-  '<script>$RC("',
+  completeBoundaryFunction + ';$RC("',
 );
+const completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
 const completeBoundaryScript2 = stringToPrecomputedChunk('","');
 const completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
 
@@ -1732,6 +1742,7 @@ export function writeCompletedBoundaryInstruction(
   boundaryID: SuspenseBoundaryID,
   contentSegmentID: number,
 ): boolean {
+  writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentCompleteBoundaryFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentCompleteBoundaryFunction = true;
@@ -1756,9 +1767,9 @@ export function writeCompletedBoundaryInstruction(
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
-  '<script>' + clientRenderFunction + ';$RX("',
+  clientRenderFunction + ';$RX("',
 );
-const clientRenderScript1Partial = stringToPrecomputedChunk('<script>$RX("');
+const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
 const clientRenderScript2 = stringToPrecomputedChunk('")</script>');
 
 export function writeClientRenderBoundaryInstruction(
@@ -1766,6 +1777,7 @@ export function writeClientRenderBoundaryInstruction(
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
 ): boolean {
+  writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentClientRenderFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentClientRenderFunction = true;
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 59fb19e7986c8..723c03dfdba12 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -29,6 +29,7 @@ export const isPrimaryRenderer = false;
 
 export type ResponseState = {
   // Keep this in sync with ReactDOMServerFormatConfig
+  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
@@ -46,9 +47,10 @@ export function createResponseState(
   generateStaticMarkup: boolean,
   identifierPrefix: string | void,
 ): ResponseState {
-  const responseState = createResponseStateImpl(identifierPrefix);
+  const responseState = createResponseStateImpl(identifierPrefix, undefined);
   return {
     // Keep this in sync with ReactDOMServerFormatConfig
+    startInlineScript: responseState.startInlineScript,
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,

From cdb8a1d19d0c0d43a72c3f0fe739b04da247c360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 19 Oct 2021 22:36:10 -0400
Subject: [PATCH 052/109] [Fizz] Add option to inject bootstrapping script tags
 after the shell is injected (#22594)

* Add option to inject bootstrap scripts

These are emitted right after the shell as flushed.

* Update ssr fixtures to use bootstrapScripts instead of manual script tag

* Add option to FB renderer too
---
 fixtures/ssr/server/render.js                 |    1 +
 fixtures/ssr/src/components/Chrome.js         |    1 -
 fixtures/ssr/yarn.lock                        |   10 +-
 fixtures/ssr2/package.json                    |    4 +-
 fixtures/ssr2/server/render.js                |    1 +
 fixtures/ssr2/src/Html.js                     |    1 -
 fixtures/ssr2/yarn.lock                       | 5277 +++++++++++++++++
 .../src/__tests__/ReactDOMFizzServer-test.js  |   31 +-
 .../ReactDOMFizzServerBrowser-test.js         |   16 +
 .../__tests__/ReactDOMFizzServerNode-test.js  |   18 +
 .../src/server/ReactDOMFizzServerBrowser.js   |    6 +
 .../src/server/ReactDOMFizzServerNode.js      |    6 +
 .../src/server/ReactDOMServerFormatConfig.js  |   48 +
 .../ReactDOMServerLegacyFormatConfig.js       |    3 +
 .../server/ReactNativeServerFormatConfig.js   |    7 +
 .../src/ReactNoopServer.js                    |    7 +
 .../src/ReactDOMServerFB.js                   |   11 +-
 .../ReactDOMServerFB-test.internal.js         |   15 +
 packages/react-server/src/ReactFizzServer.js  |    2 +
 .../forks/ReactServerFormatConfig.custom.js   |    1 +
 20 files changed, 5445 insertions(+), 21 deletions(-)
 create mode 100644 fixtures/ssr2/yarn.lock

diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index e0fc50f3f9538..9857a8a83dcfa 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -21,6 +21,7 @@ export default function render(url, res) {
   });
   let didError = false;
   const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    bootstrapScripts: [assets['main.js']],
     onCompleteShell() {
       // If something errored before we started streaming, we set the error code appropriately.
       res.statusCode = didError ? 500 : 200;
diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
index c895663710560..23056dab92a4a 100644
--- a/fixtures/ssr/src/components/Chrome.js
+++ b/fixtures/ssr/src/components/Chrome.js
@@ -46,7 +46,6 @@ export default class Chrome extends Component {
               __html: `assetManifest = ${JSON.stringify(assets)};`,
             }}
           />
-          <script src={assets['main.js']} />
         </body>
       </html>
     );
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index 3609381253bce..d3a688915784d 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -4265,7 +4265,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5945,14 +5945,6 @@ sax@^1.2.1, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.1:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
diff --git a/fixtures/ssr2/package.json b/fixtures/ssr2/package.json
index 963d9a966c63d..de4bbd6aaea6c 100644
--- a/fixtures/ssr2/package.json
+++ b/fixtures/ssr2/package.json
@@ -15,8 +15,8 @@
     "concurrently": "^5.3.0",
     "express": "^4.17.1",
     "nodemon": "^2.0.6",
-    "react": "18.0.0-alpha-7ec4c5597",
-    "react-dom": "18.0.0-alpha-7ec4c5597",
+    "react": "link:../../build/node_modules/react",
+    "react-dom": "link:../../build/node_modules/react-dom",
     "react-error-boundary": "^3.1.3",
     "resolve": "1.12.0",
     "rimraf": "^3.0.2",
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index 5ebbed0313c69..fa91f763f2902 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -42,6 +42,7 @@ module.exports = function render(url, res) {
       <App assets={assets} />
     </DataProvider>,
     {
+      bootstrapScripts: [assets['main.js']],
       onCompleteShell() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
diff --git a/fixtures/ssr2/src/Html.js b/fixtures/ssr2/src/Html.js
index 907318263d909..e834f84bac872 100644
--- a/fixtures/ssr2/src/Html.js
+++ b/fixtures/ssr2/src/Html.js
@@ -28,7 +28,6 @@ export default function Html({assets, children, title}) {
             __html: `assetManifest = ${JSON.stringify(assets)};`,
           }}
         />
-        <script async src={assets['main.js']} />
       </body>
     </html>
   );
diff --git a/fixtures/ssr2/yarn.lock b/fixtures/ssr2/yarn.lock
new file mode 100644
index 0000000000000..150ed04aa0d10
--- /dev/null
+++ b/fixtures/ssr2/yarn.lock
@@ -0,0 +1,5277 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.15.8.tgz#45990c47adadb00c03677baa89221f7cc23d2503"
+  integrity sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==
+  dependencies:
+    "@babel/highlight" "^7.14.5"
+
+"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176"
+  integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==
+
+"@babel/core@7.12.3":
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
+  integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.1"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.1"
+    "@babel/parser" "^7.12.3"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
+"@babel/core@7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
+  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.14.3"
+    "@babel/helper-compilation-targets" "^7.13.16"
+    "@babel/helper-module-transforms" "^7.14.2"
+    "@babel/helpers" "^7.14.0"
+    "@babel/parser" "^7.14.3"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.14.2"
+    "@babel/types" "^7.14.2"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
+"@babel/generator@^7.12.1", "@babel/generator@^7.14.3", "@babel/generator@^7.15.4":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.8.tgz#fa56be6b596952ceb231048cf84ee499a19c0cd1"
+  integrity sha512-ECmAKstXbp1cvpTTZciZCgfOt6iN64lR0d+euv3UZisU5awfRawOvg07Utn/qBGuH4bRIEZKrA/4LzZyXhZr8g==
+  dependencies:
+    "@babel/types" "^7.15.6"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz#3d0e43b00c5e49fdb6c57e421601a7a658d5f835"
+  integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.14.5":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.15.4.tgz#21ad815f609b84ee0e3058676c33cf6d1670525f"
+  integrity sha512-P8o7JP2Mzi0SdC6eWr1zF+AEYvrsZa7GSY1lTayjF5XJhVH0kjLYUZPvTMflP7tBgZoe9gIhTa60QwFpqh/E0Q==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.13.16", "@babel/helper-compilation-targets@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz#cf6d94f30fbefc139123e27dd6b02f65aeedb7b9"
+  integrity sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==
+  dependencies:
+    "@babel/compat-data" "^7.15.0"
+    "@babel/helper-validator-option" "^7.14.5"
+    browserslist "^4.16.6"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.12.1", "@babel/helper-create-class-features-plugin@^7.14.5", "@babel/helper-create-class-features-plugin@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.15.4.tgz#7f977c17bd12a5fba363cb19bea090394bf37d2e"
+  integrity sha512-7ZmzFi+DwJx6A7mHRwbuucEYpyBwmh2Ca0RvI6z2+WLZYCqV0JOaLb+u0zbtmDicebgKBZgqbYfLaKNqSgv5Pw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.15.4"
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/helper-member-expression-to-functions" "^7.15.4"
+    "@babel/helper-optimise-call-expression" "^7.15.4"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+
+"@babel/helper-create-regexp-features-plugin@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz#c7d5ac5e9cf621c26057722fb7a8a4c5889358c4"
+  integrity sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    regexpu-core "^4.7.1"
+
+"@babel/helper-explode-assignable-expression@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.15.4.tgz#f9aec9d219f271eaf92b9f561598ca6b2682600c"
+  integrity sha512-J14f/vq8+hdC2KoWLIQSsGrC9EFBKE4NFts8pfMpymfApds+fPqR30AOUWc4tyr56h9l/GA1Sxv2q3dLZWbQ/g==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-function-name@^7.14.5", "@babel/helper-function-name@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz#845744dafc4381a4a5fb6afa6c3d36f98a787ebc"
+  integrity sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.15.4"
+    "@babel/template" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-get-function-arity@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b"
+  integrity sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-hoist-variables@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz#09993a3259c0e918f99d104261dfdfc033f178df"
+  integrity sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-member-expression-to-functions@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
+  integrity sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.14.5", "@babel/helper-module-imports@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz#e18007d230632dea19b47853b984476e7b4e103f"
+  integrity sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.2", "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.15.4":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz#d8c0e75a87a52e374a8f25f855174786a09498b2"
+  integrity sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.15.4"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-simple-access" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    "@babel/helper-validator-identifier" "^7.15.7"
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.6"
+
+"@babel/helper-optimise-call-expression@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171"
+  integrity sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
+"@babel/helper-remap-async-to-generator@^7.14.5", "@babel/helper-remap-async-to-generator@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.15.4.tgz#2637c0731e4c90fbf58ac58b50b2b5a192fc970f"
+  integrity sha512-v53MxgvMK/HCwckJ1bZrq6dNKlmwlyRNYM6ypaRTdXWGOE2c1/SCa6dL/HimhPulGhZKw9W0QhREM583F/t0vQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.15.4"
+    "@babel/helper-wrap-function" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-replace-supers@^7.14.5", "@babel/helper-replace-supers@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz#52a8ab26ba918c7f6dee28628b07071ac7b7347a"
+  integrity sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.15.4"
+    "@babel/helper-optimise-call-expression" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-simple-access@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz#ac368905abf1de8e9781434b635d8f8674bcc13b"
+  integrity sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.12.1", "@babel/helper-skip-transparent-expression-wrappers@^7.14.5", "@babel/helper-skip-transparent-expression-wrappers@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.15.4.tgz#707dbdba1f4ad0fa34f9114fc8197aec7d5da2eb"
+  integrity sha512-BMRLsdh+D1/aap19TycS4eD1qELGrCBJwzaY9IE8LrpJtJb+H7rQkPIdsfgnMtLBA6DJls7X9z93Z4U8h7xw0A==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-split-export-declaration@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz#aecab92dcdbef6a10aa3b62ab204b085f776e257"
+  integrity sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==
+  dependencies:
+    "@babel/types" "^7.15.4"
+
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
+
+"@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
+  integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
+
+"@babel/helper-wrap-function@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.15.4.tgz#6f754b2446cfaf3d612523e6ab8d79c27c3a3de7"
+  integrity sha512-Y2o+H/hRV5W8QhIfTpRIBwl57y8PrZt6JM3V8FOo5qarjshHItyH5lXlpMfBfmBefOqSCpKZs/6Dxqp0E/U+uw==
+  dependencies:
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/helpers@^7.12.1", "@babel/helpers@^7.14.0":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.4.tgz#5f40f02050a3027121a3cf48d497c05c555eaf43"
+  integrity sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==
+  dependencies:
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/highlight@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.5"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.12.3", "@babel/parser@^7.14.3", "@babel/parser@^7.15.4":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.8.tgz#7bacdcbe71bdc3ff936d510c15dcea7cf0b99016"
+  integrity sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==
+
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.8.tgz#a3100f785fab4357987c4223ab1b02b599048403"
+  integrity sha512-2Z5F2R2ibINTc63mY7FLqGfEbmofrHU9FitJW1Q7aPaKFhiPvSq6QEt/BoWN5oME3GVyjcRuNNSRbb9LC0CSWA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-remap-async-to-generator" "^7.15.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
+"@babel/plugin-proposal-class-properties@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
+  integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-class-properties@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz#40d1ee140c5b1e31a350f4f5eed945096559b42e"
+  integrity sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-proposal-decorators@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz#59271439fed4145456c41067450543aee332d15f"
+  integrity sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-decorators" "^7.12.1"
+
+"@babel/plugin-proposal-dynamic-import@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz#0c6617df461c0c1f8fff3b47cd59772360101d2c"
+  integrity sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
+"@babel/plugin-proposal-export-namespace-from@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz#dbad244310ce6ccd083072167d8cea83a52faf76"
+  integrity sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz#38de60db362e83a3d8c944ac858ddf9f0c2239eb"
+  integrity sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
+"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz#6e6229c2a99b02ab2915f82571e0cc646a40c738"
+  integrity sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
+  integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz#ee38589ce00e2cc59b299ec3ea406fcd3a0fdaf6"
+  integrity sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
+"@babel/plugin-proposal-numeric-separator@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz#0e2c6774c4ce48be412119b4d693ac777f7685a6"
+  integrity sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-numeric-separator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz#83631bf33d9a51df184c2102a069ac0c58c05f18"
+  integrity sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.12.1":
+  version "7.15.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.15.6.tgz#ef68050c8703d07b25af402cb96cf7f34a68ed11"
+  integrity sha512-qtOHo7A1Vt+O23qEAX+GdBpqaIuD3i9VRrWgCJeq7WO6H2d14EK3q11urj5Te2MAeK97nMiIdRpwd/ST4JFbNg==
+  dependencies:
+    "@babel/compat-data" "^7.15.0"
+    "@babel/helper-compilation-targets" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.15.4"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz#939dd6eddeff3a67fdf7b3f044b5347262598c3c"
+  integrity sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-proposal-optional-chaining@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz#cce122203fc8a32794296fc377c6dedaf4363797"
+  integrity sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz#fa83651e60a360e3f13797eef00b8d519695b603"
+  integrity sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-proposal-private-methods@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz#37446495996b2945f30f5be5b60d5e2aa4f5792d"
+  integrity sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.12.1", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz#0f95ee0e757a5d647f378daa0eca7e93faa8bbe8"
+  integrity sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.1":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-decorators@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.14.5.tgz#eafb9c0cbe09c8afeb964ba3a7bbd63945a72f20"
+  integrity sha512-c4sZMRWL4GSvP1EXy0woIP7m4jkVcEuG8R1TOZxPBPtp4FSM/kiPZub9UIs/Jrb5ZAOzvTUSGYrWsrSu1JvoPw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-flow@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.14.5.tgz#2ff654999497d7d7d142493260005263731da180"
+  integrity sha512-9WK5ZwKCdWHxVuU13XNT6X73FGmutAXeor5lGFq6qhOFtMFUF4jkbijuyUdZZlpYq6E2hZeZf/u3959X9wsv0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
+  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-arrow-functions@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz#f7187d9588a768dd080bf4c9ffe117ea62f7862a"
+  integrity sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-async-to-generator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz#72c789084d8f2094acb945633943ef8443d39e67"
+  integrity sha512-szkbzQ0mNk0rpu76fzDdqSyPu0MuvpXgC+6rz5rpMb5OIRxdmHfQxrktL8CYolL2d8luMCZTR0DpIMIdL27IjA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-remap-async-to-generator" "^7.14.5"
+
+"@babel/plugin-transform-block-scoped-functions@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz#e48641d999d4bc157a67ef336aeb54bc44fd3ad4"
+  integrity sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-block-scoping@^7.12.1":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz#94c81a6e2fc230bcce6ef537ac96a1e4d2b3afaf"
+  integrity sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.15.4.tgz#50aee17aaf7f332ae44e3bce4c2e10534d5d3bf1"
+  integrity sha512-Yjvhex8GzBmmPQUvpXRPWQ9WnxXgAFuZSrqOK/eJlOGIXwvv8H3UEdUigl1gb/bnjTrln+e8bkZUYCBt/xYlBg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.15.4"
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/helper-optimise-call-expression" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    globals "^11.1.0"
+
+"@babel/plugin-transform-computed-properties@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz#1b9d78987420d11223d41195461cc43b974b204f"
+  integrity sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-destructuring@^7.12.1":
+  version "7.14.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.7.tgz#0ad58ed37e23e22084d109f185260835e5557576"
+  integrity sha512-0mDE99nK+kVh3xlc5vKwB6wnP9ecuSj+zQCa/n0voENtP/zymdT4HH6QEb65wjjcbqr1Jb/7z9Qp7TF5FtwYGw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-dotall-regex@^7.12.1", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz#2f6bf76e46bdf8043b4e7e16cf24532629ba0c7a"
+  integrity sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-duplicate-keys@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz#365a4844881bdf1501e3a9f0270e7f0f91177954"
+  integrity sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-exponentiation-operator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz#5154b8dd6a3dfe6d90923d61724bd3deeb90b493"
+  integrity sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-flow-strip-types@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz#8430decfa7eb2aea5414ed4a3fa6e1652b7d77c4"
+  integrity sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-flow" "^7.12.1"
+
+"@babel/plugin-transform-for-of@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.15.4.tgz#25c62cce2718cfb29715f416e75d5263fb36a8c2"
+  integrity sha512-DRTY9fA751AFBDh2oxydvVm4SYevs5ILTWLs6xKXps4Re/KG5nfUkr+TdHCrRWB8C69TlzVgA9b3RmGWmgN9LA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-function-name@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz#e81c65ecb900746d7f31802f6bed1f52d915d6f2"
+  integrity sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz#41d06c7ff5d4d09e3cf4587bd3ecf3930c730f78"
+  integrity sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-member-expression-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz#b39cd5212a2bf235a617d320ec2b48bcc091b8a7"
+  integrity sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-modules-amd@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz#4fd9ce7e3411cb8b83848480b7041d83004858f7"
+  integrity sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.15.4.tgz#8201101240eabb5a76c08ef61b2954f767b6b4c1"
+  integrity sha512-qg4DPhwG8hKp4BbVDvX1s8cohM8a6Bvptu4l6Iingq5rW+yRUAhe/YRup/YcW2zCOlrysEWVhftIcKzrEZv3sA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-simple-access" "^7.15.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.15.4.tgz#b42890c7349a78c827719f1d2d0cd38c7d268132"
+  integrity sha512-fJUnlQrl/mezMneR72CKCgtOoahqGJNVKpompKwzv3BrEXdlPspTcyxrZ1XmDTIr9PpULrgEQo3qNKp6dW7ssw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.15.4"
+    "@babel/helper-module-transforms" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-validator-identifier" "^7.14.9"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-umd@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz#fb662dfee697cce274a7cda525190a79096aa6e0"
+  integrity sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.9.tgz#c68f5c5d12d2ebaba3762e57c2c4f6347a46e7b2"
+  integrity sha512-l666wCVYO75mlAtGFfyFwnWmIXQm3kSH0C3IRnJqWcZbWkoihyAdDhFm2ZWaxWTqvBvhVFfJjMRQ0ez4oN1yYA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+
+"@babel/plugin-transform-new-target@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz#31bdae8b925dc84076ebfcd2a9940143aed7dbf8"
+  integrity sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-object-super@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz#d0b5faeac9e98597a161a9cf78c527ed934cdc45"
+  integrity sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-replace-supers" "^7.14.5"
+
+"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.15.4.tgz#5f2285cc3160bf48c8502432716b48504d29ed62"
+  integrity sha512-9WB/GUTO6lvJU3XQsSr6J/WKvBC2hcs4Pew8YxZagi6GkTdniyqp8On5kqdK8MN0LMeu0mGbhPN+O049NV/9FQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-property-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz#0ddbaa1f83db3606f1cdf4846fa1dfb473458b34"
+  integrity sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-display-name@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz#1cbcd0c3b1d6648c55374a22fc9b6b7e5341c00d"
+  integrity sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-display-name@^7.12.1":
+  version "7.15.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.15.1.tgz#6aaac6099f1fcf6589d35ae6be1b6e10c8c602b9"
+  integrity sha512-yQZ/i/pUCJAHI/LbtZr413S3VT26qNrEm0M5RRxQJA947/YNYwbZbBaXGDrq6CG5QsZycI1VIP6d7pQaBfP+8Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx-development@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz#1a6c73e2f7ed2c42eebc3d2ad60b0c7494fcb9af"
+  integrity sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx-self@^7.12.1":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.9.tgz#33041e665453391eb6ee54a2ecf3ba1d46bd30f4"
+  integrity sha512-Fqqu0f8zv9W+RyOnx29BX/RlEsBRANbOf5xs5oxb2aHP4FKbLXxIaVPUiCti56LAR1IixMH4EyaixhUsKqoBHw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx-source@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz#79f728e60e6dbd31a2b860b0bf6c9765918acf1d"
+  integrity sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-react-jsx@^7.12.1", "@babel/plugin-transform-react-jsx@^7.14.5":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.9.tgz#3314b2163033abac5200a869c4de242cd50a914c"
+  integrity sha512-30PeETvS+AeD1f58i1OVyoDlVYQhap/K20ZrMjLmmzmC2AYR/G43D4sdJAaDAqCD3MYpSWbmrz3kES158QSLjw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-jsx" "^7.14.5"
+    "@babel/types" "^7.14.9"
+
+"@babel/plugin-transform-react-pure-annotations@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz#18de612b84021e3a9802cbc212c9d9f46d0d11fc"
+  integrity sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-regenerator@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz#9676fd5707ed28f522727c5b3c0aa8544440b04f"
+  integrity sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
+"@babel/plugin-transform-reserved-words@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz#c44589b661cfdbef8d4300dcc7469dffa92f8304"
+  integrity sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-runtime@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
+  integrity sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz#97f13855f1409338d8cadcbaca670ad79e091a58"
+  integrity sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-spread@^7.12.1":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.15.8.tgz#79d5aa27f68d700449b2da07691dfa32d2f6d468"
+  integrity sha512-/daZ8s2tNaRekl9YJa9X4bzjpeRZLt122cpgFnQPLGUe61PH8zMEBmYqKkW5xF5JUEh5buEGXJoQpqBmIbpmEQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.15.4"
+
+"@babel/plugin-transform-sticky-regex@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz#5b617542675e8b7761294381f3c28c633f40aeb9"
+  integrity sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-template-literals@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz#a5f2bc233937d8453885dc736bdd8d9ffabf3d93"
+  integrity sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-typeof-symbol@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz#39af2739e989a2bd291bf6b53f16981423d457d4"
+  integrity sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-typescript@^7.12.1":
+  version "7.15.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.15.8.tgz#ff0e6a47de9b2d58652123ab5a879b2ff20665d8"
+  integrity sha512-ZXIkJpbaf6/EsmjeTbiJN/yMxWPFWvlr7sEG1P95Xb4S4IBcrf2n7s/fItIhsAmOf8oSh3VJPDppO6ExfAfKRQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.15.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-typescript" "^7.14.5"
+
+"@babel/plugin-transform-unicode-escapes@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
+  integrity sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-unicode-regex@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz#4cd09b6c8425dd81255c7ceb3fb1836e7414382e"
+  integrity sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/preset-env@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
+  integrity sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==
+  dependencies:
+    "@babel/compat-data" "^7.12.1"
+    "@babel/helper-compilation-targets" "^7.12.1"
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-option" "^7.12.1"
+    "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-dynamic-import" "^7.12.1"
+    "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
+    "@babel/plugin-proposal-json-strings" "^7.12.1"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.1"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.12.1"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-async-to-generator" "^7.12.1"
+    "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.1"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-computed-properties" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-dotall-regex" "^7.12.1"
+    "@babel/plugin-transform-duplicate-keys" "^7.12.1"
+    "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-function-name" "^7.12.1"
+    "@babel/plugin-transform-literals" "^7.12.1"
+    "@babel/plugin-transform-member-expression-literals" "^7.12.1"
+    "@babel/plugin-transform-modules-amd" "^7.12.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.12.1"
+    "@babel/plugin-transform-modules-systemjs" "^7.12.1"
+    "@babel/plugin-transform-modules-umd" "^7.12.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
+    "@babel/plugin-transform-new-target" "^7.12.1"
+    "@babel/plugin-transform-object-super" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-property-literals" "^7.12.1"
+    "@babel/plugin-transform-regenerator" "^7.12.1"
+    "@babel/plugin-transform-reserved-words" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/plugin-transform-sticky-regex" "^7.12.1"
+    "@babel/plugin-transform-template-literals" "^7.12.1"
+    "@babel/plugin-transform-typeof-symbol" "^7.12.1"
+    "@babel/plugin-transform-unicode-escapes" "^7.12.1"
+    "@babel/plugin-transform-unicode-regex" "^7.12.1"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.12.1"
+    core-js-compat "^3.6.2"
+    semver "^5.5.0"
+
+"@babel/preset-modules@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
+  integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.1.tgz#7f022b13f55b6dd82f00f16d1c599ae62985358c"
+  integrity sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.12.1"
+    "@babel/plugin-transform-react-jsx" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-self" "^7.12.1"
+    "@babel/plugin-transform-react-jsx-source" "^7.12.1"
+    "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
+
+"@babel/preset-typescript@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz#86480b483bb97f75036e8864fe404cc782cc311b"
+  integrity sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-typescript" "^7.12.1"
+
+"@babel/register@7.13.16":
+  version "7.13.16"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.13.16.tgz#ae3ab0b55c8ec28763877383c454f01521d9a53d"
+  integrity sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==
+  dependencies:
+    clone-deep "^4.0.1"
+    find-cache-dir "^2.0.0"
+    make-dir "^2.1.0"
+    pirates "^4.0.0"
+    source-map-support "^0.5.16"
+
+"@babel/runtime@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
+  integrity sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/parser" "^7.15.4"
+    "@babel/types" "^7.15.4"
+
+"@babel/traverse@^7.12.1", "@babel/traverse@^7.14.2", "@babel/traverse@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
+  integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/generator" "^7.15.4"
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/helper-hoist-variables" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    "@babel/parser" "^7.15.4"
+    "@babel/types" "^7.15.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.12.1", "@babel/types@^7.14.2", "@babel/types@^7.14.9", "@babel/types@^7.15.4", "@babel/types@^7.15.6", "@babel/types@^7.4.4":
+  version "7.15.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
+  integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.9"
+    to-fast-properties "^2.0.0"
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3"
+  integrity sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==
+
+"@sindresorhus/is@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
+  integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
+
+"@szmarczak/http-timer@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
+  integrity sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==
+  dependencies:
+    defer-to-connect "^1.0.1"
+
+"@types/json-schema@^7.0.5":
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
+"@webassemblyjs/ast@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
+  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+
+"@webassemblyjs/floating-point-hex-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
+  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
+
+"@webassemblyjs/helper-api-error@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
+  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
+
+"@webassemblyjs/helper-buffer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
+  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+
+"@webassemblyjs/helper-code-frame@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
+  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/helper-fsm@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
+  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
+
+"@webassemblyjs/helper-module-context@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
+  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+
+"@webassemblyjs/helper-wasm-bytecode@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
+  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+
+"@webassemblyjs/helper-wasm-section@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
+  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+
+"@webassemblyjs/ieee754@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
+  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
+  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
+  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
+
+"@webassemblyjs/wasm-edit@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
+  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/helper-wasm-section" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-opt" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/wasm-gen@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
+  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wasm-opt@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
+  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+
+"@webassemblyjs/wasm-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
+  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wast-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
+  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-code-frame" "1.9.0"
+    "@webassemblyjs/helper-fsm" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/wast-printer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
+  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
+    "@xtuc/long" "4.2.2"
+
+"@webpack-cli/configtest@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.1.0.tgz#8342bef0badfb7dfd3b576f2574ab80c725be043"
+  integrity sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==
+
+"@webpack-cli/info@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.4.0.tgz#b9179c3227ab09cbbb149aa733475fcf99430223"
+  integrity sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==
+  dependencies:
+    envinfo "^7.7.3"
+
+"@webpack-cli/serve@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.6.0.tgz#2c275aa05c895eccebbfc34cfb223c6e8bd591a2"
+  integrity sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
+accepts@~1.3.5, accepts@~1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+  dependencies:
+    mime-types "~2.1.24"
+    negotiator "0.6.2"
+
+acorn@^6.4.1:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
+  integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
+
+ajv-errors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
+
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-align@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.0"
+
+ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+aproba@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
+
+arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
+
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
+
+assert@^1.1.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
+  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
+  dependencies:
+    object-assign "^4.1.1"
+    util "0.10.3"
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+
+async-each@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
+  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
+
+atob@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
+babel-loader@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-macros@2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
+babel-plugin-transform-react-remove-prop-types@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
+babel-preset-react-app@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz#689b60edc705f8a70ce87f47ab0e560a317d7045"
+  integrity sha512-itL2z8v16khpuKutx5IH8UdCdSTuzrOhRFTEdIhveZ2i1iBKDrVE0ATa4sFVy+02GLucZNVBWtoarXBy0Msdpg==
+  dependencies:
+    "@babel/core" "7.12.3"
+    "@babel/plugin-proposal-class-properties" "7.12.1"
+    "@babel/plugin-proposal-decorators" "7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "7.12.1"
+    "@babel/plugin-transform-flow-strip-types" "7.12.1"
+    "@babel/plugin-transform-react-display-name" "7.12.1"
+    "@babel/plugin-transform-runtime" "7.12.1"
+    "@babel/preset-env" "7.12.1"
+    "@babel/preset-react" "7.12.1"
+    "@babel/preset-typescript" "7.12.1"
+    "@babel/runtime" "7.12.1"
+    babel-plugin-macros "2.8.0"
+    babel-plugin-transform-react-remove-prop-types "0.4.24"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base64-js@^1.0.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
+binary-extensions@^1.0.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+bindings@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
+bluebird@^3.5.5:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.0.0, bn.js@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+body-parser@1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+  dependencies:
+    bytes "3.1.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    on-finished "~2.3.0"
+    qs "6.7.0"
+    raw-body "2.4.0"
+    type-is "~1.6.17"
+
+boxen@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
+  integrity sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==
+  dependencies:
+    ansi-align "^3.0.0"
+    camelcase "^6.2.0"
+    chalk "^4.1.0"
+    cli-boxes "^2.2.1"
+    string-width "^4.2.2"
+    type-fest "^0.20.2"
+    widest-line "^3.1.0"
+    wrap-ansi "^7.0.0"
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+braces@^2.3.1, braces@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+  integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
+  dependencies:
+    bn.js "^5.0.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
+browserslist@^4.16.6, browserslist@^4.17.3:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.4.tgz#72e2508af2a403aec0a49847ef31bd823c57ead4"
+  integrity sha512-Zg7RpbZpIJRW3am9Lyckue7PLytvVxxhJj1CaJVlCWENsGEAOlnlt8X0ZxGRPp7Bt9o8tIRM5SEXy4BCPMJjLQ==
+  dependencies:
+    caniuse-lite "^1.0.30001265"
+    electron-to-chromium "^1.3.867"
+    escalade "^3.1.1"
+    node-releases "^2.0.0"
+    picocolors "^1.0.0"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
+
+buffer@^4.3.0:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+    isarray "^1.0.0"
+
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+
+bytes@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
+cacache@^12.0.2:
+  version "12.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
+  integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
+  dependencies:
+    bluebird "^3.5.5"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.4"
+    graceful-fs "^4.1.15"
+    infer-owner "^1.0.3"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.3"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+cacheable-request@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-6.1.0.tgz#20ffb8bd162ba4be11e9567d823db651052ca912"
+  integrity sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==
+  dependencies:
+    clone-response "^1.0.2"
+    get-stream "^5.1.0"
+    http-cache-semantics "^4.0.0"
+    keyv "^3.0.0"
+    lowercase-keys "^2.0.0"
+    normalize-url "^4.1.0"
+    responselike "^1.0.2"
+
+call-bind@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
+camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
+caniuse-lite@^1.0.30001265:
+  version "1.0.30001269"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001269.tgz#3a71bee03df627364418f9fd31adfc7aa1cc2d56"
+  integrity sha512-UOy8okEVs48MyHYgV+RdW1Oiudl1H6KolybD6ZquD0VcrPSgj25omXO1S7rDydjpqaISCwA8Pyx+jUQKZwWO5w==
+
+chalk@^2.0.0, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+chokidar@^3.2.2, chokidar@^3.4.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+chrome-trace-event@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
+  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+cli-boxes@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
+clone-response@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
+  integrity sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=
+  dependencies:
+    mimic-response "^1.0.0"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colorette@^2.0.14:
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
+  integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
+
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commander@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+component-emitter@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
+
+compressible@~2.0.16:
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
+  dependencies:
+    mime-db ">= 1.43.0 < 2"
+
+compression@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
+  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
+  dependencies:
+    accepts "~1.3.5"
+    bytes "3.0.0"
+    compressible "~2.0.16"
+    debug "2.6.9"
+    on-headers "~1.0.2"
+    safe-buffer "5.1.2"
+    vary "~1.1.2"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+concat-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+concurrently@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.3.0.tgz#7500de6410d043c912b2da27de3202cb489b1e7b"
+  integrity sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ==
+  dependencies:
+    chalk "^2.4.2"
+    date-fns "^2.0.1"
+    lodash "^4.17.15"
+    read-pkg "^4.0.1"
+    rxjs "^6.5.2"
+    spawn-command "^0.0.2-1"
+    supports-color "^6.1.0"
+    tree-kill "^1.2.2"
+    yargs "^13.3.0"
+
+configstore@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
+  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
+  dependencies:
+    dot-prop "^5.2.0"
+    graceful-fs "^4.1.2"
+    make-dir "^3.0.0"
+    unique-string "^2.0.0"
+    write-file-atomic "^3.0.0"
+    xdg-basedir "^4.0.0"
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
+
+content-disposition@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
+
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+
+convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+
+core-js-compat@^3.6.2:
+  version "3.18.3"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.18.3.tgz#e0e7e87abc55efb547e7fa19169e45fa9df27a67"
+  integrity sha512-4zP6/y0a2RTHN5bRGT7PTq9lVt3WzvffTNjqnTKsXhkAYNDTkdCLOIfAdOLcQ/7TDdyRj3c+NeHe1NmF1eDScw==
+  dependencies:
+    browserslist "^4.17.3"
+    semver "7.0.0"
+
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
+create-ecdh@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.5.3"
+
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
+    sha.js "^2.4.0"
+
+create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
+  dependencies:
+    cipher-base "^1.0.3"
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
+crypto-random-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
+  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+
+cyclist@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
+  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
+
+date-fns@^2.0.1:
+  version "2.25.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"
+  integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==
+
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.2.6:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.1.2"
+
+decamelize@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+decompress-response@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
+  integrity sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=
+  dependencies:
+    mimic-response "^1.0.0"
+
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+
+defer-to-connect@^1.0.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
+  integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
+
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+des.js@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
+destroy@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+diffie-hellman@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
+domain-browser@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
+
+dot-prop@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.0"
+
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
+
+duplexify@^3.4.2, duplexify@^3.6.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
+  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-to-chromium@^1.3.867:
+  version "1.3.873"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.873.tgz#c238c9199e4951952fe815a65c1beab5db4826b8"
+  integrity sha512-TiHlCgl2uP26Z0c67u442c0a2MZCWZNCRnPTQDPhVJ4h9G6z2zU0lApD9H0K9R5yFL5SfdaiVsVD2izOY24xBQ==
+
+elliptic@^6.5.3:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
+  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+envinfo@^7.7.3:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
+  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-goat@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
+  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+eslint-scope@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
+  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+esrecurse@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+events@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+express@^4.17.1:
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
+  dependencies:
+    accepts "~1.3.7"
+    array-flatten "1.1.1"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
+    content-type "~1.0.4"
+    cookie "0.4.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "~1.1.2"
+    fresh "0.5.2"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.5"
+    qs "6.7.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.1.2"
+    send "0.17.1"
+    serve-static "1.14.1"
+    setprototypeof "1.1.1"
+    statuses "~1.5.0"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
+  integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
+
+figgy-pudding@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
+
+file-uri-to-path@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
+
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+finalhandler@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.3"
+    statuses "~1.5.0"
+    unpipe "~1.0.0"
+
+find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
+  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^2.0.0"
+    pkg-dir "^3.0.0"
+
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+flush-write-stream@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
+
+for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
+  dependencies:
+    map-cache "^0.2.2"
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@^1.2.7:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
+  dependencies:
+    bindings "^1.5.0"
+    nan "^2.12.1"
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-stream@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.1.3, glob@^7.1.4:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-dirs@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
+  integrity sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==
+  dependencies:
+    ini "2.0.0"
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+got@^9.6.0:
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
+  integrity sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==
+  dependencies:
+    "@sindresorhus/is" "^0.14.0"
+    "@szmarczak/http-timer" "^1.1.2"
+    cacheable-request "^6.0.0"
+    decompress-response "^3.3.0"
+    duplexer3 "^0.1.4"
+    get-stream "^4.1.0"
+    lowercase-keys "^1.0.1"
+    mimic-response "^1.0.1"
+    p-cancelable "^1.0.0"
+    to-readable-stream "^1.0.0"
+    url-parse-lax "^3.0.0"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has-yarn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
+  integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hash-base@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
+  dependencies:
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
+
+hmac-drbg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
+http-cache-semantics@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
+
+http-errors@1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ieee754@^1.1.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
+
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
+
+import-fresh@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
+
+import-local@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.3.tgz#4d51c2c495ca9393da259ec66b62e022920211e0"
+  integrity sha512-bE9iaUY3CXH8Cwfan/abDKAxe1KGT9kyGsBPqf6DMK/z0a2OzAsrukeYNgIH6cH5Xr452jb1TUL8rSfCLjZ9uA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+infer-owner@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+inherits@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
+
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+ini@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
+  integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
+
+ini@~1.3.0:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
+interpret@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
+  integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
+
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-binary-path@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
+  dependencies:
+    binary-extensions "^1.0.0"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-core-module@^2.2.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
+  integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==
+  dependencies:
+    has "^1.0.3"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
+
+is-extendable@^0.1.0, is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-installed-globally@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
+  integrity sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==
+  dependencies:
+    global-dirs "^3.0.0"
+    is-path-inside "^3.0.2"
+
+is-npm@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-5.0.0.tgz#43e8d65cc56e1b67f8d47262cf667099193f45a8"
+  integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
+
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
+is-path-inside@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-typedarray@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+
+is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
+
+is-yarn-global@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
+  integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
+
+isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  dependencies:
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
+jsesc@~0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
+
+json-buffer@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
+  integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
+
+json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
+  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
+  dependencies:
+    minimist "^1.2.5"
+
+keyv@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
+  integrity sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==
+  dependencies:
+    json-buffer "3.0.0"
+
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
+
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
+latest-version@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
+  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
+  dependencies:
+    package-json "^6.3.0"
+
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
+loader-runner@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
+  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
+
+loader-utils@^1.2.3, loader-utils@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+lodash@^4.17.15, lodash@^4.17.19:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
+
+lowercase-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
+  integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
+
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+make-dir@^2.0.0, make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
+  dependencies:
+    object-visit "^1.0.0"
+
+md5.js@^1.3.4:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+
+memory-fs@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+
+micromatch@^3.1.10, micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
+mime-db@1.50.0, "mime-db@>= 1.43.0 < 2":
+  version "1.50.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.50.0.tgz#abd4ac94e98d3c0e185016c67ab45d5fde40c11f"
+  integrity sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==
+
+mime-types@~2.1.24:
+  version "2.1.33"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.33.tgz#1fa12a904472fafd068e48d9e8401f74d3f70edb"
+  integrity sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==
+  dependencies:
+    mime-db "1.50.0"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+mimic-response@^1.0.0, mimic-response@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
+  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
+
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+
+minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
+  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^3.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
+mkdirp@^0.5.1, mkdirp@^0.5.3:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nan@^2.12.1:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
+  integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+negotiator@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+
+neo-async@^2.5.0, neo-async@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
+node-libs-browser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
+  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^3.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.1"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
+
+node-modules-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
+
+node-releases@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.0.tgz#67dc74903100a7deb044037b8a2e5f453bb05400"
+  integrity sha512-aA87l0flFYMzCHpTM3DERFSYxc6lv/BltdbRTOMZuxZ0cwZCD3mejE5n9vLhSJCN++/eOqr77G1IO5uXxlQYWA==
+
+nodemon@^2.0.6:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.14.tgz#287c7a2f6cd8a18b07e94cd776ecb6a82e4ba439"
+  integrity sha512-frcpDx+PviKEQRSYzwhckuO2zoHcBYLHI754RE9z5h1RGtrngerc04mLpQQCPWBkH/2ObrX7We9YiwVSYZpFJQ==
+  dependencies:
+    chokidar "^3.2.2"
+    debug "^3.2.6"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.0.4"
+    pstree.remy "^1.1.7"
+    semver "^5.7.1"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.3"
+    update-notifier "^5.1.0"
+
+nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
+  dependencies:
+    abbrev "1"
+
+normalize-package-data@^2.3.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-url@^4.1.0:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
+  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
+
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
+  dependencies:
+    isobject "^3.0.0"
+
+object.assign@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
+  dependencies:
+    isobject "^3.0.1"
+
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+  dependencies:
+    ee-first "1.1.1"
+
+on-headers@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
+
+p-cancelable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
+  integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
+
+p-limit@^2.0.0, p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+package-json@^6.3.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-6.5.0.tgz#6feedaca35e75725876d0b0e64974697fed145b0"
+  integrity sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==
+  dependencies:
+    got "^9.6.0"
+    registry-auth-token "^4.0.0"
+    registry-url "^5.0.0"
+    semver "^6.2.0"
+
+pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+parallel-transform@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
+  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
+  dependencies:
+    cyclist "^1.0.1"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
+  dependencies:
+    asn1.js "^5.2.0"
+    browserify-aes "^1.0.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
+
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
+
+path-browserify@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
+  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
+
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+pbkdf2@^3.0.3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
+pirates@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
+  dependencies:
+    node-modules-regexp "^1.0.0"
+
+pkg-dir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
+  dependencies:
+    find-up "^3.0.0"
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+
+prepend-http@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
+  integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
+
+prettier@1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+
+proxy-addr@~2.0.5:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
+
+pstree.remy@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
+public-encrypt@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
+    safe-buffer "^5.1.2"
+
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  dependencies:
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+pupa@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
+  integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
+  dependencies:
+    escape-goat "^2.0.0"
+
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
+
+querystring-es3@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
+  dependencies:
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+rc@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
+"react-dom@link:../../build/node_modules/react-dom":
+  version "0.0.0"
+  uid ""
+
+react-error-boundary@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.3.tgz#276bfa05de8ac17b863587c9e0647522c25e2a0b"
+  integrity sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
+"react@link:../../build/node_modules/react":
+  version "0.0.0"
+  uid ""
+
+read-pkg@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
+  integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
+  dependencies:
+    normalize-package-data "^2.3.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    readable-stream "^2.0.2"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+rechoir@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686"
+  integrity sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==
+  dependencies:
+    resolve "^1.9.0"
+
+regenerate-unicode-properties@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
+  integrity sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==
+  dependencies:
+    regenerate "^1.4.2"
+
+regenerate@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-transform@^0.14.2:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regexpu-core@^4.7.1:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0"
+  integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^9.0.0"
+    regjsgen "^0.5.2"
+    regjsparser "^0.7.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.0.0"
+
+registry-auth-token@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.1.tgz#6d7b4006441918972ccd5fedcd41dc322c79b250"
+  integrity sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==
+  dependencies:
+    rc "^1.2.8"
+
+registry-url@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-5.1.0.tgz#e98334b50d5434b81136b44ec638d9c2009c5009"
+  integrity sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==
+  dependencies:
+    rc "^1.2.8"
+
+regjsgen@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
+
+regjsparser@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.7.0.tgz#a6b667b54c885e18b52554cb4960ef71187e9968"
+  integrity sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==
+  dependencies:
+    jsesc "~0.5.0"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+
+repeat-element@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+repeat-string@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
+
+resolve@1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
+  integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
+  dependencies:
+    path-parse "^1.0.6"
+
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+responselike@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
+  integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=
+  dependencies:
+    lowercase-keys "^1.0.0"
+
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
+rimraf@^2.5.4, rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
+  dependencies:
+    aproba "^1.1.1"
+
+rxjs@^6.5.2:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
+  dependencies:
+    ret "~0.1.10"
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+scheduler@^0.20.1:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
+  dependencies:
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+semver-diff@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
+  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
+  dependencies:
+    semver "^6.3.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.3.4:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+send@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.2"
+    destroy "~1.0.4"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
+    on-finished "~2.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serve-static@1.14.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
+  dependencies:
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.17.1"
+
+set-blocking@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+
+set-value@^2.0.0, set-value@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
+setimmediate@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+
+setprototypeof@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
+
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^3.0.2, signal-exit@^3.0.3:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.5.tgz#9e3e8cc0c75a99472b44321033a7702e7738252f"
+  integrity sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+source-list-map@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
+
+source-map-resolve@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.5.16, source-map-support@~0.5.12:
+  version "0.5.20"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.20.tgz#12166089f8f5e5e8c56926b377633392dd2cb6c9"
+  integrity sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
+source-map@^0.5.0, source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+spawn-command@^0.0.2-1:
+  version "0.0.2-1"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
+  integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
+
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.10.tgz#0d9becccde7003d6c658d487dd48a32f0bf3014b"
+  integrity sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
+  dependencies:
+    extend-shallow "^3.0.0"
+
+ssri@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
+  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+stream-browserify@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
+  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
+  dependencies:
+    inherits "~2.0.1"
+    readable-stream "^2.0.2"
+
+stream-each@^1.1.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
+  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
+stream-http@^2.7.2:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
+  dependencies:
+    builtin-status-codes "^3.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.3.6"
+    to-arraybuffer "^1.0.0"
+    xtend "^4.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string_decoder@^1.0.0, string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+
+supports-color@^5.3.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+tapable@^1.0.0, tapable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
+
+terser-webpack-plugin@^1.4.3:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
+  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
+  dependencies:
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
+    is-wsl "^1.1.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^4.0.0"
+    source-map "^0.6.1"
+    terser "^4.1.2"
+    webpack-sources "^1.4.0"
+    worker-farm "^1.7.0"
+
+terser@^4.1.2:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+through2@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
+timers-browserify@^2.0.4:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+  integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
+  dependencies:
+    setimmediate "^1.0.4"
+
+to-arraybuffer@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
+  dependencies:
+    kind-of "^3.0.2"
+
+to-readable-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"
+  integrity sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+toidentifier@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
+
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
+  integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==
+  dependencies:
+    nopt "~1.0.10"
+
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
+tslib@^1.9.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tty-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+type-is@~1.6.17, type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+undefsafe@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
+unicode-canonical-property-names-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
+  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+
+unicode-match-property-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
+  dependencies:
+    unicode-canonical-property-names-ecmascript "^2.0.0"
+    unicode-property-aliases-ecmascript "^2.0.0"
+
+unicode-match-property-value-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
+  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
+
+unicode-property-aliases-ecmascript@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
+  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
+
+union-value@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^2.0.1"
+
+unique-filename@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
+  integrity sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==
+  dependencies:
+    imurmurhash "^0.1.4"
+
+unique-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
+  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+  dependencies:
+    crypto-random-string "^2.0.0"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-notifier@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"
+  integrity sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==
+  dependencies:
+    boxen "^5.0.0"
+    chalk "^4.1.0"
+    configstore "^5.0.1"
+    has-yarn "^2.1.0"
+    import-lazy "^2.1.0"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.4.0"
+    is-npm "^5.0.0"
+    is-yarn-global "^0.3.0"
+    latest-version "^5.1.0"
+    pupa "^2.1.1"
+    semver "^7.3.4"
+    semver-diff "^3.1.1"
+    xdg-basedir "^4.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+
+url-parse-lax@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
+  integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=
+  dependencies:
+    prepend-http "^2.0.0"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+util@0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
+  dependencies:
+    inherits "2.0.1"
+
+util@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
+  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
+  dependencies:
+    inherits "2.0.3"
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+vm-browserify@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+
+watchpack-chokidar2@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+  integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.7.4:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.1"
+
+webpack-cli@^4.2.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.9.1.tgz#b64be825e2d1b130f285c314caa3b1ba9a4632b3"
+  integrity sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^1.1.0"
+    "@webpack-cli/info" "^1.4.0"
+    "@webpack-cli/serve" "^1.6.0"
+    colorette "^2.0.14"
+    commander "^7.0.0"
+    execa "^5.0.0"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^2.2.0"
+    rechoir "^0.7.0"
+    webpack-merge "^5.7.3"
+
+webpack-merge@^5.7.3:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
+  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
+  dependencies:
+    clone-deep "^4.0.1"
+    wildcard "^2.0.0"
+
+webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
+  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
+webpack@4.44.2:
+  version "4.44.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
+  integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/wasm-edit" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    acorn "^6.4.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.3.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.3"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.3"
+    watchpack "^1.7.4"
+    webpack-sources "^1.4.1"
+
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+widest-line@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
+  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+  dependencies:
+    string-width "^4.0.0"
+
+wildcard@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
+  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
+
+worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
+  dependencies:
+    errno "~0.1.7"
+
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+write-file-atomic@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
+xdg-basedir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
+  integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
+
+xtend@^4.0.0, xtend@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+y18n@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^13.3.0:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.2"
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index ec3a0bfadaee4..a2ede1746d08a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -21,6 +21,7 @@ let useSyncExternalStore;
 let useSyncExternalStoreExtra;
 let PropTypes;
 let textCache;
+let window;
 let document;
 let writable;
 let CSPnonce = null;
@@ -56,6 +57,7 @@ describe('ReactDOMFizzServer', () => {
         runScripts: 'dangerously',
       },
     );
+    window = jsdom.window;
     document = jsdom.window.document;
     container = document.getElementById('container');
 
@@ -338,11 +340,18 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    let bootstrapped = false;
+    window.__INIT__ = function() {
+      bootstrapped = true;
+      // Attempt to hydrate the content.
+      ReactDOM.hydrateRoot(container, <App isClient={true} />);
+    };
+
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-
         {
+          bootstrapScriptContent: '__INIT__();',
           onError(x) {
             loggedErrors.push(x);
           },
@@ -351,10 +360,8 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
+    expect(bootstrapped).toBe(true);
 
-    // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -507,17 +514,27 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    let bootstrapped = false;
+    window.__INIT__ = function() {
+      bootstrapped = true;
+      // Attempt to hydrate the content.
+      ReactDOM.hydrateRoot(container, <App />);
+    };
+
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        bootstrapScriptContent: '__INIT__();',
+      });
       pipe(writable);
     });
 
     // We're still showing a fallback.
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
+    // We already bootstrapped.
+    expect(bootstrapped).toBe(true);
+
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 224dac20d1af4..53a17c8b6ec23 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -71,6 +71,22 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  it('should emit bootstrap script src at the end', async () => {
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <div>hello world</div>,
+      {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      },
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
+
   // @gate experimental
   it('emits all HTML as one unit if we wait until the end to start', async () => {
     let hasLoaded = false;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 7fa1c208dffc9..bd0ca112a272b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -82,6 +82,24 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  it('should emit bootstrap script src at the end', () => {
+    const {writable, output} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>hello world</div>,
+      {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      },
+    );
+    pipe(writable);
+    jest.runAllTimers();
+    expect(output.result).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
+
   // @gate experimental
   it('should start writing after pipe', () => {
     const {writable, output} = getTestWritable();
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 2865ef46b2574..907f0823cffe9 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -27,6 +27,9 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string>,
+  bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onCompleteShell?: () => void,
@@ -43,6 +46,9 @@ function renderToReadableStream(
     createResponseState(
       options ? options.identifierPrefix : undefined,
       options ? options.nonce : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
     ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index fe532a32c3b50..33a7083bb95eb 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -32,6 +32,9 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string>,
+  bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   onCompleteShell?: () => void,
   onCompleteAll?: () => void,
@@ -51,6 +54,9 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
     createResponseState(
       options ? options.identifierPrefix : undefined,
       options ? options.nonce : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
     ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 67d90f8513452..1f5a7a65bed59 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -59,6 +59,7 @@ export const isPrimaryRenderer = true;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
@@ -73,11 +74,19 @@ export type ResponseState = {
 };
 
 const startInlineScript = stringToPrecomputedChunk('<script>');
+const endInlineScript = stringToPrecomputedChunk('</script>');
+
+const startScriptSrc = stringToPrecomputedChunk('<script src="');
+const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
   nonce: string | void,
+  bootstrapScriptContent: string | void,
+  bootstrapScripts: Array<string> | void,
+  bootstrapModules: Array<string> | void,
 ): ResponseState {
   const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
   const inlineScriptWithNonce =
@@ -86,7 +95,34 @@ export function createResponseState(
       : stringToPrecomputedChunk(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
+  const bootstrapChunks = [];
+  if (bootstrapScriptContent !== undefined) {
+    bootstrapChunks.push(
+      inlineScriptWithNonce,
+      stringToChunk(escapeTextForBrowser(bootstrapScriptContent)),
+      endInlineScript,
+    );
+  }
+  if (bootstrapScripts !== undefined) {
+    for (let i = 0; i < bootstrapScripts.length; i++) {
+      bootstrapChunks.push(
+        startScriptSrc,
+        stringToChunk(escapeTextForBrowser(bootstrapScripts[i])),
+        endAsyncScript,
+      );
+    }
+  }
+  if (bootstrapModules !== undefined) {
+    for (let i = 0; i < bootstrapModules.length; i++) {
+      bootstrapChunks.push(
+        startModuleSrc,
+        stringToChunk(escapeTextForBrowser(bootstrapModules[i])),
+        endAsyncScript,
+      );
+    }
+  }
   return {
+    bootstrapChunks: bootstrapChunks,
     startInlineScript: inlineScriptWithNonce,
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
@@ -1370,6 +1406,18 @@ export function pushEndInstance(
   }
 }
 
+export function writeCompletedRoot(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  const bootstrapChunks = responseState.bootstrapChunks;
+  let result = true;
+  for (let i = 0; i < bootstrapChunks.length; i++) {
+    result = writeChunk(destination, bootstrapChunks[i]);
+  }
+  return result;
+}
+
 // Structural Nodes
 
 // A placeholder is a node inside a hidden partial tree that can be filled in later, but before
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 723c03dfdba12..7373e71681761 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -29,6 +29,7 @@ export const isPrimaryRenderer = false;
 
 export type ResponseState = {
   // Keep this in sync with ReactDOMServerFormatConfig
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
@@ -50,6 +51,7 @@ export function createResponseState(
   const responseState = createResponseStateImpl(identifierPrefix, undefined);
   return {
     // Keep this in sync with ReactDOMServerFormatConfig
+    bootstrapChunks: responseState.bootstrapChunks,
     startInlineScript: responseState.startInlineScript,
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
@@ -95,6 +97,7 @@ export {
   writeStartPendingSuspenseBoundary,
   writeEndPendingSuspenseBoundary,
   writePlaceholder,
+  writeCompletedRoot,
 } from './ReactDOMServerFormatConfig';
 
 import {stringToChunk} from 'react-server/src/ReactServerStreamConfig';
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 214561a788604..3daa48f420b16 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -164,6 +164,13 @@ export function pushEndInstance(
   target.push(END);
 }
 
+export function writeCompletedRoot(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  return true;
+}
+
 // IDs are formatted as little endian Uint16
 function formatID(id: number): Uint8Array {
   if (id > 0xffff) {
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 080c3042080a2..efcf727eac896 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -126,6 +126,13 @@ const ReactNoopServer = ReactFizzServer({
     target.push(POP);
   },
 
+  writeCompletedRoot(
+    destination: Destination,
+    responseState: ResponseState,
+  ): boolean {
+    return true;
+  },
+
   writePlaceholder(
     destination: Destination,
     responseState: ResponseState,
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index b5b6ba84e77d4..35a8143125d74 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -28,6 +28,9 @@ import {
 
 type Options = {
   identifierPrefix?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts: Array<string>,
+  bootstrapModules: Array<string>,
   progressiveChunkSize?: number,
   onError: (error: mixed) => void,
 };
@@ -46,7 +49,13 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
   };
   const request = createRequest(
     children,
-    createResponseState(options ? options.identifierPrefix : undefined),
+    createResponseState(
+      options ? options.identifierPrefix : undefined,
+      undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    ),
     createRootFormatContext(undefined),
     options ? options.progressiveChunkSize : undefined,
     options.onError,
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index 4cf8bb8f7bf66..7444ae6f90934 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -48,6 +48,21 @@ describe('ReactDOMServerFB', () => {
     expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
+  it('should emit bootstrap script src at the end', () => {
+    const stream = ReactDOMServer.renderToStream(<div>hello world</div>, {
+      bootstrapScriptContent: 'INIT();',
+      bootstrapScripts: ['init.js'],
+      bootstrapModules: ['init.mjs'],
+      onError(x) {
+        console.error(x);
+      },
+    });
+    const result = readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
+
   it('emits all HTML as one unit if we wait until the end to start', async () => {
     let hasLoaded = false;
     let resolve;
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4ab2f06d518db..6692b92648643 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -36,6 +36,7 @@ import {
   closeWithError,
 } from './ReactServerStreamConfig';
 import {
+  writeCompletedRoot,
   writePlaceholder,
   writeStartCompletedSuspenseBoundary,
   writeStartPendingSuspenseBoundary,
@@ -1779,6 +1780,7 @@ function flushCompletedQueues(
     if (completedRootSegment !== null && request.pendingRootTasks === 0) {
       flushSegment(request, destination, completedRootSegment);
       request.completedRootSegment = null;
+      writeCompletedRoot(destination, request.responseState);
     }
 
     // We emit client rendering instructions for already emitted boundaries first.
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index d816198c64180..8cfe59ce1628c 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -44,6 +44,7 @@ export const pushStartCompletedSuspenseBoundary =
   $$$hostConfig.pushStartCompletedSuspenseBoundary;
 export const pushEndCompletedSuspenseBoundary =
   $$$hostConfig.pushEndCompletedSuspenseBoundary;
+export const writeCompletedRoot = $$$hostConfig.writeCompletedRoot;
 export const writePlaceholder = $$$hostConfig.writePlaceholder;
 export const writeStartCompletedSuspenseBoundary =
   $$$hostConfig.writeStartCompletedSuspenseBoundary;

From 5ca4b0433205d01294b6306a3a90af1103e37dc9 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 20 Oct 2021 09:50:26 -0400
Subject: [PATCH 053/109] Dev Tools: Relax constraint on passing extensionId
 for backend init (#22597)

---
 packages/react-devtools-extensions/src/backend.js         | 8 +++++---
 packages/react-devtools-extensions/src/contentScript.js   | 5 +++++
 .../react-devtools-extensions/src/injectGlobalHook.js     | 4 +++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
index aa8578a108646..5b6821bbba038 100644
--- a/packages/react-devtools-extensions/src/backend.js
+++ b/packages/react-devtools-extensions/src/backend.js
@@ -2,7 +2,7 @@
 // Running module factories is intentionally delayed until we know the hook exists.
 // This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039
 
-/** @flow */
+// @flow strict-local
 
 'use strict';
 
@@ -13,15 +13,16 @@ function welcome(event) {
   ) {
     return;
   }
+  const extensionId = event.data.extensionId;
 
   window.removeEventListener('message', welcome);
 
-  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, extensionId);
 }
 
 window.addEventListener('message', welcome);
 
-function setup(hook) {
+function setup(hook, extensionId) {
   if (hook == null) {
     // DevTools didn't get injected into this page (maybe b'c of the contentType).
     return;
@@ -55,6 +56,7 @@ function setup(hook) {
         {
           source: 'react-devtools-bridge',
           payload: {event, payload},
+          extensionId,
         },
         '*',
         transferable,
diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js
index c914c6e7b3dfc..179959f7e01ec 100644
--- a/packages/react-devtools-extensions/src/contentScript.js
+++ b/packages/react-devtools-extensions/src/contentScript.js
@@ -2,6 +2,8 @@
 
 'use strict';
 
+import {CURRENT_EXTENSION_ID} from './constants';
+
 let backendDisconnected: boolean = false;
 let backendInitialized: boolean = false;
 
@@ -10,6 +12,7 @@ function sayHelloToBackend() {
     {
       source: 'react-devtools-content-script',
       hello: true,
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -20,6 +23,7 @@ function handleMessageFromDevtools(message) {
     {
       source: 'react-devtools-content-script',
       payload: message,
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -49,6 +53,7 @@ function handleDisconnect() {
         type: 'event',
         event: 'shutdown',
       },
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index 02d5109e291eb..a5d96966c7e10 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -31,12 +31,14 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-  if (data.extensionId !== CURRENT_EXTENSION_ID) {
+  if (data.extensionId != null && data.extensionId !== CURRENT_EXTENSION_ID) {
     if (__DEBUG__) {
       console.log(
         `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
         {
           currentExtension: EXTENSION_INSTALLATION_TYPE,
+          currentExtensionId: CURRENT_EXTENSION_ID,
+          providedExtensionId: data.extensionId,
         },
       );
     }

From c213030b4966e935bb36c138e28761ea22dd837d Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 20 Oct 2021 16:00:13 -0400
Subject: [PATCH 054/109] React DevTools 4.20.1 -> 4.20.2 (#22605)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 ++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 5f26b46c970fd..d57fc10ff97ec 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 21babe5e90691..ecafb54ca6d34 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.20.1",
-  "version_name": "4.20.1",
+  "version": "4.20.2",
+  "version_name": "4.20.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 7dab50d1ba25f..6b813661e48d6 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.20.1",
-  "version_name": "4.20.1",
+  "version": "4.20.2",
+  "version_name": "4.20.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index d83f2f3f50a2a..16f4e7821e476 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index be6e005a07ae8..7e013af63677b 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 6491132afa35b..84fdf9d470fa2 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 0e0aa89631937..8f916003d79ff 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.20.2 (October 20, 2021)
+
+#### Bugfix
+* Dev Tools: Relax constraint on passing extensionId for backend init ([@jstejada](https://github.com/jstejada) in [#22597](https://github.com/facebook/react/pull/22597))
+* DevTools: Fix passing extensionId in evaled postMessage calls ([@jstejada](https://github.com/jstejada) in [#22590](https://github.com/facebook/react/pull/22590))
+
 ## 4.20.1 (October 19, 2021)
 
 #### Bugfix
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index b22ef0bab4334..00240aa38200b 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.20.1",
+    "react-devtools-core": "4.20.2",
     "update-notifier": "^2.1.0"
   }
 }

From f6abf4b400812c3207ca16aecb84fa3ce352e166 Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Thu, 21 Oct 2021 06:22:41 +0300
Subject: [PATCH 055/109] Fix typos (#22494)

---
 packages/react-devtools-shared/src/backend/legacy/renderer.js | 2 +-
 packages/react-dom/src/test-utils/ReactTestUtils.js           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index d799ce72a275c..c5684f222fa31 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -716,7 +716,7 @@ export function attach(
 
     // Any time an inspected element has an update,
     // we should update the selected $r value as wel.
-    // Do this before dehyration (cleanForBridge).
+    // Do this before dehydration (cleanForBridge).
     updateSelectedElement(id);
 
     inspectedElement.context = cleanForBridge(
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 1aadc90b250a8..c83b072447ba7 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -178,7 +178,7 @@ function findAllInRenderedTree(inst, test) {
 }
 
 /**
- * Finds all instance of components in the rendered tree that are DOM
+ * Finds all instances of components in the rendered tree that are DOM
  * components with the class name matching `className`.
  * @return {array} an array of all the matches.
  */
@@ -233,7 +233,7 @@ function findRenderedDOMComponentWithClass(root, className) {
 }
 
 /**
- * Finds all instance of components in the rendered tree that are DOM
+ * Finds all instances of components in the rendered tree that are DOM
  * components with the tag name matching `tagName`.
  * @return {array} an array of all the matches.
  */

From 4ba20579daf119639567f69a0cb38128532754c6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Oct 2021 14:40:41 -0400
Subject: [PATCH 056/109] Scheduling Profiler: De-emphasize React internal
 frames (#22588)

This commit adds code to all React bundles to explicitly register the beginning and ending of the module. This is done by creating Error objects (which capture the file name, line number, and column number) and passing them explicitly to a DevTools hook (when present).

Next, as the Scheduling Profiler logs metadata to the User Timing API, it prints these module ranges along with other metadata (like Lane values and profiler version number).

Lastly, the Scheduling Profiler UI compares stack frames to these ranges when drawing the flame graph and dims or de-emphasizes frames that fall within an internal module.

The net effect of this is that user code (and 3rd party code) stands out clearly in the flame graph while React internal modules are dimmed.

Internal module ranges are completely optional. Older profiling samples, or ones recorded without the React DevTools extension installed, will simply not dim the internal frames.
---
 .../src/checkForDuplicateInstallations.js     |  8 +-
 .../src/constants.js                          | 10 ++-
 .../src/CanvasPage.js                         |  1 +
 .../src/content-views/FlamechartView.js       | 40 ++++++++--
 .../src/content-views/constants.js            | 12 +++
 .../utils/__tests__/__modules__/module-one.js | 16 ++++
 .../utils/__tests__/__modules__/module-two.js | 18 +++++
 .../utils/__tests__/moduleFilters-test.js     | 79 +++++++++++++++++++
 .../src/content-views/utils/moduleFilters.js  | 69 ++++++++++++++++
 .../__tests__/preprocessData-test.internal.js |  4 +
 .../src/import-worker/preprocessData.js       | 59 ++++++++++++++
 .../src/types.js                              | 12 +++
 .../src/backend/types.js                      |  5 ++
 .../react-devtools-shared/src/constants.js    | 10 +++
 packages/react-devtools-shared/src/hook.js    | 41 ++++++++++
 .../src/SchedulingProfiler.js                 | 17 ++++
 .../shared/registerInternalModuleStart.js     | 20 +++++
 packages/shared/registerInternalModuleStop.js | 20 +++++
 scripts/rollup/build.js                       |  3 +-
 scripts/rollup/bundles.js                     | 62 +++++++++++++++
 scripts/rollup/wrappers.js                    | 52 +++++++++++-
 21 files changed, 543 insertions(+), 15 deletions(-)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
 create mode 100644 packages/shared/registerInternalModuleStart.js
 create mode 100644 packages/shared/registerInternalModuleStop.js

diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
index d86cac7709295..01db8edb34f74 100644
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -9,13 +9,15 @@
 
 declare var chrome: any;
 
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+  __DEBUG__,
+} from 'react-devtools-shared/src/constants';
 import {getBrowserName} from './utils';
 import {
   EXTENSION_INSTALL_CHECK,
   EXTENSION_INSTALLATION_TYPE,
-  INTERNAL_EXTENSION_ID,
-  LOCAL_EXTENSION_ID,
 } from './constants';
 
 const IS_CHROME = getBrowserName() === 'Chrome';
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
index 310bbaca11563..c17ad4d64acd8 100644
--- a/packages/react-devtools-extensions/src/constants.js
+++ b/packages/react-devtools-extensions/src/constants.js
@@ -7,6 +7,12 @@
  * @flow strict-local
  */
 
+import {
+  CHROME_WEBSTORE_EXTENSION_ID,
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+} from 'react-devtools-shared/src/constants';
+
 declare var chrome: any;
 
 export const CURRENT_EXTENSION_ID = chrome.runtime.id;
@@ -15,10 +21,6 @@ export const EXTENSION_INSTALL_CHECK = 'extension-install-check';
 export const SHOW_DUPLICATE_EXTENSION_WARNING =
   'show-duplicate-extension-warning';
 
-export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
-export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
-export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
-
 export const EXTENSION_INSTALLATION_TYPE:
   | 'public'
   | 'internal'
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 48efcf8105e7c..ab5c828280c0a 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -374,6 +374,7 @@ function AutoSizedCanvas({
       surface,
       defaultFrame,
       data.flamechart,
+      data.internalModuleSourceToRanges,
       data.duration,
     );
     flamechartViewRef.current = flamechartView;
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index 86f411a5b6e24..bbc8dcf13936b 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -11,6 +11,7 @@ import type {
   Flamechart,
   FlamechartStackFrame,
   FlamechartStackLayer,
+  InternalModuleSourceToRanges,
 } from '../types';
 import type {
   Interaction,
@@ -30,6 +31,7 @@ import {
   rectIntersectsRect,
   verticallyStackedLayout,
 } from '../view-base';
+import {isInternalModule} from './utils/moduleFilters';
 import {
   durationToWidth,
   positioningScaleFactor,
@@ -76,6 +78,8 @@ class FlamechartStackLayerView extends View {
   /** A set of `stackLayer`'s frames, for efficient lookup. */
   _stackFrameSet: Set<FlamechartStackFrame>;
 
+  _internalModuleSourceToRanges: InternalModuleSourceToRanges;
+
   _intrinsicSize: Size;
 
   _hoveredStackFrame: FlamechartStackFrame | null = null;
@@ -85,11 +89,13 @@ class FlamechartStackLayerView extends View {
     surface: Surface,
     frame: Rect,
     stackLayer: FlamechartStackLayer,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
     duration: number,
   ) {
     super(surface, frame);
     this._stackLayer = stackLayer;
     this._stackFrameSet = new Set(stackLayer);
+    this._internalModuleSourceToRanges = internalModuleSourceToRanges;
     this._intrinsicSize = {
       width: duration,
       height: FLAMECHART_FRAME_HEIGHT,
@@ -160,9 +166,19 @@ class FlamechartStackLayerView extends View {
       }
 
       const showHoverHighlight = _hoveredStackFrame === _stackLayer[i];
-      context.fillStyle = showHoverHighlight
-        ? hoverColorForStackFrame(stackFrame)
-        : defaultColorForStackFrame(stackFrame);
+
+      let textFillStyle;
+      if (isInternalModule(this._internalModuleSourceToRanges, stackFrame)) {
+        context.fillStyle = showHoverHighlight
+          ? COLORS.INTERNAL_MODULE_FRAME_HOVER
+          : COLORS.INTERNAL_MODULE_FRAME;
+        textFillStyle = COLORS.INTERNAL_MODULE_FRAME_TEXT;
+      } else {
+        context.fillStyle = showHoverHighlight
+          ? hoverColorForStackFrame(stackFrame)
+          : defaultColorForStackFrame(stackFrame);
+        textFillStyle = COLORS.TEXT_COLOR;
+      }
 
       const drawableRect = intersectionOfRects(nodeRect, visibleArea);
       context.fillRect(
@@ -172,7 +188,9 @@ class FlamechartStackLayerView extends View {
         drawableRect.size.height,
       );
 
-      drawText(name, context, nodeRect, drawableRect);
+      drawText(name, context, nodeRect, drawableRect, {
+        fillStyle: textFillStyle,
+      });
     }
 
     // Render bottom border.
@@ -264,13 +282,22 @@ export class FlamechartView extends View {
     surface: Surface,
     frame: Rect,
     flamechart: Flamechart,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
     duration: number,
   ) {
     super(surface, frame, layeredLayout);
-    this.setDataAndUpdateSubviews(flamechart, duration);
+    this.setDataAndUpdateSubviews(
+      flamechart,
+      internalModuleSourceToRanges,
+      duration,
+    );
   }
 
-  setDataAndUpdateSubviews(flamechart: Flamechart, duration: number) {
+  setDataAndUpdateSubviews(
+    flamechart: Flamechart,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
+    duration: number,
+  ) {
     const {surface, frame, _onHover, _hoveredStackFrame} = this;
 
     // Clear existing rows on data update
@@ -285,6 +312,7 @@ export class FlamechartView extends View {
         surface,
         frame,
         stackLayer,
+        internalModuleSourceToRanges,
         duration,
       );
       this._verticalStackView.addSubview(rowView);
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index a715945f77e92..4d896d1967e96 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -45,6 +45,9 @@ export const MIN_INTERVAL_SIZE_PX = 70;
 // TODO Replace this with "export let" vars
 export let COLORS = {
   BACKGROUND: '',
+  INTERNAL_MODULE_FRAME: '',
+  INTERNAL_MODULE_FRAME_HOVER: '',
+  INTERNAL_MODULE_FRAME_TEXT: '',
   NATIVE_EVENT: '',
   NATIVE_EVENT_HOVER: '',
   NETWORK_PRIMARY: '',
@@ -107,6 +110,15 @@ export function updateColorsToMatchTheme(element: Element): boolean {
 
   COLORS = {
     BACKGROUND: computedStyle.getPropertyValue('--color-background'),
+    INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-internal-module',
+    ),
+    INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-internal-module-hover',
+    ),
+    INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-internal-module-text',
+    ),
     NATIVE_EVENT: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-native-event',
     ),
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
new file mode 100644
index 0000000000000..6c3ace6bfbc65
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export const outerErrorA = new Error();
+
+export const moduleStartError = new Error();
+export const innerError = new Error();
+export const moduleStopError = new Error();
+
+export const outerErrorB = new Error();
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
new file mode 100644
index 0000000000000..994f317900555
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export const moduleAStartError = new Error();
+export const innerErrorA = new Error();
+export const moduleAStopError = new Error();
+
+export const outerError = new Error();
+
+export const moduleBStartError = new Error();
+export const innerErrorB = new Error();
+export const moduleBStopError = new Error();
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
new file mode 100644
index 0000000000000..d84840371daa1
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {isInternalModule} from '../moduleFilters';
+
+describe('isInternalModule', () => {
+  let map;
+
+  function createFlamechartStackFrame(scriptUrl, locationLine, locationColumn) {
+    return {
+      name: 'test',
+      timestamp: 0,
+      duration: 1,
+      scriptUrl,
+      locationLine,
+      locationColumn,
+    };
+  }
+
+  function createStackFrame(fileName, lineNumber, columnNumber) {
+    return {
+      columnNumber: columnNumber,
+      lineNumber: lineNumber,
+      fileName: fileName,
+      functionName: 'test',
+      source: `    at test (${fileName}:${lineNumber}:${columnNumber})`,
+    };
+  }
+
+  beforeEach(() => {
+    map = new Map();
+    map.set('foo', [
+      [createStackFrame('foo', 10, 0), createStackFrame('foo', 15, 100)],
+    ]);
+    map.set('bar', [
+      [createStackFrame('bar', 10, 0), createStackFrame('bar', 15, 100)],
+      [createStackFrame('bar', 20, 0), createStackFrame('bar', 25, 100)],
+    ]);
+  });
+
+  it('should properly identify stack frames within the provided module ranges', () => {
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 10, 0)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 12, 35)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 15, 100)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('bar', 12, 0)),
+    ).toBe(true);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('bar', 22, 125)),
+    ).toBe(true);
+  });
+
+  it('should properly identify stack frames outside of the provided module ranges', () => {
+    expect(isInternalModule(map, createFlamechartStackFrame('foo', 9, 0))).toBe(
+      false,
+    );
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('foo', 15, 101)),
+    ).toBe(false);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('bar', 17, 0)),
+    ).toBe(false);
+    expect(
+      isInternalModule(map, createFlamechartStackFrame('baz', 12, 0)),
+    ).toBe(false);
+  });
+});
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
new file mode 100644
index 0000000000000..7030e6124b603
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {
+  FlamechartStackFrame,
+  InternalModuleSourceToRanges,
+} from '../../types';
+
+import {
+  CHROME_WEBSTORE_EXTENSION_ID,
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+} from 'react-devtools-shared/src/constants';
+
+export function isInternalModule(
+  internalModuleSourceToRanges: InternalModuleSourceToRanges,
+  flamechartStackFrame: FlamechartStackFrame,
+): boolean {
+  const {locationColumn, locationLine, scriptUrl} = flamechartStackFrame;
+
+  if (scriptUrl == null || locationColumn == null || locationLine == null) {
+    // This could indicate a browser-internal API like performance.mark().
+    return false;
+  }
+
+  // Internal modules are only registered if DevTools was running when the profile was captured,
+  // but DevTools should also hide its own frames to avoid over-emphasizing them.
+  if (
+    // Handle webpack-internal:// sources
+    scriptUrl.includes('/react-devtools') ||
+    scriptUrl.includes('/react_devtools') ||
+    // Filter out known extension IDs
+    scriptUrl.includes(CHROME_WEBSTORE_EXTENSION_ID) ||
+    scriptUrl.includes(INTERNAL_EXTENSION_ID) ||
+    scriptUrl.includes(LOCAL_EXTENSION_ID)
+    // Unfortunately this won't get everything, like relatively loaded chunks or Web Worker files.
+  ) {
+    return true;
+  }
+
+  // Filter out React internal packages.
+  const ranges = internalModuleSourceToRanges.get(scriptUrl);
+  if (ranges != null) {
+    for (let i = 0; i < ranges.length; i++) {
+      const [startStackFrame, stopStackFrame] = ranges[i];
+
+      const isAfterStart =
+        locationLine > startStackFrame.lineNumber ||
+        (locationLine === startStackFrame.lineNumber &&
+          locationColumn >= startStackFrame.columnNumber);
+      const isBeforeStop =
+        locationLine < stopStackFrame.lineNumber ||
+        (locationLine === stopStackFrame.lineNumber &&
+          locationColumn <= stopStackFrame.columnNumber);
+
+      if (isAfterStart && isBeforeStop) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index e458f8060f84b..f8690dc57447c 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -282,6 +282,7 @@ describe('preprocessData', () => {
           "componentMeasures": Array [],
           "duration": 0.005,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
@@ -449,6 +450,7 @@ describe('preprocessData', () => {
           "componentMeasures": Array [],
           "duration": 0.011,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
@@ -636,6 +638,7 @@ describe('preprocessData', () => {
           "componentMeasures": Array [],
           "duration": 0.013,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
@@ -914,6 +917,7 @@ describe('preprocessData', () => {
           ],
           "duration": 0.031,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index aff78142b81a6..6c41de1e3e279 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -13,6 +13,7 @@ import {
 } from '@elg/speedscope';
 import type {TimelineEvent} from '@elg/speedscope';
 import type {
+  ErrorStackFrame,
   BatchUID,
   Flamechart,
   Milliseconds,
@@ -30,6 +31,7 @@ import type {
 import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
 import InvalidProfileError from './InvalidProfileError';
 import {getBatchRange} from '../utils/getBatchRange';
+import ErrorStackParser from 'error-stack-parser';
 
 type MeasureStackElement = {|
   type: ReactMeasureType,
@@ -43,6 +45,8 @@ type ProcessorState = {|
   asyncProcessingPromises: Promise<any>[],
   batchUID: BatchUID,
   currentReactComponentMeasure: ReactComponentMeasure | null,
+  internalModuleCurrentStackFrame: ErrorStackFrame | null,
+  internalModuleStackStringSet: Set<string>,
   measureStack: MeasureStackElement[],
   nativeEventStack: NativeEvent[],
   nextRenderShouldGenerateNewBatchID: boolean,
@@ -793,6 +797,49 @@ function processTimelineEvent(
         );
       } // eslint-disable-line brace-style
 
+      // Internal module ranges
+      else if (name.startsWith('--react-internal-module-start-')) {
+        const stackFrameStart = name.substr(30);
+
+        if (!state.internalModuleStackStringSet.has(stackFrameStart)) {
+          state.internalModuleStackStringSet.add(stackFrameStart);
+
+          const parsedStackFrameStart = parseStackFrame(stackFrameStart);
+
+          state.internalModuleCurrentStackFrame = parsedStackFrameStart;
+        }
+      } else if (name.startsWith('--react-internal-module-stop-')) {
+        const stackFrameStop = name.substr(19);
+
+        if (!state.internalModuleStackStringSet.has(stackFrameStop)) {
+          state.internalModuleStackStringSet.add(stackFrameStop);
+
+          const parsedStackFrameStop = parseStackFrame(stackFrameStop);
+
+          if (
+            parsedStackFrameStop !== null &&
+            state.internalModuleCurrentStackFrame !== null
+          ) {
+            const parsedStackFrameStart = state.internalModuleCurrentStackFrame;
+
+            state.internalModuleCurrentStackFrame = null;
+
+            const range = [parsedStackFrameStart, parsedStackFrameStop];
+            const ranges = currentProfilerData.internalModuleSourceToRanges.get(
+              parsedStackFrameStart.fileName,
+            );
+            if (ranges == null) {
+              currentProfilerData.internalModuleSourceToRanges.set(
+                parsedStackFrameStart.fileName,
+                [range],
+              );
+            } else {
+              ranges.push(range);
+            }
+          }
+        }
+      } // eslint-disable-line brace-style
+
       // Other user timing marks/measures
       else if (ph === 'R' || ph === 'n') {
         // User Timing mark
@@ -855,6 +902,15 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
   return flamechart;
 }
 
+function parseStackFrame(stackFrame: string): ErrorStackFrame | null {
+  const error = new Error();
+  error.stack = stackFrame;
+
+  const frames = ErrorStackParser.parse(error);
+
+  return frames.length === 1 ? frames[0] : null;
+}
+
 export default async function preprocessData(
   timeline: TimelineEvent[],
 ): Promise<ReactProfilerData> {
@@ -870,6 +926,7 @@ export default async function preprocessData(
     componentMeasures: [],
     duration: 0,
     flamechart,
+    internalModuleSourceToRanges: new Map(),
     laneToLabelMap: new Map(),
     laneToReactMeasureMap,
     nativeEvents: [],
@@ -913,6 +970,8 @@ export default async function preprocessData(
     asyncProcessingPromises: [],
     batchUID: 0,
     currentReactComponentMeasure: null,
+    internalModuleCurrentStackFrame: null,
+    internalModuleStackStringSet: new Set(),
     measureStack: [],
     nativeEventStack: [],
     nextRenderShouldGenerateNewBatchID: true,
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 4bfafe9a2eccc..e5b14e7897ace 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -17,6 +17,12 @@ export type Return<T> = Return_<*, T>;
 
 // Project types
 
+export type ErrorStackFrame = {
+  fileName: string,
+  lineNumber: number,
+  columnNumber: number,
+};
+
 export type Milliseconds = number;
 
 export type ReactLane = number;
@@ -169,11 +175,17 @@ export type ViewState = {|
   viewToMutableViewStateMap: Map<string, mixed>,
 |};
 
+export type InternalModuleSourceToRanges = Map<
+  string,
+  Array<[ErrorStackFrame, ErrorStackFrame]>,
+>;
+
 export type ReactProfilerData = {|
   batchUIDToMeasuresMap: Map<BatchUID, ReactMeasure[]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
   flamechart: Flamechart,
+  internalModuleSourceToRanges: InternalModuleSourceToRanges,
   laneToLabelMap: Map<ReactLane, string>,
   laneToReactMeasureMap: Map<ReactLane, ReactMeasure[]>,
   nativeEvents: NativeEvent[],
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 3f623ea656e48..46e1287797981 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -420,6 +420,11 @@ export type DevToolsHook = {
     didError?: boolean,
   ) => void,
 
+  // Scheduling Profiler internal module filtering
+  getInternalModuleRanges: () => Array<[string, string]>,
+  registerInternalModuleStart: (moduleStartError: Error) => void,
+  registerInternalModuleStop: (moduleStopError: Error) => void,
+
   // Testing
   dangerous_setTargetConsoleForTesting?: (fakeConsole: Object) => void,
   ...
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 40c28a0f6abdf..3c3aaae2fc461 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -7,6 +7,10 @@
  * @flow
  */
 
+export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
+export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
+export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
+
 // Flip this flag to true to enable verbose console debug logging.
 export const __DEBUG__ = false;
 
@@ -147,6 +151,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#dcdcdc',
     '--color-resize-bar-border': '#d1d1d1',
     '--color-resize-bar-dot': '#333333',
+    '--color-scheduling-profiler-internal-module': '#d1d1d1',
+    '--color-scheduling-profiler-internal-module-hover': '#c9c9c9',
+    '--color-scheduling-profiler-internal-module-text': '#444',
     '--color-scheduling-profiler-native-event': '#ccc',
     '--color-scheduling-profiler-native-event-hover': '#aaa',
     '--color-scheduling-profiler-network-primary': '#fcf3dc',
@@ -288,6 +295,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#31363f',
     '--color-resize-bar-border': '#3d424a',
     '--color-resize-bar-dot': '#cfd1d5',
+    '--color-scheduling-profiler-internal-module': '#303542',
+    '--color-scheduling-profiler-internal-module-hover': '#363b4a',
+    '--color-scheduling-profiler-internal-module-text': '#7f8899',
     '--color-scheduling-profiler-native-event': '#b2b2b2',
     '--color-scheduling-profiler-native-event-hover': '#949494',
     '--color-scheduling-profiler-network-primary': '#fcf3dc',
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 6f34f86132ab6..e265212e31c42 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -490,6 +490,40 @@ export function installHook(target: any): DevToolsHook | null {
     }
   }
 
+  type StackFrameString = string;
+
+  const openModuleRangesStack: Array<StackFrameString> = [];
+  const moduleRanges: Array<[StackFrameString, StackFrameString]> = [];
+
+  function getTopStackFrameString(error: Error): StackFrameString | null {
+    const frames = error.stack.split('\n');
+    const frame = frames.length > 1 ? frames[1] : null;
+    return frame;
+  }
+
+  function getInternalModuleRanges(): Array<
+    [StackFrameString, StackFrameString],
+  > {
+    return moduleRanges;
+  }
+
+  function registerInternalModuleStart(error: Error) {
+    const startStackFrame = getTopStackFrameString(error);
+    if (startStackFrame !== null) {
+      openModuleRangesStack.push(startStackFrame);
+    }
+  }
+
+  function registerInternalModuleStop(error: Error) {
+    if (openModuleRangesStack.length > 0) {
+      const startStackFrame = openModuleRangesStack.pop();
+      const stopStackFrame = getTopStackFrameString(error);
+      if (stopStackFrame !== null) {
+        moduleRanges.push([startStackFrame, stopStackFrame]);
+      }
+    }
+  }
+
   // TODO: More meaningful names for "rendererInterfaces" and "renderers".
   const fiberRoots = {};
   const rendererInterfaces = new Map();
@@ -520,6 +554,13 @@ export function installHook(target: any): DevToolsHook | null {
     onCommitFiberRoot,
     onPostCommitFiberRoot,
     setStrictMode,
+
+    // Schedule Profiler runtime helpers.
+    // These internal React modules to report their own boundaries
+    // which in turn enables the profiler to dim or filter internal frames.
+    getInternalModuleRanges,
+    registerInternalModuleStart,
+    registerInternalModuleStop,
   };
 
   if (__TEST__) {
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 03148d499282d..4df55137fda97 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -98,6 +98,22 @@ function markVersionMetadata() {
   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'
+  ) {
+    const ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
+    for (let i = 0; i < ranges.length; i++) {
+      const [startStackFrame, stopStackFrame] = ranges[i];
+
+      markAndClear(`--react-internal-module-start-${startStackFrame}`);
+      markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+    }
+  }
+}
+
 export function markCommitStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
@@ -114,6 +130,7 @@ export function markCommitStarted(lanes: Lanes): void {
       // we can log this data only once (when started) and remove the per-commit logging.
       markVersionMetadata();
       markLaneToLabelMetadata();
+      markInternalModuleRanges();
     }
   }
 }
diff --git a/packages/shared/registerInternalModuleStart.js b/packages/shared/registerInternalModuleStart.js
new file mode 100644
index 0000000000000..aa1154fe9f1bf
--- /dev/null
+++ b/packages/shared/registerInternalModuleStart.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+
+// Don't require this file directly; it's embedded by Rollup during build.
+
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+}
diff --git a/packages/shared/registerInternalModuleStop.js b/packages/shared/registerInternalModuleStop.js
new file mode 100644
index 0000000000000..dab139f2557f9
--- /dev/null
+++ b/packages/shared/registerInternalModuleStop.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+
+// Don't require this file directly; it's embedded by Rollup during build.
+
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+}
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 4f7d26cddbec9..7e29c0e8c54d3 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -440,7 +440,8 @@ function getPlugins(
           bundleType,
           globalName,
           filename,
-          moduleType
+          moduleType,
+          bundle.wrapWithModuleBoundaries
         );
       },
     },
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index c24281d43ef08..af7b30b7feb99 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -80,6 +80,7 @@ const bundles = [
     entry: 'react',
     global: 'React',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -90,6 +91,7 @@ const bundles = [
     entry: 'react/unstable-shared-subset',
     global: 'React',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -108,6 +110,7 @@ const bundles = [
     entry: 'react/jsx-runtime',
     global: 'JSXRuntime',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -128,6 +131,7 @@ const bundles = [
     entry: 'react/jsx-dev-runtime',
     global: 'JSXDEVRuntime',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -138,6 +142,7 @@ const bundles = [
     entry: 'react-fetch/index.browser',
     global: 'ReactFetch',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -148,6 +153,7 @@ const bundles = [
     entry: 'react-fetch/index.node',
     global: 'ReactFetch',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'http', 'https'],
   },
 
@@ -158,6 +164,7 @@ const bundles = [
     entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -168,6 +175,7 @@ const bundles = [
     entry: 'react-fs/index.node.server',
     global: 'ReactFilesystem',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'fs/promises', 'path'],
   },
 
@@ -178,6 +186,7 @@ const bundles = [
     entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -188,6 +197,7 @@ const bundles = [
     entry: 'react-pg/index.node.server',
     global: 'ReactPostgres',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'pg'],
   },
 
@@ -208,6 +218,7 @@ const bundles = [
     entry: 'react-dom',
     global: 'ReactDOM',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -219,6 +230,7 @@ const bundles = [
     global: 'ReactDOMForked',
     enableNewReconciler: true,
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -229,6 +241,7 @@ const bundles = [
     entry: 'react-dom/test-utils',
     global: 'ReactTestUtils',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'react-dom'],
   },
 
@@ -240,6 +253,7 @@ const bundles = [
     entry: 'react-dom/testing',
     global: 'ReactDOMTesting',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -253,6 +267,7 @@ const bundles = [
     name: 'react-dom-server-legacy.browser',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
     babel: opts =>
       Object.assign({}, opts, {
@@ -268,6 +283,7 @@ const bundles = [
     name: 'react-dom-server-legacy.node',
     externals: ['react', 'stream'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -284,6 +300,7 @@ const bundles = [
     name: 'react-dom-server.browser',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
   {
@@ -293,6 +310,7 @@ const bundles = [
     name: 'react-dom-server.node',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
   {
@@ -301,6 +319,7 @@ const bundles = [
     entry: 'react-server-dom-relay/src/ReactDOMServerFB',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -311,6 +330,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/writer.browser.server',
     global: 'ReactServerDOMWriter',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
   {
@@ -319,6 +339,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/writer.node.server',
     global: 'ReactServerDOMWriter',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -329,6 +350,7 @@ const bundles = [
     entry: 'react-server-dom-webpack',
     global: 'ReactServerDOMReader',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -339,6 +361,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/plugin',
     global: 'ReactServerWebpackPlugin',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
@@ -349,6 +372,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/node-loader',
     global: 'ReactServerWebpackNodeLoader',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['acorn'],
   },
 
@@ -359,6 +383,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/node-register',
     global: 'ReactFlightWebpackNodeRegister',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['url', 'module'],
   },
 
@@ -369,6 +394,7 @@ const bundles = [
     entry: 'react-server-dom-relay/server',
     global: 'ReactFlightDOMRelayServer', // TODO: Rename to Writer
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightDOMRelayServerIntegration',
@@ -383,6 +409,7 @@ const bundles = [
     entry: 'react-server-dom-relay',
     global: 'ReactFlightDOMRelayClient', // TODO: Rename to Reader
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
@@ -397,6 +424,7 @@ const bundles = [
     entry: 'react-server-native-relay/server',
     global: 'ReactFlightNativeRelayServer', // TODO: Rename to Writer
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightNativeRelayServerIntegration',
@@ -412,6 +440,7 @@ const bundles = [
     entry: 'react-server-native-relay',
     global: 'ReactFlightNativeRelayClient', // TODO: Rename to Reader
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightNativeRelayClientIntegration',
@@ -427,6 +456,7 @@ const bundles = [
     entry: 'react-suspense-test-utils',
     global: 'ReactSuspenseTestUtils',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -445,6 +475,7 @@ const bundles = [
     global: 'ReactART',
     externals: ['react'],
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         // Include JSX
@@ -468,6 +499,7 @@ const bundles = [
     global: 'ReactNativeRenderer',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -482,6 +514,7 @@ const bundles = [
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -500,6 +533,7 @@ const bundles = [
     global: 'ReactFabric',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -514,6 +548,7 @@ const bundles = [
     global: 'ReactFabric',
     externals: ['react-native'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -544,6 +579,7 @@ const bundles = [
       'ReactNativeInternalFeatureFlags',
     ],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -559,6 +595,7 @@ const bundles = [
     entry: 'react-noop-renderer',
     global: 'ReactNoopRenderer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
   },
 
@@ -569,6 +606,7 @@ const bundles = [
     entry: 'react-noop-renderer/persistent',
     global: 'ReactNoopRendererPersistent',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -579,6 +617,7 @@ const bundles = [
     entry: 'react-noop-renderer/server',
     global: 'ReactNoopRendererServer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -589,6 +628,7 @@ const bundles = [
     entry: 'react-noop-renderer/flight-server',
     global: 'ReactNoopFlightServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'scheduler',
@@ -604,6 +644,7 @@ const bundles = [
     entry: 'react-noop-renderer/flight-client',
     global: 'ReactNoopFlightClient',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'scheduler',
@@ -619,6 +660,7 @@ const bundles = [
     entry: 'react-reconciler',
     global: 'ReactReconciler',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -629,6 +671,7 @@ const bundles = [
     entry: 'react-server',
     global: 'ReactServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -639,6 +682,7 @@ const bundles = [
     entry: 'react-server/flight',
     global: 'ReactFlightServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -649,6 +693,7 @@ const bundles = [
     entry: 'react-client/flight',
     global: 'ReactFlightClient',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -659,6 +704,7 @@ const bundles = [
     entry: 'react-reconciler/reflection',
     global: 'ReactFiberTreeReflection',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -669,6 +715,7 @@ const bundles = [
     entry: 'react-reconciler/constants',
     global: 'ReactReconcilerConstants',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -686,6 +733,7 @@ const bundles = [
     entry: 'react-is',
     global: 'ReactIs',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -696,6 +744,7 @@ const bundles = [
     entry: 'react-debug-tools',
     global: 'ReactDebugTools',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -708,6 +757,7 @@ const bundles = [
     entry: 'react-cache',
     global: 'ReactCacheOld',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler'],
   },
 
@@ -719,6 +769,7 @@ const bundles = [
     global: 'createSubscription',
     externals: ['react'],
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -734,6 +785,7 @@ const bundles = [
     entry: 'use-subscription',
     global: 'useSubscription',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -744,6 +796,7 @@ const bundles = [
     entry: 'use-sync-external-store',
     global: 'useSyncExternalStore',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -754,6 +807,7 @@ const bundles = [
     entry: 'use-sync-external-store/extra',
     global: 'useSyncExternalStoreExtra',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react', 'use-sync-external-store'],
   },
 
@@ -764,6 +818,7 @@ const bundles = [
     entry: 'use-sync-external-store/index.native',
     global: 'useSyncExternalStoreNative',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -783,6 +838,7 @@ const bundles = [
     entry: 'scheduler',
     global: 'Scheduler',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -802,6 +858,7 @@ const bundles = [
     entry: 'scheduler/unstable_mock',
     global: 'SchedulerMock',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -818,6 +875,7 @@ const bundles = [
     entry: 'scheduler/unstable_post_task',
     global: 'SchedulerPostTask',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -828,6 +886,7 @@ const bundles = [
     entry: 'jest-react',
     global: 'JestReact',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
   },
 
@@ -842,6 +901,7 @@ const bundles = [
     entry: 'eslint-plugin-react-hooks',
     global: 'ESLintPluginReactHooks',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -852,6 +912,7 @@ const bundles = [
     entry: 'react-refresh/babel',
     global: 'ReactFreshBabelPlugin',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
   {
@@ -860,6 +921,7 @@ const bundles = [
     entry: 'react-refresh/runtime',
     global: 'ReactFreshRuntime',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 ];
diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index 836929dbec87f..c83ecc0fbdb96 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -1,5 +1,7 @@
 'use strict';
 
+const {resolve} = require('path');
+const {readFileSync} = require('fs');
 const {bundleTypes, moduleTypes} = require('./bundles');
 const reactVersion = require('../../package.json').version;
 
@@ -25,6 +27,26 @@ const {
 
 const {RECONCILER} = moduleTypes;
 
+function registerInternalModuleStart(globalName) {
+  const path = resolve(
+    __dirname,
+    '..',
+    '..',
+    'packages/shared/registerInternalModuleStart.js'
+  );
+  return String(readFileSync(path)).trim();
+}
+
+function registerInternalModuleStop(globalName) {
+  const path = resolve(
+    __dirname,
+    '..',
+    '..',
+    'packages/shared/registerInternalModuleStop.js'
+  );
+  return String(readFileSync(path)).trim();
+}
+
 const license = ` * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -319,7 +341,35 @@ ${source}
   },
 };
 
-function wrapBundle(source, bundleType, globalName, filename, moduleType) {
+function wrapBundle(
+  source,
+  bundleType,
+  globalName,
+  filename,
+  moduleType,
+  wrapWithModuleBoundaries
+) {
+  if (wrapWithModuleBoundaries) {
+    switch (bundleType) {
+      case NODE_DEV:
+      case NODE_PROFILING:
+      case FB_WWW_DEV:
+      case FB_WWW_PROFILING:
+      case RN_OSS_DEV:
+      case RN_OSS_PROFILING:
+      case RN_FB_DEV:
+      case RN_FB_PROFILING:
+        // Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
+        // This allows the Scheduling Profiler to de-emphasize (dim) internal stack frames.
+        source = `
+          ${registerInternalModuleStart(globalName)}
+          ${source}
+          ${registerInternalModuleStop(globalName)}
+        `;
+        break;
+    }
+  }
+
   if (moduleType === RECONCILER) {
     // Standalone reconciler is only used by third-party renderers.
     // It is handled separately.

From 0e8a5aff3ddf0f863839a924738f958fd940e3be Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Oct 2021 14:41:44 -0400
Subject: [PATCH 057/109] Scheduling Profiler: Add marks for component effects
 (mount and unmount) (#22578)

DevTools (and its profilers) should not require users to be familiar with React internals. Although the scheduling profiler includes a CPU sample flame graph, it's there for advanced use cases and shouldn't be required to identify common performance issues.

This PR proposes adding new marks around component effects. This will enable users to identify components with slow effect create/destroy functions without requiring them to dig through the call stack. (Once #22529 lands, these new marks will also include component stacks, making them more useful still.)

For example, here's a profile with a long-running effect. Without this change, it's not clear why the effects phase takes so long. After this change, it's more clear why that the phase is longer because of a specific component.

We may consider adding similar marks around render phase hooks like useState, useReducer, useMemo. I avoided doing that in this PR because it would be a pretty pervasive change to the ReactFiberHooks file.

Note that this change should have no effect on production bundles since everything is guarded behind a profiling feature flag.

Going to tag more people than I normally would for this pR, since it touches both reconciler and DevTools packages. Feel free to ignore though if you don't have strong feelings.

Note that although this PR adds new marks to the scheduling profiler, it's done in a way that's backwards compatible for older profiles.
---
 .../src/EventTooltip.js                       |  21 +-
 .../content-views/ComponentMeasuresView.js    |  57 +++-
 .../src/content-views/constants.js            |   8 -
 .../__tests__/preprocessData-test.internal.js |  62 +++--
 .../src/import-worker/preprocessData.js       | 181 +++++++++++--
 .../src/types.js                              |   8 +
 .../src/ReactFiberCommitWork.new.js           |  62 ++++-
 .../src/ReactFiberCommitWork.old.js           |  62 ++++-
 .../src/SchedulingProfiler.js                 |  72 ++++++
 .../SchedulingProfiler-test.internal.js       | 243 ++++++++++++++----
 10 files changed, 649 insertions(+), 127 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 9152c7de8f56e..d3ca5d5625f13 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -140,9 +140,26 @@ const TooltipReactComponentMeasure = ({
 }: {|
   componentMeasure: ReactComponentMeasure,
 |}) => {
-  const {componentName, duration, timestamp, warning} = componentMeasure;
+  const {componentName, duration, timestamp, type, warning} = componentMeasure;
 
-  const label = `${componentName} rendered`;
+  let label = componentName;
+  switch (type) {
+    case 'render':
+      label += ' rendered';
+      break;
+    case 'layout-effect-mount':
+      label += ' mounted layout effect';
+      break;
+    case 'layout-effect-unmount':
+      label += ' unmounted layout effect';
+      break;
+    case 'passive-effect-mount':
+      label += ' mounted passive effect';
+      break;
+    case 'passive-effect-unmount':
+      label += ' unmounted passive effect';
+      break;
+  }
 
   return (
     <>
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
index c7de8f8897c5e..a241498a05a05 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
@@ -76,7 +76,13 @@ export class ComponentMeasuresView extends View {
     showHoverHighlight: boolean,
   ): boolean {
     const {frame} = this;
-    const {componentName, duration, timestamp, warning} = componentMeasure;
+    const {
+      componentName,
+      duration,
+      timestamp,
+      type,
+      warning,
+    } = componentMeasure;
 
     const xStart = timestampToPosition(timestamp, scaleFactor, frame);
     const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
@@ -96,6 +102,9 @@ export class ComponentMeasuresView extends View {
       return false; // Too small to render at this zoom level
     }
 
+    let textFillStyle = ((null: any): string);
+    let typeLabel = ((null: any): string);
+
     const drawableRect = intersectionOfRects(componentMeasureRect, rect);
     context.beginPath();
     if (warning !== null) {
@@ -103,9 +112,43 @@ export class ComponentMeasuresView extends View {
         ? COLORS.WARNING_BACKGROUND_HOVER
         : COLORS.WARNING_BACKGROUND;
     } else {
-      context.fillStyle = showHoverHighlight
-        ? COLORS.REACT_COMPONENT_MEASURE_HOVER
-        : COLORS.REACT_COMPONENT_MEASURE;
+      switch (type) {
+        case 'render':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_RENDER_HOVER
+            : COLORS.REACT_RENDER;
+          textFillStyle = COLORS.REACT_RENDER_TEXT;
+          typeLabel = 'rendered';
+          break;
+        case 'layout-effect-mount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_LAYOUT_EFFECTS_HOVER
+            : COLORS.REACT_LAYOUT_EFFECTS;
+          textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
+          typeLabel = 'mounted layout effect';
+          break;
+        case 'layout-effect-unmount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_LAYOUT_EFFECTS_HOVER
+            : COLORS.REACT_LAYOUT_EFFECTS;
+          textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
+          typeLabel = 'unmounted layout effect';
+          break;
+        case 'passive-effect-mount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_PASSIVE_EFFECTS_HOVER
+            : COLORS.REACT_PASSIVE_EFFECTS;
+          textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
+          typeLabel = 'mounted passive effect';
+          break;
+        case 'passive-effect-unmount':
+          context.fillStyle = showHoverHighlight
+            ? COLORS.REACT_PASSIVE_EFFECTS_HOVER
+            : COLORS.REACT_PASSIVE_EFFECTS;
+          textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
+          typeLabel = 'unmounted passive effect';
+          break;
+      }
     }
     context.fillRect(
       drawableRect.origin.x,
@@ -114,9 +157,11 @@ export class ComponentMeasuresView extends View {
       drawableRect.size.height,
     );
 
-    const label = `${componentName} rendered - ${formatDuration(duration)}`;
+    const label = `${componentName} ${typeLabel} - ${formatDuration(duration)}`;
 
-    drawText(label, context, componentMeasureRect, drawableRect);
+    drawText(label, context, componentMeasureRect, drawableRect, {
+      fillStyle: textFillStyle,
+    });
 
     return true;
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 4d896d1967e96..d0895d2aff8e7 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -59,8 +59,6 @@ export let COLORS = {
   PRIORITY_LABEL: '',
   USER_TIMING: '',
   USER_TIMING_HOVER: '',
-  REACT_COMPONENT_MEASURE: '',
-  REACT_COMPONENT_MEASURE_HOVER: '',
   REACT_IDLE: '',
   REACT_IDLE_HOVER: '',
   REACT_RENDER: '',
@@ -150,12 +148,6 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     USER_TIMING_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-user-timing-hover',
     ),
-    REACT_COMPONENT_MEASURE: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render',
-    ),
-    REACT_COMPONENT_MEASURE_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render-hover',
-    ),
     REACT_IDLE: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-idle',
     ),
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index f8690dc57447c..30cba586615c6 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -840,7 +840,7 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 0,
                 "depth": 0,
-                "duration": 0.0019999999999999983,
+                "duration": 0.004,
                 "lanes": Array [
                   4,
                 ],
@@ -852,11 +852,11 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.010000000000000002,
+                "duration": 0.009999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render-idle",
               },
               Object {
@@ -866,37 +866,37 @@ describe('preprocessData', () => {
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.006000000000000002,
+                "duration": 0.005999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.023,
+                "timestamp": 0.025,
                 "type": "commit",
               },
               Object {
                 "batchUID": 1,
                 "depth": 1,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0009999999999999974,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.027,
+                "timestamp": 0.029,
                 "type": "layout-effects",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0030000000000000027,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.03,
+                "timestamp": 0.032,
                 "type": "passive-effects",
               },
             ],
@@ -906,16 +906,32 @@ describe('preprocessData', () => {
               "componentName": "App",
               "duration": 0.001,
               "timestamp": 0.006,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0.0019999999999999983,
+              "timestamp": 0.017,
+              "type": "passive-effect-mount",
               "warning": null,
             },
             Object {
               "componentName": "App",
               "duration": 0.0010000000000000009,
-              "timestamp": 0.02,
+              "timestamp": 0.022,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0.0010000000000000009,
+              "timestamp": 0.033,
+              "type": "passive-effect-mount",
               "warning": null,
             },
           ],
-          "duration": 0.031,
+          "duration": 0.035,
           "flamechart": Array [],
           "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
@@ -1000,7 +1016,7 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 0,
                 "depth": 0,
-                "duration": 0.0019999999999999983,
+                "duration": 0.004,
                 "lanes": Array [
                   4,
                 ],
@@ -1010,11 +1026,11 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.010000000000000002,
+                "duration": 0.009999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render-idle",
               },
               Object {
@@ -1024,37 +1040,37 @@ describe('preprocessData', () => {
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.006000000000000002,
+                "duration": 0.005999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.023,
+                "timestamp": 0.025,
                 "type": "commit",
               },
               Object {
                 "batchUID": 1,
                 "depth": 1,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0009999999999999974,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.027,
+                "timestamp": 0.029,
                 "type": "layout-effects",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0030000000000000027,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.03,
+                "timestamp": 0.032,
                 "type": "passive-effects",
               },
             ],
@@ -1108,7 +1124,7 @@ describe('preprocessData', () => {
               "lanes": Array [
                 4,
               ],
-              "timestamp": 0.017,
+              "timestamp": 0.018,
               "type": "schedule-state-update",
               "warning": null,
             },
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 6c41de1e3e279..e6bcfc178d003 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -22,6 +22,7 @@ import type {
   Phase,
   ReactLane,
   ReactComponentMeasure,
+  ReactComponentMeasureType,
   ReactMeasure,
   ReactMeasureType,
   ReactProfilerData,
@@ -484,31 +485,13 @@ function processTimelineEvent(
       } else if (name.startsWith('--react-lane-labels-')) {
         const [laneLabelTuplesString] = name.substr(20).split('-');
         updateLaneToLabelMap(currentProfilerData, laneLabelTuplesString);
-      } else if (name.startsWith('--component-render-start-')) {
-        const [componentName] = name.substr(25).split('-');
-
-        if (state.currentReactComponentMeasure !== null) {
-          console.error(
-            'Render started while another render in progress:',
-            state.currentReactComponentMeasure,
-          );
-        }
-
-        state.currentReactComponentMeasure = {
-          componentName,
-          timestamp: startTime,
-          duration: 0,
-          warning: null,
-        };
-      } else if (name === '--component-render-stop') {
-        if (state.currentReactComponentMeasure !== null) {
-          const componentMeasure = state.currentReactComponentMeasure;
-          componentMeasure.duration = startTime - componentMeasure.timestamp;
-
-          state.currentReactComponentMeasure = null;
-
-          currentProfilerData.componentMeasures.push(componentMeasure);
-        }
+      } else if (name.startsWith('--component-')) {
+        processReactComponentMeasure(
+          name,
+          startTime,
+          currentProfilerData,
+          state,
+        );
       } else if (name.startsWith('--schedule-render-')) {
         const [laneBitmaskString] = name.substr(18).split('-');
 
@@ -868,6 +851,154 @@ function processTimelineEvent(
   }
 }
 
+function assertNoOverlappingComponentMeasure(state: ProcessorState) {
+  if (state.currentReactComponentMeasure !== null) {
+    console.error(
+      'Component measure started while another measure in progress:',
+      state.currentReactComponentMeasure,
+    );
+  }
+}
+
+function assertCurrentComponentMeasureType(
+  state: ProcessorState,
+  type: ReactComponentMeasureType,
+): void {
+  if (state.currentReactComponentMeasure === null) {
+    console.error(
+      `Component measure type "${type}" stopped while no measure was in progress`,
+    );
+  } else if (state.currentReactComponentMeasure.type !== type) {
+    console.error(
+      `Component measure type "${type}" stopped while type ${state.currentReactComponentMeasure.type} in progress`,
+    );
+  }
+}
+
+function processReactComponentMeasure(
+  name: string,
+  startTime: Milliseconds,
+  currentProfilerData: ReactProfilerData,
+  state: ProcessorState,
+): void {
+  if (name.startsWith('--component-render-start-')) {
+    const [componentName] = name.substr(25).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'render',
+      warning: null,
+    };
+  } else if (name === '--component-render-stop') {
+    assertCurrentComponentMeasureType(state, 'render');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-layout-effect-mount-start-')) {
+    const [componentName] = name.substr(38).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'layout-effect-mount',
+      warning: null,
+    };
+  } else if (name === '--component-layout-effect-mount-stop') {
+    assertCurrentComponentMeasureType(state, 'layout-effect-mount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-layout-effect-unmount-start-')) {
+    const [componentName] = name.substr(40).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'layout-effect-unmount',
+      warning: null,
+    };
+  } else if (name === '--component-layout-effect-unmount-stop') {
+    assertCurrentComponentMeasureType(state, 'layout-effect-unmount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-passive-effect-mount-start-')) {
+    const [componentName] = name.substr(39).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'passive-effect-mount',
+      warning: null,
+    };
+  } else if (name === '--component-passive-effect-mount-stop') {
+    assertCurrentComponentMeasureType(state, 'passive-effect-mount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  } else if (name.startsWith('--component-passive-effect-unmount-start-')) {
+    const [componentName] = name.substr(41).split('-');
+
+    assertNoOverlappingComponentMeasure(state);
+
+    state.currentReactComponentMeasure = {
+      componentName,
+      timestamp: startTime,
+      duration: 0,
+      type: 'passive-effect-unmount',
+      warning: null,
+    };
+  } else if (name === '--component-passive-effect-unmount-stop') {
+    assertCurrentComponentMeasureType(state, 'passive-effect-unmount');
+
+    if (state.currentReactComponentMeasure !== null) {
+      const componentMeasure = state.currentReactComponentMeasure;
+      componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+      state.currentReactComponentMeasure = null;
+
+      currentProfilerData.componentMeasures.push(componentMeasure);
+    }
+  }
+}
+
 function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
   let parsedData;
   try {
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index e5b14e7897ace..cf504229b01c5 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -119,10 +119,18 @@ export type NetworkMeasure = {|
   url: string,
 |};
 
+export type ReactComponentMeasureType =
+  | 'render'
+  | 'layout-effect-mount'
+  | 'layout-effect-unmount'
+  | 'passive-effect-mount'
+  | 'passive-effect-unmount';
+
 export type ReactComponentMeasure = {|
   +componentName: string,
   duration: Milliseconds,
   +timestamp: Milliseconds,
+  +type: ReactComponentMeasureType,
   warning: string | null,
 |};
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 95c2f3753bfd7..235bd74361730 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -30,6 +30,7 @@ import {
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
+  enableSchedulingProfiler,
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
@@ -142,6 +143,16 @@ import {
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
 import {doesFiberContain} from './ReactFiberTreeReflection';
 import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
+import {
+  markComponentPassiveEffectMountStarted,
+  markComponentPassiveEffectMountStopped,
+  markComponentPassiveEffectUnmountStarted,
+  markComponentPassiveEffectUnmountStopped,
+  markComponentLayoutEffectMountStarted,
+  markComponentLayoutEffectMountStopped,
+  markComponentLayoutEffectUnmountStarted,
+  markComponentLayoutEffectUnmountStopped,
+} from './SchedulingProfiler';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -512,7 +523,23 @@ function commitHookEffectListUnmount(
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStarted(finishedWork);
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStarted(finishedWork);
+            }
+          }
+
           safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStopped();
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStopped();
+            }
+          }
         }
       }
       effect = effect.next;
@@ -520,18 +547,34 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
+function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
     const firstEffect = lastEffect.next;
     let effect = firstEffect;
     do {
-      if ((effect.tag & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStarted(finishedWork);
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStarted(finishedWork);
+          }
+        }
+
         // Mount
         const create = effect.create;
         effect.destroy = create();
 
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStopped();
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStopped();
+          }
+        }
+
         if (__DEV__) {
           const destroy = effect.destroy;
           if (destroy !== undefined && typeof destroy !== 'function') {
@@ -1180,10 +1223,13 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if (
-                (tag & HookInsertion) !== NoHookEffect ||
-                (tag & HookLayout) !== NoHookEffect
-              ) {
+              if ((tag & HookInsertion) !== NoHookEffect) {
+                safelyCallDestroy(current, nearestMountedAncestor, destroy);
+              } else if ((tag & HookLayout) !== NoHookEffect) {
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStarted(current);
+                }
+
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -1195,6 +1241,10 @@ function commitUnmount(
                 } else {
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
+
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStopped();
+                }
               }
             }
             effect = effect.next;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 8057c415e7459..c4da995064d29 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -30,6 +30,7 @@ import {
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
+  enableSchedulingProfiler,
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
@@ -142,6 +143,16 @@ import {
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';
 import {doesFiberContain} from './ReactFiberTreeReflection';
 import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
+import {
+  markComponentPassiveEffectMountStarted,
+  markComponentPassiveEffectMountStopped,
+  markComponentPassiveEffectUnmountStarted,
+  markComponentPassiveEffectUnmountStopped,
+  markComponentLayoutEffectMountStarted,
+  markComponentLayoutEffectMountStopped,
+  markComponentLayoutEffectUnmountStarted,
+  markComponentLayoutEffectUnmountStopped,
+} from './SchedulingProfiler';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -512,7 +523,23 @@ function commitHookEffectListUnmount(
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStarted(finishedWork);
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStarted(finishedWork);
+            }
+          }
+
           safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStopped();
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStopped();
+            }
+          }
         }
       }
       effect = effect.next;
@@ -520,18 +547,34 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
+function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
     const firstEffect = lastEffect.next;
     let effect = firstEffect;
     do {
-      if ((effect.tag & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStarted(finishedWork);
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStarted(finishedWork);
+          }
+        }
+
         // Mount
         const create = effect.create;
         effect.destroy = create();
 
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStopped();
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStopped();
+          }
+        }
+
         if (__DEV__) {
           const destroy = effect.destroy;
           if (destroy !== undefined && typeof destroy !== 'function') {
@@ -1180,10 +1223,13 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if (
-                (tag & HookInsertion) !== NoHookEffect ||
-                (tag & HookLayout) !== NoHookEffect
-              ) {
+              if ((tag & HookInsertion) !== NoHookEffect) {
+                safelyCallDestroy(current, nearestMountedAncestor, destroy);
+              } else if ((tag & HookLayout) !== NoHookEffect) {
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStarted(current);
+                }
+
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -1195,6 +1241,10 @@ function commitUnmount(
                 } else {
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
+
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStopped();
+                }
               }
             }
             effect = effect.next;
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 4df55137fda97..acfb2c3f976d0 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -161,6 +161,78 @@ export function markComponentRenderStopped(): void {
   }
 }
 
+export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-passive-effect-mount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentPassiveEffectMountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-mount-stop');
+    }
+  }
+}
+
+export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentPassiveEffectUnmountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-unmount-stop');
+    }
+  }
+}
+
+export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-layout-effect-mount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentLayoutEffectMountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-mount-stop');
+    }
+  }
+}
+
+export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentLayoutEffectUnmountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-unmount-stop');
+    }
+  }
+}
+
 export function markComponentErrored(
   fiber: Fiber,
   thrownValue: mixed,
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 5b58342ee0b2f..9b6ec83a40d39 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -608,30 +608,32 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--layout-effects-start-16",
-                "--schedule-state-update-1-Example",
-                "--layout-effects-stop",
-                "--render-start-1",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--commit-stop",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-16",
+          "--component-layout-effect-mount-start-Example",
+          "--schedule-state-update-1-Example",
+          "--component-layout-effect-mount-stop",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--commit-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -652,33 +654,35 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--layout-effects-start-16",
-                "--layout-effects-stop",
-                "--commit-stop",
-                "--passive-effects-start-16",
-                "--schedule-state-update-16-Example",
-                "--passive-effects-stop",
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+          "--passive-effects-start-16",
+          "--component-passive-effect-mount-start-Example",
+          "--schedule-state-update-16-Example",
+          "--component-passive-effect-mount-stop",
+          "--passive-effects-stop",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -854,4 +858,141 @@ describe('SchedulingProfiler', () => {
       `);
     }
   });
+
+  it('should mark passive and layout effects', async () => {
+    function ComponentWithEffects() {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('layout 1 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('layout 1 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 1 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 1 unmount');
+        };
+      }, []);
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('layout 2 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('layout 2 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 2 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 2 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 3 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 3 unmount');
+        };
+      }, []);
+
+      return null;
+    }
+
+    const renderer = ReactTestRenderer.create(<ComponentWithEffects />, {
+      unstable_isConcurrent: true,
+    });
+
+    expect(Scheduler).toFlushUntilNextPaint([
+      'layout 1 mount',
+      'layout 2 mount',
+    ]);
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-ComponentWithEffects",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-16",
+          "--component-layout-effect-mount-start-ComponentWithEffects",
+          "--component-layout-effect-mount-stop",
+          "--component-layout-effect-mount-start-ComponentWithEffects",
+          "--component-layout-effect-mount-stop",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
+    }
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushAndYield([
+      'passive 1 mount',
+      'passive 2 mount',
+      'passive 3 mount',
+    ]);
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--passive-effects-start-16",
+          "--component-passive-effect-mount-start-ComponentWithEffects",
+          "--component-passive-effect-mount-stop",
+          "--component-passive-effect-mount-start-ComponentWithEffects",
+          "--component-passive-effect-mount-stop",
+          "--component-passive-effect-mount-start-ComponentWithEffects",
+          "--component-passive-effect-mount-stop",
+          "--passive-effects-stop",
+        ]
+      `);
+    }
+
+    clearPendingMarks();
+
+    renderer.unmount();
+
+    expect(Scheduler).toFlushAndYield([
+      'layout 1 unmount',
+      'layout 2 unmount',
+      'passive 1 unmount',
+      'passive 2 unmount',
+      'passive 3 unmount',
+    ]);
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--component-layout-effect-unmount-start-ComponentWithEffects",
+          "--component-layout-effect-unmount-stop",
+          "--component-layout-effect-unmount-start-ComponentWithEffects",
+          "--component-layout-effect-unmount-stop",
+          "--layout-effects-start-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+          "--passive-effects-start-16",
+          "--component-passive-effect-unmount-start-ComponentWithEffects",
+          "--component-passive-effect-unmount-stop",
+          "--component-passive-effect-unmount-start-ComponentWithEffects",
+          "--component-passive-effect-unmount-stop",
+          "--component-passive-effect-unmount-start-ComponentWithEffects",
+          "--component-passive-effect-unmount-stop",
+          "--passive-effects-stop",
+        ]
+      `);
+    }
+  });
 });

From bfb40225b509dc65314f3fda95633090bf29ebf0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Oct 2021 15:16:26 -0400
Subject: [PATCH 058/109] Scheduling Profiler does not warn about long
 transitions (#22614)

---
 .../__tests__/preprocessData-test.internal.js | 137 ++++++++++++++++++
 .../src/import-worker/preprocessData.js       |  11 +-
 2 files changed, 147 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 30cba586615c6..94ada274a770b 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -1601,6 +1601,143 @@ describe('preprocessData', () => {
           );
         }
       });
+
+      it('should not warn about transition updates scheduled during commit phase', async () => {
+        function Component() {
+          const [value, setValue] = React.useState(0);
+          // eslint-disable-next-line no-unused-vars
+          const [isPending, startTransition] = React.useTransition();
+
+          Scheduler.unstable_yieldValue(
+            `Component rendered with value ${value}`,
+          );
+
+          // Fake a long render
+          if (value !== 0) {
+            Scheduler.unstable_yieldValue('Long render');
+            startTime += 20000;
+          }
+
+          React.useLayoutEffect(() => {
+            startTransition(() => {
+              setValue(1);
+            });
+          }, []);
+
+          return value;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component rendered with value 0',
+            'Component rendered with value 0',
+            'Component rendered with value 1',
+            'Long render',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.forEach(markName => {
+            if (markName === '--component-render-start-Component') {
+              // Fake a long running render
+              startTime += 20000;
+            }
+
+            testMarks.push({
+              pid: ++pid,
+              tid: ++tid,
+              ts: ++startTime,
+              args: {data: {}},
+              cat: 'blink.user_timing',
+              name: markName,
+              ph: 'R',
+            });
+          });
+
+          const data = await preprocessData([
+            cpuProfilerSample,
+            ...createBoilerplateEntries(),
+            ...testMarks,
+          ]);
+
+          data.schedulingEvents.forEach(event => {
+            expect(event.warning).toBeNull();
+          });
+        }
+      });
+
+      it('should not warn about deferred value updates scheduled during commit phase', async () => {
+        function Component() {
+          const [value, setValue] = React.useState(0);
+          const deferredValue = React.useDeferredValue(value);
+
+          Scheduler.unstable_yieldValue(
+            `Component rendered with value ${value} and deferredValue ${deferredValue}`,
+          );
+
+          // Fake a long render
+          if (deferredValue !== 0) {
+            Scheduler.unstable_yieldValue('Long render');
+            startTime += 20000;
+          }
+
+          React.useLayoutEffect(() => {
+            setValue(1);
+          }, []);
+
+          return value + deferredValue;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component rendered with value 0 and deferredValue 0',
+            'Component rendered with value 1 and deferredValue 0',
+            'Component rendered with value 1 and deferredValue 1',
+            'Long render',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.forEach(markName => {
+            if (markName === '--component-render-start-Component') {
+              // Fake a long running render
+              startTime += 20000;
+            }
+
+            testMarks.push({
+              pid: ++pid,
+              tid: ++tid,
+              ts: ++startTime,
+              args: {data: {}},
+              cat: 'blink.user_timing',
+              name: markName,
+              ph: 'R',
+            });
+          });
+
+          const data = await preprocessData([
+            cpuProfilerSample,
+            ...createBoilerplateEntries(),
+            ...testMarks,
+          ]);
+
+          data.schedulingEvents.forEach(event => {
+            expect(event.warning).toBeNull();
+          });
+        }
+      });
     });
 
     describe('errors thrown while rendering', () => {
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index e6bcfc178d003..d6c911af1d076 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -1160,7 +1160,16 @@ export default async function preprocessData(
     // See how long the subsequent batch of React work was.
     const [startTime, stopTime] = getBatchRange(batchUID, profilerData);
     if (stopTime - startTime > NESTED_UPDATE_DURATION_THRESHOLD) {
-      schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE;
+      // Don't warn about transition updates scheduled during the commit phase.
+      // e.g. useTransition, useDeferredValue
+      // These are allowed to be long-running.
+      if (
+        !schedulingEvent.lanes.some(
+          lane => profilerData.laneToLabelMap.get(lane) === 'Transition',
+        )
+      ) {
+        schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE;
+      }
     }
   });
   state.potentialSuspenseEventsOutsideOfTransition.forEach(

From fa9bea0c41ccfef5b528ef9b5517607f9f94c52a Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Thu, 21 Oct 2021 14:11:42 -0700
Subject: [PATCH 059/109] Initial implementation of cache cleanup (#22510)

This is an initial, partial implementation of a cleanup mechanism for the experimental Cache API. The idea is that consumers of the Cache API can register to be informed when a given Cache instance is no longer needed so that they can perform associated cleanup tasks to free resources stored in the cache. A canonical example would be cancelling pending network requests.

An overview of the high-level changes:

* Changes the `Cache` type from a Map of cache instances to be an object with the original Map of instances, a reference count (to count roughly "active references" to the cache instances - more below), and an AbortController.
* Adds a new public API, `unstable_getCacheSignal(): AbortSignal`, which is callable during render. It returns an AbortSignal tied to the lifetime of the cache - developers can listen for the 'abort' event on the signal, which React now triggers when a given cache instance is no longer referenced.
  * Note that `AbortSignal` is a web standard that is supported by other platform APIs; for example a signal can be passed to `fetch()` to trigger cancellation of an HTTP request.
* Implements the above - triggering the 'abort' event - by handling passive mount/unmount for HostRoot and CacheComponent fiber nodes.

Cases handled:
* Aborted transitions: we clean up a new cache created for an aborted transition
* Suspense: we retain a fresh cache instance until a suspended tree resolves

For follow-ups:
* When a subsequent cache refresh is issued before a previous refresh completes, the refreshes are queued. Fresh cache instances for previous refreshes in the queue should be cleared, retaining only the most recent cache. I plan to address this in a follow-up PR.
* If a refresh is cancelled, the fresh cache should be cleaned up.
---
 .../__snapshots__/profilingCache-test.js.snap |   4 +-
 .../src/server/ReactPartialRendererHooks.js   |   5 +
 .../src/ReactFiberCacheComponent.new.js       |  85 ++-
 .../src/ReactFiberCacheComponent.old.js       |  85 ++-
 .../src/ReactFiberCommitWork.new.js           | 117 ++++
 .../src/ReactFiberCommitWork.old.js           | 117 ++++
 .../src/ReactFiberCompleteWork.new.js         |  59 ++
 .../src/ReactFiberCompleteWork.old.js         |  59 ++
 .../src/ReactFiberHooks.new.js                |  35 +-
 .../src/ReactFiberHooks.old.js                |  35 +-
 .../src/ReactFiberLane.new.js                 |  10 -
 .../src/ReactFiberLane.old.js                 |  10 -
 .../src/ReactFiberRoot.new.js                 |  13 +-
 .../src/ReactFiberRoot.old.js                 |  13 +-
 .../src/ReactFiberWorkLoop.new.js             |  40 ++
 .../src/ReactFiberWorkLoop.old.js             |  40 ++
 .../src/ReactInternalTypes.js                 |   1 +
 .../src/__tests__/ReactCache-test.js          | 651 +++++++++++++++++-
 .../SchedulingProfiler-test.internal.js       | 186 ++---
 .../SchedulingProfilerLabels-test.internal.js |  98 +--
 ...StrictEffectsModeDefaults-test.internal.js |   1 +
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   6 +
 .../unstable-shared-subset.experimental.js    |   1 +
 scripts/jest/setupEnvironment.js              |   4 +
 29 files changed, 1482 insertions(+), 199 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 1462a64195d6b..8d7eeb4255a94 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -73,7 +73,7 @@ Object {
     },
   },
   "duration": 15,
-  "effectDuration": null,
+  "effectDuration": 0,
   "fiberActualDurations": Map {
     1 => 15,
     2 => 15,
@@ -86,7 +86,7 @@ Object {
     3 => 3,
     4 => 2,
   },
-  "passiveEffectDuration": null,
+  "passiveEffectDuration": 0,
   "priorityLevel": "Immediate",
   "timestamp": 15,
   "updaters": Array [
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 6e2b715382a0a..168fd78f6103e 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -216,6 +216,10 @@ export function resetHooksState(): void {
   workInProgressHook = null;
 }
 
+function getCacheSignal() {
+  throw new Error('Not implemented.');
+}
+
 function getCacheForType<T>(resourceType: () => T): T {
   throw new Error('Not implemented.');
 }
@@ -551,6 +555,7 @@ export const Dispatcher: DispatcherType = {
 };
 
 if (enableCache) {
+  Dispatcher.getCacheSignal = getCacheSignal;
   Dispatcher.getCacheForType = getCacheForType;
   Dispatcher.useCacheRefresh = useCacheRefresh;
 }
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 0d284c683ed1f..3ad60546c2b05 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -18,8 +18,13 @@ import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 import {pushProvider, popProvider} from './ReactFiberNewContext.new';
+import * as Scheduler from 'scheduler';
 
-export type Cache = Map<() => mixed, mixed>;
+export type Cache = {|
+  controller: AbortController,
+  data: Map<() => mixed, mixed>,
+  refCount: number,
+|};
 
 export type CacheComponentState = {|
   +parent: Cache,
@@ -31,6 +36,13 @@ export type SpawnedCachePool = {|
   +pool: Cache,
 |};
 
+// Intentionally not named imports because Rollup would
+// use dynamic dispatch for CommonJS interop named imports.
+const {
+  unstable_scheduleCallback: scheduleCallback,
+  unstable_NormalPriority: NormalPriority,
+} = Scheduler;
+
 export const CacheContext: ReactContext<Cache> = enableCache
   ? {
       $$typeof: REACT_CONTEXT_TYPE,
@@ -57,6 +69,58 @@ let pooledCache: Cache | null = null;
 // cache from the render that suspended.
 const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(null);
 
+// Creates a new empty Cache instance with a ref-count of 0. The caller is responsible
+// for retaining the cache once it is in use (retainCache), and releasing the cache
+// once it is no longer needed (releaseCache).
+export function createCache(): Cache {
+  if (!enableCache) {
+    return (null: any);
+  }
+  const cache: Cache = {
+    controller: new AbortController(),
+    data: new Map(),
+    refCount: 0,
+  };
+
+  return cache;
+}
+
+export function retainCache(cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  if (__DEV__) {
+    if (cache.controller.signal.aborted) {
+      console.warn(
+        'A cache instance was retained after it was already freed. ' +
+          'This likely indicates a bug in React.',
+      );
+    }
+  }
+  cache.refCount++;
+}
+
+// Cleanup a cache instance, potentially freeing it if there are no more references
+export function releaseCache(cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  cache.refCount--;
+  if (__DEV__) {
+    if (cache.refCount < 0) {
+      console.warn(
+        'A cache instance was released after it was already freed. ' +
+          'This likely indicates a bug in React.',
+      );
+    }
+  }
+  if (cache.refCount === 0) {
+    scheduleCallback(NormalPriority, () => {
+      cache.controller.abort();
+    });
+  }
+}
+
 export function pushCacheProvider(workInProgress: Fiber, cache: Cache) {
   if (!enableCache) {
     return;
@@ -78,8 +142,14 @@ export function requestCacheFromPool(renderLanes: Lanes): Cache {
   if (pooledCache !== null) {
     return pooledCache;
   }
-  // Create a fresh cache.
-  pooledCache = new Map();
+  // Create a fresh cache. The pooled cache must be owned - it is freed
+  // in releaseRootPooledCache() - but the cache instance handed out
+  // is retained/released in the commit phase of the component that
+  // references is (ie the host root, cache boundary, suspense component)
+  // Ie, pooledCache is conceptually an Option<Arc<Cache>> (owned),
+  // whereas the return value of this function is a &Arc<Cache> (borrowed).
+  pooledCache = createCache();
+  retainCache(pooledCache);
   return pooledCache;
 }
 
@@ -91,7 +161,13 @@ export function pushRootCachePool(root: FiberRoot) {
   // from `root.pooledCache`. If it's currently `null`, we will lazily
   // initialize it the first type it's requested. However, we only mutate
   // the root itself during the complete/unwind phase of the HostRoot.
-  pooledCache = root.pooledCache;
+  const rootCache = root.pooledCache;
+  if (rootCache != null) {
+    pooledCache = rootCache;
+    root.pooledCache = null;
+  } else {
+    pooledCache = null;
+  }
 }
 
 export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
@@ -157,7 +233,6 @@ export function getSuspendedCachePool(): SpawnedCachePool | null {
   if (!enableCache) {
     return null;
   }
-
   // We check the cache on the stack first, since that's the one any new Caches
   // would have accessed.
   let pool = pooledCache;
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index dd450fff76b50..a00059ededf10 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -18,8 +18,13 @@ import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 import {pushProvider, popProvider} from './ReactFiberNewContext.old';
+import * as Scheduler from 'scheduler';
 
-export type Cache = Map<() => mixed, mixed>;
+export type Cache = {|
+  controller: AbortController,
+  data: Map<() => mixed, mixed>,
+  refCount: number,
+|};
 
 export type CacheComponentState = {|
   +parent: Cache,
@@ -31,6 +36,13 @@ export type SpawnedCachePool = {|
   +pool: Cache,
 |};
 
+// Intentionally not named imports because Rollup would
+// use dynamic dispatch for CommonJS interop named imports.
+const {
+  unstable_scheduleCallback: scheduleCallback,
+  unstable_NormalPriority: NormalPriority,
+} = Scheduler;
+
 export const CacheContext: ReactContext<Cache> = enableCache
   ? {
       $$typeof: REACT_CONTEXT_TYPE,
@@ -57,6 +69,58 @@ let pooledCache: Cache | null = null;
 // cache from the render that suspended.
 const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(null);
 
+// Creates a new empty Cache instance with a ref-count of 0. The caller is responsible
+// for retaining the cache once it is in use (retainCache), and releasing the cache
+// once it is no longer needed (releaseCache).
+export function createCache(): Cache {
+  if (!enableCache) {
+    return (null: any);
+  }
+  const cache: Cache = {
+    controller: new AbortController(),
+    data: new Map(),
+    refCount: 0,
+  };
+
+  return cache;
+}
+
+export function retainCache(cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  if (__DEV__) {
+    if (cache.controller.signal.aborted) {
+      console.warn(
+        'A cache instance was retained after it was already freed. ' +
+          'This likely indicates a bug in React.',
+      );
+    }
+  }
+  cache.refCount++;
+}
+
+// Cleanup a cache instance, potentially freeing it if there are no more references
+export function releaseCache(cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  cache.refCount--;
+  if (__DEV__) {
+    if (cache.refCount < 0) {
+      console.warn(
+        'A cache instance was released after it was already freed. ' +
+          'This likely indicates a bug in React.',
+      );
+    }
+  }
+  if (cache.refCount === 0) {
+    scheduleCallback(NormalPriority, () => {
+      cache.controller.abort();
+    });
+  }
+}
+
 export function pushCacheProvider(workInProgress: Fiber, cache: Cache) {
   if (!enableCache) {
     return;
@@ -78,8 +142,14 @@ export function requestCacheFromPool(renderLanes: Lanes): Cache {
   if (pooledCache !== null) {
     return pooledCache;
   }
-  // Create a fresh cache.
-  pooledCache = new Map();
+  // Create a fresh cache. The pooled cache must be owned - it is freed
+  // in releaseRootPooledCache() - but the cache instance handed out
+  // is retained/released in the commit phase of the component that
+  // references is (ie the host root, cache boundary, suspense component)
+  // Ie, pooledCache is conceptually an Option<Arc<Cache>> (owned),
+  // whereas the return value of this function is a &Arc<Cache> (borrowed).
+  pooledCache = createCache();
+  retainCache(pooledCache);
   return pooledCache;
 }
 
@@ -91,7 +161,13 @@ export function pushRootCachePool(root: FiberRoot) {
   // from `root.pooledCache`. If it's currently `null`, we will lazily
   // initialize it the first type it's requested. However, we only mutate
   // the root itself during the complete/unwind phase of the HostRoot.
-  pooledCache = root.pooledCache;
+  const rootCache = root.pooledCache;
+  if (rootCache != null) {
+    pooledCache = rootCache;
+    root.pooledCache = null;
+  } else {
+    pooledCache = null;
+  }
 }
 
 export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
@@ -157,7 +233,6 @@ export function getSuspendedCachePool(): SpawnedCachePool | null {
   if (!enableCache) {
     return null;
   }
-
   // We check the cache on the stack first, since that's the one any new Caches
   // would have accessed.
   let pool = pooledCache;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 235bd74361730..efdc515d9c0b2 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -24,6 +24,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
+import type {Cache} from './ReactFiberCacheComponent.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -39,6 +40,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   warnAboutCallbackRefReturningFunction,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -58,6 +60,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
@@ -153,6 +156,7 @@ import {
   markComponentLayoutEffectUnmountStarted,
   markComponentLayoutEffectUnmountStopped,
 } from './SchedulingProfiler';
+import {releaseCache, retainCache} from './ReactFiberCacheComponent.new';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -2665,6 +2669,82 @@ function commitPassiveMountOnFiber(
       }
       break;
     }
+    case HostRoot: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (finishedWork.alternate !== null) {
+          previousCache = finishedWork.alternate.memoizedState.cache;
+        }
+        const nextCache = finishedWork.memoizedState.cache;
+        // Retain/release the root cache.
+        // Note that on initial mount, previousCache and nextCache will be the same
+        // and this retain won't occur. To counter this, we instead retain the HostRoot's
+        // initial cache when creating the root itself (see createFiberRoot() in
+        // ReactFiberRoot.js). Subsequent updates that change the cache are reflected
+        // here, such that previous/next caches are retained correctly.
+        if (nextCache !== previousCache) {
+          retainCache(nextCache);
+          if (previousCache != null) {
+            releaseCache(previousCache);
+          }
+        }
+      }
+      break;
+    }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          finishedWork.alternate !== null &&
+          finishedWork.alternate.memoizedState !== null &&
+          finishedWork.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = finishedWork.alternate.memoizedState.cachePool.pool;
+        }
+        let nextCache: Cache | null = null;
+        if (
+          finishedWork.memoizedState !== null &&
+          finishedWork.memoizedState.cachePool !== null
+        ) {
+          nextCache = finishedWork.memoizedState.cachePool.pool;
+        }
+        // Retain/release the cache used for pending (suspended) nodes.
+        // Note that this is only reached in the non-suspended/visible case:
+        // when the content is suspended/hidden, the retain/release occurs
+        // via the parent Suspense component (see case above).
+        if (nextCache !== previousCache) {
+          if (nextCache != null) {
+            retainCache(nextCache);
+          }
+          if (previousCache != null) {
+            releaseCache(previousCache);
+          }
+        }
+      }
+      break;
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (finishedWork.alternate !== null) {
+          previousCache = finishedWork.alternate.memoizedState.cache;
+        }
+        const nextCache = finishedWork.memoizedState.cache;
+        // Retain/release the cache. In theory the cache component
+        // could be "borrowing" a cache instance owned by some parent,
+        // in which case we could avoid retaining/releasing. But it
+        // is non-trivial to determine when that is the case, so we
+        // always retain/release.
+        if (nextCache !== previousCache) {
+          retainCache(nextCache);
+          if (previousCache != null) {
+            releaseCache(previousCache);
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
@@ -2871,6 +2951,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       break;
     }
+    // TODO: run passive unmount effects when unmounting a root.
+    // Because passive unmount effects are not currently run,
+    // the cache instance owned by the root will never be freed.
+    // When effects are run, the cache should be freed here:
+    // case HostRoot: {
+    //   if (enableCache) {
+    //     const cache = current.memoizedState.cache;
+    //     releaseCache(cache);
+    //   }
+    //   break;
+    // }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        if (
+          current.memoizedState !== null &&
+          current.memoizedState.cachePool !== null
+        ) {
+          const cache: Cache = current.memoizedState.cachePool.pool;
+          // Retain/release the cache used for pending (suspended) nodes.
+          // Note that this is only reached in the non-suspended/visible case:
+          // when the content is suspended/hidden, the retain/release occurs
+          // via the parent Suspense component (see case above).
+          if (cache != null) {
+            retainCache(cache);
+          }
+        }
+      }
+      break;
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        const cache = current.memoizedState.cache;
+        releaseCache(cache);
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index c4da995064d29..7d4d5d7aeecef 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -24,6 +24,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
+import type {Cache} from './ReactFiberCacheComponent.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -39,6 +40,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   warnAboutCallbackRefReturningFunction,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -58,6 +60,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
@@ -153,6 +156,7 @@ import {
   markComponentLayoutEffectUnmountStarted,
   markComponentLayoutEffectUnmountStopped,
 } from './SchedulingProfiler';
+import {releaseCache, retainCache} from './ReactFiberCacheComponent.old';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -2665,6 +2669,82 @@ function commitPassiveMountOnFiber(
       }
       break;
     }
+    case HostRoot: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (finishedWork.alternate !== null) {
+          previousCache = finishedWork.alternate.memoizedState.cache;
+        }
+        const nextCache = finishedWork.memoizedState.cache;
+        // Retain/release the root cache.
+        // Note that on initial mount, previousCache and nextCache will be the same
+        // and this retain won't occur. To counter this, we instead retain the HostRoot's
+        // initial cache when creating the root itself (see createFiberRoot() in
+        // ReactFiberRoot.js). Subsequent updates that change the cache are reflected
+        // here, such that previous/next caches are retained correctly.
+        if (nextCache !== previousCache) {
+          retainCache(nextCache);
+          if (previousCache != null) {
+            releaseCache(previousCache);
+          }
+        }
+      }
+      break;
+    }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          finishedWork.alternate !== null &&
+          finishedWork.alternate.memoizedState !== null &&
+          finishedWork.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = finishedWork.alternate.memoizedState.cachePool.pool;
+        }
+        let nextCache: Cache | null = null;
+        if (
+          finishedWork.memoizedState !== null &&
+          finishedWork.memoizedState.cachePool !== null
+        ) {
+          nextCache = finishedWork.memoizedState.cachePool.pool;
+        }
+        // Retain/release the cache used for pending (suspended) nodes.
+        // Note that this is only reached in the non-suspended/visible case:
+        // when the content is suspended/hidden, the retain/release occurs
+        // via the parent Suspense component (see case above).
+        if (nextCache !== previousCache) {
+          if (nextCache != null) {
+            retainCache(nextCache);
+          }
+          if (previousCache != null) {
+            releaseCache(previousCache);
+          }
+        }
+      }
+      break;
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (finishedWork.alternate !== null) {
+          previousCache = finishedWork.alternate.memoizedState.cache;
+        }
+        const nextCache = finishedWork.memoizedState.cache;
+        // Retain/release the cache. In theory the cache component
+        // could be "borrowing" a cache instance owned by some parent,
+        // in which case we could avoid retaining/releasing. But it
+        // is non-trivial to determine when that is the case, so we
+        // always retain/release.
+        if (nextCache !== previousCache) {
+          retainCache(nextCache);
+          if (previousCache != null) {
+            releaseCache(previousCache);
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
@@ -2871,6 +2951,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       break;
     }
+    // TODO: run passive unmount effects when unmounting a root.
+    // Because passive unmount effects are not currently run,
+    // the cache instance owned by the root will never be freed.
+    // When effects are run, the cache should be freed here:
+    // case HostRoot: {
+    //   if (enableCache) {
+    //     const cache = current.memoizedState.cache;
+    //     releaseCache(cache);
+    //   }
+    //   break;
+    // }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        if (
+          current.memoizedState !== null &&
+          current.memoizedState.cachePool !== null
+        ) {
+          const cache: Cache = current.memoizedState.cachePool.pool;
+          // Retain/release the cache used for pending (suspended) nodes.
+          // Note that this is only reached in the non-suspended/visible case:
+          // when the content is suspended/hidden, the retain/release occurs
+          // via the parent Suspense component (see case above).
+          if (cache != null) {
+            retainCache(cache);
+          }
+        }
+      }
+      break;
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        const cache = current.memoizedState.cache;
+        releaseCache(cache);
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index dadec516c3a4b..20a7fc52db13a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -72,6 +72,7 @@ import {
   ChildDeletion,
   StaticMask,
   MutationMask,
+  Passive,
 } from './ReactFiberFlags';
 
 import {
@@ -848,7 +849,15 @@ function completeWork(
       if (enableCache) {
         popRootCachePool(fiberRoot, renderLanes);
 
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.memoizedState.cache;
+        }
         const cache: Cache = workInProgress.memoizedState.cache;
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          workInProgress.flags |= Passive;
+        }
         popCacheProvider(workInProgress, cache);
       }
       popHostContainer(workInProgress);
@@ -1089,6 +1098,29 @@ function completeWork(
         prevDidTimeout = prevState !== null;
       }
 
+      if (enableCache && nextDidTimeout) {
+        const offscreenFiber: Fiber = (workInProgress.child: any);
+        let previousCache: Cache | null = null;
+        if (
+          offscreenFiber.alternate !== null &&
+          offscreenFiber.alternate.memoizedState !== null &&
+          offscreenFiber.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = offscreenFiber.alternate.memoizedState.cachePool.pool;
+        }
+        let cache: Cache | null = null;
+        if (
+          offscreenFiber.memoizedState !== null &&
+          offscreenFiber.memoizedState.cachePool !== null
+        ) {
+          cache = offscreenFiber.memoizedState.cachePool.pool;
+        }
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          offscreenFiber.flags |= Passive;
+        }
+      }
+
       // 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
@@ -1465,6 +1497,25 @@ function completeWork(
       }
 
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          workInProgress.alternate !== null &&
+          workInProgress.alternate.memoizedState !== null &&
+          workInProgress.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = workInProgress.alternate.memoizedState.cachePool.pool;
+        }
+        let cache: Cache | null = null;
+        if (
+          workInProgress.memoizedState !== null &&
+          workInProgress.memoizedState.cachePool !== null
+        ) {
+          cache = workInProgress.memoizedState.cachePool.pool;
+        }
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          workInProgress.flags |= Passive;
+        }
         const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
         if (spawnedCachePool !== null) {
           popCachePool(workInProgress);
@@ -1475,7 +1526,15 @@ function completeWork(
     }
     case CacheComponent: {
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.memoizedState.cache;
+        }
         const cache: Cache = workInProgress.memoizedState.cache;
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          workInProgress.flags |= Passive;
+        }
         popCacheProvider(workInProgress, cache);
         bubbleProperties(workInProgress);
         return null;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 06fbf5abff50f..305359aef206e 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -72,6 +72,7 @@ import {
   ChildDeletion,
   StaticMask,
   MutationMask,
+  Passive,
 } from './ReactFiberFlags';
 
 import {
@@ -848,7 +849,15 @@ function completeWork(
       if (enableCache) {
         popRootCachePool(fiberRoot, renderLanes);
 
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.memoizedState.cache;
+        }
         const cache: Cache = workInProgress.memoizedState.cache;
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          workInProgress.flags |= Passive;
+        }
         popCacheProvider(workInProgress, cache);
       }
       popHostContainer(workInProgress);
@@ -1089,6 +1098,29 @@ function completeWork(
         prevDidTimeout = prevState !== null;
       }
 
+      if (enableCache && nextDidTimeout) {
+        const offscreenFiber: Fiber = (workInProgress.child: any);
+        let previousCache: Cache | null = null;
+        if (
+          offscreenFiber.alternate !== null &&
+          offscreenFiber.alternate.memoizedState !== null &&
+          offscreenFiber.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = offscreenFiber.alternate.memoizedState.cachePool.pool;
+        }
+        let cache: Cache | null = null;
+        if (
+          offscreenFiber.memoizedState !== null &&
+          offscreenFiber.memoizedState.cachePool !== null
+        ) {
+          cache = offscreenFiber.memoizedState.cachePool.pool;
+        }
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          offscreenFiber.flags |= Passive;
+        }
+      }
+
       // 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
@@ -1465,6 +1497,25 @@ function completeWork(
       }
 
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          workInProgress.alternate !== null &&
+          workInProgress.alternate.memoizedState !== null &&
+          workInProgress.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = workInProgress.alternate.memoizedState.cachePool.pool;
+        }
+        let cache: Cache | null = null;
+        if (
+          workInProgress.memoizedState !== null &&
+          workInProgress.memoizedState.cachePool !== null
+        ) {
+          cache = workInProgress.memoizedState.cachePool.pool;
+        }
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          workInProgress.flags |= Passive;
+        }
         const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
         if (spawnedCachePool !== null) {
           popCachePool(workInProgress);
@@ -1475,7 +1526,15 @@ function completeWork(
     }
     case CacheComponent: {
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.memoizedState.cache;
+        }
         const cache: Cache = workInProgress.memoizedState.cache;
+        if (cache !== previousCache) {
+          // Run passive effects to retain/release the cache.
+          workInProgress.flags |= Passive;
+        }
         popCacheProvider(workInProgress, cache);
         bubbleProperties(workInProgress);
         return null;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index afaebd20a5264..d21704a1b6fea 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -110,7 +110,7 @@ import {
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
-import {CacheContext} from './ReactFiberCacheComponent.new';
+import {createCache, CacheContext} from './ReactFiberCacheComponent.new';
 import {
   createUpdate as createLegacyQueueUpdate,
   enqueueUpdate as enqueueLegacyQueueUpdate,
@@ -2124,6 +2124,9 @@ function updateRefresh() {
 }
 
 function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
+  if (!enableCache) {
+    return;
+  }
   // TODO: Does Cache work in legacy mode? Should decide and write a test.
   // TODO: Consider warning if the refresh is at discrete priority, or if we
   // otherwise suspect that it wasn't batched properly.
@@ -2139,11 +2142,14 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           entangleLegacyQueueTransitions(root, provider, lane);
         }
 
-        const seededCache = new Map();
+        // TODO: If a refresh never commits, the new cache created here must be
+        // released. A simple case is start refreshing a cache boundary, but then
+        // unmount that boundary before the refresh completes.
+        const seededCache = createCache();
         if (seedKey !== null && seedKey !== undefined && root !== null) {
           // Seed the cache with the value passed by the caller. This could be
           // from a server mutation, or it could be a streaming response.
-          seededCache.set(seedKey, seedValue);
+          seededCache.data.set(seedKey, seedValue);
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
@@ -2390,15 +2396,23 @@ function markUpdateInDevTools(fiber, lane, action) {
   }
 }
 
+function getCacheSignal(): AbortSignal {
+  if (!enableCache) {
+    throw new Error('Not implemented.');
+  }
+  const cache: Cache = readContext(CacheContext);
+  return cache.controller.signal;
+}
+
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
     throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
-  let cacheForType: T | void = (cache.get(resourceType): any);
+  let cacheForType: T | void = (cache.data.get(resourceType): any);
   if (cacheForType === undefined) {
     cacheForType = resourceType();
-    cache.set(resourceType, cacheForType);
+    cache.data.set(resourceType, cacheForType);
   }
   return cacheForType;
 }
@@ -2426,6 +2440,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (ContextOnlyDispatcher: Dispatcher).getCacheSignal = getCacheSignal;
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
@@ -2453,6 +2468,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnMount: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
@@ -2480,6 +2496,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnUpdate: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2507,6 +2524,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnRerender: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2677,6 +2695,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2818,6 +2837,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2959,6 +2979,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3101,6 +3122,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3259,6 +3281,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3417,6 +3440,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3576,6 +3600,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 03df5b1444e62..cf6786e617daf 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -110,7 +110,7 @@ import {
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
-import {CacheContext} from './ReactFiberCacheComponent.old';
+import {createCache, CacheContext} from './ReactFiberCacheComponent.old';
 import {
   createUpdate as createLegacyQueueUpdate,
   enqueueUpdate as enqueueLegacyQueueUpdate,
@@ -2124,6 +2124,9 @@ function updateRefresh() {
 }
 
 function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
+  if (!enableCache) {
+    return;
+  }
   // TODO: Does Cache work in legacy mode? Should decide and write a test.
   // TODO: Consider warning if the refresh is at discrete priority, or if we
   // otherwise suspect that it wasn't batched properly.
@@ -2139,11 +2142,14 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           entangleLegacyQueueTransitions(root, provider, lane);
         }
 
-        const seededCache = new Map();
+        // TODO: If a refresh never commits, the new cache created here must be
+        // released. A simple case is start refreshing a cache boundary, but then
+        // unmount that boundary before the refresh completes.
+        const seededCache = createCache();
         if (seedKey !== null && seedKey !== undefined && root !== null) {
           // Seed the cache with the value passed by the caller. This could be
           // from a server mutation, or it could be a streaming response.
-          seededCache.set(seedKey, seedValue);
+          seededCache.data.set(seedKey, seedValue);
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
@@ -2390,15 +2396,23 @@ function markUpdateInDevTools(fiber, lane, action) {
   }
 }
 
+function getCacheSignal(): AbortSignal {
+  if (!enableCache) {
+    throw new Error('Not implemented.');
+  }
+  const cache: Cache = readContext(CacheContext);
+  return cache.controller.signal;
+}
+
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
     throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
-  let cacheForType: T | void = (cache.get(resourceType): any);
+  let cacheForType: T | void = (cache.data.get(resourceType): any);
   if (cacheForType === undefined) {
     cacheForType = resourceType();
-    cache.set(resourceType, cacheForType);
+    cache.data.set(resourceType, cacheForType);
   }
   return cacheForType;
 }
@@ -2426,6 +2440,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (ContextOnlyDispatcher: Dispatcher).getCacheSignal = getCacheSignal;
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
@@ -2453,6 +2468,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnMount: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
@@ -2480,6 +2496,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnUpdate: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2507,6 +2524,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnRerender: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2677,6 +2695,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2818,6 +2837,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2959,6 +2979,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3101,6 +3122,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3259,6 +3281,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3417,6 +3440,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3576,6 +3600,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index ad124a432a4a2..c1f34e1052fc4 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -17,7 +17,6 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import {
-  enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
   allowConcurrentByDefault,
@@ -635,15 +634,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
-  if (enableCache) {
-    const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
-    if (pooledCacheLanes === NoLanes) {
-      // None of the remaining work relies on the cache pool. Clear it so
-      // subsequent requests get a new cache.
-      root.pooledCache = null;
-    }
-  }
-
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4a064a3846515..c81191f6a07e5 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -17,7 +17,6 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import {
-  enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
   allowConcurrentByDefault,
@@ -635,15 +634,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
-  if (enableCache) {
-    const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
-    if (pooledCacheLanes === NoLanes) {
-      // None of the remaining work relies on the cache pool. Clear it so
-      // subsequent requests get a new cache.
-      root.pooledCache = null;
-    }
-  }
-
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index db012ad1db19d..803adee1e22dd 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -28,6 +28,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
+import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -117,8 +118,18 @@ export function createFiberRoot(
   uninitializedFiber.stateNode = root;
 
   if (enableCache) {
-    const initialCache = new Map();
+    const initialCache = createCache();
+    retainCache(initialCache);
+
+    // The pooledCache is a fresh cache instance that is used temporarily
+    // for newly mounted boundaries during a render. In general, the
+    // pooledCache is always cleared from the root at the end of a render:
+    // it is either released when render commits, or moved to an Offscreen
+    // component if rendering suspends. Because the lifetime of the pooled
+    // cache is distinct from the main memoizedState.cache, it must be
+    // retained separately.
     root.pooledCache = initialCache;
+    retainCache(initialCache);
     const initialState = {
       element: null,
       cache: initialCache,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 03332fd545619..504dac966ef22 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -28,6 +28,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
+import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -117,8 +118,18 @@ export function createFiberRoot(
   uninitializedFiber.stateNode = root;
 
   if (enableCache) {
-    const initialCache = new Map();
+    const initialCache = createCache();
+    retainCache(initialCache);
+
+    // The pooledCache is a fresh cache instance that is used temporarily
+    // for newly mounted boundaries during a render. In general, the
+    // pooledCache is always cleared from the root at the end of a render:
+    // it is either released when render commits, or moved to an Offscreen
+    // component if rendering suspends. Because the lifetime of the pooled
+    // cache is distinct from the main memoizedState.cache, it must be
+    // retained separately.
     root.pooledCache = initialCache;
+    retainCache(initialCache);
     const initialState = {
       element: null,
       cache: initialCache,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 89286bd573858..930fc608f4724 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,6 +32,7 @@ import {
   skipUnmountedBoundaries,
   enableUpdaterTracking,
   warnOnSubscriptionInsideStartTransition,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import is from 'shared/objectIs';
@@ -234,6 +235,7 @@ import {
   isDevToolsPresent,
 } from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
+import {releaseCache} from './ReactFiberCacheComponent.new';
 
 const ceil = Math.ceil;
 
@@ -331,6 +333,7 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
+let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
 
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
@@ -1900,8 +1903,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   ) {
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
+      pendingPassiveEffectsRemainingLanes = remainingLanes;
       scheduleCallback(NormalSchedulerPriority, () => {
         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;
       });
     }
@@ -2027,6 +2034,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
+  } else {
+    // There were no passive effects, so we can immediately release the cache
+    // pool for this render.
+    releaseRootPooledCache(root, remainingLanes);
   }
 
   // Read this again, since an effect might have updated it
@@ -2127,6 +2138,21 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
+function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
+  if (enableCache) {
+    const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
+    if (pooledCacheLanes === NoLanes) {
+      // None of the remaining work relies on the cache pool. Clear it so
+      // subsequent requests get a new cache
+      const pooledCache = root.pooledCache;
+      if (pooledCache != null) {
+        root.pooledCache = null;
+        releaseCache(pooledCache);
+      }
+    }
+  }
+}
+
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   // TODO: Combine this check with the one in flushPassiveEFfectsImpl. We should
@@ -2135,6 +2161,15 @@ export function flushPassiveEffects(): boolean {
   // `Scheduler.runWithPriority`, which accepts a function. But now we track the
   // priority within React itself, so we can mutate the variable directly.
   if (rootWithPendingPassiveEffects !== null) {
+    // Cache the root since rootWithPendingPassiveEffects is cleared in
+    // flushPassiveEffectsImpl
+    const root = rootWithPendingPassiveEffects;
+    // Cache and clear the remaining lanes flag; it must be reset since this
+    // method can be called from various places, not always from commitRoot
+    // where the remaining lanes are known
+    const remainingLanes = pendingPassiveEffectsRemainingLanes;
+    pendingPassiveEffectsRemainingLanes = NoLanes;
+
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
@@ -2146,6 +2181,11 @@ export function flushPassiveEffects(): boolean {
     } finally {
       setCurrentUpdatePriority(previousPriority);
       ReactCurrentBatchConfig.transition = prevTransition;
+
+      // Once passive effects have run for the tree - giving components a
+      // chance to retain cache instances they use - release the pooled
+      // cache at the root (if there is one)
+      releaseRootPooledCache(root, remainingLanes);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d5cb23483d2d0..0b7f46c799016 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,6 +32,7 @@ import {
   skipUnmountedBoundaries,
   enableUpdaterTracking,
   warnOnSubscriptionInsideStartTransition,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import is from 'shared/objectIs';
@@ -234,6 +235,7 @@ import {
   isDevToolsPresent,
 } from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
+import {releaseCache} from './ReactFiberCacheComponent.old';
 
 const ceil = Math.ceil;
 
@@ -331,6 +333,7 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
+let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
 
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
@@ -1900,8 +1903,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   ) {
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
+      pendingPassiveEffectsRemainingLanes = remainingLanes;
       scheduleCallback(NormalSchedulerPriority, () => {
         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;
       });
     }
@@ -2027,6 +2034,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
+  } else {
+    // There were no passive effects, so we can immediately release the cache
+    // pool for this render.
+    releaseRootPooledCache(root, remainingLanes);
   }
 
   // Read this again, since an effect might have updated it
@@ -2127,6 +2138,21 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
+function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
+  if (enableCache) {
+    const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
+    if (pooledCacheLanes === NoLanes) {
+      // None of the remaining work relies on the cache pool. Clear it so
+      // subsequent requests get a new cache
+      const pooledCache = root.pooledCache;
+      if (pooledCache != null) {
+        root.pooledCache = null;
+        releaseCache(pooledCache);
+      }
+    }
+  }
+}
+
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   // TODO: Combine this check with the one in flushPassiveEFfectsImpl. We should
@@ -2135,6 +2161,15 @@ export function flushPassiveEffects(): boolean {
   // `Scheduler.runWithPriority`, which accepts a function. But now we track the
   // priority within React itself, so we can mutate the variable directly.
   if (rootWithPendingPassiveEffects !== null) {
+    // Cache the root since rootWithPendingPassiveEffects is cleared in
+    // flushPassiveEffectsImpl
+    const root = rootWithPendingPassiveEffects;
+    // Cache and clear the remaining lanes flag; it must be reset since this
+    // method can be called from various places, not always from commitRoot
+    // where the remaining lanes are known
+    const remainingLanes = pendingPassiveEffectsRemainingLanes;
+    pendingPassiveEffectsRemainingLanes = NoLanes;
+
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
@@ -2146,6 +2181,11 @@ export function flushPassiveEffects(): boolean {
     } finally {
       setCurrentUpdatePriority(previousPriority);
       ReactCurrentBatchConfig.transition = prevTransition;
+
+      // Once passive effects have run for the tree - giving components a
+      // chance to retain cache instances they use - release the pooled
+      // cache at the root (if there is one)
+      releaseRootPooledCache(root, remainingLanes);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index f079b3e8f2b93..e971828233c10 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -273,6 +273,7 @@ type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
 export type Dispatcher = {|
+  getCacheSignal?: () => AbortSignal,
   getCacheForType?: <T>(resourceType: () => T) => T,
   readContext<T>(context: ReactContext<T>): T,
   useState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>],
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 31321eb07a520..7ef18875e087d 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Cache;
+let getCacheSignal;
 let getCacheForType;
 let Scheduler;
 let act;
@@ -22,6 +23,7 @@ describe('ReactCache', () => {
     Scheduler = require('scheduler');
     act = require('jest-react').act;
     Suspense = React.Suspense;
+    getCacheSignal = React.unstable_getCacheSignal;
     getCacheForType = React.unstable_getCacheForType;
     useCacheRefresh = React.unstable_useCacheRefresh;
     startTransition = React.startTransition;
@@ -52,6 +54,7 @@ describe('ReactCache', () => {
           const newRecord = {
             status: 'resolved',
             value: text,
+            cleanupScheduled: false,
           };
           data.set(text, newRecord);
         } else if (record.status === 'pending') {
@@ -64,6 +67,7 @@ describe('ReactCache', () => {
           const newRecord = {
             status: 'rejected',
             value: error,
+            cleanupScheduled: false,
           };
           data.set(text, newRecord);
         } else if (record.status === 'pending') {
@@ -76,9 +80,21 @@ describe('ReactCache', () => {
   }
 
   function readText(text) {
+    const signal = getCacheSignal();
     const textCache = getCacheForType(createTextCache);
     const record = textCache.data.get(text);
     if (record !== undefined) {
+      if (!record.cleanupScheduled) {
+        // This record was seeded prior to the abort signal being available:
+        // schedule a cleanup function for it.
+        // TODO: Add ability to cleanup entries seeded w useCacheRefresh()
+        record.cleanupScheduled = true;
+        signal.addEventListener('abort', () => {
+          Scheduler.unstable_yieldValue(
+            `Cache cleanup: ${text} [v${textCache.version}]`,
+          );
+        });
+      }
       switch (record.status) {
         case 'pending':
           throw record.value;
@@ -115,9 +131,15 @@ describe('ReactCache', () => {
       const newRecord = {
         status: 'pending',
         value: thenable,
+        cleanupScheduled: true,
       };
       textCache.data.set(text, newRecord);
 
+      signal.addEventListener('abort', () => {
+        Scheduler.unstable_yieldValue(
+          `Cache cleanup: ${text} [v${textCache.version}]`,
+        );
+      });
       throw thenable;
     }
   }
@@ -180,6 +202,13 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput('A');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -200,12 +229,19 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput('A');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
   test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => {
-    function App({text}) {
-      return (
+    function App({showMore}) {
+      return showMore ? (
         <>
           <Cache>
             <Suspense fallback={<Text text="Loading..." />}>
@@ -218,6 +254,8 @@ describe('ReactCache', () => {
             </Suspense>
           </Cache>
         </>
+      ) : (
+        '(empty)'
       );
     }
 
@@ -225,6 +263,12 @@ describe('ReactCache', () => {
     await act(async () => {
       root.render(<App showMore={false} />);
     });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await act(async () => {
+      root.render(<App showMore={true} />);
+    });
     // Even though there are two new <Cache /> trees, they should share the same
     // data cache. So there should be only a single cache miss for A.
     expect(Scheduler).toHaveYielded([
@@ -239,6 +283,15 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // cleanup occurs for the cache shared by the inner cache boundaries (which
+    // are not shared w the root because they were added in an update)
+    // note that no cache is created for the root since the cache is never accessed
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v1]']);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -261,8 +314,8 @@ describe('ReactCache', () => {
       await act(async () => {
         root.render(<App />);
       });
-      // Even though there are two new <Cache /> trees, they should share the same
-      // data cache. So there should be only a single cache miss for A.
+      // Even though there is a nested <Cache /> boundary, it should share the same
+      // data cache as the root. So there should be only a single cache miss for A.
       expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
       expect(root).toMatchRenderedOutput('Loading...');
 
@@ -271,6 +324,13 @@ describe('ReactCache', () => {
       });
       expect(Scheduler).toHaveYielded(['A', 'A']);
       expect(root).toMatchRenderedOutput('AA');
+
+      await act(async () => {
+        root.render('Bye');
+      });
+      // no cleanup: cache is still retained at the root
+      expect(Scheduler).toHaveYielded([]);
+      expect(root).toMatchRenderedOutput('Bye');
     },
   );
 
@@ -309,6 +369,13 @@ describe('ReactCache', () => {
       'A [v1]',
     ]);
     expect(root).toMatchRenderedOutput('A [v1]A [v1]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -356,10 +423,21 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v1]A [v2]');
+
+    // Replace all the children: this should retain the root Cache instance,
+    // but cleanup the separate cache instance created for the fresh cache
+    // boundary
+    await act(async () => {
+      root.render('Bye!');
+    });
+    // Cleanup occurs for the *second* cache instance: the first is still
+    // referenced by the root
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 
   // @gate experimental || www
-  test('inner content uses same cache as shell if spawned by the same transition', async () => {
+  test('inner/outer cache boundaries uses the same cache instance on initial render', async () => {
     const root = ReactNoop.createRoot();
 
     function App() {
@@ -431,10 +509,109 @@ describe('ReactCache', () => {
         <div>Content</div>
       </>,
     );
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
+  });
+
+  // @gate experimental || www
+  test('inner/ outer cache boundaries added in the same update use the same cache instance', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App({showMore}) {
+      return showMore ? (
+        <Cache>
+          <Suspense fallback={<Text text="Loading shell..." />}>
+            {/* The shell reads A */}
+            <Shell>
+              {/* The inner content reads both A and B */}
+              <Suspense fallback={<Text text="Loading content..." />}>
+                <Cache>
+                  <Content />
+                </Cache>
+              </Suspense>
+            </Shell>
+          </Suspense>
+        </Cache>
+      ) : (
+        '(empty)'
+      );
+    }
+
+    function Shell({children}) {
+      readText('A');
+      return (
+        <>
+          <div>
+            <Text text="Shell" />
+          </div>
+          <div>{children}</div>
+        </>
+      );
+    }
+
+    function Content() {
+      readText('A');
+      readText('B');
+      return <Text text="Content" />;
+    }
+
+    await act(async () => {
+      root.render(<App showMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await act(async () => {
+      root.render(<App showMore={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading shell...']);
+    expect(root).toMatchRenderedOutput('Loading shell...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Shell',
+      // There's a cache miss for B, because it hasn't been read yet. But not
+      // A, because it was cached when we rendered the shell.
+      'Cache miss! [B]',
+      'Loading content...',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Shell</div>
+        <div>Loading content...</div>
+      </>,
+    );
+
+    await act(async () => {
+      resolveMostRecentTextCache('B');
+    });
+    expect(Scheduler).toHaveYielded(['Content']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Shell</div>
+        <div>Content</div>
+      </>,
+    );
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: A [v1]',
+      'Cache cleanup: B [v1]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
-  test('refresh a cache', async () => {
+  test('refresh a cache boundary', async () => {
     let refresh;
     function App() {
       refresh = useCacheRefresh();
@@ -474,6 +651,14 @@ describe('ReactCache', () => {
     // Note that the version has updated
     expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the original cache instance does not cleanup since it is still referenced
+    // by the root, but the refreshed inner cache does cleanup
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -512,9 +697,64 @@ describe('ReactCache', () => {
     await act(async () => {
       resolveMostRecentTextCache('A');
     });
-    // Note that the version has updated
-    expect(Scheduler).toHaveYielded(['A [v2]']);
+    // Note that the version has updated, and the previous cache is cleared
+    expect(Scheduler).toHaveYielded(['A [v2]', 'Cache cleanup: A [v1]']);
     expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the original root cache already cleaned up when the refresh completed
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
+  });
+
+  // @gate experimental || www
+  test('refresh the root cache without a transition', async () => {
+    let refresh;
+    function App() {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text="A" />;
+    }
+
+    // Mount initial data
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <App />
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Refresh for new data.
+    await act(async () => {
+      refresh();
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    // Note that the version has updated, and the previous cache is cleared
+    expect(Scheduler).toHaveYielded(['A [v2]', 'Cache cleanup: A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the original root cache already cleaned up when the refresh completed
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -556,8 +796,16 @@ describe('ReactCache', () => {
       startTransition(() => refresh(createTextCache, cache));
     });
     // The root should re-render without a cache miss.
+    // The cache is not cleared up yet, since it's still reference by the root
     expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the refreshed cache boundary is unmounted and cleans up
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -621,8 +869,22 @@ describe('ReactCache', () => {
     await act(async () => {
       resolveMostRecentTextCache('A');
     });
-    expect(Scheduler).toHaveYielded(['A [v3]', 'A [v3]']);
+    expect(Scheduler).toHaveYielded([
+      'A [v3]',
+      'A [v3]',
+      // once the refresh completes the inner showMore boundary frees its previous
+      // cache instance, since it is now using the refreshed parent instance.
+      'Cache cleanup: A [v2]',
+    ]);
     expect(root).toMatchRenderedOutput('A [v3]A [v3]');
+
+    await act(async () => {
+      root.render('Bye!');
+    });
+    // Unmounting children releases the refreshed cache instance only; the root
+    // still retains the original cache instance used for the first render
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v3]']);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 
   // @gate experimental || www
@@ -695,6 +957,21 @@ describe('ReactCache', () => {
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
       expect(root).toMatchRenderedOutput('A [v2]A [v1]');
+
+      // Unmount children: this should clear *both* cache instances:
+      // the root doesn't have a cache instance (since it wasn't accessed
+      // during the initial render, and all subsequent cache accesses were within
+      // a fresh boundary). Therefore this causes cleanup for both the fresh cache
+      // instance in the refreshed first boundary and cleanup for the non-refreshed
+      // sibling boundary.
+      await act(async () => {
+        root.render('Bye!');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Cache cleanup: A [v2]',
+        'Cache cleanup: A [v1]',
+      ]);
+      expect(root).toMatchRenderedOutput('Bye!');
     },
   );
 
@@ -733,6 +1010,7 @@ describe('ReactCache', () => {
         'Cache miss! [B]',
         'Loading...',
       ]);
+      expect(root).toMatchRenderedOutput('Loading...');
 
       await act(async () => {
         // This will resolve the content in the first cache
@@ -750,6 +1028,7 @@ describe('ReactCache', () => {
         'A [v1]',
         'B [v1]',
       ]);
+      expect(root).toMatchRenderedOutput('Loading... A [v1] B [v1]');
 
       // Now resolve the second tree
       await act(async () => {
@@ -757,6 +1036,15 @@ describe('ReactCache', () => {
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
       expect(root).toMatchRenderedOutput('A [v2] A [v1] B [v1]');
+
+      await act(async () => {
+        root.render('Bye!');
+      });
+      // Unmounting children releases both cache boundaries, but the original
+      // cache instance (used by second boundary) is still referenced by the root.
+      // only the second cache instance is freed.
+      expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+      expect(root).toMatchRenderedOutput('Bye!');
     },
   );
 
@@ -841,6 +1129,19 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]', 'A [v2]']);
     expect(root).toMatchRenderedOutput('A [v1]A [v1]A [v2]');
+
+    // Unmount children: the first text cache instance is created only after the root
+    // commits, so both fresh cache instances are released by their cache boundaries,
+    // cleaning up v1 (used for the first two children which render togeether) and
+    // v2 (used for the third boundary added later).
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: A [v1]',
+      'Cache cleanup: A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 
   // @gate experimental || www
@@ -863,7 +1164,7 @@ describe('ReactCache', () => {
           <Suspense fallback={<Text text="Loading..." />}>
             {shouldShow ? (
               <Cache>
-                <AsyncText text="A" />
+                <AsyncText showVersion={true} text="A" />
               </Cache>
             ) : null}
           </Suspense>
@@ -880,7 +1181,7 @@ describe('ReactCache', () => {
 
     const root = ReactNoop.createRoot();
     await act(async () => {
-      root.render(<App showMore={false} />);
+      root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['0']);
     expect(root).toMatchRenderedOutput('0');
@@ -908,7 +1209,331 @@ describe('ReactCache', () => {
     await act(async () => {
       resolveMostRecentTextCache('A');
     });
-    expect(Scheduler).toHaveYielded(['A']);
-    expect(root).toMatchRenderedOutput('A1');
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]1');
+
+    // Unmount children: the first text cache instance is created only after initial
+    // render after calling showMore(). This instance is cleaned up when that boundary
+    // is unmounted. Bc root cache instance is never accessed, the inner cache
+    // boundary ends up at v1.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v1]']);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('cache boundary uses a fresh cache when its key changes', async () => {
+    const root = ReactNoop.createRoot();
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    seedNextTextCache('B');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="B">
+            <AsyncText showVersion={true} text="B" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['B [v2]']);
+    expect(root).toMatchRenderedOutput('B [v2]');
+
+    // Unmount children: the fresh cache instance for B cleans up since the cache boundary
+    // is the only owner, while the original cache instance (for A) is still retained by
+    // the root.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded(['Cache cleanup: B [v2]']);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('overlapping transitions after an initial mount use the same fresh cache', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // After a mount, subsequent transitions use a fresh cache
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="B">
+              <AsyncText showVersion={true} text="B" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [B]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Update to a different text and with a different key for the cache
+    // boundary: this should still use the fresh cache instance created
+    // for the earlier transition
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="C">
+              <AsyncText showVersion={true} text="C" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [C]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      resolveMostRecentTextCache('C');
+    });
+    expect(Scheduler).toHaveYielded(['C [v2]']);
+    expect(root).toMatchRenderedOutput('C [v2]');
+
+    // Unmount children: the fresh cache used for the updates is freed, while the
+    // original cache (with A) is still retained at the root.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: B [v2]',
+      'Cache cleanup: C [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('overlapping updates after an initial mount use the same fresh cache', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // After a mount, subsequent updates use a fresh cache
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="B">
+            <AsyncText showVersion={true} text="B" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [B]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // A second update uses the same fresh cache: even though this is a new
+    // Cache boundary, the render uses the fresh cache from the pending update.
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="C">
+            <AsyncText showVersion={true} text="C" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [C]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('C');
+    });
+    expect(Scheduler).toHaveYielded(['C [v2]']);
+    expect(root).toMatchRenderedOutput('C [v2]');
+
+    // Unmount children: the fresh cache used for the updates is freed, while the
+    // original cache (with A) is still retained at the root.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: B [v2]',
+      'Cache cleanup: C [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('cleans up cache only used in an aborted transition', async () => {
+    const root = ReactNoop.createRoot();
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Start a transition from A -> B..., which should create a fresh cache
+    // for the new cache boundary (bc of the different key)
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="B">
+              <AsyncText showVersion={true} text="B" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [B]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // ...but cancel by transitioning "back" to A (which we never really left)
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="A">
+              <AsyncText showVersion={true} text="A" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]', 'Cache cleanup: B [v2]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Unmount children: ...
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test.skip('if a root cache refresh never commits its fresh cache is released', async () => {
+    const root = ReactNoop.createRoot();
+    let refresh;
+    function Example({text}) {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text={text} />;
+    }
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Example text="A" />
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      startTransition(() => {
+        refresh();
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      // TODO: the v1 cache should *not* be cleaned up, it is still retained by the root
+      // The following line is presently yielded but should not be:
+      // 'Cache cleanup: A [v1]',
+
+      // TODO: the v2 cache *should* be cleaned up, it was created for the abandoned refresh
+      // The following line is presently not yielded but should be:
+      'Cache cleanup: A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test.skip('if a cache boundary refresh never commits its fresh cache is released', async () => {
+    const root = ReactNoop.createRoot();
+    let refresh;
+    function Example({text}) {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text={text} />;
+    }
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache>
+            <Example text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      startTransition(() => {
+        refresh();
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Unmount the boundary before the refresh can complete
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      // TODO: the v2 cache *should* be cleaned up, it was created for the abandoned refresh
+      // The following line is presently not yielded but should be:
+      'Cache cleanup: A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 9b6ec83a40d39..6b1e4290d0102 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -409,30 +409,30 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--layout-effects-start-16",
-                "--schedule-state-update-1-Example",
-                "--layout-effects-stop",
-                "--render-start-1",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--commit-stop",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-16",
+          "--schedule-state-update-1-Example",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--commit-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -462,30 +462,30 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--layout-effects-start-16",
-                "--schedule-forced-update-1-Example",
-                "--layout-effects-stop",
-                "--render-start-1",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--commit-stop",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-16",
+          "--schedule-forced-update-1-Example",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--commit-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -701,22 +701,22 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--schedule-state-update-16-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--layout-effects-start-16",
-                "--layout-effects-stop",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--schedule-state-update-16-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -746,35 +746,35 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-1",
-                "--render-start-1",
-                "--component-render-start-ErrorBoundary",
-                "--component-render-stop",
-                "--component-render-start-ExampleThatThrows",
-                "--component-render-start-ExampleThatThrows",
-                "--component-render-stop",
-                "--error-ExampleThatThrows-mount-Expected error",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--layout-effects-start-1",
-                "--schedule-state-update-1-ErrorBoundary",
-                "--layout-effects-stop",
-                "--commit-stop",
-                "--render-start-1",
-                "--component-render-start-ErrorBoundary",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-1",
-                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--schedule-render-1",
+          "--render-start-1",
+          "--component-render-start-ErrorBoundary",
+          "--component-render-stop",
+          "--component-render-start-ExampleThatThrows",
+          "--component-render-start-ExampleThatThrows",
+          "--component-render-stop",
+          "--error-ExampleThatThrows-mount-Expected error",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-1",
+          "--schedule-state-update-1-ErrorBoundary",
+          "--layout-effects-stop",
+          "--commit-stop",
+          "--render-start-1",
+          "--component-render-start-ErrorBoundary",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index 13ca3988b2a71..a27c0271c116a 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -89,20 +89,20 @@ describe('SchedulingProfiler labels', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "__v3",
-        "--schedule-render-1",
-        "--render-start-1",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-1",
-        "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-        "--layout-effects-start-1",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "__v3",
+                "--schedule-render-1",
+                "--render-start-1",
+                "--render-stop",
+                "--commit-start-1",
+                "--react-version-17.0.3",
+                "--profiler-version-1",
+                "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+                "--layout-effects-start-1",
+                "--layout-effects-stop",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -114,11 +114,11 @@ describe('SchedulingProfiler labels', () => {
 
         root.render(<div />);
         expect(clearedMarks).toMatchInlineSnapshot(`
-        Array [
-          "__v3",
-          "--schedule-render-16",
-        ]
-      `);
+                  Array [
+                    "__v3",
+                    "--schedule-render-16",
+                  ]
+              `);
       });
     }
   });
@@ -152,21 +152,21 @@ describe('SchedulingProfiler labels', () => {
       });
 
       expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-state-update-1-App",
-        "--render-start-1",
-        "--component-render-start-App",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-1",
-        "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-        "--layout-effects-start-1",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+        Array [
+          "--schedule-state-update-1-App",
+          "--render-start-1",
+          "--component-render-start-App",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-1",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -196,21 +196,21 @@ describe('SchedulingProfiler labels', () => {
       });
 
       expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-state-update-4-App",
-        "--render-start-4",
-        "--component-render-start-App",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-4",
-        "--react-version-17.0.3",
-        "--profiler-version-1",
-        "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
-        "--layout-effects-start-4",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+        Array [
+          "--schedule-state-update-4-App",
+          "--render-start-4",
+          "--component-render-start-App",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-4",
+          "--react-version-17.0.3",
+          "--profiler-version-1",
+          "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
+          "--layout-effects-start-4",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
index e443aa0a23190..f2041b4ba1e32 100644
--- a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
@@ -113,6 +113,7 @@ describe('StrictEffectsMode defaults', () => {
           </>,
         );
 
+        expect(Scheduler).toHaveYielded([]);
         expect(Scheduler).toFlushUntilNextPaint([
           // Cleanup and re-run "one" (and "two") since there is no dependencies array.
           'useLayoutEffect unmount "one"',
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 5335c4053a70e..568a8ada613d9 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -37,6 +37,7 @@ export {
   unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_Scope,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 19490fb214c97..7491bbb7e832d 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -33,6 +33,7 @@ export {
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
   unstable_Offscreen,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.js b/packages/react/index.js
index b4a3bf6e11b81..59cc05f0254e6 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -58,6 +58,7 @@ export {
   unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_Scope,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 2b847d2336312..cd60ee426fa65 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -36,6 +36,7 @@ export {
   unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_Scope,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 2246d32db662e..d29858c9b07fd 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -35,6 +35,7 @@ import {lazy} from './ReactLazy';
 import {forwardRef} from './ReactForwardRef';
 import {memo} from './ReactMemo';
 import {
+  getCacheSignal,
   getCacheForType,
   useCallback,
   useContext,
@@ -119,6 +120,7 @@ export {
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
   REACT_OFFSCREEN_TYPE as unstable_Offscreen,
+  getCacheSignal as unstable_getCacheSignal,
   getCacheForType as unstable_getCacheForType,
   useCacheRefresh as unstable_useCacheRefresh,
   REACT_CACHE_TYPE as unstable_Cache,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 0108c545fae5f..1892f926c59cf 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -41,6 +41,12 @@ function resolveDispatcher() {
   return ((dispatcher: any): Dispatcher);
 }
 
+export function getCacheSignal(): AbortSignal {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.getCacheSignal();
+}
+
 export function getCacheForType<T>(resourceType: () => T): T {
   const dispatcher = resolveDispatcher();
   // $FlowFixMe This is unstable, thus optional
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index 9381778b4435d..a663ca8a5a89d 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -25,6 +25,7 @@ export {
   memo,
   startTransition,
   unstable_DebugTracingMode,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useOpaqueIdentifier,
   useCallback,
diff --git a/scripts/jest/setupEnvironment.js b/scripts/jest/setupEnvironment.js
index 2ba88b156169d..d2d510088c45e 100644
--- a/scripts/jest/setupEnvironment.js
+++ b/scripts/jest/setupEnvironment.js
@@ -1,5 +1,7 @@
 /* eslint-disable */
 
+const AbortController = require('abort-controller');
+
 const NODE_ENV = process.env.NODE_ENV;
 if (NODE_ENV !== 'development' && NODE_ENV !== 'production') {
   throw new Error('NODE_ENV must either be set to development or production.');
@@ -21,6 +23,8 @@ global.__EXPERIMENTAL__ =
 
 global.__VARIANT__ = !!process.env.VARIANT;
 
+global.AbortController = AbortController;
+
 if (typeof window !== 'undefined') {
   global.requestIdleCallback = function(callback) {
     return setTimeout(() => {

From d5b6b4b865ebf13a1eaf2342d623101056e5e197 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 21 Oct 2021 18:31:26 -0400
Subject: [PATCH 060/109] Expand act warning to cover all APIs that might
 schedule React work (#22607)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Move isActEnvironment check to function that warns

I'm about to fork the behavior in legacy roots versus concurrent roots
even further, so I'm lifting this up so I only have to fork once.

* Lift `mode` check, too

Similar to previous commit. I only want to check this once. Not for
performance reasons, but so the logic is easier to follow.

* Expand act warning to include non-hook APIs

In a test environment, React warns if an update isn't wrapped with act
— but only if the update originates from a hook API, like useState.

We did it this way for backwards compatibility with tests that were
written before the act API was introduced. Those tests didn't require
act, anyway, because in a legacy root, all tasks are synchronous except
for `useEffect`.

However, in a concurrent root, nearly every task is asynchronous. Even
tasks that are synchronous may spawn additional asynchronous work. So
all updates need to be wrapped with act, regardless of whether they
originate from a hook, a class, a root, or any other type of component.

This commit expands the act warning to include any API that triggers
an update.

It does not currently account for renders that are caused by a Suspense
promise resolving; those are modelled slightly differently from updates.
I'll fix that in the next step.

I also removed the check for whether an update is batched. It shouldn't
matter, because even a batched update can spawn asynchronous work, which
needs to be flushed by act.

This change only affects concurrent roots. The behavior in legacy roots
is the same.

* Expand act warning to include Suspense resolutions

For the same reason we warn when an update is not wrapped with act,
we should warn if a Suspense promise resolution is not wrapped with act.
Both "pings" and "retries".

Legacy root behavior is unchanged.
---
 .../ReactDevToolsHooksIntegration-test.js     |  28 ++-
 .../__tests__/preprocessData-test.internal.js |  12 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |  38 ++-
 .../react-reconciler/src/ReactFiberAct.new.js |  54 ++--
 .../react-reconciler/src/ReactFiberAct.old.js |  54 ++--
 .../src/ReactFiberHooks.new.js                |  21 +-
 .../src/ReactFiberHooks.old.js                |  21 +-
 .../src/ReactFiberWorkLoop.new.js             |  71 +++++-
 .../src/ReactFiberWorkLoop.old.js             |  71 +++++-
 .../__tests__/DebugTracing-test.internal.js   | 203 +++++++--------
 .../src/__tests__/ReactActWarnings-test.js    | 237 +++++++++++++++++-
 .../ReactFiberHostContext-test.internal.js    |   2 +
 .../src/__tests__/ReactIsomorphicAct-test.js  |   6 +
 13 files changed, 578 insertions(+), 240 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
index 3eea121d65b36..a64a8d794ad94 100644
--- a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
@@ -20,6 +20,8 @@ describe('React hooks DevTools integration', () => {
   let scheduleUpdate;
   let setSuspenseHandler;
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   beforeEach(() => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
       inject: injected => {
@@ -64,7 +66,7 @@ describe('React hooks DevTools integration', () => {
     expect(stateHook.isStateEditable).toBe(true);
 
     if (__DEV__) {
-      overrideHookState(fiber, stateHook.id, [], 10);
+      act(() => overrideHookState(fiber, stateHook.id, [], 10));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
         props: {},
@@ -116,7 +118,7 @@ describe('React hooks DevTools integration', () => {
     expect(reducerHook.isStateEditable).toBe(true);
 
     if (__DEV__) {
-      overrideHookState(fiber, reducerHook.id, ['foo'], 'def');
+      act(() => overrideHookState(fiber, reducerHook.id, ['foo'], 'def'));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
         props: {},
@@ -164,13 +166,12 @@ describe('React hooks DevTools integration', () => {
     expect(stateHook.isStateEditable).toBe(true);
 
     if (__DEV__) {
-      overrideHookState(fiber, stateHook.id, ['count'], 10);
+      act(() => overrideHookState(fiber, stateHook.id, ['count'], 10));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
         props: {},
         children: ['count:', '10'],
       });
-
       act(() => setStateFn(state => ({count: state.count + 1})));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
@@ -233,7 +234,8 @@ describe('React hooks DevTools integration', () => {
     }
   });
 
-  it('should support overriding suspense in concurrent mode', () => {
+  // @gate __DEV__
+  it('should support overriding suspense in concurrent mode', async () => {
     if (__DEV__) {
       // Lock the first render
       setSuspenseHandler(() => true);
@@ -243,13 +245,15 @@ describe('React hooks DevTools integration', () => {
       return 'Done';
     }
 
-    const renderer = ReactTestRenderer.create(
-      <div>
-        <React.Suspense fallback={'Loading'}>
-          <MyComponent />
-        </React.Suspense>
-      </div>,
-      {unstable_isConcurrent: true},
+    const renderer = await act(() =>
+      ReactTestRenderer.create(
+        <div>
+          <React.Suspense fallback={'Loading'}>
+            <MyComponent />
+          </React.Suspense>
+        </div>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
     expect(Scheduler).toFlushAndYield([]);
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 94ada274a770b..758afc1e15f2c 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -17,8 +17,6 @@ import {
 } from '../../constants';
 import REACT_VERSION from 'shared/ReactVersion';
 
-global.IS_REACT_ACT_ENVIRONMENT = true;
-
 describe('getLanesFromTransportDecimalBitmask', () => {
   it('should return array of lane numbers from bitmask string', () => {
     expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
@@ -210,6 +208,8 @@ describe('preprocessData', () => {
     tid = 0;
     pid = 0;
     startTime = 0;
+
+    global.IS_REACT_ACT_ENVIRONMENT = true;
   });
 
   afterEach(() => {
@@ -1251,7 +1251,7 @@ describe('preprocessData', () => {
 
       testMarks.push(...createUserTimingData(clearedMarks));
 
-      const data = await preprocessData(testMarks);
+      const data = await act(() => preprocessData(testMarks));
       expect(data.suspenseEvents).toHaveLength(1);
       expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
     }
@@ -1367,6 +1367,8 @@ describe('preprocessData', () => {
 
           const root = ReactDOM.createRoot(document.createElement('div'));
 
+          // Temporarily turn off the act environment, since we're intentionally using Scheduler instead.
+          global.IS_REACT_ACT_ENVIRONMENT = false;
           React.startTransition(() => {
             // Start rendering an async update (but don't finish).
             root.render(
@@ -1837,7 +1839,7 @@ describe('preprocessData', () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = await preprocessData(testMarks);
+          const data = await act(() => preprocessData(testMarks));
           expect(data.suspenseEvents).toHaveLength(1);
           expect(data.suspenseEvents[0].warning).toMatchInlineSnapshot(
             `"A component suspended during an update which caused a fallback to be shown. Consider using the Transition API to avoid hiding components after they've been mounted."`,
@@ -1895,7 +1897,7 @@ describe('preprocessData', () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = await preprocessData(testMarks);
+          const data = await act(() => preprocessData(testMarks));
           expect(data.suspenseEvents).toHaveLength(1);
           expect(data.suspenseEvents[0].warning).toBe(null);
         }
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index d0992dce53d41..556772500ee2f 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -32,18 +32,31 @@ describe('ReactTestUtils.act()', () => {
     let concurrentRoot = null;
     const renderConcurrent = (el, dom) => {
       concurrentRoot = ReactDOM.createRoot(dom);
-      concurrentRoot.render(el);
+      if (__DEV__) {
+        act(() => concurrentRoot.render(el));
+      } else {
+        concurrentRoot.render(el);
+      }
     };
 
     const unmountConcurrent = _dom => {
-      if (concurrentRoot !== null) {
-        concurrentRoot.unmount();
-        concurrentRoot = null;
+      if (__DEV__) {
+        act(() => {
+          if (concurrentRoot !== null) {
+            concurrentRoot.unmount();
+            concurrentRoot = null;
+          }
+        });
+      } else {
+        if (concurrentRoot !== null) {
+          concurrentRoot.unmount();
+          concurrentRoot = null;
+        }
       }
     };
 
     const rerenderConcurrent = el => {
-      concurrentRoot.render(el);
+      act(() => concurrentRoot.render(el));
     };
 
     runActTests(
@@ -98,22 +111,29 @@ describe('ReactTestUtils.act()', () => {
       ]);
     });
 
+    // @gate __DEV__
     it('does not warn in concurrent mode', () => {
       const root = ReactDOM.createRoot(document.createElement('div'));
-      root.render(<App />);
+      act(() => root.render(<App />));
       Scheduler.unstable_flushAll();
     });
 
     it('warns in concurrent mode if root is strict', () => {
+      // TODO: We don't need this error anymore in concurrent mode because
+      // effects can only be scheduled as the result of an update, and we now
+      // enforce all updates must be wrapped with act, not just hook updates.
       expect(() => {
         const root = ReactDOM.createRoot(document.createElement('div'), {
           unstable_strictMode: true,
         });
         root.render(<App />);
-        Scheduler.unstable_flushAll();
-      }).toErrorDev([
+      }).toErrorDev(
+        'An update to Root inside a test was not wrapped in act(...)',
+        {withoutStack: true},
+      );
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
+      );
     });
   });
 });
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
index 18055e7c738c7..27102b5e92531 100644
--- a/packages/react-reconciler/src/ReactFiberAct.new.js
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -12,11 +12,32 @@ import type {Fiber} from './ReactFiber.new';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {warnsIfNotActing} from './ReactFiberHostConfig';
-import {ConcurrentMode} from './ReactTypeOfMode';
 
 const {ReactCurrentActQueue} = ReactSharedInternals;
 
-export function isActEnvironment(fiber: Fiber) {
+export function isLegacyActEnvironment(fiber: Fiber) {
+  if (__DEV__) {
+    // 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.
+
+    const 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
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
+
+export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
       // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
@@ -24,31 +45,14 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    if (fiber.mode & ConcurrentMode) {
-      if (
-        !isReactActEnvironmentGlobal &&
-        ReactCurrentActQueue.current !== null
-      ) {
-        // TODO: Include link to relevant documentation page.
-        console.error(
-          'The current testing environment is not configured to support ' +
-            'act(...)',
-        );
-      }
-      return isReactActEnvironmentGlobal;
-    } else {
-      // 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.
-      // $FlowExpectedError - Flow doesn't know about jest
-      const jestIsDefined = typeof jest !== 'undefined';
-      return (
-        warnsIfNotActing &&
-        jestIsDefined &&
-        isReactActEnvironmentGlobal !== false
+    if (!isReactActEnvironmentGlobal && ReactCurrentActQueue.current !== null) {
+      // TODO: Include link to relevant documentation page.
+      console.error(
+        'The current testing environment is not configured to support ' +
+          'act(...)',
       );
     }
+    return isReactActEnvironmentGlobal;
   }
   return false;
 }
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
index ddae518dcb631..bcb4ad707a1be 100644
--- a/packages/react-reconciler/src/ReactFiberAct.old.js
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -12,11 +12,32 @@ import type {Fiber} from './ReactFiber.old';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {warnsIfNotActing} from './ReactFiberHostConfig';
-import {ConcurrentMode} from './ReactTypeOfMode';
 
 const {ReactCurrentActQueue} = ReactSharedInternals;
 
-export function isActEnvironment(fiber: Fiber) {
+export function isLegacyActEnvironment(fiber: Fiber) {
+  if (__DEV__) {
+    // 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.
+
+    const 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
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
+
+export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
       // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
@@ -24,31 +45,14 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    if (fiber.mode & ConcurrentMode) {
-      if (
-        !isReactActEnvironmentGlobal &&
-        ReactCurrentActQueue.current !== null
-      ) {
-        // TODO: Include link to relevant documentation page.
-        console.error(
-          'The current testing environment is not configured to support ' +
-            'act(...)',
-        );
-      }
-      return isReactActEnvironmentGlobal;
-    } else {
-      // 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.
-      // $FlowExpectedError - Flow doesn't know about jest
-      const jestIsDefined = typeof jest !== 'undefined';
-      return (
-        warnsIfNotActing &&
-        jestIsDefined &&
-        isReactActEnvironmentGlobal !== false
+    if (!isReactActEnvironmentGlobal && ReactCurrentActQueue.current !== null) {
+      // TODO: Include link to relevant documentation page.
+      console.error(
+        'The current testing environment is not configured to support ' +
+          'act(...)',
       );
     }
+    return isReactActEnvironmentGlobal;
   }
   return false;
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d21704a1b6fea..266e98960cbb3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -83,7 +83,6 @@ import {
   requestUpdateLane,
   requestEventTime,
   warnIfNotCurrentlyActingEffectsInDEV,
-  warnIfNotCurrentlyActingUpdatesInDev,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
@@ -118,7 +117,6 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {isActEnvironment} from './ReactFiberAct.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1679,9 +1677,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   if (
     __DEV__ &&
@@ -1709,9 +1705,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
@@ -2196,12 +2190,6 @@ function dispatchReducerAction<S, A>(
     enqueueRenderPhaseUpdate(queue, update);
   } else {
     enqueueUpdate(fiber, queue, update, lane);
-
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
@@ -2282,11 +2270,6 @@ function dispatchSetState<S, A>(
         }
       }
     }
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index cf6786e617daf..b2378cbf30d65 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -83,7 +83,6 @@ import {
   requestUpdateLane,
   requestEventTime,
   warnIfNotCurrentlyActingEffectsInDEV,
-  warnIfNotCurrentlyActingUpdatesInDev,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
@@ -118,7 +117,6 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {isActEnvironment} from './ReactFiberAct.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1679,9 +1677,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   if (
     __DEV__ &&
@@ -1709,9 +1705,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
@@ -2196,12 +2190,6 @@ function dispatchReducerAction<S, A>(
     enqueueRenderPhaseUpdate(queue, update);
   } else {
     enqueueUpdate(fiber, queue, update, lane);
-
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
@@ -2282,11 +2270,6 @@ function dispatchSetState<S, A>(
         }
       }
     }
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 930fc608f4724..2c065d6ee17ab 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -236,6 +236,10 @@ import {
 } from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 import {releaseCache} from './ReactFiberCacheComponent.new';
+import {
+  isLegacyActEnvironment,
+  isConcurrentActEnvironment,
+} from './ReactFiberAct.new';
 
 const ceil = Math.ceil;
 
@@ -493,6 +497,8 @@ export function scheduleUpdateOnFiber(
       }
     }
 
+    warnIfUpdatesNotWrappedWithActDEV(fiber);
+
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       if (
         (executionContext & CommitContext) !== NoContext &&
@@ -2402,6 +2408,8 @@ export function pingSuspendedRoot(
   const eventTime = requestEventTime();
   markRootPinged(root, pingedLanes, eventTime);
 
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
+
   if (
     workInProgressRoot === root &&
     isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)
@@ -2854,7 +2862,12 @@ function shouldForceFlushFallbacksInDEV() {
 
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
+    const isActEnvironment =
+      fiber.mode & ConcurrentMode
+        ? isConcurrentActEnvironment()
+        : isLegacyActEnvironment(fiber);
     if (
+      isActEnvironment &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
       ReactCurrentActQueue.current === null
     ) {
@@ -2875,12 +2888,36 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   }
 }
 
-function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
+function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
-    if (
-      executionContext === NoContext &&
-      ReactCurrentActQueue.current === null
-    ) {
+    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(fiber)) {
+        // 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.current === null) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
         setCurrentDebugFiberInDEV(fiber);
@@ -2908,4 +2945,26 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   }
 }
 
-export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
+function warnIfSuspenseResolutionNotWrappedWithActDEV(root: FiberRoot): void {
+  if (__DEV__) {
+    if (
+      root.tag !== LegacyRoot &&
+      isConcurrentActEnvironment() &&
+      ReactCurrentActQueue.current === null
+    ) {
+      console.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',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 0b7f46c799016..97b835d3a18e4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -236,6 +236,10 @@ import {
 } from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 import {releaseCache} from './ReactFiberCacheComponent.old';
+import {
+  isLegacyActEnvironment,
+  isConcurrentActEnvironment,
+} from './ReactFiberAct.old';
 
 const ceil = Math.ceil;
 
@@ -493,6 +497,8 @@ export function scheduleUpdateOnFiber(
       }
     }
 
+    warnIfUpdatesNotWrappedWithActDEV(fiber);
+
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       if (
         (executionContext & CommitContext) !== NoContext &&
@@ -2402,6 +2408,8 @@ export function pingSuspendedRoot(
   const eventTime = requestEventTime();
   markRootPinged(root, pingedLanes, eventTime);
 
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
+
   if (
     workInProgressRoot === root &&
     isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)
@@ -2854,7 +2862,12 @@ function shouldForceFlushFallbacksInDEV() {
 
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
+    const isActEnvironment =
+      fiber.mode & ConcurrentMode
+        ? isConcurrentActEnvironment()
+        : isLegacyActEnvironment(fiber);
     if (
+      isActEnvironment &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
       ReactCurrentActQueue.current === null
     ) {
@@ -2875,12 +2888,36 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   }
 }
 
-function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
+function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
-    if (
-      executionContext === NoContext &&
-      ReactCurrentActQueue.current === null
-    ) {
+    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(fiber)) {
+        // 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.current === null) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
         setCurrentDebugFiberInDEV(fiber);
@@ -2908,4 +2945,26 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   }
 }
 
-export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
+function warnIfSuspenseResolutionNotWrappedWithActDEV(root: FiberRoot): void {
+  if (__DEV__) {
+    if (
+      root.tag !== LegacyRoot &&
+      isConcurrentActEnvironment() &&
+      ReactCurrentActQueue.current === null
+    ) {
+      console.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',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index ee93b3f992994..8be5b0bb9720e 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -56,21 +56,17 @@ describe('DebugTracing', () => {
     expect(logs).toEqual([]);
   });
 
+  // @gate build === 'development'
   // @gate experimental || www
   it('should not log anything for concurrent render without suspends or state updates', () => {
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <div />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <div />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
-
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([]);
   });
 
@@ -81,12 +77,14 @@ describe('DebugTracing', () => {
       throw fakeSuspensePromise;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <React.Suspense fallback={null}>
-          <Example />
-        </React.Suspense>
-      </React.unstable_DebugTracingMode>,
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>
+        </React.unstable_DebugTracingMode>,
+      ),
     );
 
     expect(logs).toEqual([
@@ -142,26 +140,33 @@ describe('DebugTracing', () => {
 
   // @gate experimental && build === 'development' && enableDebugTracing
   it('should log concurrent render with suspense', async () => {
-    const fakeSuspensePromise = Promise.resolve(true);
+    let isResolved = false;
+    let resolveFakeSuspensePromise;
+    const fakeSuspensePromise = new Promise(resolve => {
+      resolveFakeSuspensePromise = () => {
+        resolve();
+        isResolved = true;
+      };
+    });
+
     function Example() {
-      throw fakeSuspensePromise;
+      if (!isResolved) {
+        throw fakeSuspensePromise;
+      }
+      return null;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <React.Suspense fallback={null}>
-          <Example />
-        </React.Suspense>
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: ⚛️ Example suspended',
@@ -170,7 +175,7 @@ describe('DebugTracing', () => {
 
     logs.splice(0);
 
-    await fakeSuspensePromise;
+    await ReactTestRenderer.act(async () => await resolveFakeSuspensePromise());
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
@@ -186,34 +191,23 @@ describe('DebugTracing', () => {
       return children;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Wrapper>
-          <React.Suspense fallback={null} unstable_expectedLoadTime={1}>
-            <Example />
-          </React.Suspense>
-        </Wrapper>
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Wrapper>
+            <React.Suspense fallback={null} unstable_expectedLoadTime={1}>
+              <Example />
+            </React.Suspense>
+          </Wrapper>
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: <Wrapper/>',
       `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
-    ]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(logs).toEqual([
       `group: ⚛️ render (${RETRY_LANE_STRING})`,
       'log: <Example/>',
       `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
@@ -232,19 +226,15 @@ describe('DebugTracing', () => {
       }
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Example />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
       `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
@@ -266,19 +256,15 @@ describe('DebugTracing', () => {
       }
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
-    );
-
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
     expect(() => {
-      expect(Scheduler).toFlushUntilNextPaint([]);
+      ReactTestRenderer.act(() =>
+        ReactTestRenderer.create(
+          <React.unstable_DebugTracingMode>
+            <Example />
+          </React.unstable_DebugTracingMode>,
+          {unstable_isConcurrent: true},
+        ),
+      );
     }).toErrorDev('Cannot update during an existing state transition');
 
     expect(logs).toEqual([
@@ -298,19 +284,15 @@ describe('DebugTracing', () => {
       return didMount;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Example />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
       `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
@@ -378,19 +360,15 @@ describe('DebugTracing', () => {
       return null;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Example />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: Hello from user code',
@@ -398,6 +376,7 @@ describe('DebugTracing', () => {
     ]);
   });
 
+  // @gate build === 'development'
   // @gate experimental || www
   it('should not log anything outside of a unstable_DebugTracingMode subtree', () => {
     function ExampleThatCascades() {
@@ -417,16 +396,18 @@ describe('DebugTracing', () => {
       return null;
     }
 
-    ReactTestRenderer.create(
-      <React.Fragment>
-        <ExampleThatCascades />
-        <React.Suspense fallback={null}>
-          <ExampleThatSuspends />
-        </React.Suspense>
-        <React.unstable_DebugTracingMode>
-          <Example />
-        </React.unstable_DebugTracingMode>
-      </React.Fragment>,
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.Fragment>
+          <ExampleThatCascades />
+          <React.Suspense fallback={null}>
+            <ExampleThatSuspends />
+          </React.Suspense>
+          <React.unstable_DebugTracingMode>
+            <Example />
+          </React.unstable_DebugTracingMode>
+        </React.Fragment>,
+      ),
     );
 
     expect(logs).toEqual([]);
diff --git a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
index 058e01b1fe060..324d153273361 100644
--- a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
@@ -12,6 +12,10 @@ let Scheduler;
 let ReactNoop;
 let useState;
 let act;
+let Suspense;
+let startTransition;
+let getCacheForType;
+let caches;
 
 // These tests are mostly concerned with concurrent roots. The legacy root
 // behavior is covered by other older test suites and is unchanged from
@@ -24,11 +28,110 @@ describe('act warnings', () => {
     ReactNoop = require('react-noop-renderer');
     act = React.unstable_act;
     useState = React.useState;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    getCacheForType = React.unstable_getCacheForType;
+    caches = [];
   });
 
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return props.text;
+  function createTextCache() {
+    const data = new Map();
+    const version = caches.length + 1;
+    const cache = {
+      version,
+      data,
+      resolve(text) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'resolved',
+            value: text,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'resolved';
+          record.value = text;
+          thenable.pings.forEach(t => t());
+        }
+      },
+      reject(text, error) {
+        const record = data.get(text);
+        if (record === undefined) {
+          const newRecord = {
+            status: 'rejected',
+            value: error,
+          };
+          data.set(text, newRecord);
+        } else if (record.status === 'pending') {
+          const thenable = record.value;
+          record.status = 'rejected';
+          record.value = error;
+          thenable.pings.forEach(t => t());
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  function resolveText(text) {
+    if (caches.length === 0) {
+      throw Error('Cache does not exist.');
+    } else {
+      // Resolve the most recently created cache. An older cache can by
+      // resolved with `caches[index].resolve(text)`.
+      caches[caches.length - 1].resolve(text);
+    }
   }
 
   function withActEnvironment(value, scope) {
@@ -127,4 +230,132 @@ describe('act warnings', () => {
       expect(root).toMatchRenderedOutput('1');
     });
   });
+
+  test('warns if root update is not wrapped', () => {
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      expect(() => root.render('Hi')).toErrorDev(
+        // TODO: Better error message that doesn't make it look like "Root" is
+        // the name of a custom component
+        'An update to Root inside a test was not wrapped in act(...)',
+        {withoutStack: true},
+      );
+    });
+  });
+
+  // @gate __DEV__
+  test('warns if class update is not wrapped', () => {
+    let app;
+    class App extends React.Component {
+      state = {count: 0};
+      render() {
+        app = this;
+        return <Text text={this.state.count} />;
+      }
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App />);
+      });
+      expect(() => app.setState({count: 1})).toErrorDev(
+        'An update to App inside a test was not wrapped in act(...)',
+      );
+    });
+  });
+
+  // @gate __DEV__
+  test('warns even if update is synchronous', () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => root.render(<App />));
+      expect(Scheduler).toHaveYielded([0]);
+      expect(root).toMatchRenderedOutput('0');
+
+      // Even though this update is synchronous, we should still fire a warning,
+      // because it could have spawned additional asynchronous work
+      expect(() => ReactNoop.flushSync(() => setState(1))).toErrorDev(
+        'An update to App inside a test was not wrapped in act(...)',
+      );
+
+      expect(Scheduler).toHaveYielded([1]);
+      expect(root).toMatchRenderedOutput('1');
+    });
+  });
+
+  // @gate __DEV__
+  // @gate enableCache
+  test('warns if Suspense retry is not wrapped', () => {
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="Async" />
+        </Suspense>
+      );
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [Async]', 'Loading...']);
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      // This is a retry, not a ping, because we already showed a fallback.
+      expect(() =>
+        resolveText('Async'),
+      ).toErrorDev(
+        'A suspended resource finished loading inside a test, but the event ' +
+          'was not wrapped in act(...)',
+        {withoutStack: true},
+      );
+    });
+  });
+
+  // @gate __DEV__
+  // @gate enableCache
+  test('warns if Suspense ping is not wrapped', () => {
+    function App({showMore}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {showMore ? <AsyncText text="Async" /> : <Text text="(empty)" />}
+        </Suspense>
+      );
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App showMore={false} />);
+      });
+      expect(Scheduler).toHaveYielded(['(empty)']);
+      expect(root).toMatchRenderedOutput('(empty)');
+
+      act(() => {
+        startTransition(() => {
+          root.render(<App showMore={true} />);
+        });
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [Async]', 'Loading...']);
+      expect(root).toMatchRenderedOutput('(empty)');
+
+      // This is a ping, not a retry, because no fallback is showing.
+      expect(() =>
+        resolveText('Async'),
+      ).toErrorDev(
+        'A suspended resource finished loading inside a test, but the event ' +
+          'was not wrapped in act(...)',
+        {withoutStack: true},
+      );
+    });
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 35c22e672ed3e..ee4bd306481b0 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -28,6 +28,8 @@ describe('ReactFiberHostContext', () => {
       .DefaultEventPriority;
   });
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   // @gate __DEV__
   it('works with null host context', async () => {
     let creates = 0;
diff --git a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
index 135757d24f9e1..78458bd2d5bfd 100644
--- a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
@@ -23,12 +23,17 @@ describe('isomorphic act()', () => {
     act = React.unstable_act;
   });
 
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+  });
+
   // @gate __DEV__
   test('bypasses queueMicrotask', async () => {
     const root = ReactNoop.createRoot();
 
     // First test what happens without wrapping in act. This update would
     // normally be queued in a microtask.
+    global.IS_REACT_ACT_ENVIRONMENT = false;
     ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
       root.render('A');
     });
@@ -40,6 +45,7 @@ describe('isomorphic act()', () => {
 
     // Now do the same thing but wrap the update with `act`. No
     // `await` necessary.
+    global.IS_REACT_ACT_ENVIRONMENT = true;
     act(() => {
       ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
         root.render('B');

From 3c4c1c4703e8f7362370c44a48ac9348229e3791 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 21 Oct 2021 18:39:59 -0400
Subject: [PATCH 061/109] Remove warning for dangling passive effects (#22609)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In legacy mode, a test can get into a situation where passive effects are
"dangling" — an update finished, and scheduled some passive effects,
but the effects don't flush.

This is why React warns if you don't wrap updates in act. The act API is
responsible for flushing passive effects. But there are some cases where
the act API (in legacy roots) intentionally doesn't warn, like updates
that originate from roots and classes. It's possible those updates will
render children that contain useEffect. Because of this, dangling
effects are still possible, and React doesn't warn about it.

So we implemented a second act warning for dangling effects.

However, in concurrent roots, we now enforce that all APIs that schedule
React work must be wrapped in act. There's no scenario where dangling
passive effects can happen that doesn't already trigger the warning for
updates. So the dangling effects warning is redundant.

The warning was never part of a public release. It was only enabled
in concurrent roots.

So we can delete it.
---
 .../src/__tests__/ReactTestUtilsAct-test.js   | 31 ----------------
 .../src/ReactFiberHooks.new.js                |  7 ----
 .../src/ReactFiberHooks.old.js                |  7 ----
 .../src/ReactFiberWorkLoop.new.js             | 35 +------------------
 .../src/ReactFiberWorkLoop.old.js             | 35 +------------------
 5 files changed, 2 insertions(+), 113 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 556772500ee2f..71adc286d08ba 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -98,43 +98,12 @@ describe('ReactTestUtils.act()', () => {
       }).toErrorDev([]);
     });
 
-    it('warns in strict mode', () => {
-      expect(() => {
-        ReactDOM.render(
-          <React.StrictMode>
-            <App />
-          </React.StrictMode>,
-          document.createElement('div'),
-        );
-      }).toErrorDev([
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
-    });
-
     // @gate __DEV__
     it('does not warn in concurrent mode', () => {
       const root = ReactDOM.createRoot(document.createElement('div'));
       act(() => root.render(<App />));
       Scheduler.unstable_flushAll();
     });
-
-    it('warns in concurrent mode if root is strict', () => {
-      // TODO: We don't need this error anymore in concurrent mode because
-      // effects can only be scheduled as the result of an update, and we now
-      // enforce all updates must be wrapped with act, not just hook updates.
-      expect(() => {
-        const root = ReactDOM.createRoot(document.createElement('div'), {
-          unstable_strictMode: true,
-        });
-        root.render(<App />);
-      }).toErrorDev(
-        'An update to Root inside a test was not wrapped in act(...)',
-        {withoutStack: true},
-      );
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      );
-    });
   });
 });
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 266e98960cbb3..c3b76549a22aa 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -82,7 +82,6 @@ import {
   scheduleUpdateOnFiber,
   requestUpdateLane,
   requestEventTime,
-  warnIfNotCurrentlyActingEffectsInDEV,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
@@ -1676,9 +1675,6 @@ function mountEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   if (
     __DEV__ &&
     enableStrictEffects &&
@@ -1704,9 +1700,6 @@ function updateEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index b2378cbf30d65..8bc1510deb455 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -82,7 +82,6 @@ import {
   scheduleUpdateOnFiber,
   requestUpdateLane,
   requestEventTime,
-  warnIfNotCurrentlyActingEffectsInDEV,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
@@ -1676,9 +1675,6 @@ function mountEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   if (
     __DEV__ &&
     enableStrictEffects &&
@@ -1704,9 +1700,6 @@ function updateEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 2c065d6ee17ab..e35e5515bb0bf 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -97,12 +97,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.new';
-import {
-  NoMode,
-  StrictLegacyMode,
-  ProfileMode,
-  ConcurrentMode,
-} from './ReactTypeOfMode';
+import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
   IndeterminateComponent,
@@ -2860,34 +2855,6 @@ function shouldForceFlushFallbacksInDEV() {
   return __DEV__ && ReactCurrentActQueue.current !== null;
 }
 
-export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
-  if (__DEV__) {
-    const isActEnvironment =
-      fiber.mode & ConcurrentMode
-        ? isConcurrentActEnvironment()
-        : isLegacyActEnvironment(fiber);
-    if (
-      isActEnvironment &&
-      (fiber.mode & StrictLegacyMode) !== NoMode &&
-      ReactCurrentActQueue.current === null
-    ) {
-      console.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),
-      );
-    }
-  }
-}
-
 function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (fiber.mode & ConcurrentMode) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 97b835d3a18e4..cde46adb01ab0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -97,12 +97,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.old';
-import {
-  NoMode,
-  StrictLegacyMode,
-  ProfileMode,
-  ConcurrentMode,
-} from './ReactTypeOfMode';
+import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
   IndeterminateComponent,
@@ -2860,34 +2855,6 @@ function shouldForceFlushFallbacksInDEV() {
   return __DEV__ && ReactCurrentActQueue.current !== null;
 }
 
-export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
-  if (__DEV__) {
-    const isActEnvironment =
-      fiber.mode & ConcurrentMode
-        ? isConcurrentActEnvironment()
-        : isLegacyActEnvironment(fiber);
-    if (
-      isActEnvironment &&
-      (fiber.mode & StrictLegacyMode) !== NoMode &&
-      ReactCurrentActQueue.current === null
-    ) {
-      console.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),
-      );
-    }
-  }
-}
-
 function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (fiber.mode & ConcurrentMode) {

From 90e5d3638844414e1b9df0fe66c3fc46b211d210 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Fri, 22 Oct 2021 11:44:31 -0500
Subject: [PATCH 062/109] chore: fix comment typo (#22615)

---
 packages/react-server/src/ReactFizzHooks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 6370f61b37735..2596632652b43 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -218,7 +218,7 @@ export function resetHooksState(): void {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  // TODO: This should silently mark this as client rendered since it's not necesssarily
+  // TODO: This should silently mark this as client rendered since it's not necessarily
   // considered an error. It needs to work for things like Flight though.
   throw new Error('Not implemented.');
 }

From 4298ddbc56a711cecfa672ec8ac60c94a02c9380 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sun, 24 Oct 2021 05:21:55 +0200
Subject: [PATCH 063/109] fix passing strings as chunks (#22617)

---
 .../src/server/ReactDOMServerFormatConfig.js         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 1f5a7a65bed59..2012392004e52 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -471,7 +471,7 @@ function pushAttribute(
             attributeSeparator,
             attributeNameChunk,
             attributeAssign,
-            escapeTextForBrowser(value),
+            stringToChunk(escapeTextForBrowser(value)),
             attributeEnd,
           );
         }
@@ -482,7 +482,7 @@ function pushAttribute(
             attributeSeparator,
             attributeNameChunk,
             attributeAssign,
-            escapeTextForBrowser(value),
+            stringToChunk(escapeTextForBrowser(value)),
             attributeEnd,
           );
         }
@@ -493,7 +493,7 @@ function pushAttribute(
             attributeSeparator,
             attributeNameChunk,
             attributeAssign,
-            escapeTextForBrowser(value),
+            stringToChunk(escapeTextForBrowser(value)),
             attributeEnd,
           );
         }
@@ -510,7 +510,7 @@ function pushAttribute(
           attributeSeparator,
           attributeNameChunk,
           attributeAssign,
-          escapeTextForBrowser(value),
+          stringToChunk(escapeTextForBrowser(value)),
           attributeEnd,
         );
     }
@@ -532,7 +532,7 @@ function pushAttribute(
       attributeSeparator,
       stringToChunk(name),
       attributeAssign,
-      escapeTextForBrowser(value),
+      stringToChunk(escapeTextForBrowser(value)),
       attributeEnd,
     );
   }
@@ -1146,7 +1146,7 @@ function pushStartCustomElement(
               attributeSeparator,
               stringToChunk(propKey),
               attributeAssign,
-              escapeTextForBrowser(propValue),
+              stringToChunk(escapeTextForBrowser(propValue)),
               attributeEnd,
             );
           }

From 6c3dcc7a478f53aabd24b9712a7e506cf3702a64 Mon Sep 17 00:00:00 2001
From: Erik Andersson <erik.osc.andersson@gmail.com>
Date: Wed, 27 Oct 2021 16:20:07 +0200
Subject: [PATCH 064/109] Enable 'Reload and Start Profiling' for Microsoft
 Edge (#22631)

---
 packages/react-devtools-extensions/src/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 60ed0fcb1a9ec..f8750292a1a73 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -33,6 +33,7 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 const isChrome = getBrowserName() === 'Chrome';
+const isEdge = getBrowserName() === 'Edge';
 
 let panelCreated = false;
 
@@ -203,7 +204,7 @@ function createPanelIfReactLoaded() {
 
           store = new Store(bridge, {
             isProfiling,
-            supportsReloadAndProfile: isChrome,
+            supportsReloadAndProfile: isChrome || isEdge,
             supportsProfiling,
             // At this time, the scheduling profiler can only parse Chrome performance profiles.
             supportsSchedulingProfiler: isChrome,

From 26bc8ff9bfcdb67e255fea424b56909899ac208b Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 27 Oct 2021 16:34:44 -0400
Subject: [PATCH 065/109] Revert logic for checking for duplicate installations
 of DevTools (#22638)

* Revert "Only show DevTools warning about unrecognized build in Chrome (#22571)"

This reverts commit b72dc8e9300f5ae997f7f5cfcd79b604cca3df0c.

* Revert "Show warning in UI when duplicate installations of DevTools extension are detected (#22563)"

This reverts commit 930c9e7eeb4c9721e1b8dee074c2eef4d1eae5dc.

* Revert "Prevent errors/crashing when multiple installs of DevTools are present (#22517)"

This reverts commit 545d4c2de7934a43b0c5d3ce050d77b4c3113bd3.

* Remove all references to passing extensionId in postMessage

* Keep build changes

* lint
---
 .../src/background.js                         |  22 +-
 .../src/checkForDuplicateInstallations.js     | 137 ----
 .../src/constants.js                          |  35 -
 .../src/contentScript.js                      |   5 -
 .../src/injectGlobalHook.js                   |  20 +-
 .../react-devtools-extensions/src/main.js     | 762 ++++++++----------
 .../src/devtools/views/DevTools.js            |   4 -
 .../views/DuplicateInstallationDialog.js      |  55 --
 8 files changed, 352 insertions(+), 688 deletions(-)
 delete mode 100644 packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
 delete mode 100644 packages/react-devtools-extensions/src/constants.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index e8ff0f3f16202..9e09513b78fb4 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -1,20 +1,11 @@
-// @flow strict-local
+/* global chrome */
 
 'use strict';
 
-declare var chrome: any;
-
-const ports: {
-  [tab: string]: {|devtools: any, 'content-script': any|},
-} = {};
+const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
-import {
-  EXTENSION_INSTALL_CHECK,
-  SHOW_DUPLICATE_EXTENSION_WARNING,
-} from './constants';
-
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
   let name = null;
@@ -125,15 +116,6 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
-chrome.runtime.onMessageExternal.addListener(
-  (request, sender, sendResponse) => {
-    if (request === EXTENSION_INSTALL_CHECK) {
-      sendResponse(true);
-      chrome.runtime.sendMessage(SHOW_DUPLICATE_EXTENSION_WARNING);
-    }
-  },
-);
-
 chrome.runtime.onMessage.addListener((request, sender) => {
   const tab = sender.tab;
   if (tab) {
diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
deleted file mode 100644
index 01db8edb34f74..0000000000000
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- */
-
-declare var chrome: any;
-
-import {
-  INTERNAL_EXTENSION_ID,
-  LOCAL_EXTENSION_ID,
-  __DEBUG__,
-} from 'react-devtools-shared/src/constants';
-import {getBrowserName} from './utils';
-import {
-  EXTENSION_INSTALL_CHECK,
-  EXTENSION_INSTALLATION_TYPE,
-} from './constants';
-
-const IS_CHROME = getBrowserName() === 'Chrome';
-
-const UNRECOGNIZED_EXTENSION_ERROR =
-  'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
-  'Please make sure you only have a single version of the extension installed or enabled. ' +
-  'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
-
-export function checkForDuplicateInstallations(callback: boolean => void) {
-  switch (EXTENSION_INSTALLATION_TYPE) {
-    case 'public': {
-      // If this is the public extension (e.g. from Chrome Web Store), check if an internal
-      // or local build of the extension is also installed, and if so, disable this extension.
-      // TODO show warning if other installations are present.
-      checkForInstalledExtensions([
-        INTERNAL_EXTENSION_ID,
-        LOCAL_EXTENSION_ID,
-      ]).then(areExtensionsInstalled => {
-        if (areExtensionsInstalled.some(isInstalled => isInstalled)) {
-          callback(true);
-        } else {
-          callback(false);
-        }
-      });
-      break;
-    }
-    case 'internal': {
-      // If this is the internal extension, check if a local build of the extension
-      // is also installed, and if so, disable this extension.
-      // If the public version of the extension is also installed, that extension
-      // will disable itself.
-      // TODO show warning if other installations are present.
-      checkForInstalledExtension(LOCAL_EXTENSION_ID).then(isInstalled => {
-        if (isInstalled) {
-          callback(true);
-        } else {
-          callback(false);
-        }
-      });
-      break;
-    }
-    case 'local': {
-      if (__DEV__) {
-        // If this is the local extension (i.e. built locally during development),
-        // always keep this one enabled. Other installations disable themselves if
-        // they detect the local build is installed.
-        callback(false);
-        break;
-      }
-
-      // If this extension wasn't built locally during development, we can't reliably
-      // detect if there are other installations of DevTools present.
-      // In this case, assume there are no duplicate exensions and show a warning about
-      // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_ERROR);
-      chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
-      );
-      callback(false);
-      break;
-    }
-    case 'unknown': {
-      // TODO: Support duplicate extension detection in other browsers
-      if (IS_CHROME) {
-        // If we don't know how this extension was built, we can't reliably detect if there
-        // are other installations of DevTools present.
-        // In this case, assume there are no duplicate exensions and show a warning about
-        // potential conflicts.
-        console.error(UNRECOGNIZED_EXTENSION_ERROR);
-        chrome.devtools.inspectedWindow.eval(
-          `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
-        );
-      }
-      callback(false);
-      break;
-    }
-    default: {
-      (EXTENSION_INSTALLATION_TYPE: empty);
-    }
-  }
-}
-
-function checkForInstalledExtensions(
-  extensionIds: string[],
-): Promise<boolean[]> {
-  return Promise.all(
-    extensionIds.map(extensionId => checkForInstalledExtension(extensionId)),
-  );
-}
-
-function checkForInstalledExtension(extensionId: string): Promise<boolean> {
-  return new Promise(resolve => {
-    chrome.runtime.sendMessage(
-      extensionId,
-      EXTENSION_INSTALL_CHECK,
-      response => {
-        if (__DEBUG__) {
-          console.log(
-            'checkForDuplicateInstallations: Duplicate installation check responded with',
-            {
-              response,
-              error: chrome.runtime.lastError?.message,
-              currentExtension: EXTENSION_INSTALLATION_TYPE,
-              checkingExtension: extensionId,
-            },
-          );
-        }
-        if (chrome.runtime.lastError != null) {
-          resolve(false);
-        } else {
-          resolve(true);
-        }
-      },
-    );
-  });
-}
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
deleted file mode 100644
index c17ad4d64acd8..0000000000000
--- a/packages/react-devtools-extensions/src/constants.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- */
-
-import {
-  CHROME_WEBSTORE_EXTENSION_ID,
-  INTERNAL_EXTENSION_ID,
-  LOCAL_EXTENSION_ID,
-} from 'react-devtools-shared/src/constants';
-
-declare var chrome: any;
-
-export const CURRENT_EXTENSION_ID = chrome.runtime.id;
-
-export const EXTENSION_INSTALL_CHECK = 'extension-install-check';
-export const SHOW_DUPLICATE_EXTENSION_WARNING =
-  'show-duplicate-extension-warning';
-
-export const EXTENSION_INSTALLATION_TYPE:
-  | 'public'
-  | 'internal'
-  | 'local'
-  | 'unknown' =
-  CURRENT_EXTENSION_ID === CHROME_WEBSTORE_EXTENSION_ID
-    ? 'public'
-    : CURRENT_EXTENSION_ID === INTERNAL_EXTENSION_ID
-    ? 'internal'
-    : CURRENT_EXTENSION_ID === LOCAL_EXTENSION_ID
-    ? 'local'
-    : 'unknown';
diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js
index 179959f7e01ec..c914c6e7b3dfc 100644
--- a/packages/react-devtools-extensions/src/contentScript.js
+++ b/packages/react-devtools-extensions/src/contentScript.js
@@ -2,8 +2,6 @@
 
 'use strict';
 
-import {CURRENT_EXTENSION_ID} from './constants';
-
 let backendDisconnected: boolean = false;
 let backendInitialized: boolean = false;
 
@@ -12,7 +10,6 @@ function sayHelloToBackend() {
     {
       source: 'react-devtools-content-script',
       hello: true,
-      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -23,7 +20,6 @@ function handleMessageFromDevtools(message) {
     {
       source: 'react-devtools-content-script',
       payload: message,
-      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -53,7 +49,6 @@ function handleDisconnect() {
         type: 'event',
         event: 'shutdown',
       },
-      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index a5d96966c7e10..79e5a84adba88 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -2,11 +2,7 @@
 
 import nullthrows from 'nullthrows';
 import {installHook} from 'react-devtools-shared/src/hook';
-import {
-  __DEBUG__,
-  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
-} from 'react-devtools-shared/src/constants';
-import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 
 function injectCode(code) {
@@ -31,19 +27,6 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-  if (data.extensionId != null && data.extensionId !== CURRENT_EXTENSION_ID) {
-    if (__DEBUG__) {
-      console.log(
-        `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
-        {
-          currentExtension: EXTENSION_INSTALLATION_TYPE,
-          currentExtensionId: CURRENT_EXTENSION_ID,
-          providedExtensionId: data.extensionId,
-        },
-      );
-    }
-    return;
-  }
   switch (data.source) {
     case 'react-devtools-detector':
       lastDetectionResult = {
@@ -118,7 +101,6 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType})
   window.postMessage({
     source: 'react-devtools-detector',
     reactBuildType,
-    extensionId: "${CURRENT_EXTENSION_ID}",
   }, '*');
 });
 `;
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index f8750292a1a73..6a3836839a4ea 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -22,18 +22,11 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
-import {
-  CURRENT_EXTENSION_ID,
-  EXTENSION_INSTALLATION_TYPE,
-  SHOW_DUPLICATE_EXTENSION_WARNING,
-} from './constants';
-import {checkForDuplicateInstallations} from './checkForDuplicateInstallations';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 const isChrome = getBrowserName() === 'Chrome';
-const isEdge = getBrowserName() === 'Edge';
 
 let panelCreated = false;
 
@@ -77,186 +70,135 @@ function createPanelIfReactLoaded() {
         return;
       }
 
-      checkForDuplicateInstallations(hasDuplicateInstallation => {
-        if (hasDuplicateInstallation) {
-          if (__DEBUG__) {
-            console.log(
-              '[main] createPanelIfReactLoaded: Duplicate installation detected, skipping initialization of extension.',
-              {currentExtension: EXTENSION_INSTALLATION_TYPE},
-            );
-          }
-          panelCreated = true;
-          clearInterval(loadCheckInterval);
-          return;
-        }
+      panelCreated = true;
 
-        if (__DEBUG__) {
-          console.log(
-            '[main] createPanelIfReactLoaded: No duplicate installations detected, continuing with initialization.',
-            {currentExtension: EXTENSION_INSTALLATION_TYPE},
-          );
-        }
-
-        panelCreated = true;
+      clearInterval(loadCheckInterval);
 
-        clearInterval(loadCheckInterval);
+      let bridge = null;
+      let store = null;
 
-        let bridge = null;
-        let store = null;
+      let profilingData = null;
 
-        let profilingData = null;
+      let componentsPortalContainer = null;
+      let profilerPortalContainer = null;
 
-        let componentsPortalContainer = null;
-        let profilerPortalContainer = null;
+      let cloneStyleTags = null;
+      let mostRecentOverrideTab = null;
+      let render = null;
+      let root = null;
 
-        let cloneStyleTags = null;
-        let mostRecentOverrideTab = null;
-        let render = null;
-        let root = null;
-        let warnIfDuplicateInstallation = false;
+      const tabId = chrome.devtools.inspectedWindow.tabId;
 
-        const tabId = chrome.devtools.inspectedWindow.tabId;
+      registerDevToolsEventLogger('extension');
 
-        registerDevToolsEventLogger('extension');
-
-        function onDuplicateExtensionMessage(message) {
-          if (message === SHOW_DUPLICATE_EXTENSION_WARNING) {
-            chrome.runtime.onMessage.removeListener(
-              onDuplicateExtensionMessage,
-            );
+      function initBridgeAndStore() {
+        const port = chrome.runtime.connect({
+          name: String(tabId),
+        });
+        // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
+        // so it makes no sense to handle it here.
+
+        bridge = new Bridge({
+          listen(fn) {
+            const listener = message => fn(message);
+            // Store the reference so that we unsubscribe from the same object.
+            const portOnMessage = port.onMessage;
+            portOnMessage.addListener(listener);
+            return () => {
+              portOnMessage.removeListener(listener);
+            };
+          },
+          send(event: string, payload: any, transferable?: Array<any>) {
+            port.postMessage({event, payload}, transferable);
+          },
+        });
+        bridge.addListener('reloadAppForProfiling', () => {
+          localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+          chrome.devtools.inspectedWindow.eval('window.location.reload();');
+        });
+        bridge.addListener('syncSelectionToNativeElementsPanel', () => {
+          setBrowserSelectionFromReact();
+        });
 
-            if (warnIfDuplicateInstallation === true) {
-              return;
-            }
-            warnIfDuplicateInstallation = true;
-            const errorMessage =
-              'React Developer Tools: We detected that there are multiple versions of React Developer Tools ' +
-              'installed and enabled in your browser at the same time, which will cause ' +
-              'issues while using the extension. ' +
-              'Please ensure that you have installed and enabled only a single ' +
-              'version of React Developer Tools before proceeding.';
-            console.error(errorMessage);
-            chrome.devtools.inspectedWindow.eval(
-              `console.error("${errorMessage}")`,
-            );
-            if (render != null) {
-              render();
-            }
-          }
+        // This flag lets us tip the Store off early that we expect to be profiling.
+        // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
+        // after a user has clicked the "reload and profile" button.
+        let isProfiling = false;
+        let supportsProfiling = false;
+        if (
+          localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
+        ) {
+          supportsProfiling = true;
+          isProfiling = true;
+          localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
         }
-        chrome.runtime.onMessage.addListener(onDuplicateExtensionMessage);
-
-        function initBridgeAndStore() {
-          const port = chrome.runtime.connect({
-            name: String(tabId),
-          });
-          // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
-          // so it makes no sense to handle it here.
-
-          bridge = new Bridge({
-            listen(fn) {
-              const listener = message => fn(message);
-              // Store the reference so that we unsubscribe from the same object.
-              const portOnMessage = port.onMessage;
-              portOnMessage.addListener(listener);
-              return () => {
-                portOnMessage.removeListener(listener);
-              };
-            },
-            send(event: string, payload: any, transferable?: Array<any>) {
-              port.postMessage({event, payload}, transferable);
-            },
-          });
-          bridge.addListener('reloadAppForProfiling', () => {
-            localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
-            chrome.devtools.inspectedWindow.eval('window.location.reload();');
-          });
-          bridge.addListener('syncSelectionToNativeElementsPanel', () => {
-            setBrowserSelectionFromReact();
-          });
 
-          // This flag lets us tip the Store off early that we expect to be profiling.
-          // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
-          // after a user has clicked the "reload and profile" button.
-          let isProfiling = false;
-          let supportsProfiling = false;
-          if (
-            localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
-          ) {
-            supportsProfiling = true;
-            isProfiling = true;
-            localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
-          }
+        if (store !== null) {
+          profilingData = store.profilerStore.profilingData;
+        }
 
-          if (store !== null) {
-            profilingData = store.profilerStore.profilingData;
-          }
+        bridge.addListener('extensionBackendInitialized', () => {
+          // Initialize the renderer's trace-updates setting.
+          // This handles the case of navigating to a new page after the DevTools have already been shown.
+          bridge.send(
+            'setTraceUpdatesEnabled',
+            localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
+              'true',
+          );
+        });
 
-          bridge.addListener('extensionBackendInitialized', () => {
-            // Initialize the renderer's trace-updates setting.
-            // This handles the case of navigating to a new page after the DevTools have already been shown.
-            bridge.send(
-              'setTraceUpdatesEnabled',
-              localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
-                'true',
-            );
-          });
+        store = new Store(bridge, {
+          isProfiling,
+          supportsReloadAndProfile: isChrome,
+          supportsProfiling,
+          // At this time, the scheduling profiler can only parse Chrome performance profiles.
+          supportsSchedulingProfiler: isChrome,
+          supportsTraceUpdates: true,
+        });
+        store.profilerStore.profilingData = profilingData;
+
+        // Initialize the backend only once the Store has been initialized.
+        // Otherwise the Store may miss important initial tree op codes.
+        chrome.devtools.inspectedWindow.eval(
+          `window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
+          function(response, evalError) {
+            if (evalError) {
+              console.error(evalError);
+            }
+          },
+        );
 
-          store = new Store(bridge, {
-            isProfiling,
-            supportsReloadAndProfile: isChrome || isEdge,
-            supportsProfiling,
-            // At this time, the scheduling profiler can only parse Chrome performance profiles.
-            supportsSchedulingProfiler: isChrome,
-            supportsTraceUpdates: true,
-          });
-          store.profilerStore.profilingData = profilingData;
-
-          // Initialize the backend only once the Store has been initialized.
-          // Otherwise the Store may miss important initial tree op codes.
-          chrome.devtools.inspectedWindow.eval(
-            `window.postMessage({
-               source: 'react-devtools-inject-backend',
-               extensionId: "${CURRENT_EXTENSION_ID}",
-             }, '*');`,
-            function(response, evalError) {
-              if (evalError) {
-                console.error(evalError);
-              }
-            },
-          );
+        const viewAttributeSourceFunction = (id, path) => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to find the specified attribute,
+            // and store it as a global variable on the window.
+            bridge.send('viewAttributeSource', {id, path, rendererID});
 
-          const viewAttributeSourceFunction = (id, path) => {
-            const rendererID = store.getRendererIDForElement(id);
-            if (rendererID != null) {
-              // Ask the renderer interface to find the specified attribute,
-              // and store it as a global variable on the window.
-              bridge.send('viewAttributeSource', {id, path, rendererID});
-
-              setTimeout(() => {
-                // Ask Chrome to display the location of the attribute,
-                // assuming the renderer found a match.
-                chrome.devtools.inspectedWindow.eval(`
+            setTimeout(() => {
+              // Ask Chrome to display the location of the attribute,
+              // assuming the renderer found a match.
+              chrome.devtools.inspectedWindow.eval(`
                 if (window.$attribute != null) {
                   inspect(window.$attribute);
                 }
               `);
-              }, 100);
-            }
-          };
+            }, 100);
+          }
+        };
 
-          const viewElementSourceFunction = id => {
-            const rendererID = store.getRendererIDForElement(id);
-            if (rendererID != null) {
-              // Ask the renderer interface to determine the component function,
-              // and store it as a global variable on the window
-              bridge.send('viewElementSource', {id, rendererID});
-
-              setTimeout(() => {
-                // Ask Chrome to display the location of the component function,
-                // or a render method if it is a Class (ideally Class instance, not type)
-                // assuming the renderer found one.
-                chrome.devtools.inspectedWindow.eval(`
+        const viewElementSourceFunction = id => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to determine the component function,
+            // and store it as a global variable on the window
+            bridge.send('viewElementSource', {id, rendererID});
+
+            setTimeout(() => {
+              // Ask Chrome to display the location of the component function,
+              // or a render method if it is a Class (ideally Class instance, not type)
+              // assuming the renderer found one.
+              chrome.devtools.inspectedWindow.eval(`
                 if (window.$type != null) {
                   if (
                     window.$type &&
@@ -271,294 +213,288 @@ function createPanelIfReactLoaded() {
                   }
                 }
               `);
-              }, 100);
-            }
-          };
+            }, 100);
+          }
+        };
 
-          let debugIDCounter = 0;
+        let debugIDCounter = 0;
 
-          // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
-          // never reaches the chrome.runtime.onMessage event listener.
-          let fetchFileWithCaching = null;
-          if (isChrome) {
-            const fetchFromNetworkCache = (url, resolve, reject) => {
-              // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
-              // while also still associating (potentially) interleaved logs with the original request.
-              let debugID = null;
+        // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
+        // never reaches the chrome.runtime.onMessage event listener.
+        let fetchFileWithCaching = null;
+        if (isChrome) {
+          const fetchFromNetworkCache = (url, resolve, reject) => {
+            // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
+            // while also still associating (potentially) interleaved logs with the original request.
+            let debugID = null;
 
-              if (__DEBUG__) {
-                debugID = debugIDCounter++;
-                console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
-              }
+            if (__DEBUG__) {
+              debugID = debugIDCounter++;
+              console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
+            }
 
-              chrome.devtools.network.getHAR(harLog => {
-                for (let i = 0; i < harLog.entries.length; i++) {
-                  const entry = harLog.entries[i];
-                  if (url === entry.request.url) {
-                    if (__DEBUG__) {
-                      console.log(
-                        `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
-                        url,
-                      );
-                    }
+            chrome.devtools.network.getHAR(harLog => {
+              for (let i = 0; i < harLog.entries.length; i++) {
+                const entry = harLog.entries[i];
+                if (url === entry.request.url) {
+                  if (__DEBUG__) {
+                    console.log(
+                      `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
+                      url,
+                    );
+                  }
 
-                    entry.getContent(content => {
-                      if (content) {
-                        if (__DEBUG__) {
-                          console.log(
-                            `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
-                          );
-                        }
-
-                        resolve(content);
-                      } else {
-                        if (__DEBUG__) {
-                          console.log(
-                            `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
-                            content,
-                          );
-                        }
-
-                        // Edge case where getContent() returned null; fall back to fetch.
-                        fetchFromPage(url, resolve, reject);
+                  entry.getContent(content => {
+                    if (content) {
+                      if (__DEBUG__) {
+                        console.log(
+                          `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+                        );
                       }
-                    });
 
-                    return;
-                  }
-                }
+                      resolve(content);
+                    } else {
+                      if (__DEBUG__) {
+                        console.log(
+                          `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
+                          content,
+                        );
+                      }
 
-                if (__DEBUG__) {
-                  console.log(
-                    `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
-                  );
-                }
+                      // Edge case where getContent() returned null; fall back to fetch.
+                      fetchFromPage(url, resolve, reject);
+                    }
+                  });
 
-                // No matching URL found; fall back to fetch.
-                fetchFromPage(url, resolve, reject);
-              });
-            };
+                  return;
+                }
+              }
 
-            const fetchFromPage = (url, resolve, reject) => {
               if (__DEBUG__) {
-                console.log('[main] fetchFromPage()', url);
+                console.log(
+                  `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
+                );
               }
 
-              function onPortMessage({payload, source}) {
-                if (source === 'react-devtools-content-script') {
-                  switch (payload?.type) {
-                    case 'fetch-file-with-cache-complete':
-                      chrome.runtime.onMessage.removeListener(onPortMessage);
-                      resolve(payload.value);
-                      break;
-                    case 'fetch-file-with-cache-error':
-                      chrome.runtime.onMessage.removeListener(onPortMessage);
-                      reject(payload.value);
-                      break;
-                  }
+              // No matching URL found; fall back to fetch.
+              fetchFromPage(url, resolve, reject);
+            });
+          };
+
+          const fetchFromPage = (url, resolve, reject) => {
+            if (__DEBUG__) {
+              console.log('[main] fetchFromPage()', url);
+            }
+
+            function onPortMessage({payload, source}) {
+              if (source === 'react-devtools-content-script') {
+                switch (payload?.type) {
+                  case 'fetch-file-with-cache-complete':
+                    chrome.runtime.onMessage.removeListener(onPortMessage);
+                    resolve(payload.value);
+                    break;
+                  case 'fetch-file-with-cache-error':
+                    chrome.runtime.onMessage.removeListener(onPortMessage);
+                    reject(payload.value);
+                    break;
                 }
               }
+            }
 
-              chrome.runtime.onMessage.addListener(onPortMessage);
+            chrome.runtime.onMessage.addListener(onPortMessage);
 
-              chrome.devtools.inspectedWindow.eval(`
-                window.postMessage({
-                  source: 'react-devtools-extension',
-                  extensionId: "${CURRENT_EXTENSION_ID}",
-                  payload: {
-                    type: 'fetch-file-with-cache',
-                    url: "${url}",
-                  },
-                }, '*');
-              `);
-            };
-
-            // Fetching files from the extension won't make use of the network cache
-            // for resources that have already been loaded by the page.
-            // This helper function allows the extension to request files to be fetched
-            // by the content script (running in the page) to increase the likelihood of a cache hit.
-            fetchFileWithCaching = url => {
-              return new Promise((resolve, reject) => {
-                // Try fetching from the Network cache first.
-                // If DevTools was opened after the page started loading, we may have missed some requests.
-                // So fall back to a fetch() from the page and hope we get a cached response that way.
-                fetchFromNetworkCache(url, resolve, reject);
+            chrome.devtools.inspectedWindow.eval(`
+              window.postMessage({
+                source: 'react-devtools-extension',
+                payload: {
+                  type: 'fetch-file-with-cache',
+                  url: "${url}",
+                },
               });
-            };
-          }
-
-          // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
-          const hookNamesModuleLoaderFunction = () =>
-            import(
-              /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
-            );
-
-          root = createRoot(document.createElement('div'));
-
-          render = (overrideTab = mostRecentOverrideTab) => {
-            mostRecentOverrideTab = overrideTab;
-            root.render(
-              createElement(DevTools, {
-                bridge,
-                browserTheme: getBrowserTheme(),
-                componentsPortalContainer,
-                enabledInspectedElementContextMenu: true,
-                fetchFileWithCaching,
-                hookNamesModuleLoaderFunction,
-                overrideTab,
-                profilerPortalContainer,
-                warnIfDuplicateInstallation,
-                showTabBar: false,
-                store,
-                warnIfUnsupportedVersionDetected: true,
-                viewAttributeSourceFunction,
-                viewElementSourceFunction,
-              }),
-            );
+            `);
           };
 
-          render();
+          // Fetching files from the extension won't make use of the network cache
+          // for resources that have already been loaded by the page.
+          // This helper function allows the extension to request files to be fetched
+          // by the content script (running in the page) to increase the likelihood of a cache hit.
+          fetchFileWithCaching = url => {
+            return new Promise((resolve, reject) => {
+              // Try fetching from the Network cache first.
+              // If DevTools was opened after the page started loading, we may have missed some requests.
+              // So fall back to a fetch() from the page and hope we get a cached response that way.
+              fetchFromNetworkCache(url, resolve, reject);
+            });
+          };
         }
 
-        cloneStyleTags = () => {
-          const linkTags = [];
-          // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-          for (const linkTag of document.getElementsByTagName('link')) {
-            if (linkTag.rel === 'stylesheet') {
-              const newLinkTag = document.createElement('link');
-              // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-              for (const attribute of linkTag.attributes) {
-                newLinkTag.setAttribute(
-                  attribute.nodeName,
-                  attribute.nodeValue,
-                );
-              }
-              linkTags.push(newLinkTag);
-            }
-          }
-          return linkTags;
+        // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+        const hookNamesModuleLoaderFunction = () =>
+          import(
+            /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+          );
+
+        root = createRoot(document.createElement('div'));
+
+        render = (overrideTab = mostRecentOverrideTab) => {
+          mostRecentOverrideTab = overrideTab;
+          root.render(
+            createElement(DevTools, {
+              bridge,
+              browserTheme: getBrowserTheme(),
+              componentsPortalContainer,
+              enabledInspectedElementContextMenu: true,
+              fetchFileWithCaching,
+              hookNamesModuleLoaderFunction,
+              overrideTab,
+              profilerPortalContainer,
+              showTabBar: false,
+              store,
+              warnIfUnsupportedVersionDetected: true,
+              viewAttributeSourceFunction,
+              viewElementSourceFunction,
+            }),
+          );
         };
 
-        initBridgeAndStore();
+        render();
+      }
 
-        function ensureInitialHTMLIsCleared(container) {
-          if (container._hasInitialHTMLBeenCleared) {
-            return;
+      cloneStyleTags = () => {
+        const linkTags = [];
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const linkTag of document.getElementsByTagName('link')) {
+          if (linkTag.rel === 'stylesheet') {
+            const newLinkTag = document.createElement('link');
+            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+            for (const attribute of linkTag.attributes) {
+              newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
+            }
+            linkTags.push(newLinkTag);
           }
-          container.innerHTML = '';
-          container._hasInitialHTMLBeenCleared = true;
         }
+        return linkTags;
+      };
 
-        function setBrowserSelectionFromReact() {
-          // This is currently only called on demand when you press "view DOM".
-          // In the future, if Chrome adds an inspect() that doesn't switch tabs,
-          // we could make this happen automatically when you select another component.
-          chrome.devtools.inspectedWindow.eval(
-            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-              '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
-              'false',
-            (didSelectionChange, evalError) => {
-              if (evalError) {
-                console.error(evalError);
-              }
-            },
-          );
-        }
+      initBridgeAndStore();
 
-        function setReactSelectionFromBrowser() {
-          // When the user chooses a different node in the browser Elements tab,
-          // copy it over to the hook object so that we can sync the selection.
-          chrome.devtools.inspectedWindow.eval(
-            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-              '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
-              'false',
-            (didSelectionChange, evalError) => {
-              if (evalError) {
-                console.error(evalError);
-              } else if (didSelectionChange) {
-                // Remember to sync the selection next time we show Components tab.
-                needsToSyncElementSelection = true;
-              }
-            },
-          );
+      function ensureInitialHTMLIsCleared(container) {
+        if (container._hasInitialHTMLBeenCleared) {
+          return;
         }
+        container.innerHTML = '';
+        container._hasInitialHTMLBeenCleared = true;
+      }
 
-        setReactSelectionFromBrowser();
-        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
-          setReactSelectionFromBrowser();
-        });
+      function setBrowserSelectionFromReact() {
+        // This is currently only called on demand when you press "view DOM".
+        // In the future, if Chrome adds an inspect() that doesn't switch tabs,
+        // we could make this happen automatically when you select another component.
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+            'false',
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
+            }
+          },
+        );
+      }
 
-        let currentPanel = null;
-        let needsToSyncElementSelection = false;
-
-        chrome.devtools.panels.create(
-          isChrome ? '⚛️ Components' : 'Components',
-          '',
-          'panel.html',
-          extensionPanel => {
-            extensionPanel.onShown.addListener(panel => {
-              if (needsToSyncElementSelection) {
-                needsToSyncElementSelection = false;
-                bridge.send('syncSelectionFromNativeElementsPanel');
-              }
+      function setReactSelectionFromBrowser() {
+        // When the user chooses a different node in the browser Elements tab,
+        // copy it over to the hook object so that we can sync the selection.
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+            'false',
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
+            } else if (didSelectionChange) {
+              // Remember to sync the selection next time we show Components tab.
+              needsToSyncElementSelection = true;
+            }
+          },
+        );
+      }
 
-              if (currentPanel === panel) {
-                return;
-              }
+      setReactSelectionFromBrowser();
+      chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+        setReactSelectionFromBrowser();
+      });
 
-              currentPanel = panel;
-              componentsPortalContainer = panel.container;
+      let currentPanel = null;
+      let needsToSyncElementSelection = false;
+
+      chrome.devtools.panels.create(
+        isChrome ? '⚛️ Components' : 'Components',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (needsToSyncElementSelection) {
+              needsToSyncElementSelection = false;
+              bridge.send('syncSelectionFromNativeElementsPanel');
+            }
 
-              if (componentsPortalContainer != null) {
-                ensureInitialHTMLIsCleared(componentsPortalContainer);
-                render('components');
-                panel.injectStyles(cloneStyleTags);
-                logEvent({event_name: 'selected-components-tab'});
-              }
-            });
-            extensionPanel.onHidden.addListener(panel => {
-              // TODO: Stop highlighting and stuff.
-            });
-          },
-        );
+            if (currentPanel === panel) {
+              return;
+            }
 
-        chrome.devtools.panels.create(
-          isChrome ? '⚛️ Profiler' : 'Profiler',
-          '',
-          'panel.html',
-          extensionPanel => {
-            extensionPanel.onShown.addListener(panel => {
-              if (currentPanel === panel) {
-                return;
-              }
+            currentPanel = panel;
+            componentsPortalContainer = panel.container;
 
-              currentPanel = panel;
-              profilerPortalContainer = panel.container;
+            if (componentsPortalContainer != null) {
+              ensureInitialHTMLIsCleared(componentsPortalContainer);
+              render('components');
+              panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-components-tab'});
+            }
+          });
+          extensionPanel.onHidden.addListener(panel => {
+            // TODO: Stop highlighting and stuff.
+          });
+        },
+      );
+
+      chrome.devtools.panels.create(
+        isChrome ? '⚛️ Profiler' : 'Profiler',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (currentPanel === panel) {
+              return;
+            }
 
-              if (profilerPortalContainer != null) {
-                ensureInitialHTMLIsCleared(profilerPortalContainer);
-                render('profiler');
-                panel.injectStyles(cloneStyleTags);
-                logEvent({event_name: 'selected-profiler-tab'});
-              }
-            });
-          },
-        );
+            currentPanel = panel;
+            profilerPortalContainer = panel.container;
+
+            if (profilerPortalContainer != null) {
+              ensureInitialHTMLIsCleared(profilerPortalContainer);
+              render('profiler');
+              panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-profiler-tab'});
+            }
+          });
+        },
+      );
 
-        chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
+      chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
-        // Re-initialize DevTools panel when a new page is loaded.
-        chrome.devtools.network.onNavigated.addListener(function onNavigated() {
-          // Re-initialize saved filters on navigation,
-          // since global values stored on window get reset in this case.
-          syncSavedPreferences();
+      // Re-initialize DevTools panel when a new page is loaded.
+      chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+        // Re-initialize saved filters on navigation,
+        // since global values stored on window get reset in this case.
+        syncSavedPreferences();
 
-          // It's easiest to recreate the DevTools panel (to clean up potential stale state).
-          // We can revisit this in the future as a small optimization.
-          flushSync(() => root.unmount());
+        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+        // We can revisit this in the future as a small optimization.
+        flushSync(() => root.unmount());
 
-          initBridgeAndStore();
-        });
+        initBridgeAndStore();
       });
     },
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 8f1b6a22c11bc..781ad9d902f68 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -34,7 +34,6 @@ import {SchedulingProfilerContextController} from 'react-devtools-scheduling-pro
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
-import DuplicateInstallationDialog from './DuplicateInstallationDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
@@ -74,7 +73,6 @@ export type Props = {|
   enabledInspectedElementContextMenu?: boolean,
   showTabBar?: boolean,
   store: Store,
-  warnIfDuplicateInstallation?: boolean,
   warnIfLegacyBackendDetected?: boolean,
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
@@ -134,7 +132,6 @@ export default function DevTools({
   profilerPortalContainer,
   showTabBar = false,
   store,
-  warnIfDuplicateInstallation = false,
   warnIfLegacyBackendDetected = false,
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
@@ -322,7 +319,6 @@ export default function DevTools({
                 </ViewElementSourceContext.Provider>
               </SettingsContextController>
               <UnsupportedBridgeProtocolDialog />
-              {warnIfDuplicateInstallation && <DuplicateInstallationDialog />}
               {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
               {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
             </ModalDialogContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js b/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
deleted file mode 100644
index 12a32ce4b7f43..0000000000000
--- a/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- */
-
-import * as React from 'react';
-import {Fragment, useContext, useEffect} from 'react';
-import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
-import {ModalDialogContext} from './ModalDialog';
-
-export default function DuplicateInstallationDialog(_: {||}) {
-  const {dispatch} = useContext(ModalDialogContext);
-
-  useEffect(() => {
-    dispatch({
-      canBeDismissed: false,
-      id: 'DuplicateInstallationDialog',
-      type: 'SHOW',
-      title: 'Duplicate Installations of DevTools Detected',
-      content: <DialogContent />,
-    });
-  }, []);
-  return null;
-}
-
-function DialogContent(_: {||}) {
-  return (
-    <Fragment>
-      <p>
-        We detected that there are multiple versions of React Developer Tools
-        installed and enabled in your browser at the same time, which will cause
-        issues while using the extension.
-      </p>
-      {isInternalFacebookBuild ? (
-        <p>
-          Before proceeding, please ensure that the only enabled version of
-          React Developer Tools is the internal (Chef-installed) version. To
-          manage your extensions, visit the <code>about://extensions</code> page
-          in your browser.
-        </p>
-      ) : (
-        <p>
-          Please ensure that you have installed and enabled only a single
-          version of React Developer Tools before proceeding. To manage your
-          extensions, visit the <code>about://extensions</code> page in your
-          browser.
-        </p>
-      )}
-    </Fragment>
-  );
-}

From c624dc3598c6dc95f9a827667bc4f8ecff41f0bd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Oct 2021 17:18:48 -0400
Subject: [PATCH 066/109] DevTools supports ENV-injected version for better
 internal bug reports (#22635)

---
 packages/react-devtools-extensions/utils.js        | 14 ++++++++------
 .../react-devtools-extensions/webpack.backend.js   |  2 +-
 .../react-devtools-extensions/webpack.config.js    |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
index a096b39b2283c..0cbf23fc68f2a 100644
--- a/packages/react-devtools-extensions/utils.js
+++ b/packages/react-devtools-extensions/utils.js
@@ -30,12 +30,14 @@ function getGitCommit() {
   }
 }
 
-function getVersionString() {
-  const packageVersion = JSON.parse(
-    readFileSync(
-      resolve(__dirname, '..', 'react-devtools-core', './package.json'),
-    ),
-  ).version;
+function getVersionString(packageVersion = null) {
+  if (packageVersion == null) {
+    packageVersion = JSON.parse(
+      readFileSync(
+        resolve(__dirname, '..', 'react-devtools-core', './package.json'),
+      ),
+    ).version;
+  }
 
   const commit = getGitCommit();
 
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index e8c3bded6310e..80198868f1876 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -30,7 +30,7 @@ const builtModulesDir = resolve(
 
 const __DEV__ = NODE_ENV === 'development';
 
-const DEVTOOLS_VERSION = getVersionString();
+const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index f7ba2f2e76241..99b1d18d3a999 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -30,7 +30,7 @@ const builtModulesDir = resolve(
 
 const __DEV__ = NODE_ENV === 'development';
 
-const DEVTOOLS_VERSION = getVersionString();
+const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 
 const LOGGING_URL = process.env.LOGGING_URL || null;
 

From 9c8161ba81220143e7f87bd901697e46b14d8968 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 28 Oct 2021 11:04:27 -0400
Subject: [PATCH 067/109] Reapply changes from #22631 (#22645)

---
 packages/react-devtools-extensions/src/backend.js | 6 ++----
 packages/react-devtools-extensions/src/main.js    | 3 ++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
index 5b6821bbba038..a102bed3a90a3 100644
--- a/packages/react-devtools-extensions/src/backend.js
+++ b/packages/react-devtools-extensions/src/backend.js
@@ -13,16 +13,15 @@ function welcome(event) {
   ) {
     return;
   }
-  const extensionId = event.data.extensionId;
 
   window.removeEventListener('message', welcome);
 
-  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, extensionId);
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
 }
 
 window.addEventListener('message', welcome);
 
-function setup(hook, extensionId) {
+function setup(hook) {
   if (hook == null) {
     // DevTools didn't get injected into this page (maybe b'c of the contentType).
     return;
@@ -56,7 +55,6 @@ function setup(hook, extensionId) {
         {
           source: 'react-devtools-bridge',
           payload: {event, payload},
-          extensionId,
         },
         '*',
         transferable,
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 6a3836839a4ea..70aaf92a7d528 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -27,6 +27,7 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 const isChrome = getBrowserName() === 'Chrome';
+const isEdge = getBrowserName() === 'Edge';
 
 let panelCreated = false;
 
@@ -149,7 +150,7 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge, {
           isProfiling,
-          supportsReloadAndProfile: isChrome,
+          supportsReloadAndProfile: isChrome || isEdge,
           supportsProfiling,
           // At this time, the scheduling profiler can only parse Chrome performance profiles.
           supportsSchedulingProfiler: isChrome,

From 7034408ff762b52a39f3a3145a37f4526d0a95cf Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 31 Oct 2021 18:37:32 -0400
Subject: [PATCH 068/109] Follow-up improvements to error code extraction infra
 (#22516)

* Output FIXME during build for unminified errors

The invariant Babel transform used to output a FIXME comment if it
could not find a matching error code. This could happen if there were
a configuration mistake that caused an unminified message to
slip through.

Linting the compiled bundles is the most reliable way to do it because
there's not a one-to-one mapping between source modules and bundles. For
example, the same source module may appear in multiple bundles, some
which are minified and others which aren't.

This updates the transform to output the same messages for Error calls.

The source lint rule is still useful for catching mistakes during
development, to prompt you to update the error codes map before pushing
the PR to CI.

* Don't run error transform in development

We used to run the error transform in both production and development,
because in development it was used to convert `invariant` calls into
throw statements.

Now that don't use `invariant` anymore, we only have to run the
transform for production builds.

* Add ! to FIXME comment so Closure doesn't strip it

Don't love this solution because Closure could change this heuristic,
or we could switch to a differnt compiler that doesn't support it. But
it works.

Could add a bundle that contains an unminified error solely for the
purpose of testing it, but that seems like overkill.

* Alternate extract-errors that scrapes artifacts

The build script outputs a special FIXME comment when it fails to minify
an error message. CI will detect these comments and fail the workflow.

The comments also include the expected error message. So I added an
alternate extract-errors that scrapes unminified messages from the
build artifacts and updates `codes.json`.

This is nice because it works on partial builds. And you can also run it
after the fact, instead of needing build all over again.

* Disable error minification in more bundles

Not worth it because the number of errors does not outweight the size
of the formatProdErrorMessage runtime.

* Run extract-errors script in CI

The lint_build job already checks for unminified errors, but the output
isn't super helpful.

Instead I've added a new job that runs the extract-errors script and
fails the build if `codes.json` changes. It also outputs the expected
diff so you can easily see which messages were missing from the map.

* Replace old extract-errors script with new one

Deletes the old extract-errors in favor of extract-errors2
---
 .circleci/config.yml                          |  18 +-
 package.json                                  |   2 +-
 .../__tests__/ReactError-test.internal.js     |   1 +
 scripts/error-codes/README.md                 |   5 +-
 .../transform-error-messages.js.snap          |  79 ++-----
 .../__tests__/transform-error-messages.js     |  83 ++-----
 scripts/error-codes/extract-errors.js         | 143 +++++-------
 .../error-codes/transform-error-messages.js   | 217 ++++--------------
 scripts/jest/preprocessor.js                  |   6 -
 scripts/rollup/build.js                       |  50 +---
 scripts/rollup/bundles.js                     |  14 +-
 11 files changed, 179 insertions(+), 439 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7d1eb1e8b3381..8c847fc05f39e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -209,7 +209,20 @@ jobs:
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn lint-build
-      - run: scripts/circleci/check_minified_errors.sh
+
+  check_error_codes:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Search build artifacts for unminified errors
+          command: |
+            yarn extract-errors
+            git diff || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
 
   yarn_test:
     docker: *docker
@@ -414,6 +427,9 @@ workflows:
       - yarn_lint_build:
           requires:
             - yarn_build_combined
+      - check_error_codes:
+          requires:
+            - yarn_build_combined
       - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
           requires:
             - yarn_build_combined
diff --git a/package.json b/package.json
index e7471a686ce88..e4ea1c83be801 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",
-    "extract-errors": "yarn build --type=dev --extract-errors",
+    "extract-errors": "node scripts/error-codes/extract-errors.js",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
     "debug-test": "yarn test --deprecated 'yarn test --debug'",
     "test": "node ./scripts/jest/jest-cli.js",
diff --git a/packages/shared/__tests__/ReactError-test.internal.js b/packages/shared/__tests__/ReactError-test.internal.js
index c40e62c6f391e..5576c72bf683e 100644
--- a/packages/shared/__tests__/ReactError-test.internal.js
+++ b/packages/shared/__tests__/ReactError-test.internal.js
@@ -37,6 +37,7 @@ describe('ReactError', () => {
   });
 
   // @gate build === "production"
+  // @gate !source
   it('should error with minified error code', () => {
     expect(() => ReactDOM.render('Hi', null)).toThrowError(
       'Minified React error #200; visit ' +
diff --git a/scripts/error-codes/README.md b/scripts/error-codes/README.md
index 9933e9903d1ea..38918bd42a52e 100644
--- a/scripts/error-codes/README.md
+++ b/scripts/error-codes/README.md
@@ -9,7 +9,10 @@ provide a better debugging support in production. Check out the blog post
   the file will never be changed/removed.
 - [`extract-errors.js`](https://github.com/facebook/react/blob/main/scripts/error-codes/extract-errors.js)
   is an node script that traverses our codebase and updates `codes.json`. You
-  can test it by running `yarn extract-errors`.
+  can test it by running `yarn extract-errors`. It works by crawling the build
+  artifacts directory, so you need to have either run the build script or
+  downloaded pre-built artifacts (e.g. with `yarn download build`). It works
+  with partial builds, too.
 - [`transform-error-messages`](https://github.com/facebook/react/blob/main/scripts/error-codes/transform-error-messages.js)
   is a Babel pass that rewrites error messages to IDs for a production
   (minified) build.
diff --git a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
index bfb80ab375562..97870a4b31b8f 100644
--- a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -2,94 +2,47 @@
 
 exports[`error transform handles escaped backticks in template string 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? \\"Expected \`\\" + listener + \\"\` listener to be a function, instead got a value of \`\\" + type + \\"\` type.\\" : _formatProdErrorMessage(231, listener, type));"
+Error(_formatProdErrorMessage(231, listener, type));"
 `;
 
-exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
-"import invariant from 'shared/invariant';
-
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
-if (!condition) {
-  throw Error(\\"This is not a real error message.\\");
-}"
+exports[`error transform should not touch other calls or new expressions 1`] = `
+"new NotAnError();
+NotAnError();"
 `;
 
-exports[`error transform should handle escaped characters 1`] = `
-"import invariant from 'shared/invariant';
+exports[`error transform should output FIXME for errors that don't have a matching error code 1`] = `
+"/*! FIXME (minify-errors-in-prod): Unminified error message in production build!*/
 
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
-if (!condition) {
-  throw Error(\\"What's up?\\");
-}"
+/*! <expected-error-format>\\"This is not a real error message.\\"</expected-error-format>*/
+Error('This is not a real error message.');"
 `;
 
-exports[`error transform should not touch other calls or new expressions 1`] = `
-"new NotAnError();
-NotAnError();"
+exports[`error transform should output FIXME for errors that don't have a matching error code, unless opted out with a comment 1`] = `
+"// eslint-disable-next-line react-internal/prod-error-codes
+Error('This is not a real error message.');"
 `;
 
 exports[`error transform should replace error constructors (no new) 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+Error(_formatProdErrorMessage(16));"
 `;
 
 exports[`error transform should replace error constructors 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
-`;
-
-exports[`error transform should replace simple invariant calls 1`] = `
-"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-import invariant from 'shared/invariant';
-
-if (!condition) {
-  {
-    throw Error(__DEV__ ? \\"Do not override existing functions.\\" : _formatProdErrorMessage(16));
-  }
-}"
+Error(_formatProdErrorMessage(16));"
 `;
 
 exports[`error transform should support error constructors with concatenated messages 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? \\"Expected \\" + foo + \\" target to \\" + (\\"be an array; got \\" + bar) : _formatProdErrorMessage(7, foo, bar));"
+Error(_formatProdErrorMessage(7, foo, bar));"
 `;
 
 exports[`error transform should support interpolating arguments with concatenation 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? 'Expected ' + foo + ' target to be an array; got ' + bar : _formatProdErrorMessage(7, foo, bar));"
+Error(_formatProdErrorMessage(7, foo, bar));"
 `;
 
 exports[`error transform should support interpolating arguments with template strings 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));"
-`;
-
-exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
-"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-import invariant from 'shared/invariant';
-
-if (!condition) {
-  {
-    throw Error(__DEV__ ? \\"Expected a component class, got \\" + Foo + \\".\\" + Bar : _formatProdErrorMessage(18, Foo, Bar));
-  }
-}"
-`;
-
-exports[`error transform should support invariant calls with args 1`] = `
-"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-import invariant from 'shared/invariant';
-
-if (!condition) {
-  {
-    throw Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));
-  }
-}"
-`;
-
-exports[`error transform should support noMinify option 1`] = `
-"import invariant from 'shared/invariant';
-
-if (!condition) {
-  throw Error(\\"Do not override existing functions.\\");
-}"
+Error(_formatProdErrorMessage(7, foo, bar));"
 `;
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
index 2bca7366321e2..3cf08b69e848f 100644
--- a/scripts/error-codes/__tests__/transform-error-messages.js
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -28,87 +28,46 @@ describe('error transform', () => {
     process.env.NODE_ENV = oldEnv;
   });
 
-  it('should replace simple invariant calls', () => {
-    expect(
-      transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'Do not override existing functions.');
-`)
-    ).toMatchSnapshot();
-  });
-
-  it('should throw if invariant is not in an expression statement', () => {
-    expect(() => {
-      transform(`
-import invariant from 'shared/invariant';
-cond && invariant(condition, 'Do not override existing functions.');
-`);
-    }).toThrow('invariant() cannot be called from expression context');
-  });
-
-  it('should support invariant calls with args', () => {
-    expect(
-      transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'Expected %s target to be an array; got %s', foo, bar);
-`)
-    ).toMatchSnapshot();
-  });
-
-  it('should support invariant calls with a concatenated template string and args', () => {
-    expect(
-      transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'Expected a component class, ' + 'got %s.' + '%s', Foo, Bar);
-`)
-    ).toMatchSnapshot();
-  });
-
-  it('should correctly transform invariants that are not in the error codes map', () => {
+  it('should replace error constructors', () => {
     expect(
       transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'This is not a real error message.');
+new Error('Do not override existing functions.');
 `)
     ).toMatchSnapshot();
   });
 
-  it('should handle escaped characters', () => {
+  it('should replace error constructors (no new)', () => {
     expect(
       transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'What\\'s up?');
+Error('Do not override existing functions.');
 `)
     ).toMatchSnapshot();
   });
 
-  it('should support noMinify option', () => {
-    expect(
-      transform(
-        `
-import invariant from 'shared/invariant';
-invariant(condition, 'Do not override existing functions.');
-`,
-        {noMinify: true}
-      )
-    ).toMatchSnapshot();
-  });
-
-  it('should replace error constructors', () => {
+  it("should output FIXME for errors that don't have a matching error code", () => {
     expect(
       transform(`
-new Error('Do not override existing functions.');
+Error('This is not a real error message.');
 `)
     ).toMatchSnapshot();
   });
 
-  it('should replace error constructors (no new)', () => {
-    expect(
-      transform(`
-Error('Do not override existing functions.');
+  it(
+    "should output FIXME for errors that don't have a matching error " +
+      'code, unless opted out with a comment',
+    () => {
+      // TODO: Since this only detects one of many ways to disable a lint
+      // rule, we should instead search for a custom directive (like
+      // no-minify-errors) instead of ESLint. Will need to update our lint
+      // rule to recognize the same directive.
+      expect(
+        transform(`
+// eslint-disable-next-line react-internal/prod-error-codes
+Error('This is not a real error message.');
 `)
-    ).toMatchSnapshot();
-  });
+      ).toMatchSnapshot();
+    }
+  );
 
   it('should not touch other calls or new expressions', () => {
     expect(
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
index d60ffe308cdbe..addb095b4ca1f 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -1,105 +1,74 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 'use strict';
 
-const parser = require('@babel/parser');
 const fs = require('fs');
 const path = require('path');
-const traverse = require('@babel/traverse').default;
-const {evalStringConcat} = require('../shared/evalToString');
-const invertObject = require('./invertObject');
+const {execSync} = require('child_process');
 
-const babylonOptions = {
-  sourceType: 'module',
-  // As a parser, babylon has its own options and we can't directly
-  // import/require a babel preset. It should be kept **the same** as
-  // the `babel-plugin-syntax-*` ones specified in
-  // https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
-  plugins: [
-    'classProperties',
-    'flow',
-    'jsx',
-    'trailingFunctionCommas',
-    'objectRestSpread',
-  ],
-};
-
-module.exports = function(opts) {
-  if (!opts || !('errorMapFilePath' in opts)) {
-    throw new Error(
-      'Missing options. Ensure you pass an object with `errorMapFilePath`.'
-    );
+async function main() {
+  const originalJSON = JSON.parse(
+    fs.readFileSync(path.resolve(__dirname, '../error-codes/codes.json'))
+  );
+  const existingMessages = new Set();
+  const codes = Object.keys(originalJSON);
+  let nextCode = 0;
+  for (let i = 0; i < codes.length; i++) {
+    const codeStr = codes[i];
+    const message = originalJSON[codeStr];
+    const code = parseInt(codeStr, 10);
+    existingMessages.add(message);
+    if (code >= nextCode) {
+      nextCode = code + 1;
+    }
   }
 
-  const errorMapFilePath = opts.errorMapFilePath;
-  let existingErrorMap;
+  console.log('Searching `build` directory for unminified errors...\n');
+
+  let out;
   try {
-    // Using `fs.readFileSync` instead of `require` here, because `require()`
-    // calls are cached, and the cache map is not properly invalidated after
-    // file changes.
-    existingErrorMap = JSON.parse(
-      fs.readFileSync(
-        path.join(__dirname, path.basename(errorMapFilePath)),
-        'utf8'
-      )
-    );
+    out = execSync(
+      "git --no-pager grep -n --untracked --no-exclude-standard '/*! <expected-error-format>' -- build"
+    ).toString();
   } catch (e) {
-    existingErrorMap = {};
-  }
-
-  const allErrorIDs = Object.keys(existingErrorMap);
-  let currentID;
-
-  if (allErrorIDs.length === 0) {
-    // Map is empty
-    currentID = 0;
-  } else {
-    currentID = Math.max.apply(null, allErrorIDs) + 1;
+    if (e.status === 1 && e.stdout.toString() === '') {
+      // No unminified errors found.
+      return;
+    }
+    throw e;
   }
 
-  // Here we invert the map object in memory for faster error code lookup
-  existingErrorMap = invertObject(existingErrorMap);
-
-  function transform(source) {
-    const ast = parser.parse(source, babylonOptions);
-
-    traverse(ast, {
-      CallExpression: {
-        exit(astPath) {
-          if (astPath.get('callee').isIdentifier({name: 'invariant'})) {
-            const node = astPath.node;
+  let newJSON = null;
+  const regex = /\<expected-error-format\>"(.+?)"\<\/expected-error-format\>/g;
+  do {
+    const match = regex.exec(out);
+    if (match === null) {
+      break;
+    } else {
+      const message = match[1].trim();
+      if (existingMessages.has(message)) {
+        // This probably means you ran the script twice.
+        continue;
+      }
+      existingMessages.add(message);
 
-            // error messages can be concatenated (`+`) at runtime, so here's a
-            // trivial partial evaluator that interprets the literal value
-            const errorMsgLiteral = evalStringConcat(node.arguments[1]);
-            addToErrorMap(errorMsgLiteral);
-          }
-        },
-      },
-    });
-  }
-
-  function addToErrorMap(errorMsgLiteral) {
-    if (existingErrorMap.hasOwnProperty(errorMsgLiteral)) {
-      return;
+      // Add to json map
+      if (newJSON === null) {
+        newJSON = Object.assign({}, originalJSON);
+      }
+      console.log(`"${nextCode}": "${message}"`);
+      newJSON[nextCode] = message;
+      nextCode += 1;
     }
-    existingErrorMap[errorMsgLiteral] = '' + currentID++;
-  }
+  } while (true);
 
-  function flush(cb) {
+  if (newJSON) {
     fs.writeFileSync(
-      errorMapFilePath,
-      JSON.stringify(invertObject(existingErrorMap), null, 2) + '\n',
-      'utf-8'
+      path.resolve(__dirname, '../error-codes/codes.json'),
+      JSON.stringify(newJSON, null, 2)
     );
   }
+}
 
-  return function extractErrors(source) {
-    transform(source);
-    flush();
-  };
-};
+main().catch(error => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
index 2baf4baa1c1a7..a429ed4008b68 100644
--- a/scripts/error-codes/transform-error-messages.js
+++ b/scripts/error-codes/transform-error-messages.js
@@ -7,10 +7,7 @@
 'use strict';
 
 const fs = require('fs');
-const {
-  evalStringConcat,
-  evalStringAndTemplateConcat,
-} = require('../shared/evalToString');
+const {evalStringAndTemplateConcat} = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 const helperModuleImports = require('@babel/helper-module-imports');
 
@@ -23,11 +20,7 @@ const SEEN_SYMBOL = Symbol('transform-error-messages.seen');
 module.exports = function(babel) {
   const t = babel.types;
 
-  // TODO: Instead of outputting __DEV__ conditions, only apply this transform
-  // in production.
-  const DEV_EXPRESSION = t.identifier('__DEV__');
-
-  function CallOrNewExpression(path, file) {
+  function ErrorCallExpression(path, file) {
     // Turns this code:
     //
     // new Error(`A ${adj} message that contains ${noun}`);
@@ -38,11 +31,7 @@ module.exports = function(babel) {
     //
     // into this:
     //
-    // Error(
-    //   __DEV__
-    //     ? `A ${adj} message that contains ${noun}`
-    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
-    // );
+    // Error(formatProdErrorMessage(ERR_CODE, adj, noun));
     const node = path.node;
     if (node[SEEN_SYMBOL]) {
       return;
@@ -62,9 +51,44 @@ module.exports = function(babel) {
 
     let prodErrorId = errorMap[errorMsgLiteral];
     if (prodErrorId === undefined) {
-      // There is no error code for this message. We use a lint rule to
-      // enforce that messages can be minified, so assume this is
-      // intentional and exit gracefully.
+      // There is no error code for this message. Add an inline comment
+      // that flags this as an unminified error. This allows the build
+      // to proceed, while also allowing a post-build linter to detect it.
+      //
+      // Outputs:
+      //   /* FIXME (minify-errors-in-prod): Unminified error message in production build! */
+      //   /* <expected-error-format>"A % message that contains %"</expected-error-format> */
+      //   if (!condition) {
+      //     throw Error(`A ${adj} message that contains ${noun}`);
+      //   }
+
+      const statementParent = path.getStatementParent();
+      const leadingComments = statementParent.node.leadingComments;
+      if (leadingComments !== undefined) {
+        for (let i = 0; i < leadingComments.length; i++) {
+          // TODO: Since this only detects one of many ways to disable a lint
+          // rule, we should instead search for a custom directive (like
+          // no-minify-errors) instead of ESLint. Will need to update our lint
+          // rule to recognize the same directive.
+          const commentText = leadingComments[i].value;
+          if (
+            commentText.includes(
+              'eslint-disable-next-line react-internal/prod-error-codes'
+            )
+          ) {
+            return;
+          }
+        }
+      }
+
+      statementParent.addComment(
+        'leading',
+        `! <expected-error-format>"${errorMsgLiteral}"</expected-error-format>`
+      );
+      statementParent.addComment(
+        'leading',
+        '! FIXME (minify-errors-in-prod): Unminified error message in production build!'
+      );
       return;
     }
     prodErrorId = parseInt(prodErrorId, 10);
@@ -84,168 +108,25 @@ module.exports = function(babel) {
     ]);
 
     // Outputs:
-    // Error(
-    //   __DEV__
-    //     ? `A ${adj} message that contains ${noun}`
-    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
-    // );
-    path.replaceWith(t.callExpression(t.identifier('Error'), [prodMessage]));
-    path.replaceWith(
-      t.callExpression(t.identifier('Error'), [
-        t.conditionalExpression(DEV_EXPRESSION, errorMsgNode, prodMessage),
-      ])
-    );
+    // Error(formatProdErrorMessage(ERR_CODE, adj, noun));
+    const newErrorCall = t.callExpression(t.identifier('Error'), [prodMessage]);
+    newErrorCall[SEEN_SYMBOL] = true;
+    path.replaceWith(newErrorCall);
   }
 
   return {
     visitor: {
       NewExpression(path, file) {
-        const noMinify = file.opts.noMinify;
-        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
-          CallOrNewExpression(path, file);
+        if (path.get('callee').isIdentifier({name: 'Error'})) {
+          ErrorCallExpression(path, file);
         }
       },
 
       CallExpression(path, file) {
-        const node = path.node;
-        const noMinify = file.opts.noMinify;
-
-        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
-          CallOrNewExpression(path, file);
+        if (path.get('callee').isIdentifier({name: 'Error'})) {
+          ErrorCallExpression(path, file);
           return;
         }
-
-        if (path.get('callee').isIdentifier({name: 'invariant'})) {
-          // Turns this code:
-          //
-          // invariant(condition, 'A %s message that contains %s', adj, noun);
-          //
-          // into this:
-          //
-          // if (!condition) {
-          //   throw Error(
-          //     __DEV__
-          //       ? `A ${adj} message that contains ${noun}`
-          //       : formatProdErrorMessage(ERR_CODE, adj, noun)
-          //   );
-          // }
-          //
-          // where ERR_CODE is an error code: a unique identifier (a number
-          // string) that references a verbose error message. The mapping is
-          // stored in `scripts/error-codes/codes.json`.
-          const condition = node.arguments[0];
-          const errorMsgLiteral = evalStringConcat(node.arguments[1]);
-          const errorMsgExpressions = Array.from(node.arguments.slice(2));
-          const errorMsgQuasis = errorMsgLiteral
-            .split('%s')
-            .map(raw => t.templateElement({raw, cooked: String.raw({raw})}));
-
-          // Outputs:
-          //   `A ${adj} message that contains ${noun}`;
-          const devMessage = t.templateLiteral(
-            errorMsgQuasis,
-            errorMsgExpressions
-          );
-
-          const parentStatementPath = path.parentPath;
-          if (parentStatementPath.type !== 'ExpressionStatement') {
-            throw path.buildCodeFrameError(
-              'invariant() cannot be called from expression context. Move ' +
-                'the call to its own statement.'
-            );
-          }
-
-          if (noMinify) {
-            // Error minification is disabled for this build.
-            //
-            // Outputs:
-            //   if (!condition) {
-            //     throw Error(`A ${adj} message that contains ${noun}`);
-            //   }
-            parentStatementPath.replaceWith(
-              t.ifStatement(
-                t.unaryExpression('!', condition),
-                t.blockStatement([
-                  t.throwStatement(
-                    t.callExpression(t.identifier('Error'), [devMessage])
-                  ),
-                ])
-              )
-            );
-            return;
-          }
-
-          let prodErrorId = errorMap[errorMsgLiteral];
-
-          if (prodErrorId === undefined) {
-            // There is no error code for this message. Add an inline comment
-            // that flags this as an unminified error. This allows the build
-            // to proceed, while also allowing a post-build linter to detect it.
-            //
-            // Outputs:
-            //   /* FIXME (minify-errors-in-prod): Unminified error message in production build! */
-            //   if (!condition) {
-            //     throw Error(`A ${adj} message that contains ${noun}`);
-            //   }
-            parentStatementPath.replaceWith(
-              t.ifStatement(
-                t.unaryExpression('!', condition),
-                t.blockStatement([
-                  t.throwStatement(
-                    t.callExpression(t.identifier('Error'), [devMessage])
-                  ),
-                ])
-              )
-            );
-            parentStatementPath.addComment(
-              'leading',
-              'FIXME (minify-errors-in-prod): Unminified error message in production build!'
-            );
-            return;
-          }
-          prodErrorId = parseInt(prodErrorId, 10);
-
-          // Import formatProdErrorMessage
-          const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
-            path,
-            'shared/formatProdErrorMessage',
-            {nameHint: 'formatProdErrorMessage'}
-          );
-
-          // Outputs:
-          //   formatProdErrorMessage(ERR_CODE, adj, noun);
-          const prodMessage = t.callExpression(
-            formatProdErrorMessageIdentifier,
-            [t.numericLiteral(prodErrorId), ...errorMsgExpressions]
-          );
-
-          // Outputs:
-          // if (!condition) {
-          //   throw Error(
-          //     __DEV__
-          //       ? `A ${adj} message that contains ${noun}`
-          //       : formatProdErrorMessage(ERR_CODE, adj, noun)
-          //   );
-          // }
-          parentStatementPath.replaceWith(
-            t.ifStatement(
-              t.unaryExpression('!', condition),
-              t.blockStatement([
-                t.blockStatement([
-                  t.throwStatement(
-                    t.callExpression(t.identifier('Error'), [
-                      t.conditionalExpression(
-                        DEV_EXPRESSION,
-                        devMessage,
-                        prodMessage
-                      ),
-                    ])
-                  ),
-                ]),
-              ])
-            )
-          );
-        }
       },
     },
   };
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
index 072071be07fbd..d7a5a2cdab6da 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -13,9 +13,6 @@ const pathToBabel = path.join(
   '../..',
   'package.json'
 );
-const pathToBabelPluginDevWithCode = require.resolve(
-  '../error-codes/transform-error-messages'
-);
 const pathToBabelPluginReplaceConsoleCalls = require.resolve(
   '../babel/transform-replace-console-calls'
 );
@@ -36,8 +33,6 @@ const babelOptions = {
     // For Node environment only. For builds, Rollup takes care of ESM.
     require.resolve('@babel/plugin-transform-modules-commonjs'),
 
-    pathToBabelPluginDevWithCode,
-
     // Keep stacks detailed in tests.
     // Don't put this in .babelrc so that we don't embed filenames
     // into ReactART builds that include JSX.
@@ -105,7 +100,6 @@ module.exports = {
     __filename,
     pathToBabel,
     pathToBabelrc,
-    pathToBabelPluginDevWithCode,
     pathToTransformInfiniteLoops,
     pathToTransformTestGatePragma,
     pathToErrorCodes,
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 7e29c0e8c54d3..48401c002b431 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -19,7 +19,6 @@ const Sync = require('./sync');
 const sizes = require('./plugins/sizes-plugin');
 const useForks = require('./plugins/use-forks-plugin');
 const stripUnusedImports = require('./plugins/strip-unused-imports');
-const extractErrorCodes = require('../error-codes/extract-errors');
 const Packaging = require('./packaging');
 const {asyncRimRaf} = require('./utils');
 const codeFrame = require('babel-code-frame');
@@ -94,10 +93,6 @@ const forcePrettyOutput = argv.pretty;
 const isWatchMode = argv.watch;
 const syncFBSourcePath = argv['sync-fbsource'];
 const syncWWWPath = argv['sync-www'];
-const shouldExtractErrors = argv['extract-errors'];
-const errorCodeOpts = {
-  errorMapFilePath: 'scripts/error-codes/codes.json',
-};
 
 const closureOptions = {
   compilation_level: 'SIMPLE',
@@ -176,26 +171,13 @@ function getBabelConfig(
   if (updateBabelOptions) {
     options = updateBabelOptions(options);
   }
+  // Controls whether to replace error messages with error codes in production.
+  // By default, error messages are replaced in production.
+  if (!isDevelopment && bundle.minifyWithProdErrorCodes !== false) {
+    options.plugins.push(require('../error-codes/transform-error-messages'));
+  }
+
   switch (bundleType) {
-    case FB_WWW_DEV:
-    case FB_WWW_PROD:
-    case FB_WWW_PROFILING:
-    case RN_OSS_DEV:
-    case RN_OSS_PROD:
-    case RN_OSS_PROFILING:
-    case RN_FB_DEV:
-    case RN_FB_PROD:
-    case RN_FB_PROFILING:
-      return Object.assign({}, options, {
-        plugins: options.plugins.concat([
-          [
-            require('../error-codes/transform-error-messages'),
-            // Controls whether to replace error messages with error codes
-            // in production. By default, error messages are replaced.
-            {noMinify: bundle.minifyWithProdErrorCodes === false},
-          ],
-        ]),
-      });
     case UMD_DEV:
     case UMD_PROD:
     case UMD_PROFILING:
@@ -206,8 +188,6 @@ function getBabelConfig(
         plugins: options.plugins.concat([
           // Use object-assign polyfill in open source
           path.resolve('./scripts/babel/transform-object-assign-require'),
-          // Minify invariant messages
-          require('../error-codes/transform-error-messages'),
         ]),
       });
     default:
@@ -339,7 +319,6 @@ function getPlugins(
   pureExternalModules,
   bundle
 ) {
-  const findAndRecordErrorCodes = extractErrorCodes(errorCodeOpts);
   const forks = Modules.getForks(bundleType, entry, moduleType, bundle);
   const isProduction = isProductionBundleType(bundleType);
   const isProfiling = isProfilingBundleType(bundleType);
@@ -360,13 +339,6 @@ function getPlugins(
     bundleType === RN_FB_PROFILING;
   const shouldStayReadable = isFBWWWBundle || isRNBundle || forcePrettyOutput;
   return [
-    // Extract error codes from invariant() messages into a file.
-    shouldExtractErrors && {
-      transform(source) {
-        findAndRecordErrorCodes(source);
-        return source;
-      },
-    },
     // Shim any modules that need forking in this environment.
     useForks(forks),
     // Ensure we don't try to bundle any fbjs modules.
@@ -762,7 +734,7 @@ async function buildEverything() {
     );
   }
 
-  if (!shouldExtractErrors && process.env.CIRCLE_NODE_TOTAL) {
+  if (process.env.CIRCLE_NODE_TOTAL) {
     // In CI, parallelize bundles across multiple tasks.
     const nodeTotal = parseInt(process.env.CIRCLE_NODE_TOTAL, 10);
     const nodeIndex = parseInt(process.env.CIRCLE_NODE_INDEX, 10);
@@ -787,14 +759,6 @@ async function buildEverything() {
   if (!forcePrettyOutput) {
     Stats.saveResults();
   }
-
-  if (shouldExtractErrors) {
-    console.warn(
-      '\nWarning: this build was created with --extract-errors enabled.\n' +
-        'this will result in extremely slow builds and should only be\n' +
-        'used when the error map needs to be rebuilt.\n'
-    );
-  }
 }
 
 buildEverything();
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index af7b30b7feb99..40ae43ae7cbc0 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -141,7 +141,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.browser',
     global: 'ReactFetch',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
@@ -163,7 +163,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: [],
   },
@@ -185,7 +185,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: [],
   },
@@ -349,7 +349,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack',
     global: 'ReactServerDOMReader',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
@@ -594,7 +594,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer',
     global: 'ReactNoopRenderer',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
   },
@@ -605,7 +605,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/persistent',
     global: 'ReactNoopRendererPersistent',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },
@@ -616,7 +616,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/server',
     global: 'ReactNoopRendererServer',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },

From 6bce0355c3e4bf23c16e82317094230908ee7560 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 31 Oct 2021 18:38:03 -0400
Subject: [PATCH 069/109] Upgrade useSyncExternalStore to alpha channel
 (#22662)

* Move useSyncExternalStore shim to a nested entrypoint

Also renames `useSyncExternalStoreExtra` to
`useSyncExternalStoreWithSelector`.

- 'use-sync-external-store/shim' -> A shim for `useSyncExternalStore`
  that works in React 16 and 17 (any release that supports hooks). The
  module will first check if the built-in React API exists, before
  falling back to the shim.
- 'use-sync-external-store/with-selector' -> An extended version of
  `useSyncExternalStore` that also supports `selector` and `isEqual`
  options. It does _not_ shim `use-sync-external-store`; it composes the
  built-in React API. **Use this if you only support 18+.**
- 'use-sync-external-store/shim/with-selector' -> Same API, but it
  composes `use-sync-external-store/shim` instead. **Use this for
  compatibility with 16 and 17.**
- 'use-sync-external-store' -> Re-exports React's built-in API. Not
  meant to be used. It will warn and direct users to either the shim or
  the built-in API.

* Upgrade useSyncExternalStore to alpha channel
---
 ReactVersions.js                              |  2 +-
 .../ReactHooksInspectionIntegration-test.js   |  3 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  | 26 ++++++---
 .../__tests__/useSyncExternalStore-test.js    |  3 +-
 packages/react/index.classic.fb.js            |  1 -
 packages/react/index.experimental.js          |  2 +-
 packages/react/index.js                       |  1 -
 packages/react/index.modern.fb.js             |  1 -
 packages/react/index.stable.js                |  1 +
 packages/use-sync-external-store/index.js     |  2 +-
 packages/use-sync-external-store/npm/extra.js |  7 ---
 .../npm/index.native.js                       |  7 ---
 .../use-sync-external-store/npm/shim/index.js |  7 +++
 .../npm/shim/index.native.js                  |  7 +++
 .../npm/shim/with-selector.js                 |  7 +++
 .../npm/with-selector.js                      |  7 +++
 packages/use-sync-external-store/package.json |  4 +-
 .../use-sync-external-store/shim/index.js     | 12 ++++
 .../{ => shim}/index.native.js                |  2 +-
 .../shim/with-selector/index.js               | 12 ++++
 .../useSyncExternalStoreNative-test.js        | 55 +++++++++----------
 .../useSyncExternalStoreShared-test.js        | 47 +++++++++-------
 .../useSyncExternalStoreShimServer-test.js    |  4 +-
 .../forks/isServerEnvironment.native.js}      |  4 +-
 ...seSyncExternalStore.forward-to-built-in.js | 16 ++++++
 .../useSyncExternalStore.forward-to-shim.js   | 16 ++++++
 .../src/isServerEnvironment.js                | 12 ++++
 .../src/useSyncExternalStore.js               | 28 ++++++----
 .../src/useSyncExternalStoreShim.js           | 18 ++++++
 ...t.js => useSyncExternalStoreShimClient.js} |  8 +--
 ...r.js => useSyncExternalStoreShimServer.js} |  4 ++
 ...js => useSyncExternalStoreWithSelector.js} |  8 +--
 .../use-sync-external-store/with-selector.js  | 12 ++++
 scripts/jest/TestFlags.js                     |  5 +-
 scripts/jest/config.build.js                  |  7 +++
 scripts/rollup/bundles.js                     | 44 +++++++++++----
 scripts/rollup/forks.js                       | 18 ++++++
 scripts/shared/pathsByLanguageVersion.js      |  2 +
 38 files changed, 298 insertions(+), 124 deletions(-)
 delete mode 100644 packages/use-sync-external-store/npm/extra.js
 delete mode 100644 packages/use-sync-external-store/npm/index.native.js
 create mode 100644 packages/use-sync-external-store/npm/shim/index.js
 create mode 100644 packages/use-sync-external-store/npm/shim/index.native.js
 create mode 100644 packages/use-sync-external-store/npm/shim/with-selector.js
 create mode 100644 packages/use-sync-external-store/npm/with-selector.js
 create mode 100644 packages/use-sync-external-store/shim/index.js
 rename packages/use-sync-external-store/{ => shim}/index.native.js (70%)
 create mode 100644 packages/use-sync-external-store/shim/with-selector/index.js
 rename packages/use-sync-external-store/{extra.js => src/forks/isServerEnvironment.native.js} (75%)
 create mode 100644 packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js
 create mode 100644 packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js
 create mode 100644 packages/use-sync-external-store/src/isServerEnvironment.js
 create mode 100644 packages/use-sync-external-store/src/useSyncExternalStoreShim.js
 rename packages/use-sync-external-store/src/{useSyncExternalStoreClient.js => useSyncExternalStoreShimClient.js} (95%)
 rename packages/use-sync-external-store/src/{useSyncExternalStoreServer.js => useSyncExternalStoreShimServer.js} (59%)
 rename packages/use-sync-external-store/src/{useSyncExternalStoreExtra.js => useSyncExternalStoreWithSelector.js} (95%)
 create mode 100644 packages/use-sync-external-store/with-selector.js

diff --git a/ReactVersions.js b/ReactVersions.js
index 2ce7680f0191c..bdab35424e885 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -36,6 +36,7 @@ const stablePackages = {
   'react-refresh': '0.11.0',
   'react-test-renderer': ReactVersion,
   'use-subscription': '1.6.0',
+  'use-sync-external-store': '1.0.0',
   scheduler: '0.21.0',
 };
 
@@ -47,7 +48,6 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
-  'use-sync-external-store',
 ];
 
 module.exports = {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 6937efd631572..087d74d628724 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -1055,9 +1055,8 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental || www
   it('should support composite useSyncExternalStore hook', () => {
-    const useSyncExternalStore = React.unstable_useSyncExternalStore;
+    const useSyncExternalStore = React.useSyncExternalStore;
     function Foo() {
       const value = useSyncExternalStore(
         () => () => {},
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index a2ede1746d08a..abbbdc1578753 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -18,7 +18,7 @@ let ReactDOMFizzServer;
 let Suspense;
 let SuspenseList;
 let useSyncExternalStore;
-let useSyncExternalStoreExtra;
+let useSyncExternalStoreWithSelector;
 let PropTypes;
 let textCache;
 let window;
@@ -43,11 +43,23 @@ describe('ReactDOMFizzServer', () => {
     Stream = require('stream');
     Suspense = React.Suspense;
     SuspenseList = React.SuspenseList;
-    useSyncExternalStore = React.unstable_useSyncExternalStore;
-    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
-      .useSyncExternalStoreExtra;
+
     PropTypes = require('prop-types');
 
+    if (gate(flags => flags.source)) {
+      // The `with-selector` module composes the main `use-sync-external-store`
+      // entrypoint. In the compiled artifacts, this is resolved to the `shim`
+      // implementation by our build config, but when running the tests against
+      // the source files, we need to tell Jest how to resolve it. Because this
+      // is a source module, this mock has no affect on the build tests.
+      jest.mock('use-sync-external-store/src/useSyncExternalStore', () =>
+        jest.requireActual('react'),
+      );
+    }
+    useSyncExternalStore = React.useSyncExternalStore;
+    useSyncExternalStoreWithSelector = require('use-sync-external-store/with-selector')
+      .useSyncExternalStoreWithSelector;
+
     textCache = new Map();
 
     // Test Environment
@@ -1663,7 +1675,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot', async () => {
     const ref = React.createRef();
@@ -1734,7 +1745,6 @@ describe('ReactDOMFizzServer', () => {
 
   // The selector implementation uses the lazy ref initialization pattern
   // @gate !(enableUseRefAccessWarning && __DEV__)
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot (with selector and isEqual)', async () => {
     // Same as previous test, but with a selector that returns a complex object
@@ -1767,7 +1777,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     function App() {
-      const {env} = useSyncExternalStoreExtra(
+      const {env} = useSyncExternalStoreWithSelector(
         subscribe,
         getClientSnapshot,
         getServerSnapshot,
@@ -1815,7 +1825,6 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toEqual(serverRenderedDiv);
   });
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
@@ -1964,7 +1973,6 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
diff --git a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
index d939a02bee897..623ea12755907 100644
--- a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
+++ b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
@@ -36,7 +36,7 @@ describe('useSyncExternalStore', () => {
     useImperativeHandle = React.useImperativeHandle;
     forwardRef = React.forwardRef;
     useRef = React.useRef;
-    useSyncExternalStore = React.unstable_useSyncExternalStore;
+    useSyncExternalStore = React.useSyncExternalStore;
     startTransition = React.startTransition;
 
     act = require('jest-react').act;
@@ -70,7 +70,6 @@ describe('useSyncExternalStore', () => {
     };
   }
 
-  // @gate supportsNativeUseSyncExternalStore
   test(
     'detects interleaved mutations during a concurrent read before ' +
       'layout effects fire',
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 568a8ada613d9..c5854f8f6d398 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -54,7 +54,6 @@ export {
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 7491bbb7e832d..4b4fa89e01898 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -47,7 +47,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
-  useSyncExternalStore as unstable_useSyncExternalStore,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.js b/packages/react/index.js
index 59cc05f0254e6..9a6a99ee52189 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -73,7 +73,6 @@ export {
   useMemo,
   useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index cd60ee426fa65..8d08a43b90946 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -53,7 +53,6 @@ export {
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 4e4682b8fc29f..3a0600d11a713 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -40,6 +40,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/use-sync-external-store/index.js b/packages/use-sync-external-store/index.js
index ff57d66d841bc..55548c1126626 100644
--- a/packages/use-sync-external-store/index.js
+++ b/packages/use-sync-external-store/index.js
@@ -9,4 +9,4 @@
 
 'use strict';
 
-export * from './src/useSyncExternalStore';
+export {useSyncExternalStore} from './src/useSyncExternalStore';
diff --git a/packages/use-sync-external-store/npm/extra.js b/packages/use-sync-external-store/npm/extra.js
deleted file mode 100644
index 468dd518ac1fc..0000000000000
--- a/packages/use-sync-external-store/npm/extra.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/use-sync-external-store-extra.production.min.js');
-} else {
-  module.exports = require('./cjs/use-sync-external-store-extra.development.js');
-}
diff --git a/packages/use-sync-external-store/npm/index.native.js b/packages/use-sync-external-store/npm/index.native.js
deleted file mode 100644
index 22546b9c0ebba..0000000000000
--- a/packages/use-sync-external-store/npm/index.native.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/use-sync-external-store.native.production.min.js');
-} else {
-  module.exports = require('./cjs/use-sync-external-store.native.development.js');
-}
diff --git a/packages/use-sync-external-store/npm/shim/index.js b/packages/use-sync-external-store/npm/shim/index.js
new file mode 100644
index 0000000000000..bde36f38efdb3
--- /dev/null
+++ b/packages/use-sync-external-store/npm/shim/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('../cjs/use-sync-external-store-shim.production.min.js');
+} else {
+  module.exports = require('../cjs/use-sync-external-store-shim.development.js');
+}
diff --git a/packages/use-sync-external-store/npm/shim/index.native.js b/packages/use-sync-external-store/npm/shim/index.native.js
new file mode 100644
index 0000000000000..0bd5c7e1c0f85
--- /dev/null
+++ b/packages/use-sync-external-store/npm/shim/index.native.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('../cjs/use-sync-external-store-shim.native.production.min.js');
+} else {
+  module.exports = require('../cjs/use-sync-external-store-shim.native.development.js');
+}
diff --git a/packages/use-sync-external-store/npm/shim/with-selector.js b/packages/use-sync-external-store/npm/shim/with-selector.js
new file mode 100644
index 0000000000000..1175186c64286
--- /dev/null
+++ b/packages/use-sync-external-store/npm/shim/with-selector.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('../cjs/use-sync-external-store-shim/with-selector.production.min.js');
+} else {
+  module.exports = require('../cjs/use-sync-external-store-shim/with-selector.development.js');
+}
diff --git a/packages/use-sync-external-store/npm/with-selector.js b/packages/use-sync-external-store/npm/with-selector.js
new file mode 100644
index 0000000000000..9163b3e7e13f7
--- /dev/null
+++ b/packages/use-sync-external-store/npm/with-selector.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/use-sync-external-store-with-selector.production.min.js');
+} else {
+  module.exports = require('./cjs/use-sync-external-store-with-selector.development.js');
+}
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index b43b3a0ec67d2..0d1d9b8d25f80 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -12,8 +12,10 @@
     "README.md",
     "build-info.json",
     "index.js",
-    "extra.js",
     "index.native.js",
+    "with-selector.js",
+    "with-selector.native.js",
+    "shim/",
     "cjs/"
   ],
   "license": "MIT",
diff --git a/packages/use-sync-external-store/shim/index.js b/packages/use-sync-external-store/shim/index.js
new file mode 100644
index 0000000000000..b8fa72b48e775
--- /dev/null
+++ b/packages/use-sync-external-store/shim/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStoreShim';
diff --git a/packages/use-sync-external-store/index.native.js b/packages/use-sync-external-store/shim/index.native.js
similarity index 70%
rename from packages/use-sync-external-store/index.native.js
rename to packages/use-sync-external-store/shim/index.native.js
index cac5c1c2bf710..b8fa72b48e775 100644
--- a/packages/use-sync-external-store/index.native.js
+++ b/packages/use-sync-external-store/shim/index.native.js
@@ -9,4 +9,4 @@
 
 'use strict';
 
-export * from './src/useSyncExternalStoreClient';
+export {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStoreShim';
diff --git a/packages/use-sync-external-store/shim/with-selector/index.js b/packages/use-sync-external-store/shim/with-selector/index.js
new file mode 100644
index 0000000000000..e71d4dac6ac9d
--- /dev/null
+++ b/packages/use-sync-external-store/shim/with-selector/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export {useSyncExternalStoreWithSelector} from 'use-sync-external-store/src/useSyncExternalStoreWithSelector';
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
index 0902e7554c450..caedd74f74470 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
@@ -15,7 +15,7 @@ let React;
 let ReactNoop;
 let Scheduler;
 let useSyncExternalStore;
-let useSyncExternalStoreExtra;
+let useSyncExternalStoreWithSelector;
 let act;
 
 // This tests the userspace shim of `useSyncExternalStore` in a server-rendering
@@ -36,25 +36,40 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
         startTransition: _,
         // eslint-disable-next-line no-unused-vars
         useSyncExternalStore: __,
-        // eslint-disable-next-line no-unused-vars
-        unstable_useSyncExternalStore: ___,
         ...otherExports
       } = jest.requireActual('react');
       return otherExports;
     });
 
-    jest.mock('use-sync-external-store', () =>
-      jest.requireActual('use-sync-external-store/index.native'),
+    jest.mock('use-sync-external-store/shim', () =>
+      jest.requireActual('use-sync-external-store/shim/index.native'),
     );
 
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
-    useSyncExternalStore = require('use-sync-external-store')
+
+    if (gate(flags => flags.source)) {
+      // The `shim/with-selector` module composes the main
+      // `use-sync-external-store` entrypoint. In the compiled artifacts, this
+      // is resolved to the `shim` implementation by our build config, but when
+      // running the tests against the source files, we need to tell Jest how to
+      // resolve it. Because this is a source module, this mock has no affect on
+      // the build tests.
+      jest.mock('use-sync-external-store/src/useSyncExternalStore', () =>
+        jest.requireActual('use-sync-external-store/shim'),
+      );
+      jest.mock('use-sync-external-store/src/isServerEnvironment', () =>
+        jest.requireActual(
+          'use-sync-external-store/src/forks/isServerEnvironment.native',
+        ),
+      );
+    }
+    useSyncExternalStore = require('use-sync-external-store/shim')
       .useSyncExternalStore;
-    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
-      .useSyncExternalStoreExtra;
+    useSyncExternalStoreWithSelector = require('use-sync-external-store/shim/with-selector')
+      .useSyncExternalStoreWithSelector;
   });
 
   function Text({text}) {
@@ -105,32 +120,12 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     expect(root).toMatchRenderedOutput('client');
   });
 
-  test('native version', async () => {
-    const store = createExternalStore('client');
-
-    function App() {
-      const text = useSyncExternalStore(
-        store.subscribe,
-        store.getState,
-        () => 'server',
-      );
-      return <Text text={text} />;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(() => {
-      root.render(<App />);
-    });
-    expect(Scheduler).toHaveYielded(['client']);
-    expect(root).toMatchRenderedOutput('client');
-  });
-
   // @gate !(enableUseRefAccessWarning && __DEV__)
   test('Using isEqual to bailout', async () => {
     const store = createExternalStore({a: 0, b: 0});
 
     function A() {
-      const {a} = useSyncExternalStoreExtra(
+      const {a} = useSyncExternalStoreWithSelector(
         store.subscribe,
         store.getState,
         null,
@@ -140,7 +135,7 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
       return <Text text={'A' + a} />;
     }
     function B() {
-      const {b} = useSyncExternalStoreExtra(
+      const {b} = useSyncExternalStoreWithSelector(
         store.subscribe,
         store.getState,
         null,
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index ab8143f24034c..5af9e9767ab0c 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 let useSyncExternalStore;
-let useSyncExternalStoreExtra;
+let useSyncExternalStoreWithSelector;
 let React;
 let ReactDOM;
 let Scheduler;
@@ -25,11 +25,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   beforeEach(() => {
     jest.resetModules();
 
-    // Remove the built-in API from the React exports to force the package to
-    // use the shim.
-    if (!gate(flags => flags.supportsNativeUseSyncExternalStore)) {
-      // and the non-variant tests for the shim.
-      //
+    if (gate(flags => flags.enableUseSyncExternalStoreShim)) {
       // Remove useSyncExternalStore from the React imports so that we use the
       // shim instead. Also removing startTransition, since we use that to
       // detect outdated 18 alphas that don't yet include useSyncExternalStore.
@@ -42,8 +38,6 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
           startTransition: _,
           // eslint-disable-next-line no-unused-vars
           useSyncExternalStore: __,
-          // eslint-disable-next-line no-unused-vars
-          unstable_useSyncExternalStore: ___,
           ...otherExports
         } = jest.requireActual('react');
         return otherExports;
@@ -64,10 +58,21 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     // in both concurrent and legacy mode, I'm adding batching here.
     act = cb => internalAct(() => ReactDOM.unstable_batchedUpdates(cb));
 
-    useSyncExternalStore = require('use-sync-external-store')
+    if (gate(flags => flags.source)) {
+      // The `shim/with-selector` module composes the main
+      // `use-sync-external-store` entrypoint. In the compiled artifacts, this
+      // is resolved to the `shim` implementation by our build config, but when
+      // running the tests against the source files, we need to tell Jest how to
+      // resolve it. Because this is a source module, this mock has no affect on
+      // the build tests.
+      jest.mock('use-sync-external-store/src/useSyncExternalStore', () =>
+        jest.requireActual('use-sync-external-store/shim'),
+      );
+    }
+    useSyncExternalStore = require('use-sync-external-store/shim')
       .useSyncExternalStore;
-    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
-      .useSyncExternalStoreExtra;
+    useSyncExternalStoreWithSelector = require('use-sync-external-store/shim/with-selector')
+      .useSyncExternalStoreWithSelector;
   });
 
   function Text({text}) {
@@ -78,7 +83,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   function createRoot(container) {
     // This wrapper function exists so we can test both legacy roots and
     // concurrent roots.
-    if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
+    if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
       // The native implementation only exists in 18+, so we test using
       // concurrent mode. To test the legacy root behavior in the native
       // implementation (which is supported in the sense that it needs to have
@@ -265,7 +270,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
   // In React 18, you can't observe in between a sync render and its
   // passive effects, so this is only relevant to legacy roots
-  // @gate !supportsNativeUseSyncExternalStore
+  // @gate enableUseSyncExternalStoreShim
   test(
     "compares to current state before bailing out, even when there's a " +
       'mutation in between the sync and passive effects',
@@ -547,7 +552,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     await act(() => {
       store.set({value: 1, throwInGetSnapshot: true, throwInIsEqual: false});
     });
-    if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
+    if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
       expect(Scheduler).toHaveYielded([
         'Error in getSnapshot',
         // In a concurrent root, React renders a second time to attempt to
@@ -595,7 +600,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
       function App() {
         Scheduler.unstable_yieldValue('App');
-        const a = useSyncExternalStoreExtra(
+        const a = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -632,7 +637,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       const store = createExternalStore({a: 0, b: 0});
 
       function A() {
-        const {a} = useSyncExternalStoreExtra(
+        const {a} = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -642,7 +647,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         return <Text text={'A' + a} />;
       }
       function B() {
-        const {b} = useSyncExternalStoreExtra(
+        const {b} = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -711,7 +716,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       container.innerHTML = '<div>server</div>';
       const serverRenderedDiv = container.getElementsByTagName('div')[0];
 
-      if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
+      if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
         act(() => {
           ReactDOM.hydrateRoot(container, <App />);
         });
@@ -774,7 +779,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         Scheduler.unstable_yieldValue('Inline selector');
         return [...state.items, 'C'];
       };
-      const items = useSyncExternalStoreExtra(
+      const items = useSyncExternalStoreWithSelector(
         store.subscribe,
         store.getState,
         null,
@@ -842,7 +847,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       const selector = state => state.a.toUpperCase();
 
       function App() {
-        const a = useSyncExternalStoreExtra(
+        const a = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -877,7 +882,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       const isEqual = (left, right) => left.a.trim() === right.a.trim();
 
       function App() {
-        const a = useSyncExternalStoreExtra(
+        const a = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
index b46e028724061..016240a4d3f2f 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
@@ -35,8 +35,6 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
         startTransition: _,
         // eslint-disable-next-line no-unused-vars
         useSyncExternalStore: __,
-        // eslint-disable-next-line no-unused-vars
-        unstable_useSyncExternalStore: ___,
         ...otherExports
       } = jest.requireActual('react');
       return otherExports;
@@ -47,7 +45,7 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
 
-    useSyncExternalStore = require('use-sync-external-store')
+    useSyncExternalStore = require('use-sync-external-store/shim')
       .useSyncExternalStore;
   });
 
diff --git a/packages/use-sync-external-store/extra.js b/packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
similarity index 75%
rename from packages/use-sync-external-store/extra.js
rename to packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
index 90d48eb4641b6..2bd359085541d 100644
--- a/packages/use-sync-external-store/extra.js
+++ b/packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
@@ -7,6 +7,4 @@
  * @flow
  */
 
-'use strict';
-
-export * from './src/useSyncExternalStoreExtra';
+export const isServerEnvironment = false;
diff --git a/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js
new file mode 100644
index 0000000000000..049f0c887e278
--- /dev/null
+++ b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+import * as React from 'react';
+
+export const useSyncExternalStore = React.useSyncExternalStore;
diff --git a/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js
new file mode 100644
index 0000000000000..54425c3ae0e2d
--- /dev/null
+++ b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+import * as shim from 'use-sync-external-store/shim';
+
+export const useSyncExternalStore = shim.useSyncExternalStore;
diff --git a/packages/use-sync-external-store/src/isServerEnvironment.js b/packages/use-sync-external-store/src/isServerEnvironment.js
new file mode 100644
index 0000000000000..30adcb934731f
--- /dev/null
+++ b/packages/use-sync-external-store/src/isServerEnvironment.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {canUseDOM} from 'shared/ExecutionEnvironment';
+
+export const isServerEnvironment = !canUseDOM;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index c152287174269..f1bb95556d2bb 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -7,16 +7,24 @@
  * @flow
  */
 
-import {canUseDOM} from 'shared/ExecutionEnvironment';
-import {useSyncExternalStore as client} from './useSyncExternalStoreClient';
-import {useSyncExternalStore as server} from './useSyncExternalStoreServer';
+'use strict';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
 import * as React from 'react';
 
-const {unstable_useSyncExternalStore: builtInAPI} = React;
+export const useSyncExternalStore = React.useSyncExternalStore;
 
-export const useSyncExternalStore =
-  builtInAPI !== undefined
-    ? ((builtInAPI: any): typeof client)
-    : canUseDOM
-    ? client
-    : server;
+if (__DEV__) {
+  console.error(
+    "The main 'use-sync-external-store' entry point is not supported; all it " +
+      "does is re-export useSyncExternalStore from the 'react' package, so " +
+      'it only works with React 18+.' +
+      '\n\n' +
+      'If you wish to support React 16 and 17, import from ' +
+      "'use-sync-external-store/shim' instead. It will fall back to a shimmed" +
+      'implementation when the native one is not available.' +
+      '\n\n' +
+      "If you only support React 18+, you can import directly from 'react'.",
+  );
+}
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreShim.js b/packages/use-sync-external-store/src/useSyncExternalStoreShim.js
new file mode 100644
index 0000000000000..82d944de1dd1d
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShim.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {useSyncExternalStore as client} from './useSyncExternalStoreShimClient';
+import {useSyncExternalStore as server} from './useSyncExternalStoreShimServer';
+import {isServerEnvironment} from './isServerEnvironment';
+import {useSyncExternalStore as builtInAPI} from 'react';
+
+const shim = isServerEnvironment ? server : client;
+
+export const useSyncExternalStore =
+  builtInAPI !== undefined ? ((builtInAPI: any): typeof shim) : shim;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
similarity index 95%
rename from packages/use-sync-external-store/src/useSyncExternalStoreClient.js
rename to packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
index dc42169c399d6..8578b3d3fd1c7 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
@@ -30,10 +30,10 @@ let didWarnUncachedGetSnapshot = false;
 export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
-  // Note: The client shim does not use getServerSnapshot, because pre-18
-  // versions of React do not expose a way to check if we're hydrating. So
-  // users of the shim will need to track that themselves and return the
-  // correct value from `getSnapshot`.
+  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+  // React do not expose a way to check if we're hydrating. So users of the shim
+  // will need to track that themselves and return the correct value
+  // from `getSnapshot`.
   getServerSnapshot?: () => T,
 ): T {
   if (__DEV__) {
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
similarity index 59%
rename from packages/use-sync-external-store/src/useSyncExternalStoreServer.js
rename to packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
index 52903dd4aca89..4f2432718c365 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
@@ -12,5 +12,9 @@ export function useSyncExternalStore<T>(
   getSnapshot: () => T,
   getServerSnapshot?: () => T,
 ): T {
+  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+  // React do not expose a way to check if we're hydrating. So users of the shim
+  // will need to track that themselves and return the correct value
+  // from `getSnapshot`.
   return getSnapshot();
 }
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
similarity index 95%
rename from packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
rename to packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
index aa4957b534753..c7012e615ecd1 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
@@ -9,14 +9,14 @@
 
 import * as React from 'react';
 import is from 'shared/objectIs';
-import {useSyncExternalStore} from 'use-sync-external-store';
+import {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStore';
 
-// Intentionally not using named imports because Rollup uses dynamic
-// dispatch for CommonJS interop named imports.
+// Intentionally not using named imports because Rollup uses dynamic dispatch
+// for CommonJS interop.
 const {useRef, useEffect, useMemo, useDebugValue} = React;
 
 // Same as useSyncExternalStore, but supports selector and isEqual arguments.
-export function useSyncExternalStoreExtra<Snapshot, Selection>(
+export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => Snapshot,
   getServerSnapshot: void | null | (() => Snapshot),
diff --git a/packages/use-sync-external-store/with-selector.js b/packages/use-sync-external-store/with-selector.js
new file mode 100644
index 0000000000000..e71d4dac6ac9d
--- /dev/null
+++ b/packages/use-sync-external-store/with-selector.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export {useSyncExternalStoreWithSelector} from 'use-sync-external-store/src/useSyncExternalStoreWithSelector';
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index c1bd03e00b1a9..af83baf0f3ec9 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -84,9 +84,8 @@ function getTestFlags() {
       source: !process.env.IS_BUILD,
       www,
 
-      // This isn't a flag, just a useful alias for tests. Remove once
-      // useSyncExternalStore lands in the `next` channel.
-      supportsNativeUseSyncExternalStore: __EXPERIMENTAL__ || www,
+      // This isn't a flag, just a useful alias for tests.
+      enableUseSyncExternalStoreShim: !__VARIANT__,
 
       // If there's a naming conflict between scheduler and React feature flags, the
       // React ones take precedence.
diff --git a/scripts/jest/config.build.js b/scripts/jest/config.build.js
index 69cc7d18c536c..5b04ab05df7cd 100644
--- a/scripts/jest/config.build.js
+++ b/scripts/jest/config.build.js
@@ -45,6 +45,13 @@ packages.forEach(name => {
   ] = `<rootDir>/build/${NODE_MODULES_DIR}/${name}/$1`;
 });
 
+moduleNameMapper[
+  'use-sync-external-store/shim/with-selector'
+] = `<rootDir>/build/${NODE_MODULES_DIR}/use-sync-external-store/shim/with-selector`;
+moduleNameMapper[
+  'use-sync-external-store/shim/index.native'
+] = `<rootDir>/build/${NODE_MODULES_DIR}/use-sync-external-store/shim/index.native`;
+
 module.exports = Object.assign({}, baseConfig, {
   // Redirect imports to the compiled bundles
   moduleNameMapper,
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 40ae43ae7cbc0..8b12e8550e365 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -789,7 +789,7 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* Shim for useSyncExternalStore *******/
+  /******* useSyncExternalStore *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
@@ -800,26 +800,48 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* Shim for useSyncExternalStore (+ extra user-space features) *******/
+  /******* useSyncExternalStore (shim) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'use-sync-external-store/extra',
-    global: 'useSyncExternalStoreExtra',
-    minifyWithProdErrorCodes: true,
+    entry: 'use-sync-external-store/shim',
+    global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: true,
-    externals: ['react', 'use-sync-external-store'],
+    externals: ['react'],
   },
 
-  /******* Shim for useSyncExternalStore ReactNative *******/
+  /******* useSyncExternalStore (shim, native) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'use-sync-external-store/index.native',
-    global: 'useSyncExternalStoreNative',
-    minifyWithProdErrorCodes: true,
+    entry: 'use-sync-external-store/shim/index.native',
+    global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: true,
-    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+    externals: ['react'],
+  },
+
+  /******* useSyncExternalStoreWithSelector *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/with-selector',
+    global: 'useSyncExternalStoreWithSelector',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    externals: ['react'],
+  },
+
+  /******* useSyncExternalStoreWithSelector (shim) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/shim/with-selector',
+    global: 'useSyncExternalStoreWithSelector',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
+    externals: ['react', 'use-sync-external-store/shim'],
   },
 
   /******* React Scheduler (experimental) *******/
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 84211da5c5125..b2234fa42a010 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -481,6 +481,24 @@ const forks = Object.freeze({
         return null;
     }
   },
+
+  'use-sync-external-store/src/useSyncExternalStore': (bundleType, entry) => {
+    if (entry.startsWith('use-sync-external-store/shim')) {
+      return 'use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim';
+    }
+    if (entry !== 'use-sync-external-store') {
+      // Internal modules that aren't shims should use the native API from the
+      // react package.
+      return 'use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in';
+    }
+    return null;
+  },
+
+  'use-sync-external-store/src/isServerEnvironment': (bundleType, entry) => {
+    if (entry.endsWith('.native')) {
+      return 'use-sync-external-store/src/forks/isServerEnvironment.native';
+    }
+  },
 });
 
 module.exports = forks;
diff --git a/scripts/shared/pathsByLanguageVersion.js b/scripts/shared/pathsByLanguageVersion.js
index af6963f78949e..8c60a9c074a5a 100644
--- a/scripts/shared/pathsByLanguageVersion.js
+++ b/scripts/shared/pathsByLanguageVersion.js
@@ -11,6 +11,8 @@ const esNextPaths = [
   // Internal forwarding modules
   'packages/*/*.js',
   'packages/*/esm/*.js',
+  'packages/use-sync-external-store/shim/**/*.js',
+  'packages/use-sync-external-store/with-selector/**/*.js',
   // Source files
   'packages/*/src/**/*.js',
   'packages/dom-event-testing-library/**/*.js',

From 6c7ef3fce5547da5db3d400ccf95a5023f8891f4 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Sun, 31 Oct 2021 19:19:02 -0400
Subject: [PATCH 070/109] React DevTools 4.20.2 -> 4.21.0 (#22661)

---
 packages/react-devtools-core/package.json       |  2 +-
 .../chrome/manifest.json                        |  4 ++--
 .../edge/manifest.json                          |  4 ++--
 .../firefox/manifest.json                       |  2 +-
 packages/react-devtools-inline/package.json     |  2 +-
 .../package.json                                |  2 +-
 packages/react-devtools/CHANGELOG.md            | 17 +++++++++++++++++
 packages/react-devtools/package.json            |  4 ++--
 8 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index d57fc10ff97ec..9017ff630310a 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index ecafb54ca6d34..780793b6d1e02 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.20.2",
-  "version_name": "4.20.2",
+  "version": "4.21.0",
+  "version_name": "4.21.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 6b813661e48d6..fa9b34cd2af61 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.20.2",
-  "version_name": "4.20.2",
+  "version": "4.21.0",
+  "version_name": "4.21.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 16f4e7821e476..2bd83fd65679e 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 7e013af63677b..b814eacd4d193 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 84fdf9d470fa2..a74b66fa1d55f 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 8f916003d79ff..95a1a65721a7c 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.21.0 (October 31, 2021)
+
+#### Features
+* Scheduling Profiler: Add marks for component effects (mount and unmount) ([@bvaughn](https://github.com/bvaughn) in [#22578](https://github.com/facebook/react/pull/22578))
+* Scheduling Profiler: De-emphasize React internal frames ([bvaughn](https://github.com/bvaughn) in [#22588](https://github.com/facebook/react/pull/22588))
+
+
+#### Bugfix
+* Revert logic for checking for duplicate installations of DevTools potentially causing issues loading Components tab ([@jstejada](https://github.com/jstejada) in [#22638](https://github.com/facebook/react/pull/22638))
+* Scheduling Profiler does not warn about long transitions ([@bvaughn](https://github.com/bvaughn) in [#22614](https://github.com/facebook/react/pull/22614))
+* Re-enable 'Reload and Start Profiling' for Microsoft Edge ([@eoandersson](https://github.com/eoandersson) in [#22631](https://github.com/facebook/react/pull/22631))
+
+
+#### Misc
+* DevTools supports ENV-injected version for better internal bug reports ([@bvaughn](https://github.com/bvaughn) in [#22635](https://github.com/facebook/react/pull/22635))
+* Fix typos ([@KonstHardy](https://github.com/KonstHardy) in [#22494](https://github.com/facebook/react/pull/22494))
+
 ## 4.20.2 (October 20, 2021)
 
 #### Bugfix
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 00240aa38200b..ca66824859ca4 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.20.2",
+    "react-devtools-core": "4.21.0",
     "update-notifier": "^2.1.0"
   }
 }

From 9db8713f9d08c1956939e33cc2da25c867748263 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 31 Oct 2021 21:01:39 -0400
Subject: [PATCH 071/109] Pin CI to Node 14 (#22665)

CI starting running Node 16, which breaks some of our tests because
the error message text for undefined property access has changed.

We should pin to Node 14 until we are able to update the messages.
---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8c847fc05f39e..843e2f5fba4a4 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,7 +2,7 @@ version: 2.1
 
 aliases:
   - &docker
-    - image: circleci/openjdk:8-jdk-node-browsers
+    - image: cimg/openjdk:17.0.0-node
 
   - &environment
     TZ: /usr/share/zoneinfo/America/Los_Angeles

From a0d991fe6587ad1cd1a97230f62f82c7cb6b9a40 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 00:39:51 -0400
Subject: [PATCH 072/109] Re-land #22292 (remove uMS from open source build)
 (#22664)

I had to revert #22292 because there are some internal callers of
useMutableSource that we haven't migrated yet. This removes
useMutableSource from the open source build but keeps it in the
internal one.
---
 .../ReactHooksInspectionIntegration-test.js   |  1 +
 .../src/ReactFiberHooks.new.js                | 13 ++++++++
 .../src/ReactFiberHooks.old.js                | 13 ++++++++
 .../useMutableSource-test.internal.js         | 31 +++++++++++++++++++
 .../useMutableSourceHydration-test.js         |  5 +++
 packages/react/index.experimental.js          |  1 -
 packages/react/index.stable.js                |  1 -
 packages/shared/ReactFeatureFlags.js          |  3 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  3 ++
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  3 ++
 .../shared/forks/ReactFeatureFlags.www.js     |  3 ++
 16 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 087d74d628724..3a6ac01f98161 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -1018,6 +1018,7 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
+  // @gate enableUseMutableSource
   it('should support composite useMutableSource hook', () => {
     const createMutableSource =
       React.createMutableSource || React.unstable_createMutableSource;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index c3b76549a22aa..732f7d71a7e71 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -31,6 +31,7 @@ import {
   enableStrictEffects,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -1052,6 +1053,10 @@ function useMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
 
   if (root === null) {
@@ -1213,6 +1218,10 @@ function mountMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = mountWorkInProgressHook();
   hook.memoizedState = ({
     refs: {
@@ -1230,6 +1239,10 @@ function updateMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = updateWorkInProgressHook();
   return useMutableSource(hook, source, getSnapshot, subscribe);
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 8bc1510deb455..b78f24e8b47f8 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -31,6 +31,7 @@ import {
   enableStrictEffects,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -1052,6 +1053,10 @@ function useMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
 
   if (root === null) {
@@ -1213,6 +1218,10 @@ function mountMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = mountWorkInProgressHook();
   hook.memoizedState = ({
     refs: {
@@ -1230,6 +1239,10 @@ function updateMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = updateWorkInProgressHook();
   return useMutableSource(hook, source, getSnapshot, subscribe);
 }
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index a6d99f9802084..11cabd6f3175a 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -141,6 +141,7 @@ describe('useMutableSource', () => {
 
   beforeEach(loadModules);
 
+  // @gate enableUseMutableSource
   it('should subscribe to a source and schedule updates when it changes', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -208,6 +209,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should restart work if a new source is mutated during render', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -263,6 +265,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should schedule an update if a new source is mutated between render and commit (subscription)', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -302,6 +305,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should unsubscribe and resubscribe if a new source is used', () => {
     const sourceA = createSource('a-one');
     const mutableSourceA = createMutableSource(
@@ -358,6 +362,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should unsubscribe and resubscribe if a new subscribe function is provided', () => {
     const source = createSource('a-one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -422,6 +427,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should re-use previously read snapshot value when reading is unsafe', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -484,6 +490,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should read from source on newly mounted subtree if no pending updates are scheduled for source', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -523,6 +530,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should throw and restart render if source and snapshot are unavailable during an update', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -586,6 +594,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should throw and restart render if source and snapshot are unavailable during a sync update', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -649,6 +658,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should only update components whose subscriptions fire', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -687,6 +697,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should detect tearing in part of the store not yet subscribed to', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -779,6 +790,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('does not schedule an update for subscriptions that fire with an unchanged snapshot', () => {
     const MockComponent = jest.fn(Component);
 
@@ -805,6 +817,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should throw and restart if getSnapshot changes between scheduled update and re-render', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -845,6 +858,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should recover from a mutation during yield when other work is scheduled', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -899,6 +913,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not throw if the new getSnapshot returns the same snapshot value', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -953,6 +968,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -992,6 +1008,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should still schedule an update if an eager selector throws after a mutation', () => {
     const source = createSource({
       friends: [
@@ -1058,6 +1075,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not warn about updates that fire between unmount and passive unsubscribe', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1094,6 +1112,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should support inline selectors and updates that are processed after selector change', async () => {
     const source = createSource({
       a: 'initial',
@@ -1138,6 +1157,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('Another update');
   });
 
+  // @gate enableUseMutableSource
   it('should clear the update queue when getSnapshot changes with pending lower priority updates', async () => {
     const source = createSource({
       a: 'initial',
@@ -1194,6 +1214,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('B: Update');
   });
 
+  // @gate enableUseMutableSource
   it('should clear the update queue when source changes with pending lower priority updates', async () => {
     const sourceA = createSource('initial');
     const sourceB = createSource('initial');
@@ -1238,6 +1259,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('B: Update');
   });
 
+  // @gate enableUseMutableSource
   it('should always treat reading as potentially unsafe when getSnapshot changes between renders', async () => {
     const source = createSource({
       a: 'foo',
@@ -1327,6 +1349,7 @@ describe('useMutableSource', () => {
     expect(Scheduler).toHaveYielded(['x: bar, y: bar']);
   });
 
+  // @gate enableUseMutableSource
   it('getSnapshot changes and then source is mutated in between paint and passive effect phase', async () => {
     const source = createSource({
       a: 'foo',
@@ -1385,6 +1408,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('baz');
   });
 
+  // @gate enableUseMutableSource
   it('getSnapshot changes and then source is mutated in between paint and passive effect phase, case 2', async () => {
     const source = createSource({
       a: 'a0',
@@ -1455,6 +1479,7 @@ describe('useMutableSource', () => {
     expect(root.getChildrenAsJSX()).toEqual('first: a1, second: a1');
   });
 
+  // @gate enableUseMutableSource
   it(
     'if source is mutated after initial read but before subscription is set ' +
       'up, should still entangle all pending mutations even if snapshot of ' +
@@ -1559,6 +1584,7 @@ describe('useMutableSource', () => {
     },
   );
 
+  // @gate enableUseMutableSource
   it('warns about functions being used as snapshot values', async () => {
     const source = createSource(() => 'a');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1586,6 +1612,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('a');
   });
 
+  // @gate enableUseMutableSource
   it('getSnapshot changes and then source is mutated during interleaved event', async () => {
     const {useEffect} = React;
 
@@ -1710,6 +1737,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not tear with newly mounted component when updates were scheduled at a lower priority', async () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1789,6 +1817,7 @@ describe('useMutableSource', () => {
 
   if (__DEV__) {
     describe('dev warnings', () => {
+      // @gate enableUseMutableSource
       it('should warn if the subscribe function does not return an unsubscribe function', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
@@ -1814,6 +1843,7 @@ describe('useMutableSource', () => {
         );
       });
 
+      // @gate enableUseMutableSource
       it('should error if multiple renderers of the same type use a mutable source at the same time', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
@@ -1894,6 +1924,7 @@ describe('useMutableSource', () => {
         });
       });
 
+      // @gate enableUseMutableSource
       it('should error if multiple renderers of the same type use a mutable source at the same time with mutation between', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 7f46d1cb00552..61ebbe45e90c1 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -144,6 +144,7 @@ describe('useMutableSourceHydration', () => {
     return <div>{`${label}:${snapshot}`}</div>;
   }
 
+  // @gate enableUseMutableSource
   it('should render and hydrate', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -180,6 +181,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(1);
   });
 
+  // @gate enableUseMutableSource
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -224,6 +226,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(1);
   });
 
+  // @gate enableUseMutableSource
   it('should detect a tear between hydrating components', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -282,6 +285,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(2);
   });
 
+  // @gate enableUseMutableSource
   it('should detect a tear between hydrating components reading from different parts of a source', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -371,6 +375,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate !enableSyncDefaultUpdates
+  // @gate enableUseMutableSource
   it('should detect a tear during a higher priority interruption', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 4b4fa89e01898..24fc9782595d4 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -46,7 +46,6 @@ export {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 3a0600d11a713..867980fa5389d 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -39,7 +39,6 @@ export {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index f5d34e2ff6539..112c2d10f2cbd 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -185,3 +185,6 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
+
+// Only enabled in www builds
+export const enableUseMutableSource = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 15a8c29f71799..b61bbcf15747c 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -74,6 +74,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 3c11070d6ecb3..7e24f2a0a2710 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -66,6 +66,7 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 4b0457c219587..bce24128a7911 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -66,6 +66,7 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 2c54c1fb77c20..02f063e58a822 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -65,6 +65,7 @@ export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 043ac7da254b9..7227c254dccbe 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -67,6 +67,9 @@ export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
+// Some www surfaces are still using this. Remove once they have been migrated.
+export const enableUseMutableSource = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 76af047ab6d4e..264127fc197ef 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -66,6 +66,7 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 9eefdc2cca773..87d7247d6eebe 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -67,6 +67,9 @@ export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
+// Some www surfaces are still using this. Remove once they have been migrated.
+export const enableUseMutableSource = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 0f1ce6eb1f9f7..e280e1ff9a6d0 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -102,6 +102,9 @@ export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
+// Some www surfaces are still using this. Remove once they have been migrated.
+export const enableUseMutableSource = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From ebf9ae8579230e7b1ed0b1d243e1cf802f56938b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 16:30:44 -0400
Subject: [PATCH 073/109] useId (#22644)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add useId to dispatcher

* Initial useId implementation

Ids are base 32 strings whose binary representation corresponds to the
position of a node in a tree.

Every time the tree forks into multiple children, we add additional bits
to the left of the sequence that represent the position of the child
within the current level of children.

    00101       00010001011010101
    ╰─┬─╯       ╰───────┬───────╯
  Fork 5 of 20       Parent id

The leading 0s are important. In the above example, you only need 3 bits
to represent slot 5. However, you need 5 bits to represent all the forks
at the current level, so we must account for the empty bits at the end.

For this same reason, slots are 1-indexed instead of 0-indexed.
Otherwise, the zeroth id at a level would be indistinguishable from
its parent.

If a node has only one child, and does not materialize an id (i.e. does
not contain a useId hook), then we don't need to allocate any space in
the sequence. It's treated as a transparent indirection. For example,
these two trees produce the same ids:

<>                          <>
  <Indirection>               <A />
    <A />                     <B />
  </Indirection>            </>
  <B />
</>

However, we cannot skip any materializes an id. Otherwise, a parent id
that does not fork would be indistinguishable from its child id. For
example, this tree does not fork, but the parent and child must have
different ids.

<Parent>
  <Child />
</Parent>

To handle this scenario, every time we materialize an id, we allocate a
new level with a single slot. You can think of this as a fork with only
one prong, or an array of children with length 1.

It's possible for the the size of the sequence to exceed 32 bits, the
max size for bitwise operations. When this happens, we make more room by
converting the right part of the id to a string and storing it in an
overflow variable. We use a base 32 string representation, because 32 is
the largest power of 2 that is supported by toString(). We want the base
to be large so that the resulting ids are compact, and we want the base
to be a power of 2 because every log2(base) bits corresponds to a single
character, i.e. every log2(32) = 5 bits. That means we can lop bits off
the end 5 at a time without affecting the final result.

* Incremental hydration

Stores the tree context on the dehydrated Suspense boundary's state
object so it resume where it left off.

* Add useId to react-debug-tools

* Add selective hydration test

Demonstrates that selective hydration works and ids are preserved even
after subsequent client updates.
---
 .../react-debug-tools/src/ReactDebugHooks.js  |  12 +
 .../ReactHooksInspectionIntegration-test.js   |  29 +-
 .../src/__tests__/ReactDOMUseId-test.js       | 515 ++++++++++++++++++
 .../src/server/ReactPartialRendererHooks.js   |   5 +
 .../src/ReactChildFiber.new.js                |  32 +-
 .../src/ReactChildFiber.old.js                |  32 +-
 .../src/ReactFiberBeginWork.new.js            |  24 +
 .../src/ReactFiberBeginWork.old.js            |  24 +
 .../src/ReactFiberCompleteWork.new.js         |   7 +-
 .../src/ReactFiberCompleteWork.old.js         |   7 +-
 .../react-reconciler/src/ReactFiberFlags.js   |  55 +-
 .../src/ReactFiberHooks.new.js                |  99 ++++
 .../src/ReactFiberHooks.old.js                |  99 ++++
 .../src/ReactFiberHydrationContext.new.js     |  10 +
 .../src/ReactFiberHydrationContext.old.js     |  10 +
 .../src/ReactFiberLane.new.js                 |  15 +-
 .../src/ReactFiberLane.old.js                 |  15 +-
 .../src/ReactFiberSuspenseComponent.new.js    |   3 +
 .../src/ReactFiberSuspenseComponent.old.js    |   3 +
 .../src/ReactFiberTreeContext.new.js          | 273 ++++++++++
 .../src/ReactFiberTreeContext.old.js          | 273 ++++++++++
 .../src/ReactFiberUnwindWork.new.js           |  11 +
 .../src/ReactFiberUnwindWork.old.js           |  11 +
 .../src/ReactInternalTypes.js                 |   2 +
 packages/react-reconciler/src/clz32.js        |  25 +
 packages/react-server/src/ReactFizzHooks.js   |  39 +-
 packages/react-server/src/ReactFizzServer.js  |  83 ++-
 .../react-server/src/ReactFizzTreeContext.js  | 168 ++++++
 .../react-server/src/ReactFlightServer.js     |   1 +
 .../src/ReactSuspenseTestUtils.js             |   1 +
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/index.stable.js                |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   5 +
 .../unstable-shared-subset.experimental.js    |   1 +
 38 files changed, 1819 insertions(+), 77 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMUseId-test.js
 create mode 100644 packages/react-reconciler/src/ReactFiberTreeContext.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberTreeContext.old.js
 create mode 100644 packages/react-reconciler/src/clz32.js
 create mode 100644 packages/react-server/src/ReactFizzTreeContext.js

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 957838ed58a9c..eed8c46df7d6d 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -341,6 +341,17 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
   return value;
 }
 
+function useId(): string {
+  const hook = nextHook();
+  const id = hook !== null ? hook.memoizedState : '';
+  hookLog.push({
+    primitive: 'Id',
+    stackError: new Error(),
+    value: id,
+  });
+  return id;
+}
+
 const Dispatcher: DispatcherType = {
   getCacheForType,
   readContext,
@@ -361,6 +372,7 @@ const Dispatcher: DispatcherType = {
   useSyncExternalStore,
   useDeferredValue,
   useOpaqueIdentifier,
+  useId,
 };
 
 // Inspect
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 3a6ac01f98161..d17a01a258277 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -628,7 +628,7 @@ describe('ReactHooksInspectionIntegration', () => {
   it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
     function Foo(props) {
       const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState(() => 'hello', []);
+      const [state] = React.useState('hello');
       return <div id={id}>{state}</div>;
     }
 
@@ -656,6 +656,33 @@ describe('ReactHooksInspectionIntegration', () => {
     });
   });
 
+  it('should support useId hook', () => {
+    function Foo(props) {
+      const id = React.unstable_useId();
+      const [state] = React.useState('hello');
+      return <div id={id}>{state}</div>;
+    }
+
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(tree.length).toEqual(2);
+
+    expect(tree[0].id).toEqual(0);
+    expect(tree[0].isStateEditable).toEqual(false);
+    expect(tree[0].name).toEqual('Id');
+    expect(String(tree[0].value).startsWith('r:')).toBe(true);
+
+    expect(tree[1]).toEqual({
+      id: 1,
+      isStateEditable: true,
+      name: 'State',
+      value: 'hello',
+      subHooks: [],
+    });
+  });
+
   describe('useDebugValue', () => {
     it('should support inspectable values for multiple custom hooks', () => {
       function useLabeledValue(label) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
new file mode 100644
index 0000000000000..b61e79fa670d6
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -0,0 +1,515 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+let JSDOM;
+let React;
+let ReactDOM;
+let Scheduler;
+let clientAct;
+let ReactDOMFizzServer;
+let Stream;
+let Suspense;
+let useId;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+
+describe('useId', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    clientAct = require('jest-react').act;
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+    Suspense = React.Suspense;
+    useId = React.unstable_useId;
+
+    // Test Environment
+    const jsdom = new JSDOM(
+      '<!DOCTYPE html><html><head></head><body><div id="container">',
+      {
+        runScripts: 'dangerously',
+      },
+    );
+    document = jsdom.window.document;
+    container = document.getElementById('container');
+
+    buffer = '';
+    hasErrored = false;
+
+    writable = new Stream.PassThrough();
+    writable.setEncoding('utf8');
+    writable.on('data', chunk => {
+      buffer += chunk;
+    });
+    writable.on('error', error => {
+      hasErrored = true;
+      fatalError = error;
+    });
+  });
+
+  async function serverAct(callback) {
+    await callback();
+    // Await one turn around the event loop.
+    // This assumes that we'll flush everything we have so far.
+    await new Promise(resolve => {
+      setImmediate(resolve);
+    });
+    if (hasErrored) {
+      throw fatalError;
+    }
+    // JSDOM doesn't support stream HTML parser so we need to give it a proper fragment.
+    // We also want to execute any scripts that are embedded.
+    // We assume that we have now received a proper fragment of HTML.
+    const bufferedContent = buffer;
+    buffer = '';
+    const fakeBody = document.createElement('body');
+    fakeBody.innerHTML = bufferedContent;
+    while (fakeBody.firstChild) {
+      const node = fakeBody.firstChild;
+      if (node.nodeName === 'SCRIPT') {
+        const script = document.createElement('script');
+        script.textContent = node.textContent;
+        fakeBody.removeChild(node);
+        container.appendChild(script);
+      } else {
+        container.appendChild(node);
+      }
+    }
+  }
+
+  function normalizeTreeIdForTesting(id) {
+    const [serverClientPrefix, base32, hookIndex] = id.split(':');
+    if (serverClientPrefix === 'r') {
+      // Client ids aren't stable. For testing purposes, strip out the counter.
+      return (
+        'CLIENT_GENERATED_ID' +
+        (hookIndex !== undefined ? ` (${hookIndex})` : '')
+      );
+    }
+    // Formats the tree id as a binary sequence, so it's easier to visualize
+    // the structure.
+    return (
+      parseInt(base32, 32).toString(2) +
+      (hookIndex !== undefined ? ` (${hookIndex})` : '')
+    );
+  }
+
+  function DivWithId({children}) {
+    const id = normalizeTreeIdForTesting(useId());
+    return <div id={id}>{children}</div>;
+  }
+
+  test('basic example', async () => {
+    function App() {
+      return (
+        <div>
+          <div>
+            <DivWithId />
+            <DivWithId />
+          </div>
+          <DivWithId />
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          <div>
+            <div
+              id="101"
+            />
+            <div
+              id="1001"
+            />
+          </div>
+          <div
+            id="10"
+          />
+        </div>
+      </div>
+    `);
+  });
+
+  test('indirections', async () => {
+    function App() {
+      // There are no forks in this tree, but the parent and the child should
+      // have different ids.
+      return (
+        <DivWithId>
+          <div>
+            <div>
+              <div>
+                <DivWithId />
+              </div>
+            </div>
+          </div>
+        </DivWithId>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="0"
+        >
+          <div>
+            <div>
+              <div>
+                <div
+                  id="1"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+  });
+
+  test('empty (null) children', async () => {
+    // We don't treat empty children different from non-empty ones, which means
+    // they get allocated a slot when generating ids. There's no inherent reason
+    // to do this; Fiber happens to allocate a fiber for null children that
+    // appear in a list, which is not ideal for performance. For the purposes
+    // of id generation, though, what matters is that Fizz and Fiber
+    // are consistent.
+    function App() {
+      return (
+        <>
+          {null}
+          <DivWithId />
+          {null}
+          <DivWithId />
+        </>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="10"
+        />
+        <div
+          id="100"
+        />
+      </div>
+    `);
+  });
+
+  test('large ids', async () => {
+    // The component in this test outputs a recursive tree of nodes with ids,
+    // where the underlying binary representation is an alternating series of 1s
+    // and 0s. In other words, they are all of the form 101010101.
+    //
+    // Because we use base 32 encoding, the resulting id should consist of
+    // alternating 'a' (01010) and 'l' (10101) characters, except for the the
+    // 'R:' prefix, and the first character after that, which may not correspond
+    // to a complete set of 5 bits.
+    //
+    // Example: R:clalalalalalalala...
+    //
+    // We can use this pattern to test large ids that exceed the bitwise
+    // safe range (32 bits). The algorithm should theoretically support ids
+    // of any size.
+
+    function Child({children}) {
+      const id = useId();
+      return <div id={id}>{children}</div>;
+    }
+
+    function App() {
+      let tree = <Child />;
+      for (let i = 0; i < 50; i++) {
+        tree = (
+          <>
+            <Child />
+            {tree}
+          </>
+        );
+      }
+      return tree;
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    const divs = container.querySelectorAll('div');
+
+    // Confirm that every id matches the expected pattern
+    for (let i = 0; i < divs.length; i++) {
+      // Example: R:clalalalalalalala...
+      expect(divs[i].id).toMatch(/^R:.(((al)*a?)((la)*l?))*$/);
+    }
+  });
+
+  test('multiple ids in a single component', async () => {
+    function App() {
+      const id1 = useId();
+      const id2 = useId();
+      const id3 = useId();
+      return `${id1}, ${id2}, ${id3}`;
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    // We append a suffix to the end of the id to distinguish them
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        R:0, R:0:1, R:0:2
+        <!-- -->
+      </div>
+    `);
+  });
+
+  test('basic incremental hydration', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <DivWithId label="A" />
+            <DivWithId label="B" />
+          </Suspense>
+          <DivWithId label="C" />
+        </div>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          <!--$-->
+          <div
+            id="101"
+          />
+          <div
+            id="1001"
+          />
+          <!--/$-->
+          <div
+            id="10"
+          />
+        </div>
+      </div>
+    `);
+  });
+
+  test('inserting/deleting siblings outside a dehydrated Suspense boundary', async () => {
+    const span = React.createRef(null);
+    function App({swap}) {
+      // Note: Using a dynamic array so these are treated as insertions and
+      // deletions instead of updates, because Fiber currently allocates a node
+      // even for empty children.
+      const children = [
+        <DivWithId key="A" />,
+        swap ? <DivWithId key="C" /> : <DivWithId key="B" />,
+        <DivWithId key="D" />,
+      ];
+      return (
+        <>
+          {children}
+          <Suspense key="boundary" fallback="Loading...">
+            <DivWithId />
+            <span ref={span} />
+          </Suspense>
+        </>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    const dehydratedSpan = container.getElementsByTagName('span')[0];
+    await clientAct(async () => {
+      const root = ReactDOM.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushUntilNextPaint([]);
+      expect(container).toMatchInlineSnapshot(`
+        <div
+          id="container"
+        >
+          <div
+            id="101"
+          />
+          <div
+            id="1001"
+          />
+          <div
+            id="1101"
+          />
+          <!--$-->
+          <div
+            id="110"
+          />
+          <span />
+          <!--/$-->
+        </div>
+      `);
+
+      // The inner boundary hasn't hydrated yet
+      expect(span.current).toBe(null);
+
+      // Swap B for C
+      root.render(<App swap={true} />);
+    });
+    // The swap should not have caused a mismatch.
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="101"
+        />
+        <div
+          id="CLIENT_GENERATED_ID"
+        />
+        <div
+          id="1101"
+        />
+        <!--$-->
+        <div
+          id="110"
+        />
+        <span />
+        <!--/$-->
+      </div>
+    `);
+    // Should have hydrated successfully
+    expect(span.current).toBe(dehydratedSpan);
+  });
+
+  test('inserting/deleting siblings inside a dehydrated Suspense boundary', async () => {
+    const span = React.createRef(null);
+    function App({swap}) {
+      // Note: Using a dynamic array so these are treated as insertions and
+      // deletions instead of updates, because Fiber currently allocates a node
+      // even for empty children.
+      const children = [
+        <DivWithId key="A" />,
+        swap ? <DivWithId key="C" /> : <DivWithId key="B" />,
+        <DivWithId key="D" />,
+      ];
+      return (
+        <Suspense key="boundary" fallback="Loading...">
+          {children}
+          <span ref={span} />
+        </Suspense>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    const dehydratedSpan = container.getElementsByTagName('span')[0];
+    await clientAct(async () => {
+      const root = ReactDOM.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushUntilNextPaint([]);
+      expect(container).toMatchInlineSnapshot(`
+        <div
+          id="container"
+        >
+          <!--$-->
+          <div
+            id="101"
+          />
+          <div
+            id="1001"
+          />
+          <div
+            id="1101"
+          />
+          <span />
+          <!--/$-->
+        </div>
+      `);
+
+      // The inner boundary hasn't hydrated yet
+      expect(span.current).toBe(null);
+
+      // Swap B for C
+      root.render(<App swap={true} />);
+    });
+    // The swap should not have caused a mismatch.
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <!--$-->
+        <div
+          id="101"
+        />
+        <div
+          id="CLIENT_GENERATED_ID"
+        />
+        <div
+          id="1101"
+        />
+        <span />
+        <!--/$-->
+      </div>
+    `);
+    // Should have hydrated successfully
+    expect(span.current).toBe(dehydratedSpan);
+  });
+});
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 168fd78f6103e..26f2dd00ee0c6 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -519,6 +519,10 @@ function useOpaqueIdentifier(): OpaqueIDType {
   );
 }
 
+function useId(): OpaqueIDType {
+  throw new Error('Not implemented.');
+}
+
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
   throw new Error('Not implemented.');
 }
@@ -549,6 +553,7 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
+  useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
   useSyncExternalStore,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 9071edc24f7a2..658b1f0e7b799 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -13,7 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {Placement, ChildDeletion} from './ReactFiberFlags';
+import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -40,6 +40,8 @@ import {
 import {emptyRefsObject} from './ReactFiberClassComponent.new';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.new';
 import {StrictLegacyMode} from './ReactTypeOfMode';
+import {getIsHydrating} from './ReactFiberHydrationContext.new';
+import {pushTreeFork} from './ReactFiberTreeContext.new';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
@@ -334,7 +336,9 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): number {
     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;
     }
     const current = newFiber.alternate;
@@ -823,6 +827,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (newIdx === newChildren.length) {
       // We've reached the end of the new children. We can delete the rest.
       deleteRemainingChildren(returnFiber, oldFiber);
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -843,6 +851,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -886,6 +898,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
@@ -1013,6 +1029,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (step.done) {
       // We've reached the end of the new children. We can delete the rest.
       deleteRemainingChildren(returnFiber, oldFiber);
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -1033,6 +1053,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -1076,6 +1100,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 0128ca8f36f3d..0ef3b301e95a7 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -13,7 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {Placement, ChildDeletion} from './ReactFiberFlags';
+import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -40,6 +40,8 @@ import {
 import {emptyRefsObject} from './ReactFiberClassComponent.old';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.old';
 import {StrictLegacyMode} from './ReactTypeOfMode';
+import {getIsHydrating} from './ReactFiberHydrationContext.old';
+import {pushTreeFork} from './ReactFiberTreeContext.old';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
@@ -334,7 +336,9 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): number {
     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;
     }
     const current = newFiber.alternate;
@@ -823,6 +827,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (newIdx === newChildren.length) {
       // We've reached the end of the new children. We can delete the rest.
       deleteRemainingChildren(returnFiber, oldFiber);
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -843,6 +851,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -886,6 +898,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
@@ -1013,6 +1029,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (step.done) {
       // We've reached the end of the new children. We can delete the rest.
       deleteRemainingChildren(returnFiber, oldFiber);
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -1033,6 +1053,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -1076,6 +1100,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4fe648bc3e767..653ee9e1b4ea7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -186,6 +186,7 @@ import {
   invalidateContextProvider,
 } from './ReactFiberContext.new';
 import {
+  getIsHydrating,
   enterHydrationState,
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
@@ -235,6 +236,11 @@ import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
+import {
+  getForksAtLevel,
+  isForkedChild,
+  pushTreeId,
+} from './ReactFiberTreeContext.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -1757,6 +1763,7 @@ function mountIndeterminateComponent(
         }
       }
     }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
@@ -1845,6 +1852,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
 
 const SUSPENDED_MARKER: SuspenseState = {
   dehydrated: null,
+  treeContext: null,
   retryLane: NoLane,
 };
 
@@ -2693,6 +2701,7 @@ function updateDehydratedSuspenseComponent(
     reenterHydrationStateFromDehydratedSuspenseInstance(
       workInProgress,
       suspenseInstance,
+      suspenseState.treeContext,
     );
     const nextProps = workInProgress.pendingProps;
     const primaryChildren = nextProps.children;
@@ -3675,6 +3684,21 @@ function beginWork(
     }
   } else {
     didReceiveUpdate = false;
+
+    if (getIsHydrating() && isForkedChild(workInProgress)) {
+      // Check if this child belongs to a list of muliple children in
+      // its parent.
+      //
+      // In a true multi-threaded implementation, we would render children on
+      // parallel threads. This would represent the beginning of a new render
+      // thread for this subtree.
+      //
+      // We only use this for id generation during hydration, which is why the
+      // logic is located in this special branch.
+      const slotIndex = workInProgress.index;
+      const numberOfForks = getForksAtLevel(workInProgress);
+      pushTreeId(workInProgress, numberOfForks, slotIndex);
+    }
   }
 
   // Before entering the begin phase, clear pending update priority.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index f116897a8661b..9833ef481af70 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -186,6 +186,7 @@ import {
   invalidateContextProvider,
 } from './ReactFiberContext.old';
 import {
+  getIsHydrating,
   enterHydrationState,
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
@@ -235,6 +236,11 @@ import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
+import {
+  getForksAtLevel,
+  isForkedChild,
+  pushTreeId,
+} from './ReactFiberTreeContext.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -1757,6 +1763,7 @@ function mountIndeterminateComponent(
         }
       }
     }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
@@ -1845,6 +1852,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
 
 const SUSPENDED_MARKER: SuspenseState = {
   dehydrated: null,
+  treeContext: null,
   retryLane: NoLane,
 };
 
@@ -2693,6 +2701,7 @@ function updateDehydratedSuspenseComponent(
     reenterHydrationStateFromDehydratedSuspenseInstance(
       workInProgress,
       suspenseInstance,
+      suspenseState.treeContext,
     );
     const nextProps = workInProgress.pendingProps;
     const primaryChildren = nextProps.children;
@@ -3675,6 +3684,21 @@ function beginWork(
     }
   } else {
     didReceiveUpdate = false;
+
+    if (getIsHydrating() && isForkedChild(workInProgress)) {
+      // Check if this child belongs to a list of muliple children in
+      // its parent.
+      //
+      // In a true multi-threaded implementation, we would render children on
+      // parallel threads. This would represent the beginning of a new render
+      // thread for this subtree.
+      //
+      // We only use this for id generation during hydration, which is why the
+      // logic is located in this special branch.
+      const slotIndex = workInProgress.index;
+      const numberOfForks = getForksAtLevel(workInProgress);
+      pushTreeId(workInProgress, numberOfForks, slotIndex);
+    }
   }
 
   // Before entering the begin phase, clear pending update priority.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 20a7fc52db13a..feb38f00461a0 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -155,6 +155,7 @@ import {
   popRootCachePool,
   popCachePool,
 } from './ReactFiberCacheComponent.new';
+import {popTreeContext} from './ReactFiberTreeContext.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -822,7 +823,11 @@ function completeWork(
   renderLanes: Lanes,
 ): Fiber | null {
   const 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:
     case LazyComponent:
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 305359aef206e..ea4d71e8ba371 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -155,6 +155,7 @@ import {
   popRootCachePool,
   popCachePool,
 } from './ReactFiberCacheComponent.old';
+import {popTreeContext} from './ReactFiberTreeContext.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -822,7 +823,11 @@ function completeWork(
   renderLanes: Lanes,
 ): Fiber | null {
   const 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:
     case LazyComponent:
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index a82278222bf0a..805c4bed918e9 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,54 +12,55 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b0000000000000000000000000;
-export const PerformedWork = /*                */ 0b0000000000000000000000001;
+export const NoFlags = /*                      */ 0b00000000000000000000000000;
+export const PerformedWork = /*                */ 0b00000000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b0000000000000000000000010;
-export const Update = /*                       */ 0b0000000000000000000000100;
+export const Placement = /*                    */ 0b00000000000000000000000010;
+export const Update = /*                       */ 0b00000000000000000000000100;
 export const PlacementAndUpdate = /*           */ Placement | Update;
-export const Deletion = /*                     */ 0b0000000000000000000001000;
-export const ChildDeletion = /*                */ 0b0000000000000000000010000;
-export const ContentReset = /*                 */ 0b0000000000000000000100000;
-export const Callback = /*                     */ 0b0000000000000000001000000;
-export const DidCapture = /*                   */ 0b0000000000000000010000000;
-export const ForceClientRender = /*            */ 0b0000000000000000100000000;
-export const Ref = /*                          */ 0b0000000000000001000000000;
-export const Snapshot = /*                     */ 0b0000000000000010000000000;
-export const Passive = /*                      */ 0b0000000000000100000000000;
-export const Hydrating = /*                    */ 0b0000000000001000000000000;
+export const Deletion = /*                     */ 0b00000000000000000000001000;
+export const ChildDeletion = /*                */ 0b00000000000000000000010000;
+export const ContentReset = /*                 */ 0b00000000000000000000100000;
+export const Callback = /*                     */ 0b00000000000000000001000000;
+export const DidCapture = /*                   */ 0b00000000000000000010000000;
+export const ForceClientRender = /*            */ 0b00000000000000000100000000;
+export const Ref = /*                          */ 0b00000000000000001000000000;
+export const Snapshot = /*                     */ 0b00000000000000010000000000;
+export const Passive = /*                      */ 0b00000000000000100000000000;
+export const Hydrating = /*                    */ 0b00000000000001000000000000;
 export const HydratingAndUpdate = /*           */ Hydrating | Update;
-export const Visibility = /*                   */ 0b0000000000010000000000000;
-export const StoreConsistency = /*             */ 0b0000000000100000000000000;
+export const Visibility = /*                   */ 0b00000000000010000000000000;
+export const StoreConsistency = /*             */ 0b00000000000100000000000000;
 
 export const LifecycleEffectMask =
   Passive | Update | Callback | Ref | Snapshot | StoreConsistency;
 
 // Union of all commit flags (flags with the lifetime of a particular commit)
-export const HostEffectMask = /*               */ 0b0000000000111111111111111;
+export const HostEffectMask = /*               */ 0b00000000000111111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b0000000001000000000000000;
-export const ShouldCapture = /*                */ 0b0000000010000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b0000000100000000000000000;
-export const DidPropagateContext = /*          */ 0b0000001000000000000000000;
-export const NeedsPropagation = /*             */ 0b0000010000000000000000000;
+export const Incomplete = /*                   */ 0b00000000001000000000000000;
+export const ShouldCapture = /*                */ 0b00000000010000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b00000000100000000000000000;
+export const DidPropagateContext = /*          */ 0b00000001000000000000000000;
+export const NeedsPropagation = /*             */ 0b00000010000000000000000000;
+export const Forked = /*                       */ 0b00000100000000000000000000;
 
 // Static tags describe aspects of a fiber that are not specific to a render,
 // e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
 // This enables us to defer more work in the unmount case,
 // since we can defer traversing the tree during layout to look for Passive effects,
 // and instead rely on the static flag as a signal that there may be cleanup work.
-export const RefStatic = /*                    */ 0b0000100000000000000000000;
-export const LayoutStatic = /*                 */ 0b0001000000000000000000000;
-export const PassiveStatic = /*                */ 0b0010000000000000000000000;
+export const RefStatic = /*                    */ 0b00001000000000000000000000;
+export const LayoutStatic = /*                 */ 0b00010000000000000000000000;
+export const PassiveStatic = /*                */ 0b00100000000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b0100000000000000000000000;
-export const MountPassiveDev = /*              */ 0b1000000000000000000000000;
+export const MountLayoutDev = /*               */ 0b01000000000000000000000000;
+export const MountPassiveDev = /*              */ 0b10000000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 732f7d71a7e71..a1d7009a85a43 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -117,6 +117,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -203,6 +204,12 @@ let didScheduleRenderPhaseUpdate: boolean = false;
 // TODO: Maybe there's some way to consolidate this with
 // `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.
 let didScheduleRenderPhaseUpdateDuringThisPass: boolean = false;
+// Counts the number of useId hooks in this component.
+let localIdCounter: number = 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.
+let globalClientIdCounter: number = 0;
 
 const RE_RENDER_LIMIT = 25;
 
@@ -396,6 +403,7 @@ export function renderWithHooks<Props, SecondArg>(
   // 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.
@@ -543,6 +551,21 @@ export function renderWithHooks<Props, SecondArg>(
     }
   }
 
+  if (localIdCounter !== 0) {
+    localIdCounter = 0;
+    if (getIsHydrating()) {
+      // This component materialized an id. This will affect any ids that appear
+      // in its children.
+      const returnFiber = workInProgress.return;
+      if (returnFiber !== null) {
+        const numberOfForks = 1;
+        const slotIndex = 0;
+        pushTreeFork(workInProgress, numberOfForks);
+        pushTreeId(workInProgress, numberOfForks, slotIndex);
+      }
+    }
+  }
+
   return children;
 }
 
@@ -612,6 +635,7 @@ export function resetHooksAfterThrow(): void {
   }
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
 }
 
 function mountWorkInProgressHook(): Hook {
@@ -2109,6 +2133,39 @@ function rerenderOpaqueIdentifier(): OpaqueIDType | void {
   return id;
 }
 
+function mountId(): string {
+  const hook = mountWorkInProgressHook();
+
+  let id;
+  if (getIsHydrating()) {
+    const treeId = getTreeId();
+
+    // Use a captial R prefix for server-generated ids.
+    id = 'R:' + treeId;
+
+    // Unless this is the first id at this level, append a number at the end
+    // that represents the position of this useId hook among all the useId
+    // hooks for this fiber.
+    const localId = localIdCounter++;
+    if (localId > 0) {
+      id += ':' + localId.toString(32);
+    }
+  } else {
+    // Use a lowercase r prefix for client-generated ids.
+    const globalClientId = globalClientIdCounter++;
+    id = 'r:' + globalClientId.toString(32);
+  }
+
+  hook.memoizedState = id;
+  return id;
+}
+
+function updateId(): string {
+  const hook = updateWorkInProgressHook();
+  const id: string = hook.memoizedState;
+  return id;
+}
+
 function mountRefresh() {
   const hook = mountWorkInProgressHook();
   const refresh = (hook.memoizedState = refreshCache.bind(
@@ -2425,6 +2482,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
+  useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2453,6 +2511,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
+  useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2481,6 +2540,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2509,6 +2569,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2680,6 +2741,11 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2822,6 +2888,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2964,6 +3035,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3107,6 +3183,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3266,6 +3347,12 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3425,6 +3512,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3585,6 +3678,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index b78f24e8b47f8..167698271dbac 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -117,6 +117,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -203,6 +204,12 @@ let didScheduleRenderPhaseUpdate: boolean = false;
 // TODO: Maybe there's some way to consolidate this with
 // `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.
 let didScheduleRenderPhaseUpdateDuringThisPass: boolean = false;
+// Counts the number of useId hooks in this component.
+let localIdCounter: number = 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.
+let globalClientIdCounter: number = 0;
 
 const RE_RENDER_LIMIT = 25;
 
@@ -396,6 +403,7 @@ export function renderWithHooks<Props, SecondArg>(
   // 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.
@@ -543,6 +551,21 @@ export function renderWithHooks<Props, SecondArg>(
     }
   }
 
+  if (localIdCounter !== 0) {
+    localIdCounter = 0;
+    if (getIsHydrating()) {
+      // This component materialized an id. This will affect any ids that appear
+      // in its children.
+      const returnFiber = workInProgress.return;
+      if (returnFiber !== null) {
+        const numberOfForks = 1;
+        const slotIndex = 0;
+        pushTreeFork(workInProgress, numberOfForks);
+        pushTreeId(workInProgress, numberOfForks, slotIndex);
+      }
+    }
+  }
+
   return children;
 }
 
@@ -612,6 +635,7 @@ export function resetHooksAfterThrow(): void {
   }
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
 }
 
 function mountWorkInProgressHook(): Hook {
@@ -2109,6 +2133,39 @@ function rerenderOpaqueIdentifier(): OpaqueIDType | void {
   return id;
 }
 
+function mountId(): string {
+  const hook = mountWorkInProgressHook();
+
+  let id;
+  if (getIsHydrating()) {
+    const treeId = getTreeId();
+
+    // Use a captial R prefix for server-generated ids.
+    id = 'R:' + treeId;
+
+    // Unless this is the first id at this level, append a number at the end
+    // that represents the position of this useId hook among all the useId
+    // hooks for this fiber.
+    const localId = localIdCounter++;
+    if (localId > 0) {
+      id += ':' + localId.toString(32);
+    }
+  } else {
+    // Use a lowercase r prefix for client-generated ids.
+    const globalClientId = globalClientIdCounter++;
+    id = 'r:' + globalClientId.toString(32);
+  }
+
+  hook.memoizedState = id;
+  return id;
+}
+
+function updateId(): string {
+  const hook = updateWorkInProgressHook();
+  const id: string = hook.memoizedState;
+  return id;
+}
+
 function mountRefresh() {
   const hook = mountWorkInProgressHook();
   const refresh = (hook.memoizedState = refreshCache.bind(
@@ -2425,6 +2482,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
+  useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2453,6 +2511,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
+  useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2481,6 +2540,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2509,6 +2569,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2680,6 +2741,11 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2822,6 +2888,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2964,6 +3035,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3107,6 +3183,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3266,6 +3347,12 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3425,6 +3512,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3585,6 +3678,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 7275f1663cad8..eabc5e43116bb 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -17,6 +17,7 @@ import type {
   HostContext,
 } from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
+import type {TreeContext} from './ReactFiberTreeContext.new';
 
 import {
   HostComponent,
@@ -62,6 +63,10 @@ import {
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.new';
+import {
+  getSuspendedTreeContext,
+  restoreSuspendedTreeContext,
+} from './ReactFiberTreeContext.new';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -96,6 +101,7 @@ function enterHydrationState(fiber: Fiber): boolean {
 function reenterHydrationStateFromDehydratedSuspenseInstance(
   fiber: Fiber,
   suspenseInstance: SuspenseInstance,
+  treeContext: TreeContext | null,
 ): boolean {
   if (!supportsHydration) {
     return false;
@@ -105,6 +111,9 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  if (treeContext !== null) {
+    restoreSuspendedTreeContext(fiber, treeContext);
+  }
   return true;
 }
 
@@ -287,6 +296,7 @@ function tryHydrate(fiber, nextInstance) {
         if (suspenseInstance !== null) {
           const suspenseState: SuspenseState = {
             dehydrated: suspenseInstance,
+            treeContext: getSuspendedTreeContext(),
             retryLane: OffscreenLane,
           };
           fiber.memoizedState = suspenseState;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 654de3f9a2894..48e60581e0f28 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -17,6 +17,7 @@ import type {
   HostContext,
 } from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
+import type {TreeContext} from './ReactFiberTreeContext.old';
 
 import {
   HostComponent,
@@ -62,6 +63,10 @@ import {
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.old';
+import {
+  getSuspendedTreeContext,
+  restoreSuspendedTreeContext,
+} from './ReactFiberTreeContext.old';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -96,6 +101,7 @@ function enterHydrationState(fiber: Fiber): boolean {
 function reenterHydrationStateFromDehydratedSuspenseInstance(
   fiber: Fiber,
   suspenseInstance: SuspenseInstance,
+  treeContext: TreeContext | null,
 ): boolean {
   if (!supportsHydration) {
     return false;
@@ -105,6 +111,9 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  if (treeContext !== null) {
+    restoreSuspendedTreeContext(fiber, treeContext);
+  }
   return true;
 }
 
@@ -287,6 +296,7 @@ function tryHydrate(fiber, nextInstance) {
         if (suspenseInstance !== null) {
           const suspenseState: SuspenseState = {
             dehydrated: suspenseInstance,
+            treeContext: getSuspendedTreeContext(),
             retryLane: OffscreenLane,
           };
           fiber.memoizedState = suspenseState;
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index c1f34e1052fc4..7e1461c7a7226 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
+import {clz32} from './clz32';
 
 // Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
@@ -791,17 +792,3 @@ export function movePendingFibersToMemoized(root: FiberRoot, lanes: Lanes) {
     lanes &= ~lane;
   }
 }
-
-const 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
-const log = Math.log;
-const LN2 = Math.LN2;
-function clz32Fallback(lanes: Lanes | Lane) {
-  if (lanes === 0) {
-    return 32;
-  }
-  return (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index c81191f6a07e5..6b4be15e649f1 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
+import {clz32} from './clz32';
 
 // Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
@@ -791,17 +792,3 @@ export function movePendingFibersToMemoized(root: FiberRoot, lanes: Lanes) {
     lanes &= ~lane;
   }
 }
-
-const 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
-const log = Math.log;
-const LN2 = Math.LN2;
-function clz32Fallback(lanes: Lanes | Lane) {
-  if (lanes === 0) {
-    return 32;
-  }
-  return (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 5ad7ae650249a..9dbaf7fb76efd 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -11,6 +11,8 @@ import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.new';
+import type {TreeContext} from './ReactFiberTreeContext.new';
+
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -40,6 +42,7 @@ export type SuspenseState = {|
   // here to indicate that it is dehydrated (flag) and for quick access
   // to check things like isSuspenseInstancePending.
   dehydrated: null | SuspenseInstance,
+  treeContext: null | TreeContext,
   // Represents the lane we should attempt to hydrate a dehydrated boundary at.
   // OffscreenLane is the default for dehydrated boundaries.
   // NoLane is the default for normal boundaries, which turns into "normal" pri.
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index 51bef1df3a568..726f0ca52005f 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -11,6 +11,8 @@ import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.old';
+import type {TreeContext} from './ReactFiberTreeContext.old';
+
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -40,6 +42,7 @@ export type SuspenseState = {|
   // here to indicate that it is dehydrated (flag) and for quick access
   // to check things like isSuspenseInstancePending.
   dehydrated: null | SuspenseInstance,
+  treeContext: null | TreeContext,
   // Represents the lane we should attempt to hydrate a dehydrated boundary at.
   // OffscreenLane is the default for dehydrated boundaries.
   // NoLane is the default for normal boundaries, which turns into "normal" pri.
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
new file mode 100644
index 0000000000000..0725ba577e647
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Ids are base 32 strings whose binary representation corresponds to the
+// position of a node in a tree.
+
+// Every time the tree forks into multiple children, we add additional bits to
+// the left of the sequence that represent the position of the child within the
+// current level of children.
+//
+//      00101       00010001011010101
+//      ╰─┬─╯       ╰───────┬───────╯
+//   Fork 5 of 20       Parent id
+//
+// The leading 0s are important. In the above example, you only need 3 bits to
+// represent slot 5. However, you need 5 bits to represent all the forks at
+// the current level, so we must account for the empty bits at the end.
+//
+// For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
+// the zeroth id at a level would be indistinguishable from its parent.
+//
+// If a node has only one child, and does not materialize an id (i.e. does not
+// contain a useId hook), then we don't need to allocate any space in the
+// sequence. It's treated as a transparent indirection. For example, these two
+// trees produce the same ids:
+//
+// <>                          <>
+//   <Indirection>               <A />
+//     <A />                     <B />
+//   </Indirection>            </>
+//   <B />
+// </>
+//
+// However, we cannot skip any node that materializes an id. Otherwise, a parent
+// id that does not fork would be indistinguishable from its child id. For
+// example, this tree does not fork, but the parent and child must have
+// different ids.
+//
+// <Parent>
+//   <Child />
+// </Parent>
+//
+// To handle this scenario, every time we materialize an id, we allocate a
+// new level with a single slot. You can think of this as a fork with only one
+// prong, or an array of children with length 1.
+//
+// It's possible for the the size of the sequence to exceed 32 bits, the max
+// size for bitwise operations. When this happens, we make more room by
+// converting the right part of the id to a string and storing it in an overflow
+// variable. We use a base 32 string representation, because 32 is the largest
+// power of 2 that is supported by toString(). We want the base to be large so
+// that the resulting ids are compact, and we want the base to be a power of 2
+// because every log2(base) bits corresponds to a single character, i.e. every
+// log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
+// affecting the final result.
+
+import {getIsHydrating} from './ReactFiberHydrationContext.new';
+import {clz32} from './clz32';
+import {Forked, NoFlags} from './ReactFiberFlags';
+
+export type TreeContext = {
+  id: number,
+  overflow: string,
+};
+
+// 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.
+const forkStack: Array<any> = [];
+let forkStackIndex: number = 0;
+let treeForkProvider: Fiber | null = null;
+let treeForkCount: number = 0;
+
+const idStack: Array<any> = [];
+let idStackIndex: number = 0;
+let treeContextProvider: Fiber | null = null;
+let treeContextId: number = 1;
+let treeContextOverflow: string = '';
+
+export function isForkedChild(workInProgress: Fiber): boolean {
+  warnIfNotHydrating();
+  return (workInProgress.flags & Forked) !== NoFlags;
+}
+
+export function getForksAtLevel(workInProgress: Fiber): number {
+  warnIfNotHydrating();
+  return treeForkCount;
+}
+
+export function getTreeId(): string {
+  const overflow = treeContextOverflow;
+  const idWithLeadingBit = treeContextId;
+  const id = idWithLeadingBit & ~getLeadingBit(idWithLeadingBit);
+  return id.toString(32) + overflow;
+}
+
+export function pushTreeFork(
+  workInProgress: Fiber,
+  totalChildren: number,
+): void {
+  // This is called right after we reconcile an array (or iterator) of child
+  // fibers, because that's the only place where we know how many children in
+  // the whole set without doing extra work later, or storing addtional
+  // information on the fiber.
+  //
+  // That's why this function is separate from pushTreeId — it's called during
+  // the render phase of the fork parent, not the child, which is where we push
+  // the other context values.
+  //
+  // In the Fizz implementation this is much simpler because the child is
+  // rendered in the same callstack as the parent.
+  //
+  // It might be better to just add a `forks` field to the Fiber type. It would
+  // make this module simpler.
+
+  warnIfNotHydrating();
+
+  forkStack[forkStackIndex++] = treeForkCount;
+  forkStack[forkStackIndex++] = treeForkProvider;
+
+  treeForkProvider = workInProgress;
+  treeForkCount = totalChildren;
+}
+
+export function pushTreeId(
+  workInProgress: Fiber,
+  totalChildren: number,
+  index: number,
+) {
+  warnIfNotHydrating();
+
+  idStack[idStackIndex++] = treeContextId;
+  idStack[idStackIndex++] = treeContextOverflow;
+  idStack[idStackIndex++] = treeContextProvider;
+
+  treeContextProvider = workInProgress;
+
+  const baseIdWithLeadingBit = treeContextId;
+  const baseOverflow = treeContextOverflow;
+
+  // The leftmost 1 marks the end of the sequence, non-inclusive. It's not part
+  // of the id; we use it to account for leading 0s.
+  const baseLength = getBitLength(baseIdWithLeadingBit) - 1;
+  const baseId = baseIdWithLeadingBit & ~(1 << baseLength);
+
+  const slot = index + 1;
+  const length = getBitLength(totalChildren) + baseLength;
+
+  // 30 is the max length we can store without overflowing, taking into
+  // consideration the leading 1 we use to mark the end of the sequence.
+  if (length > 30) {
+    // We overflowed the bitwise-safe range. Fall back to slower algorithm.
+    // This branch assumes the length of the base id is greater than 5; it won't
+    // work for smaller ids, because you need 5 bits per character.
+    //
+    // We encode the id in multiple steps: first the base id, then the
+    // remaining digits.
+    //
+    // Each 5 bit sequence corresponds to a single base 32 character. So for
+    // example, if the current id is 23 bits long, we can convert 20 of those
+    // bits into a string of 4 characters, with 3 bits left over.
+    //
+    // First calculate how many bits in the base id represent a complete
+    // sequence of characters.
+    const numberOfOverflowBits = baseLength - (baseLength % 5);
+
+    // Then create a bitmask that selects only those bits.
+    const newOverflowBits = (1 << numberOfOverflowBits) - 1;
+
+    // Select the bits, and convert them to a base 32 string.
+    const newOverflow = (baseId & newOverflowBits).toString(32);
+
+    // Now we can remove those bits from the base id.
+    const restOfBaseId = baseId >> numberOfOverflowBits;
+    const restOfBaseLength = baseLength - numberOfOverflowBits;
+
+    // Finally, encode the rest of the bits using the normal algorithm. Because
+    // we made more room, this time it won't overflow.
+    const restOfLength = getBitLength(totalChildren) + restOfBaseLength;
+    const restOfNewBits = slot << restOfBaseLength;
+    const id = restOfNewBits | restOfBaseId;
+    const overflow = newOverflow + baseOverflow;
+
+    treeContextId = (1 << restOfLength) | id;
+    treeContextOverflow = overflow;
+  } else {
+    // Normal path
+    const newBits = slot << baseLength;
+    const id = newBits | baseId;
+    const overflow = baseOverflow;
+
+    treeContextId = (1 << length) | id;
+    treeContextOverflow = overflow;
+  }
+}
+
+function getBitLength(number: number): number {
+  return 32 - clz32(number);
+}
+
+function getLeadingBit(id: number) {
+  return 1 << (getBitLength(id) - 1);
+}
+
+export function popTreeContext(workInProgress: Fiber) {
+  // 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;
+  }
+}
+
+export function getSuspendedTreeContext(): TreeContext | null {
+  warnIfNotHydrating();
+  if (treeContextProvider !== null) {
+    return {
+      id: treeContextId,
+      overflow: treeContextOverflow,
+    };
+  } else {
+    return null;
+  }
+}
+
+export function restoreSuspendedTreeContext(
+  workInProgress: Fiber,
+  suspendedContext: TreeContext,
+) {
+  warnIfNotHydrating();
+
+  idStack[idStackIndex++] = treeContextId;
+  idStack[idStackIndex++] = treeContextOverflow;
+  idStack[idStackIndex++] = treeContextProvider;
+
+  treeContextId = suspendedContext.id;
+  treeContextOverflow = suspendedContext.overflow;
+  treeContextProvider = workInProgress;
+}
+
+function warnIfNotHydrating() {
+  if (__DEV__) {
+    if (!getIsHydrating()) {
+      console.error(
+        'Expected to be hydrating. This is a bug in React. Please file ' +
+          'an issue.',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
new file mode 100644
index 0000000000000..a4ba3c3ddb931
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Ids are base 32 strings whose binary representation corresponds to the
+// position of a node in a tree.
+
+// Every time the tree forks into multiple children, we add additional bits to
+// the left of the sequence that represent the position of the child within the
+// current level of children.
+//
+//      00101       00010001011010101
+//      ╰─┬─╯       ╰───────┬───────╯
+//   Fork 5 of 20       Parent id
+//
+// The leading 0s are important. In the above example, you only need 3 bits to
+// represent slot 5. However, you need 5 bits to represent all the forks at
+// the current level, so we must account for the empty bits at the end.
+//
+// For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
+// the zeroth id at a level would be indistinguishable from its parent.
+//
+// If a node has only one child, and does not materialize an id (i.e. does not
+// contain a useId hook), then we don't need to allocate any space in the
+// sequence. It's treated as a transparent indirection. For example, these two
+// trees produce the same ids:
+//
+// <>                          <>
+//   <Indirection>               <A />
+//     <A />                     <B />
+//   </Indirection>            </>
+//   <B />
+// </>
+//
+// However, we cannot skip any node that materializes an id. Otherwise, a parent
+// id that does not fork would be indistinguishable from its child id. For
+// example, this tree does not fork, but the parent and child must have
+// different ids.
+//
+// <Parent>
+//   <Child />
+// </Parent>
+//
+// To handle this scenario, every time we materialize an id, we allocate a
+// new level with a single slot. You can think of this as a fork with only one
+// prong, or an array of children with length 1.
+//
+// It's possible for the the size of the sequence to exceed 32 bits, the max
+// size for bitwise operations. When this happens, we make more room by
+// converting the right part of the id to a string and storing it in an overflow
+// variable. We use a base 32 string representation, because 32 is the largest
+// power of 2 that is supported by toString(). We want the base to be large so
+// that the resulting ids are compact, and we want the base to be a power of 2
+// because every log2(base) bits corresponds to a single character, i.e. every
+// log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
+// affecting the final result.
+
+import {getIsHydrating} from './ReactFiberHydrationContext.old';
+import {clz32} from './clz32';
+import {Forked, NoFlags} from './ReactFiberFlags';
+
+export type TreeContext = {
+  id: number,
+  overflow: string,
+};
+
+// 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.
+const forkStack: Array<any> = [];
+let forkStackIndex: number = 0;
+let treeForkProvider: Fiber | null = null;
+let treeForkCount: number = 0;
+
+const idStack: Array<any> = [];
+let idStackIndex: number = 0;
+let treeContextProvider: Fiber | null = null;
+let treeContextId: number = 1;
+let treeContextOverflow: string = '';
+
+export function isForkedChild(workInProgress: Fiber): boolean {
+  warnIfNotHydrating();
+  return (workInProgress.flags & Forked) !== NoFlags;
+}
+
+export function getForksAtLevel(workInProgress: Fiber): number {
+  warnIfNotHydrating();
+  return treeForkCount;
+}
+
+export function getTreeId(): string {
+  const overflow = treeContextOverflow;
+  const idWithLeadingBit = treeContextId;
+  const id = idWithLeadingBit & ~getLeadingBit(idWithLeadingBit);
+  return id.toString(32) + overflow;
+}
+
+export function pushTreeFork(
+  workInProgress: Fiber,
+  totalChildren: number,
+): void {
+  // This is called right after we reconcile an array (or iterator) of child
+  // fibers, because that's the only place where we know how many children in
+  // the whole set without doing extra work later, or storing addtional
+  // information on the fiber.
+  //
+  // That's why this function is separate from pushTreeId — it's called during
+  // the render phase of the fork parent, not the child, which is where we push
+  // the other context values.
+  //
+  // In the Fizz implementation this is much simpler because the child is
+  // rendered in the same callstack as the parent.
+  //
+  // It might be better to just add a `forks` field to the Fiber type. It would
+  // make this module simpler.
+
+  warnIfNotHydrating();
+
+  forkStack[forkStackIndex++] = treeForkCount;
+  forkStack[forkStackIndex++] = treeForkProvider;
+
+  treeForkProvider = workInProgress;
+  treeForkCount = totalChildren;
+}
+
+export function pushTreeId(
+  workInProgress: Fiber,
+  totalChildren: number,
+  index: number,
+) {
+  warnIfNotHydrating();
+
+  idStack[idStackIndex++] = treeContextId;
+  idStack[idStackIndex++] = treeContextOverflow;
+  idStack[idStackIndex++] = treeContextProvider;
+
+  treeContextProvider = workInProgress;
+
+  const baseIdWithLeadingBit = treeContextId;
+  const baseOverflow = treeContextOverflow;
+
+  // The leftmost 1 marks the end of the sequence, non-inclusive. It's not part
+  // of the id; we use it to account for leading 0s.
+  const baseLength = getBitLength(baseIdWithLeadingBit) - 1;
+  const baseId = baseIdWithLeadingBit & ~(1 << baseLength);
+
+  const slot = index + 1;
+  const length = getBitLength(totalChildren) + baseLength;
+
+  // 30 is the max length we can store without overflowing, taking into
+  // consideration the leading 1 we use to mark the end of the sequence.
+  if (length > 30) {
+    // We overflowed the bitwise-safe range. Fall back to slower algorithm.
+    // This branch assumes the length of the base id is greater than 5; it won't
+    // work for smaller ids, because you need 5 bits per character.
+    //
+    // We encode the id in multiple steps: first the base id, then the
+    // remaining digits.
+    //
+    // Each 5 bit sequence corresponds to a single base 32 character. So for
+    // example, if the current id is 23 bits long, we can convert 20 of those
+    // bits into a string of 4 characters, with 3 bits left over.
+    //
+    // First calculate how many bits in the base id represent a complete
+    // sequence of characters.
+    const numberOfOverflowBits = baseLength - (baseLength % 5);
+
+    // Then create a bitmask that selects only those bits.
+    const newOverflowBits = (1 << numberOfOverflowBits) - 1;
+
+    // Select the bits, and convert them to a base 32 string.
+    const newOverflow = (baseId & newOverflowBits).toString(32);
+
+    // Now we can remove those bits from the base id.
+    const restOfBaseId = baseId >> numberOfOverflowBits;
+    const restOfBaseLength = baseLength - numberOfOverflowBits;
+
+    // Finally, encode the rest of the bits using the normal algorithm. Because
+    // we made more room, this time it won't overflow.
+    const restOfLength = getBitLength(totalChildren) + restOfBaseLength;
+    const restOfNewBits = slot << restOfBaseLength;
+    const id = restOfNewBits | restOfBaseId;
+    const overflow = newOverflow + baseOverflow;
+
+    treeContextId = (1 << restOfLength) | id;
+    treeContextOverflow = overflow;
+  } else {
+    // Normal path
+    const newBits = slot << baseLength;
+    const id = newBits | baseId;
+    const overflow = baseOverflow;
+
+    treeContextId = (1 << length) | id;
+    treeContextOverflow = overflow;
+  }
+}
+
+function getBitLength(number: number): number {
+  return 32 - clz32(number);
+}
+
+function getLeadingBit(id: number) {
+  return 1 << (getBitLength(id) - 1);
+}
+
+export function popTreeContext(workInProgress: Fiber) {
+  // 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;
+  }
+}
+
+export function getSuspendedTreeContext(): TreeContext | null {
+  warnIfNotHydrating();
+  if (treeContextProvider !== null) {
+    return {
+      id: treeContextId,
+      overflow: treeContextOverflow,
+    };
+  } else {
+    return null;
+  }
+}
+
+export function restoreSuspendedTreeContext(
+  workInProgress: Fiber,
+  suspendedContext: TreeContext,
+) {
+  warnIfNotHydrating();
+
+  idStack[idStackIndex++] = treeContextId;
+  idStack[idStackIndex++] = treeContextOverflow;
+  idStack[idStackIndex++] = treeContextProvider;
+
+  treeContextId = suspendedContext.id;
+  treeContextOverflow = suspendedContext.overflow;
+  treeContextProvider = workInProgress;
+}
+
+function warnIfNotHydrating() {
+  if (__DEV__) {
+    if (!getIsHydrating()) {
+      console.error(
+        'Expected to be hydrating. This is a bug in React. Please file ' +
+          'an issue.',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index ba8bd4b573957..bb002b9e71b3a 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -50,8 +50,14 @@ import {
   popCachePool,
 } from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
+import {popTreeContext} from './ReactFiberTreeContext.new';
 
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
+  // 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: {
       const Component = workInProgress.type;
@@ -164,6 +170,11 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
 }
 
 function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
+  // 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: {
       const childContextTypes = interruptedWork.type.childContextTypes;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index ad8e479700db0..7f161513a4afa 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -50,8 +50,14 @@ import {
   popCachePool,
 } from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
+import {popTreeContext} from './ReactFiberTreeContext.old';
 
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
+  // 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: {
       const Component = workInProgress.type;
@@ -164,6 +170,11 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
 }
 
 function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
+  // 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: {
       const childContextTypes = interruptedWork.type.childContextTypes;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index e971828233c10..9dac4f40aad53 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -44,6 +44,7 @@ export type HookType =
   | 'useMutableSource'
   | 'useSyncExternalStore'
   | 'useOpaqueIdentifier'
+  | 'useId'
   | 'useCacheRefresh';
 
 export type ContextDependency<T> = {
@@ -317,6 +318,7 @@ export type Dispatcher = {|
     getServerSnapshot?: () => T,
   ): T,
   useOpaqueIdentifier(): any,
+  useId(): string,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
 
   unstable_isNewReconciler?: boolean,
diff --git a/packages/react-reconciler/src/clz32.js b/packages/react-reconciler/src/clz32.js
new file mode 100644
index 0000000000000..80a9cfb911482
--- /dev/null
+++ b/packages/react-reconciler/src/clz32.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// TODO: This is pretty well supported by browsers. Maybe we can drop it.
+
+export const 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
+const log = Math.log;
+const LN2 = Math.LN2;
+function clz32Fallback(x: number): number {
+  const asUint = x >>> 0;
+  if (asUint === 0) {
+    return 32;
+  }
+  return (31 - ((log(asUint) / LN2) | 0)) | 0;
+}
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 2596632652b43..bf1a2d56e0f93 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -17,8 +17,10 @@ import type {
 } from 'shared/ReactTypes';
 
 import type {ResponseState, OpaqueIDType} from './ReactServerFormatConfig';
+import type {Task} from './ReactFizzServer';
 
 import {readContext as readContextImpl} from './ReactFizzNewContext';
+import {getTreeId} from './ReactFizzTreeContext';
 
 import {makeServerID} from './ReactServerFormatConfig';
 
@@ -45,12 +47,15 @@ type Hook = {|
 |};
 
 let currentlyRenderingComponent: Object | null = null;
+let currentlyRenderingTask: Task | null = null;
 let firstWorkInProgressHook: Hook | null = null;
 let workInProgressHook: Hook | null = null;
 // Whether the work-in-progress hook is a re-rendered hook
 let isReRender: boolean = false;
 // Whether an update was scheduled during the currently executing render pass.
 let didScheduleRenderPhaseUpdate: boolean = false;
+// Counts the number of useId hooks in this component
+let localIdCounter: number = 0;
 // Lazily created map of render-phase updates
 let renderPhaseUpdates: Map<UpdateQueue<any>, Update<any>> | null = null;
 // Counter to prevent infinite loops.
@@ -163,18 +168,22 @@ function createWorkInProgressHook(): Hook {
   return workInProgressHook;
 }
 
-export function prepareToUseHooks(componentIdentity: Object): void {
+export function prepareToUseHooks(task: Task, componentIdentity: Object): void {
   currentlyRenderingComponent = componentIdentity;
+  currentlyRenderingTask = task;
   if (__DEV__) {
     isInHookUserCodeInDev = false;
   }
 
   // The following should have already been reset
   // didScheduleRenderPhaseUpdate = false;
+  // localIdCounter = 0;
   // firstWorkInProgressHook = null;
   // numberOfReRenders = 0;
   // renderPhaseUpdates = null;
   // workInProgressHook = null;
+
+  localIdCounter = 0;
 }
 
 export function finishHooks(
@@ -203,6 +212,14 @@ export function finishHooks(
   return children;
 }
 
+export function checkDidRenderIdHook() {
+  // This should be called immediately after every finishHooks call.
+  // Conceptually, it's part of the return value of finishHooks; it's only a
+  // separate function to avoid using an array tuple.
+  const didRenderIdHook = localIdCounter !== 0;
+  return didRenderIdHook;
+}
+
 // Reset the internal hooks state if an error occurs while rendering a component
 export function resetHooksState(): void {
   if (__DEV__) {
@@ -210,6 +227,7 @@ export function resetHooksState(): void {
   }
 
   currentlyRenderingComponent = null;
+  currentlyRenderingTask = null;
   didScheduleRenderPhaseUpdate = false;
   firstWorkInProgressHook = null;
   numberOfReRenders = 0;
@@ -495,6 +513,24 @@ function useOpaqueIdentifier(): OpaqueIDType {
   return makeServerID(currentResponseState);
 }
 
+function useId(): string {
+  const task: Task = (currentlyRenderingTask: any);
+  const treeId = getTreeId(task.treeContext);
+
+  // Use a captial R prefix for server-generated ids.
+  let id = 'R:' + treeId;
+
+  // Unless this is the first id at this level, append a number at the end
+  // that represents the position of this useId hook among all the useId
+  // hooks for this fiber.
+  const localId = localIdCounter++;
+  if (localId > 0) {
+    id += ':' + localId.toString(32);
+  }
+
+  return id;
+}
+
 function unsupportedRefresh() {
   throw new Error('Cache cannot be refreshed during server rendering.');
 }
@@ -524,6 +560,7 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
+  useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
   useSyncExternalStore,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 6692b92648643..f06cbc8fb61a3 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -25,6 +25,7 @@ import type {
 } from './ReactServerFormatConfig';
 import type {ContextSnapshot} from './ReactFizzNewContext';
 import type {ComponentStackNode} from './ReactFizzComponentStack';
+import type {TreeContext} from './ReactFizzTreeContext';
 
 import {
   scheduleWork,
@@ -78,12 +79,14 @@ import {
 import {
   prepareToUseHooks,
   finishHooks,
+  checkDidRenderIdHook,
   resetHooksState,
   Dispatcher,
   currentResponseState,
   setCurrentResponseState,
 } from './ReactFizzHooks';
 import {getStackByComponentStackNode} from './ReactFizzComponentStack';
+import {emptyTreeContext, pushTreeContext} from './ReactFizzTreeContext';
 
 import {
   getIteratorFn,
@@ -134,7 +137,7 @@ type SuspenseBoundary = {
   fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
 };
 
-type Task = {
+export type Task = {
   node: ReactNodeList,
   ping: () => void,
   blockedBoundary: Root | SuspenseBoundary,
@@ -142,6 +145,7 @@ type Task = {
   abortSet: Set<Task>, // the abortable set that this task belongs to
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
   context: ContextSnapshot, // the current new context that this task is executing in
+  treeContext: TreeContext, // the current tree context that this task is executing in
   componentStack: null | ComponentStackNode, // DEV-only component stack
 };
 
@@ -265,6 +269,7 @@ export function createRequest(
     abortSet,
     emptyContextObject,
     rootContextSnapshot,
+    emptyTreeContext,
   );
   pingedTasks.push(rootTask);
   return request;
@@ -302,6 +307,7 @@ function createTask(
   abortSet: Set<Task>,
   legacyContext: LegacyContext,
   context: ContextSnapshot,
+  treeContext: TreeContext,
 ): Task {
   request.allPendingTasks++;
   if (blockedBoundary === null) {
@@ -317,6 +323,7 @@ function createTask(
     abortSet,
     legacyContext,
     context,
+    treeContext,
   }: any);
   if (__DEV__) {
     task.componentStack = null;
@@ -497,6 +504,7 @@ function renderSuspenseBoundary(
     fallbackAbortSet,
     task.legacyContext,
     task.context,
+    task.treeContext,
   );
   if (__DEV__) {
     suspendedFallbackTask.componentStack = task.componentStack;
@@ -564,7 +572,7 @@ function renderWithHooks<Props, SecondArg>(
   secondArg: SecondArg,
 ): any {
   const componentIdentity = {};
-  prepareToUseHooks(componentIdentity);
+  prepareToUseHooks(task, componentIdentity);
   const result = Component(props, secondArg);
   return finishHooks(Component, props, result, secondArg);
 }
@@ -671,6 +679,7 @@ function renderIndeterminateComponent(
   }
 
   const value = renderWithHooks(request, task, Component, props, legacyContext);
+  const hasId = checkDidRenderIdHook();
 
   if (__DEV__) {
     // Support for module components is deprecated and is removed behind a flag.
@@ -742,7 +751,21 @@ function renderIndeterminateComponent(
     }
     // We're now successfully past this task, and we don't have to pop back to
     // the previous task every again, so we can use the destructive recursive form.
-    renderNodeDestructive(request, task, value);
+    if (hasId) {
+      // This component materialized an id. We treat this as its own level, with
+      // a single "child" slot.
+      const prevTreeContext = task.treeContext;
+      const totalChildren = 1;
+      const index = 0;
+      task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
+      try {
+        renderNodeDestructive(request, task, value);
+      } finally {
+        task.treeContext = prevTreeContext;
+      }
+    } else {
+      renderNodeDestructive(request, task, value);
+    }
   }
   popComponentStackInDEV(task);
 }
@@ -827,7 +850,22 @@ function renderForwardRef(
 ): void {
   pushFunctionComponentStackInDEV(task, type.render);
   const children = renderWithHooks(request, task, type.render, props, ref);
-  renderNodeDestructive(request, task, children);
+  const hasId = checkDidRenderIdHook();
+  if (hasId) {
+    // This component materialized an id. We treat this as its own level, with
+    // a single "child" slot.
+    const prevTreeContext = task.treeContext;
+    const totalChildren = 1;
+    const index = 0;
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
+    try {
+      renderNodeDestructive(request, task, children);
+    } finally {
+      task.treeContext = prevTreeContext;
+    }
+  } else {
+    renderNodeDestructive(request, task, children);
+  }
   popComponentStackInDEV(task);
 }
 
@@ -1122,12 +1160,7 @@ function renderNodeDestructive(
     }
 
     if (isArray(node)) {
-      for (let i = 0; i < node.length; i++) {
-        // Recursively render the rest. We need to use the non-destructive form
-        // so that we can safely pop back up and render the sibling if something
-        // suspends.
-        renderNode(request, task, node[i]);
-      }
+      renderChildrenArray(request, task, node);
       return;
     }
 
@@ -1138,18 +1171,23 @@ function renderNodeDestructive(
       }
       const iterator = iteratorFn.call(node);
       if (iterator) {
+        // We need to know how many total children are in this set, so that we
+        // can allocate enough id slots to acommodate them. So we must exhaust
+        // the iterator before we start recursively rendering the children.
+        // TODO: This is not great but I think it's inherent to the id
+        // generation algorithm.
         let step = iterator.next();
         // If there are not entries, we need to push an empty so we start by checking that.
         if (!step.done) {
+          const children = [];
           do {
-            // Recursively render the rest. We need to use the non-destructive form
-            // so that we can safely pop back up and render the sibling if something
-            // suspends.
-            renderNode(request, task, step.value);
+            children.push(step.value);
             step = iterator.next();
           } while (!step.done);
+          renderChildrenArray(request, task, children);
           return;
         }
+        return;
       }
     }
 
@@ -1191,6 +1229,21 @@ function renderNodeDestructive(
   }
 }
 
+function renderChildrenArray(request, task, children) {
+  const totalChildren = children.length;
+  for (let i = 0; i < totalChildren; i++) {
+    const prevTreeContext = task.treeContext;
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+    try {
+      // We need to use the non-destructive form so that we can safely pop back
+      // up and render the sibling if something suspends.
+      renderNode(request, task, children[i]);
+    } finally {
+      task.treeContext = prevTreeContext;
+    }
+  }
+}
+
 function spawnNewSuspendedTask(
   request: Request,
   task: Task,
@@ -1214,6 +1267,7 @@ function spawnNewSuspendedTask(
     task.abortSet,
     task.legacyContext,
     task.context,
+    task.treeContext,
   );
   if (__DEV__) {
     if (task.componentStack !== null) {
@@ -1257,6 +1311,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       if (__DEV__) {
         task.componentStack = previousComponentStack;
       }
+      return;
     } else {
       // Restore the context. We assume that this will be restored by the inner
       // functions in case nothing throws so we don't use "finally" here.
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
new file mode 100644
index 0000000000000..c9a47e5af72a6
--- /dev/null
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Ids are base 32 strings whose binary representation corresponds to the
+// position of a node in a tree.
+
+// Every time the tree forks into multiple children, we add additional bits to
+// the left of the sequence that represent the position of the child within the
+// current level of children.
+//
+//      00101       00010001011010101
+//      ╰─┬─╯       ╰───────┬───────╯
+//   Fork 5 of 20       Parent id
+//
+// The leading 0s are important. In the above example, you only need 3 bits to
+// represent slot 5. However, you need 5 bits to represent all the forks at
+// the current level, so we must account for the empty bits at the end.
+//
+// For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
+// the zeroth id at a level would be indistinguishable from its parent.
+//
+// If a node has only one child, and does not materialize an id (i.e. does not
+// contain a useId hook), then we don't need to allocate any space in the
+// sequence. It's treated as a transparent indirection. For example, these two
+// trees produce the same ids:
+//
+// <>                          <>
+//   <Indirection>               <A />
+//     <A />                     <B />
+//   </Indirection>            </>
+//   <B />
+// </>
+//
+// However, we cannot skip any node that materializes an id. Otherwise, a parent
+// id that does not fork would be indistinguishable from its child id. For
+// example, this tree does not fork, but the parent and child must have
+// different ids.
+//
+// <Parent>
+//   <Child />
+// </Parent>
+//
+// To handle this scenario, every time we materialize an id, we allocate a
+// new level with a single slot. You can think of this as a fork with only one
+// prong, or an array of children with length 1.
+//
+// It's possible for the the size of the sequence to exceed 32 bits, the max
+// size for bitwise operations. When this happens, we make more room by
+// converting the right part of the id to a string and storing it in an overflow
+// variable. We use a base 32 string representation, because 32 is the largest
+// power of 2 that is supported by toString(). We want the base to be large so
+// that the resulting ids are compact, and we want the base to be a power of 2
+// because every log2(base) bits corresponds to a single character, i.e. every
+// log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
+// affecting the final result.
+
+export type TreeContext = {
+  +id: number,
+  +overflow: string,
+};
+
+export const emptyTreeContext = {
+  id: 1,
+  overflow: '',
+};
+
+export function getTreeId(context: TreeContext): string {
+  const overflow = context.overflow;
+  const idWithLeadingBit = context.id;
+  const id = idWithLeadingBit & ~getLeadingBit(idWithLeadingBit);
+  return id.toString(32) + overflow;
+}
+
+export function pushTreeContext(
+  baseContext: TreeContext,
+  totalChildren: number,
+  index: number,
+): TreeContext {
+  const baseIdWithLeadingBit = baseContext.id;
+  const baseOverflow = baseContext.overflow;
+
+  // The leftmost 1 marks the end of the sequence, non-inclusive. It's not part
+  // of the id; we use it to account for leading 0s.
+  const baseLength = getBitLength(baseIdWithLeadingBit) - 1;
+  const baseId = baseIdWithLeadingBit & ~(1 << baseLength);
+
+  const slot = index + 1;
+  const length = getBitLength(totalChildren) + baseLength;
+
+  // 30 is the max length we can store without overflowing, taking into
+  // consideration the leading 1 we use to mark the end of the sequence.
+  if (length > 30) {
+    // We overflowed the bitwise-safe range. Fall back to slower algorithm.
+    // This branch assumes the length of the base id is greater than 5; it won't
+    // work for smaller ids, because you need 5 bits per character.
+    //
+    // We encode the id in multiple steps: first the base id, then the
+    // remaining digits.
+    //
+    // Each 5 bit sequence corresponds to a single base 32 character. So for
+    // example, if the current id is 23 bits long, we can convert 20 of those
+    // bits into a string of 4 characters, with 3 bits left over.
+    //
+    // First calculate how many bits in the base id represent a complete
+    // sequence of characters.
+    const numberOfOverflowBits = baseLength - (baseLength % 5);
+
+    // Then create a bitmask that selects only those bits.
+    const newOverflowBits = (1 << numberOfOverflowBits) - 1;
+
+    // Select the bits, and convert them to a base 32 string.
+    const newOverflow = (baseId & newOverflowBits).toString(32);
+
+    // Now we can remove those bits from the base id.
+    const restOfBaseId = baseId >> numberOfOverflowBits;
+    const restOfBaseLength = baseLength - numberOfOverflowBits;
+
+    // Finally, encode the rest of the bits using the normal algorithm. Because
+    // we made more room, this time it won't overflow.
+    const restOfLength = getBitLength(totalChildren) + restOfBaseLength;
+    const restOfNewBits = slot << restOfBaseLength;
+    const id = restOfNewBits | restOfBaseId;
+    const overflow = newOverflow + baseOverflow;
+    return {
+      id: (1 << restOfLength) | id,
+      overflow,
+    };
+  } else {
+    // Normal path
+    const newBits = slot << baseLength;
+    const id = newBits | baseId;
+    const overflow = baseOverflow;
+    return {
+      id: (1 << length) | id,
+      overflow,
+    };
+  }
+}
+
+function getBitLength(number: number): number {
+  return 32 - clz32(number);
+}
+
+function getLeadingBit(id: number) {
+  return 1 << (getBitLength(id) - 1);
+}
+
+// TODO: Math.clz32 is supported in Node 12+. Maybe we can drop the fallback.
+const 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
+const log = Math.log;
+const LN2 = Math.LN2;
+function clz32Fallback(x: number): number {
+  const asUint = x >>> 0;
+  if (asUint === 0) {
+    return 32;
+  }
+  return (31 - ((log(asUint) / LN2) | 0)) | 0;
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 7bd7a95c25611..bba34065cc268 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -846,6 +846,7 @@ const Dispatcher: DispatcherType = {
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
   useOpaqueIdentifier: (unsupportedHook: any),
+  useId: (unsupportedHook: any),
   useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
   useCacheRefresh(): <T>(?() => T, ?T) => void {
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index a3fe873729828..731124ea51593 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -43,6 +43,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useDeferredValue: unsupported,
     useTransition: unsupported,
     useOpaqueIdentifier: unsupported,
+    useId: unsupported,
     useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
     useCacheRefresh: unsupported,
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index c5854f8f6d398..a2e678c580b2e 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -41,6 +41,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 24fc9782595d4..20c22828583f5 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -37,6 +37,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.js b/packages/react/index.js
index 9a6a99ee52189..3108c06c55284 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -62,6 +62,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 8d08a43b90946..eef99fdabf2a4 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -40,6 +40,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 867980fa5389d..517dc3f8fb2db 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -30,6 +30,7 @@ export {
   memo,
   startTransition,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index d29858c9b07fd..868538c83f59b 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -53,6 +53,7 @@ import {
   useTransition,
   useDeferredValue,
   useOpaqueIdentifier,
+  useId,
   useCacheRefresh,
 } from './ReactHooks';
 import {
@@ -127,5 +128,6 @@ export {
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
   useOpaqueIdentifier as unstable_useOpaqueIdentifier,
+  useId as unstable_useId,
   act,
 };
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 1892f926c59cf..1f987de1671ba 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -174,6 +174,11 @@ export function useOpaqueIdentifier(): OpaqueIDType | void {
   return dispatcher.useOpaqueIdentifier();
 }
 
+export function useId(): string {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useId();
+}
+
 export function useMutableSource<Source, Snapshot>(
   source: MutableSource<Source>,
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index a663ca8a5a89d..d556400750b4c 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -28,6 +28,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,

From 8c4a05b8fb83624d5442f74138e7f263d666fd5d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 1 Nov 2021 17:46:09 -0400
Subject: [PATCH 074/109] Remove @flow pragma comment from module registration
 start/stop templates (#22670)

---
 packages/shared/registerInternalModuleStart.js | 2 --
 packages/shared/registerInternalModuleStop.js  | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/shared/registerInternalModuleStart.js b/packages/shared/registerInternalModuleStart.js
index aa1154fe9f1bf..1bab503c2a6da 100644
--- a/packages/shared/registerInternalModuleStart.js
+++ b/packages/shared/registerInternalModuleStart.js
@@ -3,8 +3,6 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
diff --git a/packages/shared/registerInternalModuleStop.js b/packages/shared/registerInternalModuleStop.js
index dab139f2557f9..44a69bed9ac37 100644
--- a/packages/shared/registerInternalModuleStop.js
+++ b/packages/shared/registerInternalModuleStop.js
@@ -3,8 +3,6 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */

From 75f3ddebfa0d9885ce8df42571cf0c09ad6c0a3b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 18:02:39 -0400
Subject: [PATCH 075/109] Remove experimental useOpaqueIdentifier API (#22672)

useId is the updated version of this API.
---
 packages/react-art/src/ReactARTHostConfig.js  |   18 -
 .../react-debug-tools/src/ReactDebugHooks.js  |   26 -
 .../ReactHooksInspectionIntegration-test.js   |   58 -
 .../src/backend/ReactSymbols.js               |    3 -
 .../ReactDOMServerIntegrationHooks-test.js    | 1109 -----------------
 .../src/client/DOMPropertyOperations.js       |    8 -
 .../react-dom/src/client/ReactDOMComponent.js |   10 -
 .../src/client/ReactDOMHostConfig.js          |   45 -
 .../src/server/ReactDOMServerFormatConfig.js  |   22 -
 .../ReactDOMServerLegacyFormatConfig.js       |    6 -
 .../src/server/ReactPartialRenderer.js        |   17 +-
 .../src/server/ReactPartialRendererHooks.js   |   13 +-
 .../src/ReactFabricHostConfig.js              |   20 -
 .../src/ReactNativeHostConfig.js              |   19 -
 .../server/ReactNativeServerFormatConfig.js   |   17 -
 .../src/ReactNoopServer.js                    |    6 -
 .../src/ReactFiberHooks.new.js                |  139 ---
 .../src/ReactFiberHooks.old.js                |  139 ---
 .../src/ReactFiberWorkLoop.new.js             |   13 +-
 .../src/ReactFiberWorkLoop.old.js             |   13 +-
 .../src/ReactInternalTypes.js                 |    2 -
 ...tIncrementalErrorHandling-test.internal.js |   16 +-
 .../src/forks/ReactFiberHostConfig.custom.js  |    6 -
 packages/react-server/src/ReactFizzHooks.js   |    9 +-
 .../react-server/src/ReactFlightServer.js     |    1 -
 .../forks/ReactServerFormatConfig.custom.js   |    2 -
 .../src/ReactSuspenseTestUtils.js             |    1 -
 .../src/ReactTestHostConfig.js                |   44 -
 packages/react/index.classic.fb.js            |    1 -
 packages/react/index.experimental.js          |    1 -
 packages/react/index.js                       |    1 -
 packages/react/index.modern.fb.js             |    1 -
 packages/react/index.stable.js                |    1 -
 packages/react/src/React.js                   |    2 -
 packages/react/src/ReactHooks.js              |    6 -
 .../unstable-shared-subset.experimental.js    |    1 -
 packages/shared/CheckStringCoercion.js        |   12 -
 packages/shared/ReactSymbols.js               |    2 -
 scripts/error-codes/codes.json                |    2 +-
 39 files changed, 22 insertions(+), 1790 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index ec702bf9a70d4..47bced8a1274a 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -436,24 +436,6 @@ export function getInstanceFromNode(node) {
   throw new Error('Not implemented.');
 }
 
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not implemented.');
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
-export function makeClientId(): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index eed8c46df7d6d..895e75359867c 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -18,13 +18,9 @@ import type {
   Fiber,
   Dispatcher as DispatcherType,
 } from 'react-reconciler/src/ReactInternalTypes';
-import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
-
-import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
   FunctionComponent,
   SimpleMemoComponent,
@@ -53,8 +49,6 @@ type Dispatch<A> = A => void;
 
 let primitiveStackCache: null | Map<string, Array<any>> = null;
 
-let currentFiber: Fiber | null = null;
-
 type Hook = {
   memoizedState: any,
   next: Hook | null,
@@ -324,23 +318,6 @@ function useDeferredValue<T>(value: T): T {
   return value;
 }
 
-function useOpaqueIdentifier(): OpaqueIDType | void {
-  const hook = nextHook(); // State
-  if (currentFiber && currentFiber.mode === NoMode) {
-    nextHook(); // Effect
-  }
-  let value = hook === null ? undefined : hook.memoizedState;
-  if (value && value.$$typeof === REACT_OPAQUE_ID_TYPE) {
-    value = undefined;
-  }
-  hookLog.push({
-    primitive: 'OpaqueIdentifier',
-    stackError: new Error(),
-    value,
-  });
-  return value;
-}
-
 function useId(): string {
   const hook = nextHook();
   const id = hook !== null ? hook.memoizedState : '';
@@ -371,7 +348,6 @@ const Dispatcher: DispatcherType = {
   useMutableSource,
   useSyncExternalStore,
   useDeferredValue,
-  useOpaqueIdentifier,
   useId,
 };
 
@@ -767,8 +743,6 @@ export function inspectHooksOfFiber(
     currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
   }
 
-  currentFiber = fiber;
-
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index d17a01a258277..559a0bf75e52f 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -598,64 +598,6 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  it('should support composite useOpaqueIdentifier hook', () => {
-    function Foo(props) {
-      const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState(() => 'hello', []);
-      return <div id={id}>{state}</div>;
-    }
-
-    const renderer = ReactTestRenderer.create(<Foo />);
-    const childFiber = renderer.root.findByType(Foo)._currentFiber();
-    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
-
-    expect(tree.length).toEqual(2);
-
-    expect(tree[0].id).toEqual(0);
-    expect(tree[0].isStateEditable).toEqual(false);
-    expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect(String(tree[0].value).startsWith('c_')).toBe(true);
-
-    expect(tree[1]).toEqual({
-      id: 1,
-      isStateEditable: true,
-      name: 'State',
-      value: 'hello',
-      subHooks: [],
-    });
-  });
-
-  it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
-    function Foo(props) {
-      const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState('hello');
-      return <div id={id}>{state}</div>;
-    }
-
-    const renderer = ReactTestRenderer.create(<Foo />, {
-      unstable_isConcurrent: true,
-    });
-    expect(Scheduler).toFlushWithoutYielding();
-
-    const childFiber = renderer.root.findByType(Foo)._currentFiber();
-    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
-
-    expect(tree.length).toEqual(2);
-
-    expect(tree[0].id).toEqual(0);
-    expect(tree[0].isStateEditable).toEqual(false);
-    expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect(String(tree[0].value).startsWith('c_')).toBe(true);
-
-    expect(tree[1]).toEqual({
-      id: 1,
-      isStateEditable: true,
-      name: 'State',
-      value: 'hello',
-      subHooks: [],
-    });
-  });
-
   it('should support useId hook', () => {
     function Foo(props) {
       const id = React.unstable_useId();
diff --git a/packages/react-devtools-shared/src/backend/ReactSymbols.js b/packages/react-devtools-shared/src/backend/ReactSymbols.js
index c6515f02edc51..ebc6920be8d2f 100644
--- a/packages/react-devtools-shared/src/backend/ReactSymbols.js
+++ b/packages/react-devtools-shared/src/backend/ReactSymbols.js
@@ -40,9 +40,6 @@ export const LAZY_SYMBOL_STRING = 'Symbol(react.lazy)';
 export const MEMO_NUMBER = 0xead3;
 export const MEMO_SYMBOL_STRING = 'Symbol(react.memo)';
 
-export const OPAQUE_ID_NUMBER = 0xeae0;
-export const OPAQUE_ID_SYMBOL_STRING = 'Symbol(react.opaque.id)';
-
 export const PORTAL_NUMBER = 0xeaca;
 export const PORTAL_SYMBOL_STRING = 'Symbol(react.portal)';
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index ba2b22437bc1b..114c522313a79 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -17,8 +17,6 @@ let React;
 let ReactDOM;
 let ReactDOMServer;
 let ReactTestUtils;
-let act;
-let Scheduler;
 let useState;
 let useReducer;
 let useEffect;
@@ -30,7 +28,6 @@ let useImperativeHandle;
 let useInsertionEffect;
 let useLayoutEffect;
 let useDebugValue;
-let useOpaqueIdentifier;
 let forwardRef;
 let yieldedValues;
 let yieldValue;
@@ -44,8 +41,6 @@ function initModules() {
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
-  Scheduler = require('scheduler');
-  act = require('jest-react').act;
   useState = React.useState;
   useReducer = React.useReducer;
   useEffect = React.useEffect;
@@ -57,7 +52,6 @@ function initModules() {
   useImperativeHandle = React.useImperativeHandle;
   useInsertionEffect = React.useInsertionEffect;
   useLayoutEffect = React.useLayoutEffect;
-  useOpaqueIdentifier = React.unstable_useOpaqueIdentifier;
   forwardRef = React.forwardRef;
 
   yieldedValues = [];
@@ -83,9 +77,6 @@ const {
   itRenders,
   itThrowsWhenRendering,
   serverRender,
-  streamRender,
-  clientCleanRender,
-  clientRenderOnServerString,
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerHooks', () => {
@@ -910,1104 +901,4 @@ describe('ReactDOMServerHooks', () => {
     );
     expect(container.children[0].textContent).toEqual('0');
   });
-
-  describe('useOpaqueIdentifier', () => {
-    it('generates unique ids for server string render', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await serverRender(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('generates unique ids for server stream render', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await streamRender(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('generates unique ids for client render', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await clientCleanRender(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('generates unique ids for client render on good server markup', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await clientRenderOnServerString(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier does not change id even if the component updates during client render', async () => {
-      let _setShowId;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [showId, setShowId] = useState(false);
-        _setShowId = setShowId;
-        return (
-          <div>
-            <div aria-labelledby={id} />
-            {showId && <div id={id} />}
-          </div>
-        );
-      }
-
-      const domNode = await clientCleanRender(<App />);
-      const oldClientId = domNode.children[0].getAttribute('aria-labelledby');
-
-      expect(domNode.children.length).toEqual(1);
-      expect(oldClientId).not.toBeNull();
-
-      await act(async () => _setShowId(true));
-
-      expect(domNode.children.length).toEqual(2);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        oldClientId,
-      );
-    });
-
-    it('useOpaqueIdentifier identifierPrefix works for server renderer and does not clash', async () => {
-      function ChildTwo({id}) {
-        return <div id={id}>Child Three</div>;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-
-        return (
-          <div>
-            <div aria-labelledby={id}>Child One</div>
-            <ChildTwo id={id} />
-            <div aria-labelledby={idTwo}>Child Three</div>
-            <div id={idTwo}>Child Four</div>
-          </div>
-        );
-      }
-
-      const containerOne = document.createElement('div');
-      document.body.append(containerOne);
-
-      containerOne.innerHTML = ReactDOMServer.renderToString(<App />, {
-        identifierPrefix: 'one',
-      });
-
-      const containerTwo = document.createElement('div');
-      document.body.append(containerTwo);
-
-      containerTwo.innerHTML = ReactDOMServer.renderToString(<App />, {
-        identifierPrefix: 'two',
-      });
-
-      expect(document.body.children.length).toEqual(2);
-      const childOne = document.body.children[0];
-      const childTwo = document.body.children[1];
-
-      expect(
-        childOne.children[0].children[0].getAttribute('aria-labelledby'),
-      ).toEqual(childOne.children[0].children[1].getAttribute('id'));
-      expect(
-        childOne.children[0].children[2].getAttribute('aria-labelledby'),
-      ).toEqual(childOne.children[0].children[3].getAttribute('id'));
-
-      expect(
-        childOne.children[0].children[0].getAttribute('aria-labelledby'),
-      ).not.toEqual(
-        childOne.children[0].children[2].getAttribute('aria-labelledby'),
-      );
-
-      expect(
-        childOne.children[0].children[0]
-          .getAttribute('aria-labelledby')
-          .startsWith('one'),
-      ).toBe(true);
-      expect(
-        childOne.children[0].children[2]
-          .getAttribute('aria-labelledby')
-          .includes('one'),
-      ).toBe(true);
-
-      expect(
-        childTwo.children[0].children[0].getAttribute('aria-labelledby'),
-      ).toEqual(childTwo.children[0].children[1].getAttribute('id'));
-      expect(
-        childTwo.children[0].children[2].getAttribute('aria-labelledby'),
-      ).toEqual(childTwo.children[0].children[3].getAttribute('id'));
-
-      expect(
-        childTwo.children[0].children[0].getAttribute('aria-labelledby'),
-      ).not.toEqual(
-        childTwo.children[0].children[2].getAttribute('aria-labelledby'),
-      );
-
-      expect(
-        childTwo.children[0].children[0]
-          .getAttribute('aria-labelledby')
-          .startsWith('two'),
-      ).toBe(true);
-      expect(
-        childTwo.children[0].children[2]
-          .getAttribute('aria-labelledby')
-          .startsWith('two'),
-      ).toBe(true);
-    });
-
-    it('useOpaqueIdentifier identifierPrefix works for multiple reads on a streaming server renderer', async () => {
-      function ChildTwo() {
-        const id = useOpaqueIdentifier();
-
-        return <div id={id}>Child Two</div>;
-      }
-
-      function App() {
-        const id = useOpaqueIdentifier();
-
-        return (
-          <>
-            <div id={id}>Child One</div>
-            <ChildTwo />
-            <div aria-labelledby={id}>Aria One</div>
-          </>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-
-      const streamOne = ReactDOMServer.renderToNodeStream(<App />, {
-        identifierPrefix: 'one',
-      }).setEncoding('utf8');
-      const streamTwo = ReactDOMServer.renderToNodeStream(<App />, {
-        identifierPrefix: 'two',
-      }).setEncoding('utf8');
-
-      const streamOneIsDone = new Promise((resolve, reject) => {
-        streamOne.on('end', () => resolve());
-        streamOne.on('error', e => reject(e));
-      });
-      const streamTwoIsDone = new Promise((resolve, reject) => {
-        streamTwo.on('end', () => resolve());
-        streamTwo.on('error', e => reject(e));
-      });
-
-      const containerOne = document.createElement('div');
-      const containerTwo = document.createElement('div');
-
-      streamOne._read(10);
-      streamTwo._read(10);
-
-      containerOne.innerHTML = streamOne.read();
-      containerTwo.innerHTML = streamTwo.read();
-
-      expect(containerOne.children[0].getAttribute('id')).not.toEqual(
-        containerOne.children[1].getAttribute('id'),
-      );
-      expect(containerTwo.children[0].getAttribute('id')).not.toEqual(
-        containerTwo.children[1].getAttribute('id'),
-      );
-      expect(containerOne.children[0].getAttribute('id')).not.toEqual(
-        containerTwo.children[0].getAttribute('id'),
-      );
-      expect(containerOne.children[0].getAttribute('id').includes('one')).toBe(
-        true,
-      );
-      expect(containerOne.children[1].getAttribute('id').includes('one')).toBe(
-        true,
-      );
-      expect(containerTwo.children[0].getAttribute('id').includes('two')).toBe(
-        true,
-      );
-      expect(containerTwo.children[1].getAttribute('id').includes('two')).toBe(
-        true,
-      );
-
-      expect(containerOne.children[1].getAttribute('id')).not.toEqual(
-        containerTwo.children[1].getAttribute('id'),
-      );
-      expect(containerOne.children[0].getAttribute('id')).toEqual(
-        containerOne.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(containerTwo.children[0].getAttribute('id')).toEqual(
-        containerTwo.children[2].getAttribute('aria-labelledby'),
-      );
-
-      // Exhaust the rest of the stream
-      class Sink extends require('stream').Writable {
-        _write(chunk, encoding, done) {
-          done();
-        }
-      }
-      streamOne.pipe(new Sink());
-      streamTwo.pipe(new Sink());
-
-      await Promise.all([streamOneIsDone, streamTwoIsDone]);
-    });
-
-    it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered', async () => {
-      let _setShowDiv;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [showDiv, setShowDiv] = useState(false);
-        _setShowDiv = setShowDiv;
-
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            {showDiv && <div id={id}>Child Two</div>}
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App />);
-      Scheduler.unstable_flushAll();
-      jest.runAllTimers();
-
-      expect(container.children[0].children.length).toEqual(1);
-      const oldServerId = container.children[0].children[0].getAttribute('id');
-      expect(oldServerId).not.toBeNull();
-
-      await act(async () => {
-        _setShowDiv(true);
-      });
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(container.children[0].children[0].getAttribute('id')).not.toEqual(
-        oldServerId,
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered for legacy', async () => {
-      let _setShowDiv;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [showDiv, setShowDiv] = useState(false);
-        _setShowDiv = setShowDiv;
-
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            {showDiv && <div id={id}>Child Two</div>}
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.hydrate(<App />, container);
-
-      expect(container.children[0].children.length).toEqual(1);
-      const oldServerId = container.children[0].children[0].getAttribute('id');
-      expect(oldServerId).not.toBeNull();
-
-      await act(async () => {
-        _setShowDiv(true);
-      });
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(container.children[0].children[0].getAttribute('id')).not.toEqual(
-        oldServerId,
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: ID is not used during hydration but is used in an update', async () => {
-      let _setShow;
-      function App({unused}) {
-        Scheduler.unstable_yieldValue('App');
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <span id={show ? id : null}>{'Child One'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      act(() => {
-        root.render(<App />);
-      });
-      expect(Scheduler).toHaveYielded(['App', 'App']);
-      // The ID goes from not being used to being added to the page
-      act(() => {
-        _setShow(true);
-      });
-      expect(Scheduler).toHaveYielded(['App', 'App']);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: ID is not used during hydration but is used in an update in legacy', async () => {
-      let _setShow;
-      function App({unused}) {
-        Scheduler.unstable_yieldValue('App');
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <span id={show ? id : null}>{'Child One'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.hydrate(<App />, container);
-      expect(Scheduler).toHaveYielded(['App', 'App']);
-      // The ID goes from not being used to being added to the page
-      act(() => {
-        _setShow(true);
-      });
-      expect(Scheduler).toHaveYielded(['App']);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: flushSync', async () => {
-      let _setShow;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <span id={show ? id : null}>{'Child One'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      act(() => {
-        root.render(<App />);
-      });
-
-      // The ID goes from not being used to being added to the page
-      act(() => {
-        ReactDOM.flushSync(() => {
-          _setShow(true);
-        });
-      });
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: children with id hydrates before other children if ID updates', async () => {
-      let _setShow;
-
-      const child1Ref = React.createRef();
-      const childWithIDRef = React.createRef();
-      const setShowRef = React.createRef();
-
-      // RENAME THESE
-      function Child1() {
-        Scheduler.unstable_yieldValue('Child One');
-        return <span ref={child1Ref}>{'Child One'}</span>;
-      }
-
-      function Child2() {
-        Scheduler.unstable_yieldValue('Child Two');
-        return <span>{'Child Two'}</span>;
-      }
-
-      const Children = React.memo(function Children() {
-        return (
-          <React.Suspense fallback="Loading 1...">
-            <Child1 />
-            <Child2 />
-          </React.Suspense>
-        );
-      });
-
-      function ChildWithID({parentID}) {
-        Scheduler.unstable_yieldValue('Child with ID');
-        return (
-          <span id={parentID} ref={childWithIDRef}>
-            {'Child with ID'}
-          </span>
-        );
-      }
-
-      const ChildrenWithID = React.memo(function ChildrenWithID({parentID}) {
-        return (
-          <React.Suspense fallback="Loading 2...">
-            <ChildWithID parentID={parentID} />
-          </React.Suspense>
-        );
-      });
-
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <Children />
-            <ChildrenWithID parentID={id} />
-            {show && (
-              <span aria-labelledby={id} ref={setShowRef}>
-                {'Child Three'}
-              </span>
-            )}
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      expect(Scheduler).toHaveYielded([
-        'Child One',
-        'Child Two',
-        'Child with ID',
-      ]);
-      expect(container.textContent).toEqual('Child OneChild TwoChild with ID');
-
-      const serverId = container
-        .getElementsByTagName('span')[2]
-        .getAttribute('id');
-      expect(serverId).not.toBeNull();
-
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App show={false} />);
-      expect(Scheduler).toHaveYielded([]);
-
-      //Hydrate just child one before updating state
-      expect(Scheduler).toFlushAndYieldThrough(['Child One']);
-      expect(child1Ref.current).toBe(null);
-      expect(Scheduler).toHaveYielded([]);
-
-      act(() => {
-        _setShow(true);
-
-        // State update should trigger the ID to update, which changes the props
-        // of ChildWithID. This should cause ChildWithID to hydrate before Children
-
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Child with ID',
-          // Fallbacks are immediately committed in TestUtils version
-          // of act
-          // 'Child with ID',
-          // 'Child with ID',
-          'Child One',
-          'Child Two',
-        ]);
-
-        expect(child1Ref.current).toBe(null);
-        expect(childWithIDRef.current).toEqual(
-          container.getElementsByTagName('span')[2],
-        );
-
-        expect(setShowRef.current).toEqual(
-          container.getElementsByTagName('span')[3],
-        );
-
-        expect(childWithIDRef.current.getAttribute('id')).toEqual(
-          setShowRef.current.getAttribute('aria-labelledby'),
-        );
-        expect(childWithIDRef.current.getAttribute('id')).not.toEqual(serverId);
-      });
-
-      // Children hydrates after ChildWithID
-      expect(child1Ref.current).toBe(container.getElementsByTagName('span')[0]);
-
-      Scheduler.unstable_flushAll();
-
-      expect(Scheduler).toHaveYielded([]);
-    });
-
-    it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
-      let suspend = true;
-      let resolve;
-      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
-
-      function Child({text}) {
-        if (suspend) {
-          throw promise;
-        } else {
-          return text;
-        }
-      }
-
-      function RenderedChild() {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Child did commit');
-        });
-        return null;
-      }
-
-      function App() {
-        const id = useOpaqueIdentifier();
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Did commit');
-        });
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            <RenderedChild />
-            <React.Suspense fallback={'Fallback'}>
-              <div id={id}>
-                <Child text="Child Two" />
-              </div>
-            </React.Suspense>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      suspend = true;
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      await act(async () => {
-        root.render(<App />);
-      });
-      jest.runAllTimers();
-      expect(Scheduler).toHaveYielded(['Child did commit', 'Did commit']);
-      expect(Scheduler).toFlushAndYield([]);
-
-      const serverId = container.children[0].children[0].getAttribute('id');
-      expect(container.children[0].children.length).toEqual(1);
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-
-      await act(async () => {
-        suspend = false;
-        resolve();
-        await promise;
-      });
-
-      expect(Scheduler).toHaveYielded(['Child did commit', 'Did commit']);
-      expect(Scheduler).toFlushAndYield([]);
-      jest.runAllTimers();
-
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(container.children[0].children[0].getAttribute('id')).not.toEqual(
-        serverId,
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier warn when there is a hydration error', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={appId} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-          'Warning: Expected server HTML to contain a matching <div> in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
-      let suspend = true;
-
-      function Child({text}) {
-        if (suspend) {
-          throw new Promise(() => {});
-        } else {
-          return text;
-        }
-      }
-
-      function RenderedChild() {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Child did commit');
-        });
-        return null;
-      }
-
-      function App() {
-        const id = useOpaqueIdentifier();
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Did commit');
-        });
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            <RenderedChild />
-            <React.Suspense fallback={'Fallback'}>
-              <div id={id}>
-                <Child text="Child Two" />
-              </div>
-            </React.Suspense>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      suspend = false;
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      await act(async () => {
-        root.render(<App />);
-      });
-      jest.runAllTimers();
-      expect(Scheduler).toHaveYielded([
-        'Child did commit',
-        'Did commit',
-        'Child did commit',
-        'Did commit',
-      ]);
-      expect(Scheduler).toFlushAndYield([]);
-
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier warn when there is a hydration error', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={appId} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-          'Warning: Expected server HTML to contain a matching <div> in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns if you try to use the result as a string in a child component', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns if you try to use the result as a string', async () => {
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <div aria-labelledby={String(id)} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns if you try to use the result as a string in a child component wrapped in a Suspense', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return (
-          <React.Suspense fallback={null}>
-            <Child appId={id} />
-          </React.Suspense>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-
-      if (gate(flags => flags.deferRenderPhaseUpdateToNextBatch)) {
-        expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      } else {
-        // This error isn't surfaced to the user; only the warning is.
-        // The error is just the mechanism that restarts the render.
-        expect(() =>
-          expect(() => Scheduler.unstable_flushAll()).toThrow(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-              'Do not read the value directly.',
-          ),
-        ).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      }
-    });
-
-    it('useOpaqueIdentifier warns if you try to add the result as a number in a child component wrapped in a Suspense', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={+appId} />;
-      }
-      function App() {
-        const [show] = useState(false);
-        const id = useOpaqueIdentifier();
-        return (
-          <React.Suspense fallback={null}>
-            {show && <div id={id} />}
-            <Child appId={id} />
-          </React.Suspense>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-
-      if (gate(flags => flags.deferRenderPhaseUpdateToNextBatch)) {
-        expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      } else {
-        // This error isn't surfaced to the user; only the warning is.
-        // The error is just the mechanism that restarts the render.
-        expect(() =>
-          expect(() => Scheduler.unstable_flushAll()).toThrow(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-              'Do not read the value directly.',
-          ),
-        ).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      }
-    });
-
-    it('useOpaqueIdentifier with two opaque identifiers on the same page', () => {
-      let _setShow;
-
-      function App() {
-        const id1 = useOpaqueIdentifier();
-        const id2 = useOpaqueIdentifier();
-        const [show, setShow] = useState(true);
-        _setShow = setShow;
-
-        return (
-          <div>
-            <React.Suspense fallback={null}>
-              {show ? (
-                <span id={id1}>{'Child'}</span>
-              ) : (
-                <span id={id2}>{'Child'}</span>
-              )}
-            </React.Suspense>
-            <span aria-labelledby={id1}>{'test'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      const serverID = container
-        .getElementsByTagName('span')[0]
-        .getAttribute('id');
-      expect(serverID).not.toBeNull();
-      expect(
-        container
-          .getElementsByTagName('span')[1]
-          .getAttribute('aria-labelledby'),
-      ).toEqual(serverID);
-
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      jest.runAllTimers();
-      expect(Scheduler).toHaveYielded([]);
-      expect(Scheduler).toFlushAndYield([]);
-
-      act(() => {
-        _setShow(false);
-      });
-
-      expect(
-        container
-          .getElementsByTagName('span')[1]
-          .getAttribute('aria-labelledby'),
-      ).toEqual(serverID);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toEqual(serverID);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier with multiple ids in nested components', async () => {
-      function DivWithId({id, children}) {
-        return <div id={id}>{children}</div>;
-      }
-
-      let setShowMore;
-      function App() {
-        const outerId = useOpaqueIdentifier();
-        const innerId = useOpaqueIdentifier();
-        const [showMore, _setShowMore] = useState(false);
-        setShowMore = _setShowMore;
-        return showMore ? (
-          <DivWithId id={outerId}>
-            <DivWithId id={innerId} />
-          </DivWithId>
-        ) : null;
-      }
-
-      const container = document.createElement('div');
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      await act(async () => {
-        ReactDOM.hydrateRoot(container, <App />);
-      });
-
-      // Show additional content that wasn't part of the initial server-
-      // rendered repsonse.
-      await act(async () => {
-        setShowMore(true);
-      });
-      const [div1, div2] = container.getElementsByTagName('div');
-      expect(typeof div1.getAttribute('id')).toBe('string');
-      expect(typeof div2.getAttribute('id')).toBe('string');
-    });
-  });
 });
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 30fed05aed609..ad94f7ccb7026 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -21,7 +21,6 @@ import {
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
-import {isOpaqueHydratingObject} from './ReactDOMHostConfig';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -119,13 +118,6 @@ export function getValueForAttribute(
     if (!isAttributeNameSafe(name)) {
       return;
     }
-
-    // If the object is an opaque reference ID, it's expected that
-    // the next prop is different than the server value, so just return
-    // expected
-    if (isOpaqueHydratingObject(expected)) {
-      return expected;
-    }
     if (!node.hasAttribute(name)) {
       return expected === undefined ? undefined : null;
     }
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 2d347639eba45..aa9b0281e2f8d 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -68,7 +68,6 @@ import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 
 import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 import {
@@ -775,15 +774,6 @@ export function diffProperties(
         // to update this element.
         updatePayload = [];
       }
-    } else if (
-      typeof nextProp === 'object' &&
-      nextProp !== null &&
-      nextProp.$$typeof === REACT_OPAQUE_ID_TYPE
-    ) {
-      // If we encounter useOpaqueReference's opaque object, this means we are hydrating.
-      // In this case, call the opaque object's toString function which generates a new client
-      // ID so client and server IDs match and throws to rerender.
-      nextProp.toString();
     } else {
       // For any other property we always add it to the queue and then we
       // filter it out using the allowed property list during the commit.
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 8a5417ae49272..64fd789b7a1e8 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -59,7 +59,6 @@ import {
 } from '../shared/HTMLNodeType';
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
@@ -124,13 +123,6 @@ export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type RendererInspectionConfig = $ReadOnly<{||}>;
 
-export opaque type OpaqueIDType =
-  | string
-  | {
-      toString: () => string | void,
-      valueOf: () => string | void,
-    };
-
 type SelectionInformation = {|
   focusedElem: null | HTMLElement,
   selectionRange: mixed,
@@ -1089,43 +1081,6 @@ export function getInstanceFromNode(node: HTMLElement): null | Object {
   return getClosestInstanceFromNode(node) || null;
 }
 
-let clientId: number = 0;
-export function makeClientId(): OpaqueIDType {
-  return 'r:' + (clientId++).toString(36);
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  const id = 'r:' + (clientId++).toString(36);
-  return {
-    toString() {
-      warnOnAccessInDEV();
-      return id;
-    },
-    valueOf() {
-      warnOnAccessInDEV();
-      return id;
-    },
-  };
-}
-
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    value.$$typeof === REACT_OPAQUE_ID_TYPE
-  );
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  return {
-    $$typeof: REACT_OPAQUE_ID_TYPE,
-    toString: attemptToReadValue,
-    valueOf: attemptToReadValue,
-  };
-}
-
 export function preparePortalMount(portalInstance: Instance): void {
   listenToAllSupportedEvents(portalInstance);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 2012392004e52..65a10974b0196 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -64,9 +64,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
-  opaqueIdentifierPrefix: string,
   nextSuspenseID: number,
-  nextOpaqueID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean, // We allow the legacy renderer to extend this object.
@@ -127,9 +125,7 @@ export function createResponseState(
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
-    opaqueIdentifierPrefix: idPrefix + 'R:',
     nextSuspenseID: 0,
-    nextOpaqueID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
@@ -233,24 +229,6 @@ export function assignSuspenseBoundaryID(
   );
 }
 
-export type OpaqueIDType = string;
-
-export function makeServerID(
-  responseState: null | ResponseState,
-): OpaqueIDType {
-  if (responseState === null) {
-    throw new Error(
-      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-    );
-  }
-
-  // TODO: This is not deterministic since it's created during render.
-  return (
-    responseState.opaqueIdentifierPrefix +
-    (responseState.nextOpaqueID++).toString(36)
-  );
-}
-
 function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 7373e71681761..5b0798b737129 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -34,9 +34,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
-  opaqueIdentifierPrefix: string,
   nextSuspenseID: number,
-  nextOpaqueID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
@@ -56,9 +54,7 @@ export function createResponseState(
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,
-    opaqueIdentifierPrefix: responseState.opaqueIdentifierPrefix,
     nextSuspenseID: responseState.nextSuspenseID,
-    nextOpaqueID: responseState.nextOpaqueID,
     sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
     sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
     sentClientRenderFunction: responseState.sentClientRenderFunction,
@@ -77,14 +73,12 @@ export function createRootFormatContext(): FormatContext {
 export type {
   FormatContext,
   SuspenseBoundaryID,
-  OpaqueIDType,
 } from './ReactDOMServerFormatConfig';
 
 export {
   getChildFormatContext,
   UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
   assignSuspenseBoundaryID,
-  makeServerID,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 479a828a46e1f..1902dc65690c8 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -82,10 +82,6 @@ import {validateProperties as validateInputProperties} from '../shared/ReactDOMN
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
-export type ServerOptions = {
-  identifierPrefix?: string,
-};
-
 // Based on reading the React.Children implementation. TODO: type this somewhere?
 type ReactNode = string | number | ReactElement;
 type FlatReactChildren = Array<null | ReactNode>;
@@ -784,14 +780,7 @@ class ReactDOMServerRenderer {
   contextValueStack: Array<any>;
   contextProviderStack: ?Array<ReactProvider<any>>; // DEV-only
 
-  uniqueID: number;
-  identifierPrefix: string;
-
-  constructor(
-    children: mixed,
-    makeStaticMarkup: boolean,
-    options?: ServerOptions,
-  ) {
+  constructor(children: mixed, makeStaticMarkup: boolean) {
     const flatChildren = flattenTopLevelChildren(children);
 
     const topFrame: Frame = {
@@ -820,10 +809,6 @@ class ReactDOMServerRenderer {
     this.contextStack = [];
     this.contextValueStack = [];
 
-    // useOpaqueIdentifier ID
-    this.uniqueID = 0;
-    this.identifierPrefix = (options && options.identifierPrefix) || '';
-
     if (__DEV__) {
       this.contextProviderStack = [];
     }
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 26f2dd00ee0c6..2940c47bde46d 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -41,8 +41,6 @@ type Hook = {|
   next: Hook | null,
 |};
 
-type OpaqueIDType = string;
-
 let currentlyRenderingComponent: Object | null = null;
 let firstWorkInProgressHook: Hook | null = null;
 let workInProgressHook: Hook | null = null;
@@ -511,15 +509,7 @@ function useTransition(): [boolean, (callback: () => void) => void] {
   return [false, startTransition];
 }
 
-function useOpaqueIdentifier(): OpaqueIDType {
-  return (
-    (currentPartialRenderer.identifierPrefix || '') +
-    'R:' +
-    (currentPartialRenderer.uniqueID++).toString(36)
-  );
-}
-
-function useId(): OpaqueIDType {
+function useId(): string {
   throw new Error('Not implemented.');
 }
 
@@ -552,7 +542,6 @@ export const Dispatcher: DispatcherType = {
   useDebugValue: noop,
   useDeferredValue,
   useTransition,
-  useOpaqueIdentifier,
   useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index c71a9050211cf..727b782efd768 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -84,8 +84,6 @@ export type UpdatePayload = Object;
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
-export type OpaqueIDType = void;
-
 export type RendererInspectionConfig = $ReadOnly<{|
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
   getInspectorDataForViewTag?: (tag: number) => Object,
@@ -512,24 +510,6 @@ export function getInstanceFromNode(node: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not yet implemented');
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  throw new Error('Not yet implemented.');
-}
-
-export function makeClientId(): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 769f46e852a2f..10c5e37f41bcc 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -43,7 +43,6 @@ export type ChildSet = void; // Unused
 
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
-export type OpaqueIDType = void;
 
 export type RendererInspectionConfig = $ReadOnly<{|
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
@@ -499,24 +498,6 @@ export function getInstanceFromNode(node: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not yet implemented');
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  throw new Error('Not yet implemented.');
-}
-
-export function makeClientId(): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 3daa48f420b16..5b12d810bbe0f 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -59,14 +59,12 @@ SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
 // Per response,
 export type ResponseState = {
   nextSuspenseID: number,
-  nextOpaqueID: number,
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(): ResponseState {
   return {
     nextSuspenseID: 0,
-    nextOpaqueID: 0,
   };
 }
 
@@ -109,21 +107,6 @@ export function assignSuspenseBoundaryID(
   return responseState.nextSuspenseID++;
 }
 
-export type OpaqueIDType = number;
-
-export function makeServerID(
-  responseState: null | ResponseState,
-): OpaqueIDType {
-  if (responseState === null) {
-    throw new Error(
-      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-    );
-  }
-
-  // TODO: This is not deterministic since it's created during render.
-  return responseState.nextOpaqueID++;
-}
-
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
 export function pushTextInstance(
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index efcf727eac896..d217b16e50bfd 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -53,8 +53,6 @@ type Destination = {
 
 const POP = Buffer.from('/', 'utf8');
 
-let opaqueID = 0;
-
 const ReactNoopServer = ReactFizzServer({
   scheduleWork(callback: () => void) {
     callback();
@@ -88,10 +86,6 @@ const ReactNoopServer = ReactFizzServer({
     return {state: 'pending', children: []};
   },
 
-  makeServerID(): number {
-    return opaqueID++;
-  },
-
   getChildFormatContext(): null {
     return null;
   },
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index a1d7009a85a43..1238d673725ac 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -17,7 +17,6 @@ import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {Flags} from './ReactFiberFlags';
 
@@ -95,18 +94,12 @@ import {
   checkIfWorkInProgressReceivedUpdate,
 } from './ReactFiberBeginWork.new';
 import {getIsHydrating} from './ReactFiberHydrationContext.new';
-import {
-  makeClientId,
-  makeClientIdInDEV,
-  makeOpaqueHydratingObject,
-} from './ReactFiberHostConfig';
 import {
   getWorkInProgressVersion,
   markSourceAsDirty,
   setWorkInProgressVersion,
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource.new';
-import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {createCache, CacheContext} from './ReactFiberCacheComponent.new';
@@ -139,10 +132,8 @@ export type UpdateQueue<S, A> = {|
 |};
 
 let didWarnAboutMismatchedHooksForComponent;
-let didWarnAboutUseOpaqueIdentifier;
 let didWarnUncachedGetSnapshot;
 if (__DEV__) {
-  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -2045,94 +2036,6 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
   }
 }
 
-function warnOnOpaqueIdentifierAccessInDEV(fiber) {
-  if (__DEV__) {
-    // TODO: Should warn in effects and callbacks, too
-    const name = getComponentNameFromFiber(fiber) || 'Unknown';
-    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
-      console.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(): OpaqueIDType | void {
-  const makeId = __DEV__
-    ? makeClientIdInDEV.bind(
-        null,
-        warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),
-      )
-    : makeClientId;
-
-  if (getIsHydrating()) {
-    let didUpgrade = false;
-    const fiber = currentlyRenderingFiber;
-    const readValue = () => {
-      if (!didUpgrade) {
-        // Only upgrade once. This works even inside the render phase because
-        // the update is added to a shared queue, which outlasts the
-        // in-progress render.
-        didUpgrade = true;
-        if (__DEV__) {
-          isUpdatingOpaqueValueInRenderPhase = true;
-          setId(makeId());
-          isUpdatingOpaqueValueInRenderPhase = false;
-          warnOnOpaqueIdentifierAccessInDEV(fiber);
-        } else {
-          setId(makeId());
-        }
-      }
-
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be ' +
-          'passed through to attributes only. Do not read the value directly.',
-      );
-    };
-    const id = makeOpaqueHydratingObject(readValue);
-
-    const setId = mountState(id)[1];
-
-    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
-      ) {
-        currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
-      } else {
-        currentlyRenderingFiber.flags |= PassiveEffect;
-      }
-      pushEffect(
-        HookHasEffect | HookPassive,
-        () => {
-          setId(makeId());
-        },
-        undefined,
-        null,
-      );
-    }
-    return id;
-  } else {
-    const id = makeId();
-    mountState(id);
-    return id;
-  }
-}
-
-function updateOpaqueIdentifier(): OpaqueIDType | void {
-  const id = updateState(undefined)[0];
-  return id;
-}
-
-function rerenderOpaqueIdentifier(): OpaqueIDType | void {
-  const id = rerenderState(undefined)[0];
-  return id;
-}
-
 function mountId(): string {
   const hook = mountWorkInProgressHook();
 
@@ -2481,7 +2384,6 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
-  useOpaqueIdentifier: throwInvalidHookError,
   useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2510,7 +2412,6 @@ const HooksDispatcherOnMount: Dispatcher = {
   useTransition: mountTransition,
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: mountOpaqueIdentifier,
   useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2539,7 +2440,6 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useTransition: updateTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
-  useOpaqueIdentifier: updateOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2568,7 +2468,6 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: rerenderOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2736,11 +2635,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       mountHookTypesDev();
@@ -2883,11 +2777,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3030,11 +2919,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3178,11 +3062,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3341,12 +3220,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3506,12 +3379,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3672,12 +3539,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 167698271dbac..3b0b87cb1ab7c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -17,7 +17,6 @@ import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {Flags} from './ReactFiberFlags';
 
@@ -95,18 +94,12 @@ import {
   checkIfWorkInProgressReceivedUpdate,
 } from './ReactFiberBeginWork.old';
 import {getIsHydrating} from './ReactFiberHydrationContext.old';
-import {
-  makeClientId,
-  makeClientIdInDEV,
-  makeOpaqueHydratingObject,
-} from './ReactFiberHostConfig';
 import {
   getWorkInProgressVersion,
   markSourceAsDirty,
   setWorkInProgressVersion,
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource.old';
-import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {createCache, CacheContext} from './ReactFiberCacheComponent.old';
@@ -139,10 +132,8 @@ export type UpdateQueue<S, A> = {|
 |};
 
 let didWarnAboutMismatchedHooksForComponent;
-let didWarnAboutUseOpaqueIdentifier;
 let didWarnUncachedGetSnapshot;
 if (__DEV__) {
-  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -2045,94 +2036,6 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
   }
 }
 
-function warnOnOpaqueIdentifierAccessInDEV(fiber) {
-  if (__DEV__) {
-    // TODO: Should warn in effects and callbacks, too
-    const name = getComponentNameFromFiber(fiber) || 'Unknown';
-    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
-      console.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(): OpaqueIDType | void {
-  const makeId = __DEV__
-    ? makeClientIdInDEV.bind(
-        null,
-        warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),
-      )
-    : makeClientId;
-
-  if (getIsHydrating()) {
-    let didUpgrade = false;
-    const fiber = currentlyRenderingFiber;
-    const readValue = () => {
-      if (!didUpgrade) {
-        // Only upgrade once. This works even inside the render phase because
-        // the update is added to a shared queue, which outlasts the
-        // in-progress render.
-        didUpgrade = true;
-        if (__DEV__) {
-          isUpdatingOpaqueValueInRenderPhase = true;
-          setId(makeId());
-          isUpdatingOpaqueValueInRenderPhase = false;
-          warnOnOpaqueIdentifierAccessInDEV(fiber);
-        } else {
-          setId(makeId());
-        }
-      }
-
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be ' +
-          'passed through to attributes only. Do not read the value directly.',
-      );
-    };
-    const id = makeOpaqueHydratingObject(readValue);
-
-    const setId = mountState(id)[1];
-
-    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
-      ) {
-        currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
-      } else {
-        currentlyRenderingFiber.flags |= PassiveEffect;
-      }
-      pushEffect(
-        HookHasEffect | HookPassive,
-        () => {
-          setId(makeId());
-        },
-        undefined,
-        null,
-      );
-    }
-    return id;
-  } else {
-    const id = makeId();
-    mountState(id);
-    return id;
-  }
-}
-
-function updateOpaqueIdentifier(): OpaqueIDType | void {
-  const id = updateState(undefined)[0];
-  return id;
-}
-
-function rerenderOpaqueIdentifier(): OpaqueIDType | void {
-  const id = rerenderState(undefined)[0];
-  return id;
-}
-
 function mountId(): string {
   const hook = mountWorkInProgressHook();
 
@@ -2481,7 +2384,6 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
-  useOpaqueIdentifier: throwInvalidHookError,
   useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2510,7 +2412,6 @@ const HooksDispatcherOnMount: Dispatcher = {
   useTransition: mountTransition,
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: mountOpaqueIdentifier,
   useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2539,7 +2440,6 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useTransition: updateTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
-  useOpaqueIdentifier: updateOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2568,7 +2468,6 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: rerenderOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2736,11 +2635,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       mountHookTypesDev();
@@ -2883,11 +2777,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3030,11 +2919,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3178,11 +3062,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3341,12 +3220,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3506,12 +3379,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3672,12 +3539,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e35e5515bb0bf..71bf8175105d6 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -474,8 +474,7 @@ export function scheduleUpdateOnFiber(
     // 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
-    // and useOpaqueIdentifier.
+    // an implementation detail, like selective hydration.
     warnAboutRenderPhaseUpdatesInDEV(fiber);
 
     // Track lanes that were updated during the render phase
@@ -898,12 +897,10 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
       exitStatus === RootErrored &&
       workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
     ) {
-      // There was a render phase update during this render. This was likely a
-      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
-      // again. This time, the component will use a client ID and will proceed
-      // without throwing. If multiple IDs upgrade as a result of the same
-      // update, we will have to do multiple render passes. To protect against
-      // an inifinite loop, eventually we'll give up.
+      // 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;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index cde46adb01ab0..8be4630dc079d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -474,8 +474,7 @@ export function scheduleUpdateOnFiber(
     // 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
-    // and useOpaqueIdentifier.
+    // an implementation detail, like selective hydration.
     warnAboutRenderPhaseUpdatesInDEV(fiber);
 
     // Track lanes that were updated during the render phase
@@ -898,12 +897,10 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
       exitStatus === RootErrored &&
       workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
     ) {
-      // There was a render phase update during this render. This was likely a
-      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
-      // again. This time, the component will use a client ID and will proceed
-      // without throwing. If multiple IDs upgrade as a result of the same
-      // update, we will have to do multiple render passes. To protect against
-      // an inifinite loop, eventually we'll give up.
+      // 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;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 9dac4f40aad53..db964103836da 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -43,7 +43,6 @@ export type HookType =
   | 'useTransition'
   | 'useMutableSource'
   | 'useSyncExternalStore'
-  | 'useOpaqueIdentifier'
   | 'useId'
   | 'useCacheRefresh';
 
@@ -317,7 +316,6 @@ export type Dispatcher = {|
     getSnapshot: () => T,
     getServerSnapshot?: () => T,
   ): T,
-  useOpaqueIdentifier(): any,
   useId(): string,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index cc842bd16d22f..55ce08b45450b 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1916,14 +1916,14 @@ describe('ReactIncrementalErrorHandling', () => {
   });
 
   it("does not infinite loop if there's a render phase update in the same render as an error", async () => {
-    // useOpaqueIdentifier uses an render phase update as an implementation
-    // detail. When an error is accompanied by a render phase update, we assume
-    // that it comes from useOpaqueIdentifier, because render phase updates
-    // triggered from userspace are not allowed (we log a warning). So we keep
-    // attempting to recover until no more opaque identifiers need to be
-    // upgraded. However, we should give up after some point to prevent an
-    // infinite loop in the case where there is (by accident) a render phase
-    // triggered from userspace.
+    // Some React features may schedule a render phase update as an
+    // implementation detail. When an error is accompanied by a render phase
+    // update, we assume that it comes from React internals, because render
+    // phase updates triggered from userspace are not allowed (we log a
+    // warning). So we keep attempting to recover until no more opaque
+    // identifiers need to be upgraded. However, we should give up after some
+    // point to prevent an infinite loop in the case where there is (by
+    // accident) a render phase triggered from userspace.
 
     spyOnDev(console, 'error');
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 29d4fd7e79893..6535d8d3fdec3 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -38,7 +38,6 @@ export opaque type ChildSet = mixed; // eslint-disable-line no-undef
 export opaque type TimeoutHandle = mixed; // eslint-disable-line no-undef
 export opaque type NoTimeout = mixed; // eslint-disable-line no-undef
 export opaque type RendererInspectionConfig = mixed; // eslint-disable-line no-undef
-export opaque type OpaqueIDType = mixed;
 export type EventResponder = any;
 
 export const getPublicInstance = $$$hostConfig.getPublicInstance;
@@ -62,11 +61,6 @@ export const supportsMutation = $$$hostConfig.supportsMutation;
 export const supportsPersistence = $$$hostConfig.supportsPersistence;
 export const supportsHydration = $$$hostConfig.supportsHydration;
 export const getInstanceFromNode = $$$hostConfig.getInstanceFromNode;
-export const isOpaqueHydratingObject = $$$hostConfig.isOpaqueHydratingObject;
-export const makeOpaqueHydratingObject =
-  $$$hostConfig.makeOpaqueHydratingObject;
-export const makeClientId = $$$hostConfig.makeClientId;
-export const makeClientIdInDEV = $$$hostConfig.makeClientIdInDEV;
 export const beforeActiveInstanceBlur = $$$hostConfig.beforeActiveInstanceBlur;
 export const afterActiveInstanceBlur = $$$hostConfig.afterActiveInstanceBlur;
 export const preparePortalMount = $$$hostConfig.preparePortalMount;
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index bf1a2d56e0f93..7b31e6b37ed9e 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -16,14 +16,12 @@ import type {
   ReactContext,
 } from 'shared/ReactTypes';
 
-import type {ResponseState, OpaqueIDType} from './ReactServerFormatConfig';
+import type {ResponseState} from './ReactServerFormatConfig';
 import type {Task} from './ReactFizzServer';
 
 import {readContext as readContextImpl} from './ReactFizzNewContext';
 import {getTreeId} from './ReactFizzTreeContext';
 
-import {makeServerID} from './ReactServerFormatConfig';
-
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -509,10 +507,6 @@ function useTransition(): [boolean, (callback: () => void) => void] {
   return [false, unsupportedStartTransition];
 }
 
-function useOpaqueIdentifier(): OpaqueIDType {
-  return makeServerID(currentResponseState);
-}
-
 function useId(): string {
   const task: Task = (currentlyRenderingTask: any);
   const treeId = getTreeId(task.treeContext);
@@ -559,7 +553,6 @@ export const Dispatcher: DispatcherType = {
   useDebugValue: noop,
   useDeferredValue,
   useTransition,
-  useOpaqueIdentifier,
   useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index bba34065cc268..418fbb8241a66 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -845,7 +845,6 @@ const Dispatcher: DispatcherType = {
   useLayoutEffect: (unsupportedHook: any),
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
-  useOpaqueIdentifier: (unsupportedHook: any),
   useId: (unsupportedHook: any),
   useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 8cfe59ce1628c..f246ddab8b5bf 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -28,7 +28,6 @@ export opaque type Destination = mixed; // eslint-disable-line no-undef
 export opaque type ResponseState = mixed;
 export opaque type FormatContext = mixed;
 export opaque type SuspenseBoundaryID = mixed;
-export opaque type OpaqueIDType = mixed;
 
 export const isPrimaryRenderer = false;
 
@@ -36,7 +35,6 @@ export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
 export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
   $$$hostConfig.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
 export const assignSuspenseBoundaryID = $$$hostConfig.assignSuspenseBoundaryID;
-export const makeServerID = $$$hostConfig.makeServerID;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index 731124ea51593..d75f1f7c9b453 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -42,7 +42,6 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useDebugValue: unsupported,
     useDeferredValue: unsupported,
     useTransition: unsupported,
-    useOpaqueIdentifier: unsupported,
     useId: unsupported,
     useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 6cdadabe281a5..503b08efaf20b 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import isArray from 'shared/isArray';
 import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
@@ -40,12 +39,6 @@ export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type EventResponder = any;
-export opaque type OpaqueIDType =
-  | string
-  | {
-      toString: () => string | void,
-      valueOf: () => string | void,
-    };
 
 export type RendererInspectionConfig = $ReadOnly<{||}>;
 
@@ -298,43 +291,6 @@ export function getInstanceFromNode(mockNode: Object) {
   return null;
 }
 
-let clientId: number = 0;
-export function makeClientId(): OpaqueIDType {
-  return 'c_' + (clientId++).toString(36);
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  const id = 'c_' + (clientId++).toString(36);
-  return {
-    toString() {
-      warnOnAccessInDEV();
-      return id;
-    },
-    valueOf() {
-      warnOnAccessInDEV();
-      return id;
-    },
-  };
-}
-
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    value.$$typeof === REACT_OPAQUE_ID_TYPE
-  );
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  return {
-    $$typeof: REACT_OPAQUE_ID_TYPE,
-    toString: attemptToReadValue,
-    valueOf: attemptToReadValue,
-  };
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index a2e678c580b2e..70bbc6112a56c 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -40,7 +40,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 20c22828583f5..bc3f4883bdb3d 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -36,7 +36,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.js b/packages/react/index.js
index 3108c06c55284..a27507524e50b 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -61,7 +61,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index eef99fdabf2a4..922acfc158109 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -39,7 +39,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 517dc3f8fb2db..eb9673efd16ad 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -29,7 +29,6 @@ export {
   lazy,
   memo,
   startTransition,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 868538c83f59b..5fe5b4d96b609 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -52,7 +52,6 @@ import {
   useState,
   useTransition,
   useDeferredValue,
-  useOpaqueIdentifier,
   useId,
   useCacheRefresh,
 } from './ReactHooks';
@@ -127,7 +126,6 @@ export {
   REACT_CACHE_TYPE as unstable_Cache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
-  useOpaqueIdentifier as unstable_useOpaqueIdentifier,
   useId as unstable_useId,
   act,
 };
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 1f987de1671ba..12a5350083f38 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -14,7 +14,6 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
 } from 'shared/ReactTypes';
-import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 
@@ -169,11 +168,6 @@ export function useDeferredValue<T>(value: T): T {
   return dispatcher.useDeferredValue(value);
 }
 
-export function useOpaqueIdentifier(): OpaqueIDType | void {
-  const dispatcher = resolveDispatcher();
-  return dispatcher.useOpaqueIdentifier();
-}
-
 export function useId(): string {
   const dispatcher = resolveDispatcher();
   return dispatcher.useId();
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index d556400750b4c..7a9352f30199a 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -27,7 +27,6 @@ export {
   unstable_DebugTracingMode,
   unstable_getCacheSignal,
   unstable_getCacheForType,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
index 9db9e7145ad4f..305572f8462c7 100644
--- a/packages/shared/CheckStringCoercion.js
+++ b/packages/shared/CheckStringCoercion.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
-
 /*
  * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
  * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
@@ -35,16 +33,6 @@ function typeName(value: mixed): string {
 // $FlowFixMe only called in DEV, so void return is not possible.
 function willCoercionThrow(value: mixed): boolean {
   if (__DEV__) {
-    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;
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index c2fcba6324410..a50a06b150169 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -26,7 +26,6 @@ export let REACT_SUSPENSE_LIST_TYPE = 0xead8;
 export let REACT_MEMO_TYPE = 0xead3;
 export let REACT_LAZY_TYPE = 0xead4;
 export let REACT_SCOPE_TYPE = 0xead7;
-export let REACT_OPAQUE_ID_TYPE = 0xeae0;
 export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
 export let REACT_OFFSCREEN_TYPE = 0xeae2;
 export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
@@ -47,7 +46,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');
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index aab5d62476cc3..93391eb309d49 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -342,7 +342,7 @@
   "352": "React Lazy Components are not yet supported on the server.",
   "353": "A server block should never encode any other slots. This is a bug in React.",
   "354": "getInspectorDataForViewAtPoint() is not available in production.",
-  "355": "The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.",
+  "355": "The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly. (TODO: This feature was never released so we should be able to remove this error from the map.)",
   "356": "Could not read the cache.",
   "357": "The current renderer does not support React Scopes. This error is likely caused by a bug in React. Please file an issue.",
   "358": "Invalid update priority: %s. This is a bug in React.",

From 5cccacd131242bdea2c2fe4b33fac50d2e3132b4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 18:26:42 -0400
Subject: [PATCH 076/109] Upgrade useId to alpha channel (#22674)

---
 .../src/__tests__/ReactHooksInspectionIntegration-test.js       | 2 +-
 packages/react-dom/src/__tests__/ReactDOMUseId-test.js          | 2 +-
 packages/react/index.classic.fb.js                              | 2 +-
 packages/react/index.experimental.js                            | 2 +-
 packages/react/index.js                                         | 2 +-
 packages/react/index.modern.fb.js                               | 2 +-
 packages/react/index.stable.js                                  | 2 +-
 packages/react/src/React.js                                     | 2 +-
 packages/react/unstable-shared-subset.experimental.js           | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 559a0bf75e52f..5b36039ecc5dc 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -600,7 +600,7 @@ describe('ReactHooksInspectionIntegration', () => {
 
   it('should support useId hook', () => {
     function Foo(props) {
-      const id = React.unstable_useId();
+      const id = React.useId();
       const [state] = React.useState('hello');
       return <div id={id}>{state}</div>;
     }
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index b61e79fa670d6..09ccdc86d14e6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -34,7 +34,7 @@ describe('useId', () => {
     ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
     Suspense = React.Suspense;
-    useId = React.unstable_useId;
+    useId = React.useId;
 
     // Test Environment
     const jsdom = new JSDOM(
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 70bbc6112a56c..33c770f00fed5 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -40,7 +40,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index bc3f4883bdb3d..d4dc33a4db01a 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -36,7 +36,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.js b/packages/react/index.js
index a27507524e50b..6a249ba432c72 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -61,7 +61,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 922acfc158109..5b0d75e21460b 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -39,7 +39,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index eb9673efd16ad..234ec8336a9ed 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -29,7 +29,7 @@ export {
   lazy,
   memo,
   startTransition,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 5fe5b4d96b609..891269ee32653 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -126,6 +126,6 @@ export {
   REACT_CACHE_TYPE as unstable_Cache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
-  useId as unstable_useId,
+  useId,
   act,
 };
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index 7a9352f30199a..a24e302e49c4a 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -27,7 +27,7 @@ export {
   unstable_DebugTracingMode,
   unstable_getCacheSignal,
   unstable_getCacheForType,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,

From 3fcd81dd1c3cd1413b72ae2919bc8312787f8f58 Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Tue, 2 Nov 2021 20:00:37 +0530
Subject: [PATCH 077/109] Improved workers filenames in devtools-inline
 (#22676)

---
 packages/react-devtools-inline/webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index bc38a8792e4c4..7c2325bf70f45 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -95,6 +95,7 @@ module.exports = {
             loader: 'workerize-loader',
             options: {
               inline: true,
+              name: '[name]',
             },
           },
           {

From 9fb3442250cf198782a08024195fcc5402479160 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 2 Nov 2021 11:02:45 -0400
Subject: [PATCH 078/109] Fix DevTools advanced tooltip display conditional
 check (#22669)

---
 .../src/devtools/views/Profiler/SnapshotCommitList.js       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 4fda4177706ad..2b837f28f6495 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -217,7 +217,11 @@ function List({
 
     // Only some React versions include commit durations.
     // Show a richer tooltip only for builds that have that info.
-    if (effectDuration !== null || passiveEffectDuration !== null) {
+    if (
+      effectDuration !== null ||
+      passiveEffectDuration !== null ||
+      priorityLevel !== null
+    ) {
       tooltipLabel = (
         <ul className={styles.TooltipList}>
           {priorityLevel !== null && (

From 00ced1e2b7610543a519329a76ad0bfd12cd1c32 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 2 Nov 2021 20:59:17 -0400
Subject: [PATCH 079/109] Fix useId in strict mode (#22681)

* Fix: useId in strict mode

In strict mode, `renderWithHooks` is called twice to flush out
side effects.

Modying the tree context (`pushTreeId` and `pushTreeFork`) is effectful,
so before this fix, the tree context was allocating two slots for a
materialized id instead of one.

To address, I lifted those calls outside of `renderWithHooks`. This
is how I had originally structured it, and it's how Fizz is structured,
too. The other solution would be to reset the stack in between the calls
but that's also a bit weird because we usually only ever reset the
stack during unwind or complete.

* Add test for render phase updates

Noticed this while fixing the previous bug
---
 .../src/__tests__/ReactDOMUseId-test.js       | 57 +++++++++++++++++++
 .../src/ReactFiberBeginWork.new.js            | 31 +++++++++-
 .../src/ReactFiberBeginWork.old.js            | 31 +++++++++-
 .../src/ReactFiberHooks.new.js                | 30 +++++-----
 .../src/ReactFiberHooks.old.js                | 30 +++++-----
 .../src/ReactFiberTreeContext.new.js          | 14 +++++
 .../src/ReactFiberTreeContext.old.js          | 14 +++++
 packages/react-server/src/ReactFizzHooks.js   |  1 +
 8 files changed, 172 insertions(+), 36 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index 09ccdc86d14e6..dd7bbaa8b41fa 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -16,6 +16,7 @@ let ReactDOMFizzServer;
 let Stream;
 let Suspense;
 let useId;
+let useState;
 let document;
 let writable;
 let container;
@@ -35,6 +36,7 @@ describe('useId', () => {
     Stream = require('stream');
     Suspense = React.Suspense;
     useId = React.useId;
+    useState = React.useState;
 
     // Test Environment
     const jsdom = new JSDOM(
@@ -198,6 +200,35 @@ describe('useId', () => {
     `);
   });
 
+  test('StrictMode double rendering', async () => {
+    const {StrictMode} = React;
+
+    function App() {
+      return (
+        <StrictMode>
+          <DivWithId />
+        </StrictMode>
+      );
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="0"
+        />
+      </div>
+    `);
+  });
+
   test('empty (null) children', async () => {
     // We don't treat empty children different from non-empty ones, which means
     // they get allocated a slot when generating ids. There's no inherent reason
@@ -313,6 +344,32 @@ describe('useId', () => {
     `);
   });
 
+  test('local render phase updates', async () => {
+    function App({swap}) {
+      const [count, setCount] = useState(0);
+      if (count < 3) {
+        setCount(count + 1);
+      }
+      return useId();
+    }
+
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    await clientAct(async () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        R:0
+        <!-- -->
+      </div>
+    `);
+  });
+
   test('basic incremental hydration', async () => {
     function App() {
       return (
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 653ee9e1b4ea7..d66bba0dc2ee3 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -174,7 +174,11 @@ import {
   prepareToReadContext,
   scheduleWorkOnParentPath,
 } from './ReactFiberNewContext.new';
-import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.new';
+import {
+  renderWithHooks,
+  checkDidRenderIdHook,
+  bailoutHooks,
+} from './ReactFiberHooks.new';
 import {stopProfilerTimerIfRunning} from './ReactProfilerTimer.new';
 import {
   getMaskedContext,
@@ -240,6 +244,7 @@ import {
   getForksAtLevel,
   isForkedChild,
   pushTreeId,
+  pushMaterializedTreeId,
 } from './ReactFiberTreeContext.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -365,6 +370,7 @@ function updateForwardRef(
 
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -380,6 +386,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -394,6 +401,7 @@ function updateForwardRef(
           ref,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -408,6 +416,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -418,6 +427,10 @@ function updateForwardRef(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -970,6 +983,7 @@ function updateFunctionComponent(
   }
 
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -985,6 +999,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -999,6 +1014,7 @@ function updateFunctionComponent(
           context,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -1013,6 +1029,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1023,6 +1040,10 @@ function updateFunctionComponent(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -1593,6 +1614,7 @@ function mountIndeterminateComponent(
 
   prepareToReadContext(workInProgress, renderLanes);
   let value;
+  let hasId;
 
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -1629,6 +1651,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     setIsRendering(false);
   } else {
     value = renderWithHooks(
@@ -1639,6 +1662,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1758,12 +1782,17 @@ function mountIndeterminateComponent(
             context,
             renderLanes,
           );
+          hasId = checkDidRenderIdHook();
         } finally {
           setIsStrictModeForDevtools(false);
         }
       }
     }
 
+    if (getIsHydrating() && hasId) {
+      pushMaterializedTreeId(workInProgress);
+    }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 9833ef481af70..62d51046b3c46 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -174,7 +174,11 @@ import {
   prepareToReadContext,
   scheduleWorkOnParentPath,
 } from './ReactFiberNewContext.old';
-import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.old';
+import {
+  renderWithHooks,
+  checkDidRenderIdHook,
+  bailoutHooks,
+} from './ReactFiberHooks.old';
 import {stopProfilerTimerIfRunning} from './ReactProfilerTimer.old';
 import {
   getMaskedContext,
@@ -240,6 +244,7 @@ import {
   getForksAtLevel,
   isForkedChild,
   pushTreeId,
+  pushMaterializedTreeId,
 } from './ReactFiberTreeContext.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -365,6 +370,7 @@ function updateForwardRef(
 
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -380,6 +386,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -394,6 +401,7 @@ function updateForwardRef(
           ref,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -408,6 +416,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -418,6 +427,10 @@ function updateForwardRef(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -970,6 +983,7 @@ function updateFunctionComponent(
   }
 
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -985,6 +999,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -999,6 +1014,7 @@ function updateFunctionComponent(
           context,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -1013,6 +1029,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1023,6 +1040,10 @@ function updateFunctionComponent(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -1593,6 +1614,7 @@ function mountIndeterminateComponent(
 
   prepareToReadContext(workInProgress, renderLanes);
   let value;
+  let hasId;
 
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -1629,6 +1651,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     setIsRendering(false);
   } else {
     value = renderWithHooks(
@@ -1639,6 +1662,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1758,12 +1782,17 @@ function mountIndeterminateComponent(
             context,
             renderLanes,
           );
+          hasId = checkDidRenderIdHook();
         } finally {
           setIsStrictModeForDevtools(false);
         }
       }
     }
 
+    if (getIsHydrating() && hasId) {
+      pushMaterializedTreeId(workInProgress);
+    }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 1238d673725ac..2ea341864642c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -110,7 +110,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.new';
+import {getTreeId} from './ReactFiberTreeContext.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -432,6 +432,7 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
+      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -513,6 +514,8 @@ export function renderWithHooks<Props, SecondArg>(
   }
 
   didScheduleRenderPhaseUpdate = false;
+  // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -541,25 +544,18 @@ export function renderWithHooks<Props, SecondArg>(
       }
     }
   }
-
-  if (localIdCounter !== 0) {
-    localIdCounter = 0;
-    if (getIsHydrating()) {
-      // This component materialized an id. This will affect any ids that appear
-      // in its children.
-      const returnFiber = workInProgress.return;
-      if (returnFiber !== null) {
-        const numberOfForks = 1;
-        const slotIndex = 0;
-        pushTreeFork(workInProgress, numberOfForks);
-        pushTreeId(workInProgress, numberOfForks, slotIndex);
-      }
-    }
-  }
-
   return children;
 }
 
+export 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.
+  const didRenderIdHook = localIdCounter !== 0;
+  localIdCounter = 0;
+  return didRenderIdHook;
+}
+
 export function bailoutHooks(
   current: Fiber,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 3b0b87cb1ab7c..ff6a9f652fb4d 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -110,7 +110,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.old';
+import {getTreeId} from './ReactFiberTreeContext.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -432,6 +432,7 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
+      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -513,6 +514,8 @@ export function renderWithHooks<Props, SecondArg>(
   }
 
   didScheduleRenderPhaseUpdate = false;
+  // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -541,25 +544,18 @@ export function renderWithHooks<Props, SecondArg>(
       }
     }
   }
-
-  if (localIdCounter !== 0) {
-    localIdCounter = 0;
-    if (getIsHydrating()) {
-      // This component materialized an id. This will affect any ids that appear
-      // in its children.
-      const returnFiber = workInProgress.return;
-      if (returnFiber !== null) {
-        const numberOfForks = 1;
-        const slotIndex = 0;
-        pushTreeFork(workInProgress, numberOfForks);
-        pushTreeId(workInProgress, numberOfForks, slotIndex);
-      }
-    }
-  }
-
   return children;
 }
 
+export 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.
+  const didRenderIdHook = localIdCounter !== 0;
+  localIdCounter = 0;
+  return didRenderIdHook;
+}
+
 export function bailoutHooks(
   current: Fiber,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index 0725ba577e647..968e66155d3fa 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -201,6 +201,20 @@ export function pushTreeId(
   }
 }
 
+export function pushMaterializedTreeId(workInProgress: Fiber) {
+  warnIfNotHydrating();
+
+  // This component materialized an id. This will affect any ids that appear
+  // in its children.
+  const returnFiber = workInProgress.return;
+  if (returnFiber !== null) {
+    const numberOfForks = 1;
+    const slotIndex = 0;
+    pushTreeFork(workInProgress, numberOfForks);
+    pushTreeId(workInProgress, numberOfForks, slotIndex);
+  }
+}
+
 function getBitLength(number: number): number {
   return 32 - clz32(number);
 }
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index a4ba3c3ddb931..82990b22f983d 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -201,6 +201,20 @@ export function pushTreeId(
   }
 }
 
+export function pushMaterializedTreeId(workInProgress: Fiber) {
+  warnIfNotHydrating();
+
+  // This component materialized an id. This will affect any ids that appear
+  // in its children.
+  const returnFiber = workInProgress.return;
+  if (returnFiber !== null) {
+    const numberOfForks = 1;
+    const slotIndex = 0;
+    pushTreeFork(workInProgress, numberOfForks);
+    pushTreeId(workInProgress, numberOfForks, slotIndex);
+  }
+}
+
 function getBitLength(number: number): number {
   return 32 - clz32(number);
 }
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 7b31e6b37ed9e..926a1969bb48a 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -199,6 +199,7 @@ export function finishHooks(
     // work-in-progress hooks and applying the additional updates on top. Keep
     // restarting until no more updates are scheduled.
     didScheduleRenderPhaseUpdate = false;
+    localIdCounter = 0;
     numberOfReRenders += 1;
 
     // Start over from the beginning of the list

From 255221c86930e31c144713eb466bf0a00ab8fd7e Mon Sep 17 00:00:00 2001
From: EzzAk <ezz1994@gmail.com>
Date: Wed, 3 Nov 2021 08:27:30 -0700
Subject: [PATCH 080/109] [DevTools] Add open in editor for fb (#22649)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../react-devtools-core/webpack.standalone.js |  2 +
 .../webpack.config.js                         |  2 +
 .../react-devtools-inline/webpack.config.js   |  3 ++
 .../react-devtools-shared/src/constants.js    |  3 ++
 .../src/devtools/views/ButtonIcon.js          |  8 ++++
 .../views/Components/InspectedElement.js      | 40 ++++++++++++++++++-
 .../views/Settings/ComponentsSettings.js      | 22 +++++++++-
 .../views/Settings/SettingsShared.css         |  8 ++++
 .../src/devtools/views/hooks.js               |  3 ++
 packages/react-devtools-shared/src/utils.js   | 17 ++++++++
 .../react-devtools-shell/webpack.config.js    |  3 ++
 11 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 9d7c1fc34a685..234d638353f43 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -30,6 +30,7 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const EDITOR_URL = process.env.EDITOR_URL || null;
 const LOGGING_URL = process.env.LOGGING_URL || null;
 
 const featureFlagTarget =
@@ -83,6 +84,7 @@ module.exports = {
       __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 99b1d18d3a999..ac7c51f3bdc5e 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -32,6 +32,7 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 
+const EDITOR_URL = process.env.EDITOR_URL || null;
 const LOGGING_URL = process.env.LOGGING_URL || null;
 
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
@@ -92,6 +93,7 @@ module.exports = {
       __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 7c2325bf70f45..ab7bcb8be3650 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -20,6 +20,8 @@ if (!NODE_ENV) {
 
 const __DEV__ = NODE_ENV === 'development';
 
+const EDITOR_URL = process.env.EDITOR_URL || null;
+
 const DEVTOOLS_VERSION = getVersionString();
 
 const babelOptions = {
@@ -76,6 +78,7 @@ module.exports = {
       __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 3c3aaae2fc461..798bdb9d900e3 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -32,6 +32,9 @@ export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
 export const SESSION_STORAGE_LAST_SELECTION_KEY =
   'React::DevTools::lastSelection';
 
+export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
+  'React::DevTools::openInEditorUrl';
+
 export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
   'React::DevTools::parseHookNames';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index 8239a765f90b6..b384018671d92 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -19,6 +19,7 @@ export type IconType =
   | 'copy'
   | 'delete'
   | 'down'
+  | 'editor'
   | 'expanded'
   | 'export'
   | 'filter'
@@ -72,6 +73,9 @@ export default function ButtonIcon({className = '', type}: Props) {
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'editor':
+      pathData = PATH_EDITOR;
+      break;
     case 'expanded':
       pathData = PATH_EXPANDED;
       break;
@@ -268,3 +272,7 @@ const PATH_VIEW_DOM = `
 const PATH_VIEW_SOURCE = `
   M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z
   `;
+
+const PATH_EDITOR = `
+  M7 5h10v2h2V3c0-1.1-.9-1.99-2-1.99L7 1c-1.1 0-2 .9-2 2v4h2V5zm8.41 11.59L20 12l-4.59-4.59L14 8.83 17.17 12 14 15.17l1.41 1.42zM10 15.17L6.83 12 10 8.83 8.59 7.41 4 12l4.59 4.59L10 15.17zM17 19H7v-2H5v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v2z
+`;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index f63da7b54a67d..9ebd30a6ec0b3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext} from 'react';
+import {useCallback, useContext, useSyncExternalStore} from 'react';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Button from '../Button';
@@ -20,6 +20,8 @@ import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
 import CannotSuspendWarningMessage from './CannotSuspendWarningMessage';
 import InspectedElementView from './InspectedElementView';
 import {InspectedElementContext} from './InspectedElementContext';
+import {getOpenInEditorURL} from '../../../utils';
+import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
 
 import styles from './InspectedElement.css';
 
@@ -123,6 +125,21 @@ export default function InspectedElementWrapper(_: Props) {
     inspectedElement != null &&
     inspectedElement.canToggleSuspense;
 
+  const editorURL = useSyncExternalStore(
+    function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      return function unsubscribe() {
+        window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      };
+    },
+    function getState() {
+      return getOpenInEditorURL();
+    },
+  );
+
+  const canOpenInEditor =
+    editorURL && inspectedElement != null && inspectedElement.source != null;
+
   const toggleErrored = useCallback(() => {
     if (inspectedElement == null || targetErrorBoundaryID == null) {
       return;
@@ -198,6 +215,18 @@ export default function InspectedElementWrapper(_: Props) {
     }
   }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);
 
+  const onOpenInEditor = useCallback(() => {
+    const source = inspectedElement?.source;
+    if (source == null || editorURL == null) {
+      return;
+    }
+
+    const url = new URL(editorURL);
+    url.href = url.href.replace('{path}', source.fileName);
+    url.href = url.href.replace('{line}', String(source.lineNumber));
+    window.open(url);
+  }, [inspectedElement, editorURL]);
+
   if (element === null) {
     return (
       <div className={styles.InspectedElement}>
@@ -223,7 +252,14 @@ export default function InspectedElementWrapper(_: Props) {
             {element.displayName}
           </div>
         </div>
-
+        {canOpenInEditor && (
+          <Button
+            className={styles.IconButton}
+            onClick={onOpenInEditor}
+            title="Open in editor">
+            <ButtonIcon type="editor" />
+          </Button>
+        )}
         {canToggleError && (
           <Toggle
             className={styles.IconButton}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 83e972729988e..83c3b2a612963 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -16,7 +16,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import {useSubscription} from '../hooks';
+import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
+import {useLocalStorage, useSubscription} from '../hooks';
 import {StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -37,6 +38,7 @@ import {
   ElementTypeProfiler,
   ElementTypeSuspense,
 } from 'react-devtools-shared/src/types';
+import {getDefaultOpenInEditorURL} from 'react-devtools-shared/src/utils';
 
 import styles from './SettingsShared.css';
 
@@ -81,6 +83,11 @@ export default function ComponentsSettings(_: {||}) {
     [setParseHookNames],
   );
 
+  const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
+    LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+    getDefaultOpenInEditorURL(),
+  );
+
   const [componentFilters, setComponentFilters] = useState<
     Array<ComponentFilter>,
   >(() => [...store.componentFilters]);
@@ -271,6 +278,19 @@ export default function ComponentsSettings(_: {||}) {
         <span className={styles.Warning}>(may be slow)</span>
       </label>
 
+      <label className={styles.OpenInURLSetting}>
+        Open in Editor URL:{' '}
+        <input
+          className={styles.Input}
+          type="text"
+          placeholder={process.env.EDITOR_URL ?? 'vscode://file/{path}:{line}'}
+          value={openInEditorURL}
+          onChange={event => {
+            setOpenInEditorURL(event.target.value);
+          }}
+        />
+      </label>
+
       <div className={styles.Header}>Hide components where...</div>
 
       <table className={styles.Table}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index 3ddaf13907702..9c0ee028c9968 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -14,6 +14,10 @@
   margin-bottom: 0;
 }
 
+.OpenInURLSetting {
+  margin: 0.5rem 0;
+}
+
 .OptionGroup {
   display: inline-flex;
   flex-direction: row;
@@ -30,6 +34,10 @@
   margin-right: 0.5rem;
 }
 
+.Spacer {
+  height: 0.5rem;
+}
+
 .Select {
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 76dad56774540..1a34373fc7e19 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -170,6 +170,9 @@ export function useLocalStorage<T>(
           value instanceof Function ? (value: any)(storedValue) : value;
         setStoredValue(valueToStore);
         localStorageSetItem(key, JSON.stringify(valueToStore));
+
+        // Notify listeners that this setting has changed.
+        window.dispatchEvent(new Event(key));
       } catch (error) {
         console.log(error);
       }
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 84c977f19d4e7..0c50374ae30b6 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -34,6 +34,7 @@ import {
 import {ElementTypeRoot} from 'react-devtools-shared/src/types';
 import {
   LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
@@ -386,6 +387,22 @@ export function setShowInlineWarningsAndErrors(value: boolean): void {
   );
 }
 
+export function getDefaultOpenInEditorURL(): string {
+  return typeof process.env.EDITOR_URL === 'string'
+    ? process.env.EDITOR_URL
+    : '';
+}
+
+export function getOpenInEditorURL(): string {
+  try {
+    const raw = localStorageGetItem(LOCAL_STORAGE_OPEN_IN_EDITOR_URL);
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return getDefaultOpenInEditorURL();
+}
+
 export function separateDisplayNameAndHOCs(
   displayName: string | null,
   type: ElementType,
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 19f53f5d08b09..18c55d1d8b740 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -24,6 +24,8 @@ if (!TARGET) {
   process.exit(1);
 }
 
+const EDITOR_URL = process.env.EDITOR_URL || null;
+
 const builtModulesDir = resolve(
   __dirname,
   '..',
@@ -69,6 +71,7 @@ const config = {
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,

From 51c558aeb6f5b0ae639d975fd4044007a73115c1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Nov 2021 15:10:29 -0400
Subject: [PATCH 081/109] Rename (some) "scheduling profiler" references to
 "timeline" (#22690)

---
 .../react-devtools-extensions/src/main.js     |   2 +-
 .../README.md                                 |   2 +-
 .../src/content-views/constants.js            |  86 +++++-----
 .../src/import-worker/preprocessData.js       |   2 +-
 .../src/backend/types.js                      |   2 +-
 .../react-devtools-shared/src/constants.js    | 160 +++++++++---------
 .../src/devtools/views/ErrorBoundary/cache.js |   2 +-
 .../src/devtools/views/Icon.js                |   4 +-
 .../Profiler/ClearProfilingDataButton.js      |   4 +-
 .../src/devtools/views/Profiler/Profiler.js   |  20 +--
 .../views/Profiler/ProfilerContext.js         |   4 +-
 .../Profiler/ProfilingImportExportButtons.js  |   4 +-
 .../src/dynamicImportCache.js                 |   2 +-
 .../src/hookNamesCache.js                     |   2 +-
 .../src/inspectedElementCache.js              |   2 +-
 .../src/ReactFiberLane.new.js                 |   2 +-
 .../src/ReactFiberLane.old.js                 |   2 +-
 .../src/SchedulingProfiler.js                 |  20 +--
 packages/shared/ReactFeatureFlags.js          |   2 +-
 scripts/rollup/wrappers.js                    |   2 +-
 20 files changed, 158 insertions(+), 168 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 70aaf92a7d528..36625cf74e30f 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -152,7 +152,7 @@ function createPanelIfReactLoaded() {
           isProfiling,
           supportsReloadAndProfile: isChrome || isEdge,
           supportsProfiling,
-          // At this time, the scheduling profiler can only parse Chrome performance profiles.
+          // At this time, the timeline can only parse Chrome performance profiles.
           supportsSchedulingProfiler: isChrome,
           supportsTraceUpdates: true,
         });
diff --git a/packages/react-devtools-scheduling-profiler/README.md b/packages/react-devtools-scheduling-profiler/README.md
index 457bec25efcf2..2b80944de281b 100644
--- a/packages/react-devtools-scheduling-profiler/README.md
+++ b/packages/react-devtools-scheduling-profiler/README.md
@@ -1,3 +1,3 @@
 # React Concurrent Mode Profiler
 
-This package contains the new/experimental "scheduling profiler" for React 18. This profiler exists as its own project because it was initially deployed as a standalone app. It has since been moved into the DevTools Profiler under the "Scheduling" tab. This package will likely eventually be moved into `react-devtools-shared`.
\ No newline at end of file
+This package contains the new/experimental "timeline" for React 18. This profiler exists as its own project because it was initially deployed as a standalone app. It has since been moved into the DevTools Profiler under the "Scheduling" tab. This package will likely eventually be moved into `react-devtools-shared`.
\ No newline at end of file
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index d0895d2aff8e7..216234508f5e1 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -109,86 +109,82 @@ export function updateColorsToMatchTheme(element: Element): boolean {
   COLORS = {
     BACKGROUND: computedStyle.getPropertyValue('--color-background'),
     INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-internal-module',
+      '--color-timeline-internal-module',
     ),
     INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-internal-module-hover',
+      '--color-timeline-internal-module-hover',
     ),
     INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-internal-module-text',
+      '--color-timeline-internal-module-text',
     ),
     NATIVE_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-native-event',
+      '--color-timeline-native-event',
     ),
     NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-native-event-hover',
+      '--color-timeline-native-event-hover',
     ),
     NETWORK_PRIMARY: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-primary',
+      '--color-timeline-network-primary',
     ),
     NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-primary-hover',
+      '--color-timeline-network-primary-hover',
     ),
     NETWORK_SECONDARY: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-secondary',
+      '--color-timeline-network-secondary',
     ),
     NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-secondary-hover',
+      '--color-timeline-network-secondary-hover',
     ),
     PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-priority-background',
+      '--color-timeline-priority-background',
     ),
     PRIORITY_BORDER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-priority-border',
+      '--color-timeline-priority-border',
     ),
     PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
-    USER_TIMING: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-user-timing',
-    ),
+    USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
     USER_TIMING_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-user-timing-hover',
-    ),
-    REACT_IDLE: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-idle',
+      '--color-timeline-user-timing-hover',
     ),
+    REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
     REACT_IDLE_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-idle-hover',
+      '--color-timeline-react-idle-hover',
     ),
     REACT_RENDER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render',
+      '--color-timeline-react-render',
     ),
     REACT_RENDER_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render-hover',
+      '--color-timeline-react-render-hover',
     ),
     REACT_RENDER_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render-text',
+      '--color-timeline-react-render-text',
     ),
     REACT_COMMIT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-commit',
+      '--color-timeline-react-commit',
     ),
     REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-commit-hover',
+      '--color-timeline-react-commit-hover',
     ),
     REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-commit-text',
+      '--color-timeline-react-commit-text',
     ),
     REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-layout-effects',
+      '--color-timeline-react-layout-effects',
     ),
     REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-layout-effects-hover',
+      '--color-timeline-react-layout-effects-hover',
     ),
     REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-layout-effects-text',
+      '--color-timeline-react-layout-effects-text',
     ),
     REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-passive-effects',
+      '--color-timeline-react-passive-effects',
     ),
     REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-passive-effects-hover',
+      '--color-timeline-react-passive-effects-hover',
     ),
     REACT_PASSIVE_EFFECTS_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-passive-effects-text',
+      '--color-timeline-react-passive-effects-text',
     ),
     REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
     REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(
@@ -201,44 +197,42 @@ export function updateColorsToMatchTheme(element: Element): boolean {
       '--color-resize-bar-dot',
     ),
     REACT_SCHEDULE: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-schedule',
+      '--color-timeline-react-schedule',
     ),
     REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-schedule-hover',
+      '--color-timeline-react-schedule-hover',
     ),
     REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-rejected',
+      '--color-timeline-react-suspense-rejected',
     ),
     REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-rejected-hover',
+      '--color-timeline-react-suspense-rejected-hover',
     ),
     REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-resolved',
+      '--color-timeline-react-suspense-resolved',
     ),
     REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-resolved-hover',
+      '--color-timeline-react-suspense-resolved-hover',
     ),
     REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-unresolved',
+      '--color-timeline-react-suspense-unresolved',
     ),
     REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-unresolved-hover',
+      '--color-timeline-react-suspense-unresolved-hover',
     ),
     REACT_THROWN_ERROR: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-thrown-error',
+      '--color-timeline-thrown-error',
     ),
     REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-thrown-error-hover',
+      '--color-timeline-thrown-error-hover',
     ),
     REACT_WORK_BORDER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-work-border',
+      '--color-timeline-react-work-border',
     ),
     SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
-    TEXT_COLOR: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-text-color',
-    ),
+    TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
     TEXT_DIM_COLOR: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-text-dim-color',
+      '--color-timeline-text-dim-color',
     ),
     TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
     WARNING_BACKGROUND: computedStyle.getPropertyValue(
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index d6c911af1d076..caf27e707563b 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -575,7 +575,7 @@ function processTimelineEvent(
           }
         }
 
-        // TODO (scheduling profiler) Maybe we should calculate depth in post,
+        // TODO (timeline) Maybe we should calculate depth in post,
         // so unresolved Suspense requests don't take up space.
         // We can't know if they'll be resolved or not at this point.
         // We'll just give them a default (fake) duration width.
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 46e1287797981..333ee30914cdd 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -420,7 +420,7 @@ export type DevToolsHook = {
     didError?: boolean,
   ) => void,
 
-  // Scheduling Profiler internal module filtering
+  // Timeline internal module filtering
   getInternalModuleRanges: () => Array<[string, string]>,
   registerInternalModuleStart: (moduleStartError: Error) => void,
   registerInternalModuleStop: (moduleStopError: Error) => void,
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 798bdb9d900e3..8898c27787f40 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -154,46 +154,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#dcdcdc',
     '--color-resize-bar-border': '#d1d1d1',
     '--color-resize-bar-dot': '#333333',
-    '--color-scheduling-profiler-internal-module': '#d1d1d1',
-    '--color-scheduling-profiler-internal-module-hover': '#c9c9c9',
-    '--color-scheduling-profiler-internal-module-text': '#444',
-    '--color-scheduling-profiler-native-event': '#ccc',
-    '--color-scheduling-profiler-native-event-hover': '#aaa',
-    '--color-scheduling-profiler-network-primary': '#fcf3dc',
-    '--color-scheduling-profiler-network-primary-hover': '#f0e7d1',
-    '--color-scheduling-profiler-network-secondary': '#efc457',
-    '--color-scheduling-profiler-network-secondary-hover': '#e3ba52',
-    '--color-scheduling-profiler-priority-background': '#f6f6f6',
-    '--color-scheduling-profiler-priority-border': '#eeeeee',
-    '--color-scheduling-profiler-user-timing': '#c9cacd',
-    '--color-scheduling-profiler-user-timing-hover': '#93959a',
-    '--color-scheduling-profiler-react-idle': '#d3e5f6',
-    '--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
-    '--color-scheduling-profiler-react-render': '#9fc3f3',
-    '--color-scheduling-profiler-react-render-hover': '#83afe9',
-    '--color-scheduling-profiler-react-render-text': '#11365e',
-    '--color-scheduling-profiler-react-commit': '#c88ff0',
-    '--color-scheduling-profiler-react-commit-hover': '#b281d6',
-    '--color-scheduling-profiler-react-commit-text': '#3e2c4a',
-    '--color-scheduling-profiler-react-layout-effects': '#b281d6',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
-    '--color-scheduling-profiler-react-layout-effects-text': '#3e2c4a',
-    '--color-scheduling-profiler-react-passive-effects': '#b281d6',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
-    '--color-scheduling-profiler-react-passive-effects-text': '#3e2c4a',
-    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
-    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
-    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
-    '--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
-    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
-    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
-    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
-    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
-    '--color-scheduling-profiler-thrown-error': '#ee1638',
-    '--color-scheduling-profiler-thrown-error-hover': '#da1030',
-    '--color-scheduling-profiler-text-color': '#000000',
-    '--color-scheduling-profiler-text-dim-color': '#ccc',
-    '--color-scheduling-profiler-react-work-border': '#eeeeee',
+    '--color-timeline-internal-module': '#d1d1d1',
+    '--color-timeline-internal-module-hover': '#c9c9c9',
+    '--color-timeline-internal-module-text': '#444',
+    '--color-timeline-native-event': '#ccc',
+    '--color-timeline-native-event-hover': '#aaa',
+    '--color-timeline-network-primary': '#fcf3dc',
+    '--color-timeline-network-primary-hover': '#f0e7d1',
+    '--color-timeline-network-secondary': '#efc457',
+    '--color-timeline-network-secondary-hover': '#e3ba52',
+    '--color-timeline-priority-background': '#f6f6f6',
+    '--color-timeline-priority-border': '#eeeeee',
+    '--color-timeline-user-timing': '#c9cacd',
+    '--color-timeline-user-timing-hover': '#93959a',
+    '--color-timeline-react-idle': '#d3e5f6',
+    '--color-timeline-react-idle-hover': '#c3d9ef',
+    '--color-timeline-react-render': '#9fc3f3',
+    '--color-timeline-react-render-hover': '#83afe9',
+    '--color-timeline-react-render-text': '#11365e',
+    '--color-timeline-react-commit': '#c88ff0',
+    '--color-timeline-react-commit-hover': '#b281d6',
+    '--color-timeline-react-commit-text': '#3e2c4a',
+    '--color-timeline-react-layout-effects': '#b281d6',
+    '--color-timeline-react-layout-effects-hover': '#9d71bd',
+    '--color-timeline-react-layout-effects-text': '#3e2c4a',
+    '--color-timeline-react-passive-effects': '#b281d6',
+    '--color-timeline-react-passive-effects-hover': '#9d71bd',
+    '--color-timeline-react-passive-effects-text': '#3e2c4a',
+    '--color-timeline-react-schedule': '#9fc3f3',
+    '--color-timeline-react-schedule-hover': '#2683E2',
+    '--color-timeline-react-suspense-rejected': '#f1cc14',
+    '--color-timeline-react-suspense-rejected-hover': '#ffdf37',
+    '--color-timeline-react-suspense-resolved': '#a6e59f',
+    '--color-timeline-react-suspense-resolved-hover': '#89d281',
+    '--color-timeline-react-suspense-unresolved': '#c9cacd',
+    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
+    '--color-timeline-thrown-error': '#ee1638',
+    '--color-timeline-thrown-error-hover': '#da1030',
+    '--color-timeline-text-color': '#000000',
+    '--color-timeline-text-dim-color': '#ccc',
+    '--color-timeline-react-work-border': '#eeeeee',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
@@ -298,46 +298,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#31363f',
     '--color-resize-bar-border': '#3d424a',
     '--color-resize-bar-dot': '#cfd1d5',
-    '--color-scheduling-profiler-internal-module': '#303542',
-    '--color-scheduling-profiler-internal-module-hover': '#363b4a',
-    '--color-scheduling-profiler-internal-module-text': '#7f8899',
-    '--color-scheduling-profiler-native-event': '#b2b2b2',
-    '--color-scheduling-profiler-native-event-hover': '#949494',
-    '--color-scheduling-profiler-network-primary': '#fcf3dc',
-    '--color-scheduling-profiler-network-primary-hover': '#e3dbc5',
-    '--color-scheduling-profiler-network-secondary': '#efc457',
-    '--color-scheduling-profiler-network-secondary-hover': '#d6af4d',
-    '--color-scheduling-profiler-priority-background': '#1d2129',
-    '--color-scheduling-profiler-priority-border': '#282c34',
-    '--color-scheduling-profiler-user-timing': '#c9cacd',
-    '--color-scheduling-profiler-user-timing-hover': '#93959a',
-    '--color-scheduling-profiler-react-idle': '#3d485b',
-    '--color-scheduling-profiler-react-idle-hover': '#465269',
-    '--color-scheduling-profiler-react-render': '#2683E2',
-    '--color-scheduling-profiler-react-render-hover': '#1a76d4',
-    '--color-scheduling-profiler-react-render-text': '#11365e',
-    '--color-scheduling-profiler-react-commit': '#731fad',
-    '--color-scheduling-profiler-react-commit-hover': '#611b94',
-    '--color-scheduling-profiler-react-commit-text': '#e5c1ff',
-    '--color-scheduling-profiler-react-layout-effects': '#611b94',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
-    '--color-scheduling-profiler-react-layout-effects-text': '#e5c1ff',
-    '--color-scheduling-profiler-react-passive-effects': '#611b94',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
-    '--color-scheduling-profiler-react-passive-effects-text': '#e5c1ff',
-    '--color-scheduling-profiler-react-schedule': '#2683E2',
-    '--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
-    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
-    '--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
-    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
-    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
-    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
-    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
-    '--color-scheduling-profiler-thrown-error': '#fb3655',
-    '--color-scheduling-profiler-thrown-error-hover': '#f82042',
-    '--color-scheduling-profiler-text-color': '#282c34',
-    '--color-scheduling-profiler-text-dim-color': '#555b66',
-    '--color-scheduling-profiler-react-work-border': '#3d424a',
+    '--color-timeline-internal-module': '#303542',
+    '--color-timeline-internal-module-hover': '#363b4a',
+    '--color-timeline-internal-module-text': '#7f8899',
+    '--color-timeline-native-event': '#b2b2b2',
+    '--color-timeline-native-event-hover': '#949494',
+    '--color-timeline-network-primary': '#fcf3dc',
+    '--color-timeline-network-primary-hover': '#e3dbc5',
+    '--color-timeline-network-secondary': '#efc457',
+    '--color-timeline-network-secondary-hover': '#d6af4d',
+    '--color-timeline-priority-background': '#1d2129',
+    '--color-timeline-priority-border': '#282c34',
+    '--color-timeline-user-timing': '#c9cacd',
+    '--color-timeline-user-timing-hover': '#93959a',
+    '--color-timeline-react-idle': '#3d485b',
+    '--color-timeline-react-idle-hover': '#465269',
+    '--color-timeline-react-render': '#2683E2',
+    '--color-timeline-react-render-hover': '#1a76d4',
+    '--color-timeline-react-render-text': '#11365e',
+    '--color-timeline-react-commit': '#731fad',
+    '--color-timeline-react-commit-hover': '#611b94',
+    '--color-timeline-react-commit-text': '#e5c1ff',
+    '--color-timeline-react-layout-effects': '#611b94',
+    '--color-timeline-react-layout-effects-hover': '#51167a',
+    '--color-timeline-react-layout-effects-text': '#e5c1ff',
+    '--color-timeline-react-passive-effects': '#611b94',
+    '--color-timeline-react-passive-effects-hover': '#51167a',
+    '--color-timeline-react-passive-effects-text': '#e5c1ff',
+    '--color-timeline-react-schedule': '#2683E2',
+    '--color-timeline-react-schedule-hover': '#1a76d4',
+    '--color-timeline-react-suspense-rejected': '#f1cc14',
+    '--color-timeline-react-suspense-rejected-hover': '#e4c00f',
+    '--color-timeline-react-suspense-resolved': '#a6e59f',
+    '--color-timeline-react-suspense-resolved-hover': '#89d281',
+    '--color-timeline-react-suspense-unresolved': '#c9cacd',
+    '--color-timeline-react-suspense-unresolved-hover': '#93959a',
+    '--color-timeline-thrown-error': '#fb3655',
+    '--color-timeline-thrown-error-hover': '#f82042',
+    '--color-timeline-text-color': '#282c34',
+    '--color-timeline-text-dim-color': '#555b66',
+    '--color-timeline-react-work-border': '#3d424a',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
index 9e5061cb804ee..047c0788c3493 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -71,7 +71,7 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Searching GitHub issues for error "${errorMessage}"`,
     };
     const wake = () => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index c9ae931f5ee74..cec6ae34ef910 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -21,7 +21,7 @@ export type IconType =
   | 'flame-chart'
   | 'profiler'
   | 'ranked-chart'
-  | 'scheduling-profiler'
+  | 'timeline'
   | 'search'
   | 'settings'
   | 'store-as-global-variable'
@@ -65,7 +65,7 @@ export default function Icon({className = '', type}: Props) {
     case 'ranked-chart':
       pathData = PATH_RANKED_CHART;
       break;
-    case 'scheduling-profiler':
+    case 'timeline':
       pathData = PATH_SCHEDULING_PROFILER;
       break;
     case 'search':
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index a6abd38712f0e..a978277ba8697 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -26,14 +26,14 @@ export default function ClearProfilingDataButton() {
   const {profilerStore} = store;
 
   let doesHaveData = false;
-  if (selectedTabID === 'scheduling-profiler') {
+  if (selectedTabID === 'timeline') {
     doesHaveData = schedulingProfilerData !== null;
   } else {
     doesHaveData = didRecordCommits;
   }
 
   const clear = () => {
-    if (selectedTabID === 'scheduling-profiler') {
+    if (selectedTabID === 'timeline') {
       clearSchedulingProfilerData();
     } else {
       profilerStore.clear();
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 2973fbf395859..49107506e48f6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -48,7 +48,7 @@ function Profiler(_: {||}) {
   let isLegacyProfilerSelected = false;
 
   let view = null;
-  if (didRecordCommits || selectedTabID === 'scheduling-profiler') {
+  if (didRecordCommits || selectedTabID === 'timeline') {
     switch (selectedTabID) {
       case 'flame-chart':
         isLegacyProfilerSelected = true;
@@ -58,7 +58,7 @@ function Profiler(_: {||}) {
         isLegacyProfilerSelected = true;
         view = <CommitRanked />;
         break;
-      case 'scheduling-profiler':
+      case 'timeline':
         view = <SchedulingProfiler />;
         break;
       default:
@@ -104,14 +104,10 @@ function Profiler(_: {||}) {
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
             <RecordToggle
-              disabled={
-                !supportsProfiling || selectedTabID === 'scheduling-profiler'
-              }
+              disabled={!supportsProfiling || selectedTabID === 'timeline'}
             />
             <ReloadAndProfileButton
-              disabled={
-                selectedTabID === 'scheduling-profiler' || !supportsProfiling
-              }
+              disabled={selectedTabID === 'timeline' || !supportsProfiling}
             />
             <ClearProfilingDataButton />
             <ProfilingImportExportButtons />
@@ -168,10 +164,10 @@ const tabsWithSchedulingProfiler = [
   ...tabs,
   null, // Divider/separator
   {
-    id: 'scheduling-profiler',
-    icon: 'scheduling-profiler',
-    label: 'Scheduling',
-    title: 'Scheduling Profiler',
+    id: 'timeline',
+    icon: 'timeline',
+    label: 'Timeline',
+    title: 'Timeline',
   },
 ];
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index d5e43dc6a3d2a..6e486091e1419 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -19,8 +19,8 @@ import {StoreContext} from '../context';
 
 import type {ProfilingDataFrontend} from './types';
 
-// TODO (scheduling profiler) Should this be its own context?
-export type TabID = 'flame-chart' | 'ranked-chart' | 'scheduling-profiler';
+// TODO (timeline) Should this be its own context?
+export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
 
 export type Context = {|
   // Which tab is selected in the Profiler UI?
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 94cd201d45759..0e294ffe29cb1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -123,7 +123,7 @@ export default function ProfilingImportExportButtons() {
         className={styles.Input}
         type="file"
         onChange={
-          selectedTabID === 'scheduling-profiler'
+          selectedTabID === 'timeline'
             ? importSchedulingProfilerDataWrapper
             : importProfilerData
         }
@@ -140,7 +140,7 @@ export default function ProfilingImportExportButtons() {
         disabled={
           isProfiling ||
           !profilerStore.didRecordCommits ||
-          selectedTabID === 'scheduling-profiler'
+          selectedTabID === 'timeline'
         }
         onClick={downloadData}
         title="Save profile...">
diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js
index 72c0aa708db50..b31d9602c6b81 100644
--- a/packages/react-devtools-shared/src/dynamicImportCache.js
+++ b/packages/react-devtools-shared/src/dynamicImportCache.js
@@ -74,7 +74,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Loading module "${moduleLoaderFunction.name}"`,
     };
 
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index eee340844fe01..c992f64cf97b2 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -93,7 +93,7 @@ export function loadHookNames(
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
     };
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 6442a84b0be64..b7f08ffa523a1 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -95,7 +95,7 @@ export function inspectElement(
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Inspecting ${element.displayName || 'Unknown'}`,
     };
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 7e1461c7a7226..beaf66d0192b4 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
 // It should be kept in sync with the Lanes values above.
 export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 6b4be15e649f1..4923f607eb8ee 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
 // It should be kept in sync with the Lanes values above.
 export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index acfb2c3f976d0..58d61067acbfd 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -147,7 +147,7 @@ export function markComponentRenderStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-render-start-${componentName}`);
     }
   }
@@ -165,7 +165,7 @@ export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-passive-effect-mount-start-${componentName}`);
     }
   }
@@ -183,7 +183,7 @@ export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
     }
   }
@@ -201,7 +201,7 @@ export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-layout-effect-mount-start-${componentName}`);
     }
   }
@@ -219,7 +219,7 @@ export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
     }
   }
@@ -254,7 +254,7 @@ export function markComponentErrored(
         message = thrownValue;
       }
 
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--error-${componentName}-${phase}-${message}`);
     }
   }
@@ -287,10 +287,10 @@ export function markComponentSuspended(
       // 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 Scheduling Profiler.
+      // When this is available we should pass it along to the Timeline.
       const displayName = (wakeable: any).displayName || '';
 
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(
         `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
       );
@@ -370,7 +370,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
     }
   }
@@ -380,7 +380,7 @@ export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--schedule-state-update-${lane}-${componentName}`);
     }
   }
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 112c2d10f2cbd..ede13f2c2e8d4 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -16,7 +16,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const enableDebugTracing = false;
 
 // Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
-// for an experimental scheduling profiler tool.
+// for an experimental timeline tool.
 export const enableSchedulingProfiler = __PROFILE__;
 
 // Helps identify side effects in render-phase lifecycle hooks and setState
diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index c83ecc0fbdb96..3a3556e8d90e0 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -360,7 +360,7 @@ function wrapBundle(
       case RN_FB_DEV:
       case RN_FB_PROFILING:
         // Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
-        // This allows the Scheduling Profiler to de-emphasize (dim) internal stack frames.
+        // This allows the Timeline to de-emphasize (dim) internal stack frames.
         source = `
           ${registerInternalModuleStart(globalName)}
           ${source}

From 1bf6deb865052111474f2988bb831de13d09c560 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Nov 2021 10:02:06 -0400
Subject: [PATCH 082/109] Renamed packages/react-devtools-scheduling-profiler
 to packages/react-devtools-timeline (#22691)

---
 .eslintignore                                                 | 4 ++--
 .eslintrc.js                                                  | 2 +-
 .gitignore                                                    | 2 +-
 .prettierignore                                               | 4 ++--
 packages/react-devtools-shared/src/devtools/views/DevTools.js | 2 +-
 .../src/devtools/views/Profiler/ClearProfilingDataButton.js   | 2 +-
 .../src/devtools/views/Profiler/Profiler.js                   | 2 +-
 .../devtools/views/Profiler/ProfilingImportExportButtons.js   | 2 +-
 .../README.md                                                 | 0
 .../package.json                                              | 2 +-
 .../src/CanvasPage.css                                        | 0
 .../src/CanvasPage.js                                         | 0
 .../src/EventTooltip.css                                      | 0
 .../src/EventTooltip.js                                       | 0
 .../src/ImportButton.css                                      | 0
 .../src/ImportButton.js                                       | 0
 .../src/SchedulingProfiler.css                                | 0
 .../src/SchedulingProfiler.js                                 | 0
 .../src/SchedulingProfilerContext.js                          | 0
 .../src/constants.js                                          | 0
 .../src/content-views/ComponentMeasuresView.js                | 0
 .../src/content-views/FlamechartView.js                       | 0
 .../src/content-views/NativeEventsView.js                     | 0
 .../src/content-views/NetworkMeasuresView.js                  | 0
 .../src/content-views/ReactMeasuresView.js                    | 0
 .../src/content-views/SchedulingEventsView.js                 | 0
 .../src/content-views/SnapshotsView.js                        | 0
 .../src/content-views/SuspenseEventsView.js                   | 0
 .../src/content-views/ThrownErrorsView.js                     | 0
 .../src/content-views/TimeAxisMarkersView.js                  | 0
 .../src/content-views/UserTimingMarksView.js                  | 0
 .../src/content-views/constants.js                            | 0
 .../src/content-views/index.js                                | 0
 .../content-views/utils/__tests__/__modules__/module-one.js   | 0
 .../content-views/utils/__tests__/__modules__/module-two.js   | 0
 .../src/content-views/utils/__tests__/colors-test.js          | 0
 .../src/content-views/utils/__tests__/moduleFilters-test.js   | 0
 .../src/content-views/utils/colors.js                         | 0
 .../src/content-views/utils/moduleFilters.js                  | 0
 .../src/content-views/utils/positioning.js                    | 0
 .../src/content-views/utils/text.js                           | 0
 .../src/createDataResourceFromImportedFile.js                 | 0
 .../src/import-worker/InvalidProfileError.js                  | 0
 .../import-worker/__tests__/preprocessData-test.internal.js   | 0
 .../src/import-worker/importFile.js                           | 0
 .../src/import-worker/importFile.worker.js                    | 0
 .../src/import-worker/index.js                                | 0
 .../src/import-worker/preprocessData.js                       | 0
 .../src/import-worker/readInputData.js                        | 0
 .../src/types.js                                              | 0
 .../src/utils/formatting.js                                   | 0
 .../src/utils/getBatchRange.js                                | 0
 .../src/utils/useSmartTooltip.js                              | 0
 .../src/view-base/BackgroundColorView.js                      | 0
 .../src/view-base/HorizontalPanAndZoomView.js                 | 0
 .../src/view-base/Surface.js                                  | 0
 .../src/view-base/VerticalScrollView.js                       | 0
 .../src/view-base/View.js                                     | 0
 .../src/view-base/__tests__/geometry-test.js                  | 0
 .../src/view-base/constants.js                                | 0
 .../src/view-base/geometry.js                                 | 0
 .../src/view-base/index.js                                    | 0
 .../src/view-base/layouter.js                                 | 0
 .../src/view-base/resizable/ResizableView.js                  | 0
 .../src/view-base/resizable/ResizeBarView.js                  | 0
 .../src/view-base/resizable/index.js                          | 0
 .../src/view-base/useCanvasInteraction.js                     | 0
 .../src/view-base/utils/__tests__/clamp-test.js               | 0
 .../src/view-base/utils/__tests__/scrollState-test.js         | 0
 .../src/view-base/utils/clamp.js                              | 0
 .../src/view-base/utils/normalizeWheel.js                     | 0
 .../src/view-base/utils/scrollState.js                        | 0
 .../vertical-scroll-overflow/VerticalScrollBarView.js         | 0
 .../vertical-scroll-overflow/VerticalScrollOverflowView.js    | 0
 .../src/view-base/vertical-scroll-overflow/index.js           | 0
 .../vertical-scroll-overflow/withVerticalScrollbarLayout.js   | 0
 packages/react-reconciler/src/ReactFiberLane.new.js           | 4 ++--
 packages/react-reconciler/src/ReactFiberLane.old.js           | 4 ++--
 packages/react-reconciler/src/SchedulingProfiler.js           | 2 +-
 scripts/devtools/configuration.js                             | 2 +-
 80 files changed, 17 insertions(+), 17 deletions(-)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/README.md (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/package.json (94%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/CanvasPage.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/CanvasPage.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/EventTooltip.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/EventTooltip.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/ImportButton.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/ImportButton.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/SchedulingProfiler.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/SchedulingProfiler.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/SchedulingProfilerContext.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/constants.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/ComponentMeasuresView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/FlamechartView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/NativeEventsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/NetworkMeasuresView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/ReactMeasuresView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/SchedulingEventsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/SnapshotsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/SuspenseEventsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/ThrownErrorsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/TimeAxisMarkersView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/UserTimingMarksView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/constants.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/__modules__/module-one.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/__modules__/module-two.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/colors-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/moduleFilters-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/colors.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/moduleFilters.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/positioning.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/text.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/createDataResourceFromImportedFile.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/InvalidProfileError.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/__tests__/preprocessData-test.internal.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/importFile.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/importFile.worker.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/preprocessData.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/readInputData.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/types.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/utils/formatting.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/utils/getBatchRange.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/utils/useSmartTooltip.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/BackgroundColorView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/HorizontalPanAndZoomView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/Surface.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/VerticalScrollView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/View.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/__tests__/geometry-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/constants.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/geometry.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/layouter.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/resizable/ResizableView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/resizable/ResizeBarView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/resizable/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/useCanvasInteraction.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/__tests__/clamp-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/__tests__/scrollState-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/clamp.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/normalizeWheel.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/scrollState.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js (100%)

diff --git a/.eslintignore b/.eslintignore
index c55cc40866070..7d79ef6923112 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -22,5 +22,5 @@ packages/react-devtools-inline/dist
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
 packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static
+packages/react-devtools-timeline/dist
+packages/react-devtools-timeline/static
diff --git a/.eslintrc.js b/.eslintrc.js
index b129af49d3d6a..6a0dc2dceae47 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -151,7 +151,7 @@ module.exports = {
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
         'packages/react-devtools-extensions/**/*.js',
-        'packages/react-devtools-scheduling-profiler/**/*.js',
+        'packages/react-devtools-timeline/**/*.js',
         'packages/react-native-renderer/**/*.js',
         'packages/eslint-plugin-react-hooks/**/*.js',
         'packages/jest-react/**/*.js',
diff --git a/.gitignore b/.gitignore
index 8ba7bbecc2dce..6ec345e172e5e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,4 @@ packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/.tempUserDataDir
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
+packages/react-devtools-timeline/dist
diff --git a/.prettierignore b/.prettierignore
index 50ccffa6a67f4..6f69f7f891d67 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,5 +7,5 @@ packages/react-devtools-inline/dist
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
 packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static
\ No newline at end of file
+packages/react-devtools-timeline/dist
+packages/react-devtools-timeline/static
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 781ad9d902f68..b0b8f03032924 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -30,7 +30,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
 import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
-import {SchedulingProfilerContextController} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
+import {SchedulingProfilerContextController} from 'react-devtools-timeline/src/SchedulingProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index a978277ba8697..3f3a8e4987064 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
-import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
+import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 49107506e48f6..a9f57f5c47d78 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -16,7 +16,7 @@ import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import RootSelector from './RootSelector';
-import {SchedulingProfiler} from 'react-devtools-scheduling-profiler/src/SchedulingProfiler';
+import {SchedulingProfiler} from 'react-devtools-timeline/src/SchedulingProfiler';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
 import ProfilingImportExportButtons from './ProfilingImportExportButtons';
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 0e294ffe29cb1..912f87745e9ea 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -19,7 +19,7 @@ import {
   prepareProfilingDataFrontendFromExport,
 } from './utils';
 import {downloadFile} from '../utils';
-import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
+import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
 
 import styles from './ProfilingImportExportButtons.css';
 
diff --git a/packages/react-devtools-scheduling-profiler/README.md b/packages/react-devtools-timeline/README.md
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/README.md
rename to packages/react-devtools-timeline/README.md
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-timeline/package.json
similarity index 94%
rename from packages/react-devtools-scheduling-profiler/package.json
rename to packages/react-devtools-timeline/package.json
index a74b66fa1d55f..86bab4e260240 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "react-devtools-scheduling-profiler",
+  "name": "react-devtools-timeline",
   "version": "4.21.0",
   "license": "MIT",
   "dependencies": {
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.css b/packages/react-devtools-timeline/src/CanvasPage.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/CanvasPage.css
rename to packages/react-devtools-timeline/src/CanvasPage.css
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/CanvasPage.js
rename to packages/react-devtools-timeline/src/CanvasPage.js
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-timeline/src/EventTooltip.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/EventTooltip.css
rename to packages/react-devtools-timeline/src/EventTooltip.css
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/EventTooltip.js
rename to packages/react-devtools-timeline/src/EventTooltip.js
diff --git a/packages/react-devtools-scheduling-profiler/src/ImportButton.css b/packages/react-devtools-timeline/src/ImportButton.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/ImportButton.css
rename to packages/react-devtools-timeline/src/ImportButton.css
diff --git a/packages/react-devtools-scheduling-profiler/src/ImportButton.js b/packages/react-devtools-timeline/src/ImportButton.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/ImportButton.js
rename to packages/react-devtools-timeline/src/ImportButton.js
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css b/packages/react-devtools-timeline/src/SchedulingProfiler.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
rename to packages/react-devtools-timeline/src/SchedulingProfiler.css
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-timeline/src/SchedulingProfiler.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
rename to packages/react-devtools-timeline/src/SchedulingProfiler.js
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js b/packages/react-devtools-timeline/src/SchedulingProfilerContext.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
rename to packages/react-devtools-timeline/src/SchedulingProfilerContext.js
diff --git a/packages/react-devtools-scheduling-profiler/src/constants.js b/packages/react-devtools-timeline/src/constants.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/constants.js
rename to packages/react-devtools-timeline/src/constants.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
rename to packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
rename to packages/react-devtools-timeline/src/content-views/FlamechartView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
rename to packages/react-devtools-timeline/src/content-views/NativeEventsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js
rename to packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
rename to packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
rename to packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
rename to packages/react-devtools-timeline/src/content-views/SnapshotsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
rename to packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js
rename to packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js
rename to packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
rename to packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/constants.js
rename to packages/react-devtools-timeline/src/content-views/constants.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-timeline/src/content-views/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/index.js
rename to packages/react-devtools-timeline/src/content-views/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-one.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-one.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-two.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-two.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/colors-test.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/colors-test.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/moduleFilters-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/moduleFilters-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/colors.js b/packages/react-devtools-timeline/src/content-views/utils/colors.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/colors.js
rename to packages/react-devtools-timeline/src/content-views/utils/colors.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js b/packages/react-devtools-timeline/src/content-views/utils/moduleFilters.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
rename to packages/react-devtools-timeline/src/content-views/utils/moduleFilters.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/positioning.js b/packages/react-devtools-timeline/src/content-views/utils/positioning.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/positioning.js
rename to packages/react-devtools-timeline/src/content-views/utils/positioning.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js b/packages/react-devtools-timeline/src/content-views/utils/text.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
rename to packages/react-devtools-timeline/src/content-views/utils/text.js
diff --git a/packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js b/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js
rename to packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/InvalidProfileError.js b/packages/react-devtools-timeline/src/import-worker/InvalidProfileError.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/InvalidProfileError.js
rename to packages/react-devtools-timeline/src/import-worker/InvalidProfileError.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
rename to packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js b/packages/react-devtools-timeline/src/import-worker/importFile.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
rename to packages/react-devtools-timeline/src/import-worker/importFile.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.worker.js b/packages/react-devtools-timeline/src/import-worker/importFile.worker.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/importFile.worker.js
rename to packages/react-devtools-timeline/src/import-worker/importFile.worker.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/index.js
rename to packages/react-devtools-timeline/src/import-worker/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
rename to packages/react-devtools-timeline/src/import-worker/preprocessData.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/readInputData.js b/packages/react-devtools-timeline/src/import-worker/readInputData.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/readInputData.js
rename to packages/react-devtools-timeline/src/import-worker/readInputData.js
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-timeline/src/types.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/types.js
rename to packages/react-devtools-timeline/src/types.js
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/utils/formatting.js
rename to packages/react-devtools-timeline/src/utils/formatting.js
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js b/packages/react-devtools-timeline/src/utils/getBatchRange.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
rename to packages/react-devtools-timeline/src/utils/getBatchRange.js
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
rename to packages/react-devtools-timeline/src/utils/useSmartTooltip.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/BackgroundColorView.js b/packages/react-devtools-timeline/src/view-base/BackgroundColorView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/BackgroundColorView.js
rename to packages/react-devtools-timeline/src/view-base/BackgroundColorView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
rename to packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js b/packages/react-devtools-timeline/src/view-base/Surface.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
rename to packages/react-devtools-timeline/src/view-base/Surface.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js b/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
rename to packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-timeline/src/view-base/View.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/View.js
rename to packages/react-devtools-timeline/src/view-base/View.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/__tests__/geometry-test.js b/packages/react-devtools-timeline/src/view-base/__tests__/geometry-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/__tests__/geometry-test.js
rename to packages/react-devtools-timeline/src/view-base/__tests__/geometry-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/constants.js b/packages/react-devtools-timeline/src/view-base/constants.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/constants.js
rename to packages/react-devtools-timeline/src/view-base/constants.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js b/packages/react-devtools-timeline/src/view-base/geometry.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
rename to packages/react-devtools-timeline/src/view-base/geometry.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/index.js b/packages/react-devtools-timeline/src/view-base/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/index.js
rename to packages/react-devtools-timeline/src/view-base/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js b/packages/react-devtools-timeline/src/view-base/layouter.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
rename to packages/react-devtools-timeline/src/view-base/layouter.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizableView.js
rename to packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js
rename to packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/resizable/index.js b/packages/react-devtools-timeline/src/view-base/resizable/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/resizable/index.js
rename to packages/react-devtools-timeline/src/view-base/resizable/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
rename to packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/clamp-test.js b/packages/react-devtools-timeline/src/view-base/utils/__tests__/clamp-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/clamp-test.js
rename to packages/react-devtools-timeline/src/view-base/utils/__tests__/clamp-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/scrollState-test.js b/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/scrollState-test.js
rename to packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/clamp.js b/packages/react-devtools-timeline/src/view-base/utils/clamp.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/clamp.js
rename to packages/react-devtools-timeline/src/view-base/utils/clamp.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/normalizeWheel.js
rename to packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js
rename to packages/react-devtools-timeline/src/view-base/utils/scrollState.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index beaf66d0192b4..b9073b0770ba8 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -25,7 +25,7 @@ import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 import {clz32} from './clz32';
 
-// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
+// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-timeline.
 // If those values are changed that package should be rebuilt and redeployed.
 
 export const TotalLanes = 31;
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
+// This function is used for the experimental timeline (react-devtools-timeline)
 // It should be kept in sync with the Lanes values above.
 export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4923f607eb8ee..1ef12d4021280 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -25,7 +25,7 @@ import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 import {clz32} from './clz32';
 
-// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
+// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-timeline.
 // If those values are changed that package should be rebuilt and redeployed.
 
 export const TotalLanes = 31;
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
+// This function is used for the experimental timeline (react-devtools-timeline)
 // It should be kept in sync with the Lanes values above.
 export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 58d61067acbfd..0304f39a12e56 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -17,7 +17,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-scheduling-profiler/src/constants';
+import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
 
 import {
   getLabelForLane as getLabelForLane_old,
diff --git a/scripts/devtools/configuration.js b/scripts/devtools/configuration.js
index e90b764b36194..98d65baf946a7 100644
--- a/scripts/devtools/configuration.js
+++ b/scripts/devtools/configuration.js
@@ -6,7 +6,7 @@ const PACKAGE_PATHS = [
   'packages/react-devtools/package.json',
   'packages/react-devtools-core/package.json',
   'packages/react-devtools-inline/package.json',
-  'packages/react-devtools-scheduling-profiler/package.json',
+  'packages/react-devtools-timeline/package.json',
 ];
 
 const MANIFEST_PATHS = [

From 8ca3f567bc3ed56c2101e5c51f968a5339f63093 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Nov 2021 10:40:35 -0400
Subject: [PATCH 083/109] Fix module-boundary wrappers (#22688)

---
 scripts/rollup/wrappers.js                    | 32 +++++++++++--------
 .../wrappers/registerInternalModuleBegin.js   | 10 +-----
 .../wrappers/registerInternalModuleEnd.js     | 10 +-----
 3 files changed, 20 insertions(+), 32 deletions(-)
 rename packages/shared/registerInternalModuleStart.js => scripts/rollup/wrappers/registerInternalModuleBegin.js (51%)
 rename packages/shared/registerInternalModuleStop.js => scripts/rollup/wrappers/registerInternalModuleEnd.js (50%)

diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index 3a3556e8d90e0..3178c1cf482a1 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -27,24 +27,23 @@ const {
 
 const {RECONCILER} = moduleTypes;
 
+const USE_STRICT_HEADER_REGEX = /'use strict';\n+/;
+
 function registerInternalModuleStart(globalName) {
-  const path = resolve(
-    __dirname,
-    '..',
-    '..',
-    'packages/shared/registerInternalModuleStart.js'
-  );
-  return String(readFileSync(path)).trim();
+  const path = resolve(__dirname, 'wrappers', 'registerInternalModuleBegin.js');
+  const file = readFileSync(path);
+  return String(file).trim();
 }
 
 function registerInternalModuleStop(globalName) {
-  const path = resolve(
-    __dirname,
-    '..',
-    '..',
-    'packages/shared/registerInternalModuleStop.js'
-  );
-  return String(readFileSync(path)).trim();
+  const path = resolve(__dirname, 'wrappers', 'registerInternalModuleEnd.js');
+  const file = readFileSync(path);
+
+  // Remove the 'use strict' directive from the footer.
+  // This directive is only meaningful when it is the first statement in a file or function.
+  return String(file)
+    .replace(USE_STRICT_HEADER_REGEX, '')
+    .trim();
 }
 
 const license = ` * Copyright (c) Facebook, Inc. and its affiliates.
@@ -359,6 +358,11 @@ function wrapBundle(
       case RN_OSS_PROFILING:
       case RN_FB_DEV:
       case RN_FB_PROFILING:
+        // Remove the 'use strict' directive from source.
+        // The module start wrapper will add its own.
+        // This directive is only meaningful when it is the first statement in a file or function.
+        source = source.replace(USE_STRICT_HEADER_REGEX, '');
+
         // Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
         // This allows the Timeline to de-emphasize (dim) internal stack frames.
         source = `
diff --git a/packages/shared/registerInternalModuleStart.js b/scripts/rollup/wrappers/registerInternalModuleBegin.js
similarity index 51%
rename from packages/shared/registerInternalModuleStart.js
rename to scripts/rollup/wrappers/registerInternalModuleBegin.js
index 1bab503c2a6da..a9170ca3e45da 100644
--- a/packages/shared/registerInternalModuleStart.js
+++ b/scripts/rollup/wrappers/registerInternalModuleBegin.js
@@ -1,14 +1,6 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+'use strict';
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-
-// Don't require this file directly; it's embedded by Rollup during build.
-
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
diff --git a/packages/shared/registerInternalModuleStop.js b/scripts/rollup/wrappers/registerInternalModuleEnd.js
similarity index 50%
rename from packages/shared/registerInternalModuleStop.js
rename to scripts/rollup/wrappers/registerInternalModuleEnd.js
index 44a69bed9ac37..119fb115a1ceb 100644
--- a/packages/shared/registerInternalModuleStop.js
+++ b/scripts/rollup/wrappers/registerInternalModuleEnd.js
@@ -1,14 +1,6 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+'use strict';
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-
-// Don't require this file directly; it's embedded by Rollup during build.
-
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===

From 13455d26d1904519c53686d6f295d4eb50b6c2fc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Nov 2021 11:40:45 -0400
Subject: [PATCH 084/109] Cleaned up remaining "scheduling profiler" references
 in DevTools (#22696)

---
 .../react-devtools-extensions/src/main.js     |  2 +-
 .../react-devtools-inline/src/frontend.js     |  2 +-
 .../src/devtools/store.js                     | 16 +++----
 .../src/devtools/views/DevTools.js            |  6 +--
 .../Profiler/ClearProfilingDataButton.js      | 10 ++--
 .../src/devtools/views/Profiler/Profiler.js   | 12 ++---
 .../Profiler/ProfilingImportExportButtons.js  | 10 ++--
 .../{SchedulingProfiler.css => Timeline.css}  |  0
 .../{SchedulingProfiler.js => Timeline.js}    | 22 ++++-----
 ...gProfilerContext.js => TimelineContext.js} | 48 ++++++++-----------
 10 files changed, 56 insertions(+), 72 deletions(-)
 rename packages/react-devtools-timeline/src/{SchedulingProfiler.css => Timeline.css} (100%)
 rename packages/react-devtools-timeline/src/{SchedulingProfiler.js => Timeline.js} (89%)
 rename packages/react-devtools-timeline/src/{SchedulingProfilerContext.js => TimelineContext.js} (60%)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 36625cf74e30f..015472fa2e89c 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -153,7 +153,7 @@ function createPanelIfReactLoaded() {
           supportsReloadAndProfile: isChrome || isEdge,
           supportsProfiling,
           // At this time, the timeline can only parse Chrome performance profiles.
-          supportsSchedulingProfiler: isChrome,
+          supportsTimeline: isChrome,
           supportsTraceUpdates: true,
         });
         store.profilerStore.profilingData = profilingData;
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 0249fb878f9bb..065bb1238715e 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -29,7 +29,7 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {
   return new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
-    supportsSchedulingProfiler: true,
+    supportsTimeline: true,
     supportsNativeInspection: config?.supportsNativeInspection !== false,
   });
 }
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 217abe7f72777..c8b252072dcb4 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -63,9 +63,9 @@ type Config = {|
   checkBridgeProtocolCompatibility?: boolean,
   isProfiling?: boolean,
   supportsNativeInspection?: boolean,
-  supportsReloadAndProfile?: boolean,
-  supportsSchedulingProfiler?: boolean,
   supportsProfiling?: boolean,
+  supportsReloadAndProfile?: boolean,
+  supportsTimeline?: boolean,
   supportsTraceUpdates?: boolean,
 |};
 
@@ -162,7 +162,7 @@ export default class Store extends EventEmitter<{|
   _supportsNativeInspection: boolean = true;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
-  _supportsSchedulingProfiler: boolean = false;
+  _supportsTimeline: boolean = false;
   _supportsTraceUpdates: boolean = false;
 
   _unsupportedBridgeProtocol: BridgeProtocol | null = null;
@@ -197,7 +197,7 @@ export default class Store extends EventEmitter<{|
         supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
-        supportsSchedulingProfiler,
+        supportsTimeline,
         supportsTraceUpdates,
       } = config;
       this._supportsNativeInspection = supportsNativeInspection !== false;
@@ -207,8 +207,8 @@ export default class Store extends EventEmitter<{|
       if (supportsReloadAndProfile) {
         this._supportsReloadAndProfile = true;
       }
-      if (supportsSchedulingProfiler) {
-        this._supportsSchedulingProfiler = true;
+      if (supportsTimeline) {
+        this._supportsTimeline = true;
       }
       if (supportsTraceUpdates) {
         this._supportsTraceUpdates = true;
@@ -422,8 +422,8 @@ export default class Store extends EventEmitter<{|
     );
   }
 
-  get supportsSchedulingProfiler(): boolean {
-    return this._supportsSchedulingProfiler;
+  get supportsTimeline(): boolean {
+    return this._supportsTimeline;
   }
 
   get supportsTraceUpdates(): boolean {
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index b0b8f03032924..b16429b5bcff2 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -30,7 +30,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
 import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
-import {SchedulingProfilerContextController} from 'react-devtools-timeline/src/SchedulingProfilerContext';
+import {TimelineContextController} from 'react-devtools-timeline/src/TimelineContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
@@ -273,7 +273,7 @@ export default function DevTools({
                       value={fetchFileWithCaching || null}>
                       <TreeContextController>
                         <ProfilerContextController>
-                          <SchedulingProfilerContextController>
+                          <TimelineContextController>
                             <ThemeProvider>
                               <div
                                 className={styles.DevTools}
@@ -311,7 +311,7 @@ export default function DevTools({
                                 </div>
                               </div>
                             </ThemeProvider>
-                          </SchedulingProfilerContextController>
+                          </TimelineContextController>
                         </ProfilerContextController>
                       </TreeContextController>
                     </FetchFileWithCachingContext.Provider>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index 3f3a8e4987064..f57b4ba8e1731 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -13,28 +13,26 @@ import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
-import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
   const {didRecordCommits, isProfiling, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {clearSchedulingProfilerData, schedulingProfilerData} = useContext(
-    SchedulingProfilerContext,
-  );
+  const {clearTimelineData, timelineData} = useContext(TimelineContext);
   const {profilerStore} = store;
 
   let doesHaveData = false;
   if (selectedTabID === 'timeline') {
-    doesHaveData = schedulingProfilerData !== null;
+    doesHaveData = timelineData !== null;
   } else {
     doesHaveData = didRecordCommits;
   }
 
   const clear = () => {
     if (selectedTabID === 'timeline') {
-      clearSchedulingProfilerData();
+      clearTimelineData();
     } else {
       profilerStore.clear();
     }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index a9f57f5c47d78..0bd6b0375e076 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -16,7 +16,7 @@ import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import RootSelector from './RootSelector';
-import {SchedulingProfiler} from 'react-devtools-timeline/src/SchedulingProfiler';
+import {Timeline} from 'react-devtools-timeline/src/Timeline';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
 import ProfilingImportExportButtons from './ProfilingImportExportButtons';
@@ -43,7 +43,7 @@ function Profiler(_: {||}) {
     supportsProfiling,
   } = useContext(ProfilerContext);
 
-  const {supportsSchedulingProfiler} = useContext(StoreContext);
+  const {supportsTimeline} = useContext(StoreContext);
 
   let isLegacyProfilerSelected = false;
 
@@ -59,7 +59,7 @@ function Profiler(_: {||}) {
         view = <CommitRanked />;
         break;
       case 'timeline':
-        view = <SchedulingProfiler />;
+        view = <Timeline />;
         break;
       default:
         break;
@@ -116,9 +116,7 @@ function Profiler(_: {||}) {
               currentTab={selectedTabID}
               id="Profiler"
               selectTab={selectTab}
-              tabs={
-                supportsSchedulingProfiler ? tabsWithSchedulingProfiler : tabs
-              }
+              tabs={supportsTimeline ? tabsWithTimeline : tabs}
               type="profiler"
             />
             <RootSelector />
@@ -160,7 +158,7 @@ const tabs = [
   },
 ];
 
-const tabsWithSchedulingProfiler = [
+const tabsWithTimeline = [
   ...tabs,
   null, // Divider/separator
   {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 912f87745e9ea..574da0639e973 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -19,7 +19,7 @@ import {
   prepareProfilingDataFrontendFromExport,
 } from './utils';
 import {downloadFile} from '../utils';
-import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
 import styles from './ProfilingImportExportButtons.css';
 
@@ -29,7 +29,7 @@ export default function ProfilingImportExportButtons() {
   const {isProfiling, profilingData, rootID, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {importSchedulingProfilerData} = useContext(SchedulingProfilerContext);
+  const {importTimelineData} = useContext(TimelineContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
 
@@ -108,10 +108,10 @@ export default function ProfilingImportExportButtons() {
     }
   }, [modalDialogDispatch, profilerStore]);
 
-  const importSchedulingProfilerDataWrapper = event => {
+  const importTimelineDataWrapper = event => {
     const input = inputRef.current;
     if (input !== null && input.files.length > 0) {
-      importSchedulingProfilerData(input.files[0]);
+      importTimelineData(input.files[0]);
     }
   };
 
@@ -124,7 +124,7 @@ export default function ProfilingImportExportButtons() {
         type="file"
         onChange={
           selectedTabID === 'timeline'
-            ? importSchedulingProfilerDataWrapper
+            ? importTimelineDataWrapper
             : importProfilerData
         }
         tabIndex={-1}
diff --git a/packages/react-devtools-timeline/src/SchedulingProfiler.css b/packages/react-devtools-timeline/src/Timeline.css
similarity index 100%
rename from packages/react-devtools-timeline/src/SchedulingProfiler.css
rename to packages/react-devtools-timeline/src/Timeline.css
diff --git a/packages/react-devtools-timeline/src/SchedulingProfiler.js b/packages/react-devtools-timeline/src/Timeline.js
similarity index 89%
rename from packages/react-devtools-timeline/src/SchedulingProfiler.js
rename to packages/react-devtools-timeline/src/Timeline.js
index 98cd61d312447..4b6d21f8a8f7a 100644
--- a/packages/react-devtools-timeline/src/SchedulingProfiler.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -21,18 +21,16 @@ import {
 } from 'react';
 import {SettingsContext} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
 import {updateColorsToMatchTheme} from './content-views/constants';
-import {SchedulingProfilerContext} from './SchedulingProfilerContext';
+import {TimelineContext} from './TimelineContext';
 import ImportButton from './ImportButton';
 import CanvasPage from './CanvasPage';
 
-import styles from './SchedulingProfiler.css';
+import styles from './Timeline.css';
 
-export function SchedulingProfiler(_: {||}) {
-  const {
-    importSchedulingProfilerData,
-    schedulingProfilerData,
-    viewState,
-  } = useContext(SchedulingProfilerContext);
+export function Timeline(_: {||}) {
+  const {importTimelineData, timelineData, viewState} = useContext(
+    TimelineContext,
+  );
 
   const ref = useRef(null);
 
@@ -63,17 +61,17 @@ export function SchedulingProfiler(_: {||}) {
 
   return (
     <div className={styles.Content} ref={ref}>
-      {schedulingProfilerData ? (
+      {timelineData ? (
         <Suspense fallback={<ProcessingData />}>
           <DataResourceComponent
-            dataResource={schedulingProfilerData}
+            dataResource={timelineData}
             key={key}
-            onFileSelect={importSchedulingProfilerData}
+            onFileSelect={importTimelineData}
             viewState={viewState}
           />
         </Suspense>
       ) : (
-        <Welcome onFileSelect={importSchedulingProfilerData} />
+        <Welcome onFileSelect={importTimelineData} />
       )}
     </div>
   );
diff --git a/packages/react-devtools-timeline/src/SchedulingProfilerContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
similarity index 60%
rename from packages/react-devtools-timeline/src/SchedulingProfilerContext.js
rename to packages/react-devtools-timeline/src/TimelineContext.js
index ff81482c09e74..ebfac421e2c3e 100644
--- a/packages/react-devtools-timeline/src/SchedulingProfilerContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -15,33 +15,28 @@ import type {HorizontalScrollStateChangeCallback, ViewState} from './types';
 import type {DataResource} from './createDataResourceFromImportedFile';
 
 export type Context = {|
-  clearSchedulingProfilerData: () => void,
-  importSchedulingProfilerData: (file: File) => void,
-  schedulingProfilerData: DataResource | null,
+  clearTimelineData: () => void,
+  importTimelineData: (file: File) => void,
+  timelineData: DataResource | null,
   viewState: ViewState,
 |};
 
-const SchedulingProfilerContext = createContext<Context>(
-  ((null: any): Context),
-);
-SchedulingProfilerContext.displayName = 'SchedulingProfilerContext';
+const TimelineContext = createContext<Context>(((null: any): Context));
+TimelineContext.displayName = 'TimelineContext';
 
 type Props = {|
   children: React$Node,
 |};
 
-function SchedulingProfilerContextController({children}: Props) {
-  const [
-    schedulingProfilerData,
-    setSchedulingProfilerData,
-  ] = useState<DataResource | null>(null);
+function TimelineContextController({children}: Props) {
+  const [timelineData, setTimelineData] = useState<DataResource | null>(null);
 
-  const clearSchedulingProfilerData = useCallback(() => {
-    setSchedulingProfilerData(null);
+  const clearTimelineData = useCallback(() => {
+    setTimelineData(null);
   }, []);
 
-  const importSchedulingProfilerData = useCallback((file: File) => {
-    setSchedulingProfilerData(createDataResourceFromImportedFile(file));
+  const importTimelineData = useCallback((file: File) => {
+    setTimelineData(createDataResourceFromImportedFile(file));
   }, []);
 
   // Recreate view state any time new profiling data is imported.
@@ -75,28 +70,23 @@ function SchedulingProfilerContextController({children}: Props) {
       },
       viewToMutableViewStateMap: new Map(),
     };
-  }, [schedulingProfilerData]);
+  }, [timelineData]);
 
   const value = useMemo(
     () => ({
-      clearSchedulingProfilerData,
-      importSchedulingProfilerData,
-      schedulingProfilerData,
+      clearTimelineData,
+      importTimelineData,
+      timelineData,
       viewState,
     }),
-    [
-      clearSchedulingProfilerData,
-      importSchedulingProfilerData,
-      schedulingProfilerData,
-      viewState,
-    ],
+    [clearTimelineData, importTimelineData, timelineData, viewState],
   );
 
   return (
-    <SchedulingProfilerContext.Provider value={value}>
+    <TimelineContext.Provider value={value}>
       {children}
-    </SchedulingProfilerContext.Provider>
+    </TimelineContext.Provider>
   );
 }
 
-export {SchedulingProfilerContext, SchedulingProfilerContextController};
+export {TimelineContext, TimelineContextController};

From 54f6ae9b1c0489784f6a95bbe26ffec31816d74a Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Fri, 5 Nov 2021 02:49:06 +0300
Subject: [PATCH 085/109] Fix small typos (#22701)

---
 packages/react-devtools-shared/src/__tests__/console-test.js    | 2 +-
 packages/react-devtools-shared/src/backend/views/utils.js       | 2 +-
 .../update-stable-version-numbers.js                            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index fef2d9674b6fd..1129c153267cb 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -69,7 +69,7 @@ describe('console', () => {
     );
   }
 
-  it('should not patch console methods that are not explicitly overriden', () => {
+  it('should not patch console methods that are not explicitly overridden', () => {
     expect(fakeConsole.error).not.toBe(mockError);
     expect(fakeConsole.info).toBe(mockInfo);
     expect(fakeConsole.log).toBe(mockLog);
diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js
index e332c81a0af86..a677c7447efc7 100644
--- a/packages/react-devtools-shared/src/backend/views/utils.js
+++ b/packages/react-devtools-shared/src/backend/views/utils.js
@@ -50,7 +50,7 @@ export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
       right: dimensions.borderRight,
       // This width and height won't get used by mergeRectOffsets (since this
       // is not the first rect in the array), but we set them so that this
-      // object typechecks as a ClientRect.
+      // object type checks as a ClientRect.
       width: 0,
       height: 0,
     },
diff --git a/scripts/release/prepare-release-from-npm-commands/update-stable-version-numbers.js b/scripts/release/prepare-release-from-npm-commands/update-stable-version-numbers.js
index 16bec66b6076d..47a0907bafad5 100644
--- a/scripts/release/prepare-release-from-npm-commands/update-stable-version-numbers.js
+++ b/scripts/release/prepare-release-from-npm-commands/update-stable-version-numbers.js
@@ -132,7 +132,7 @@ const run = async ({cwd, packages, version}, versionsMap) => {
   let diff = '';
   let numFilesModified = 0;
 
-  // Find-and-replace hard coded version (in built JS) for renderers.
+  // Find-and-replace hardcoded version (in built JS) for renderers.
   for (let i = 0; i < packages.length; i++) {
     const packageName = packages[i];
     const packagePath = join(nodeModulesPath, packageName);

From ee069065db449194a62a5c0dc2f8f6b61fa5e1b8 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 5 Nov 2021 15:58:35 +0000
Subject: [PATCH 086/109] devtools: Display root type for root updates in "what
 caused this update?" (#22599)

---
 .../__snapshots__/profilingCache-test.js.snap | 82 +++++++++----------
 .../src/backend/renderer.js                   |  4 +
 .../src/devtools/views/Profiler/Updaters.js   |  6 +-
 3 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 8d7eeb4255a94..92555b0761cd2 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -44,7 +44,7 @@ Object {
   "timestamp": 16,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -91,7 +91,7 @@ Object {
   "timestamp": 15,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -127,7 +127,7 @@ Object {
   "timestamp": 18,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -190,7 +190,7 @@ Object {
   "timestamp": 12,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -258,7 +258,7 @@ Object {
   "timestamp": 25,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -307,7 +307,7 @@ Object {
   "timestamp": 35,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -346,7 +346,7 @@ Object {
   "timestamp": 45,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -455,7 +455,7 @@ Object {
           "timestamp": 12,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -562,7 +562,7 @@ Object {
           "timestamp": 25,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -632,7 +632,7 @@ Object {
           "timestamp": 35,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -683,7 +683,7 @@ Object {
           "timestamp": 45,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -954,7 +954,7 @@ Object {
           "timestamp": 11,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1042,7 +1042,7 @@ Object {
           "timestamp": 22,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1149,7 +1149,7 @@ Object {
           "timestamp": 35,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1359,7 +1359,7 @@ Object {
       "timestamp": 13,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -1405,7 +1405,7 @@ Object {
       "timestamp": 34,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -1441,7 +1441,7 @@ Object {
       "timestamp": 44,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -1624,7 +1624,7 @@ Object {
       "timestamp": 24,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 13,
           "key": null,
@@ -1714,7 +1714,7 @@ Object {
       "timestamp": 34,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 7,
           "key": null,
@@ -1892,7 +1892,7 @@ Object {
           "timestamp": 13,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1962,7 +1962,7 @@ Object {
           "timestamp": 34,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -2013,7 +2013,7 @@ Object {
           "timestamp": 44,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -2256,7 +2256,7 @@ Object {
           "timestamp": 24,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 13,
               "key": null,
@@ -2343,7 +2343,7 @@ Object {
           "timestamp": 34,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 7,
               "key": null,
@@ -2464,7 +2464,7 @@ Object {
       "timestamp": 0,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -2541,7 +2541,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2584,7 +2584,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2699,7 +2699,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2740,7 +2740,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2811,7 +2811,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -2878,7 +2878,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -3029,7 +3029,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -3094,7 +3094,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -3271,7 +3271,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3441,7 +3441,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3523,7 +3523,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3604,7 +3604,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3739,7 +3739,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -4011,7 +4011,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -4147,7 +4147,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -4282,7 +4282,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 218b255388371..9d2005522da4b 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -425,6 +425,10 @@ export function getInternalReactConstants(
           getDisplayName(resolvedType, 'Anonymous')
         );
       case HostRoot:
+        const fiberRoot = fiber.stateNode;
+        if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+          return fiberRoot._debugRootType;
+        }
         return null;
       case HostComponent:
         return type;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
index 9e2518612e455..d35ff86d5895c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
@@ -14,6 +14,7 @@ import * as React from 'react';
 import {useContext} from 'react';
 import {ProfilerContext} from './ProfilerContext';
 import styles from './Updaters.css';
+import {ElementTypeRoot} from '../../../types';
 
 export type Props = {|
   commitTree: CommitTree,
@@ -26,8 +27,9 @@ export default function Updaters({commitTree, updaters}: Props) {
   const children =
     updaters.length > 0 ? (
       updaters.map<React$Node>((serializedElement: SerializedElement) => {
-        const {displayName, id, key} = serializedElement;
-        const isVisibleInTree = commitTree.nodes.has(id);
+        const {displayName, id, key, type} = serializedElement;
+        const isVisibleInTree =
+          commitTree.nodes.has(id) && type !== ElementTypeRoot;
         if (isVisibleInTree) {
           return (
             <button

From 327d5c48454aaee0d78fa69b7ef96a14605bf93b Mon Sep 17 00:00:00 2001
From: Esteban <lasesteban@gmail.com>
Date: Sat, 6 Nov 2021 15:16:49 +0100
Subject: [PATCH 087/109] Delete unused Circle CI scripts. (#22710)

---
 scripts/circleci/add_build_info_json.sh       |  5 --
 scripts/circleci/bench.sh                     |  5 --
 scripts/circleci/check_minified_errors.sh     | 14 ----
 scripts/circleci/pack_and_store_artifact.sh   | 15 ----
 scripts/circleci/set_up_github_keys.sh        | 12 ---
 scripts/circleci/test_coverage.sh             | 11 ---
 scripts/circleci/update_package_versions.sh   |  5 --
 scripts/release/ci-add-build-info-json.js     | 73 -------------------
 scripts/release/ci-update-package-versions.js | 31 --------
 9 files changed, 171 deletions(-)
 delete mode 100755 scripts/circleci/add_build_info_json.sh
 delete mode 100755 scripts/circleci/bench.sh
 delete mode 100755 scripts/circleci/check_minified_errors.sh
 delete mode 100755 scripts/circleci/pack_and_store_artifact.sh
 delete mode 100755 scripts/circleci/set_up_github_keys.sh
 delete mode 100755 scripts/circleci/test_coverage.sh
 delete mode 100755 scripts/circleci/update_package_versions.sh
 delete mode 100755 scripts/release/ci-add-build-info-json.js
 delete mode 100755 scripts/release/ci-update-package-versions.js

diff --git a/scripts/circleci/add_build_info_json.sh b/scripts/circleci/add_build_info_json.sh
deleted file mode 100755
index 122d859535b4a..0000000000000
--- a/scripts/circleci/add_build_info_json.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-node ./scripts/release/ci-add-build-info-json.js
diff --git a/scripts/circleci/bench.sh b/scripts/circleci/bench.sh
deleted file mode 100755
index bbb049667a20f..0000000000000
--- a/scripts/circleci/bench.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash		
-		
-set -e		
-		
-npm run bench
\ No newline at end of file
diff --git a/scripts/circleci/check_minified_errors.sh b/scripts/circleci/check_minified_errors.sh
deleted file mode 100755
index df7673a6ead6a..0000000000000
--- a/scripts/circleci/check_minified_errors.sh
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-# Ensure errors are minified in production
-
-OUT=$(git --no-pager grep -n --untracked --no-exclude-standard 'FIXME (minify-errors-in-prod)' -- './build/*')
-
-if [ "$OUT" != "" ]; then
-  echo "$OUT";
-  echo -e "\n";
-  echo "Detected an unminified error message in the production build. User-facing errors message must have a corresponding error code in scripts/error-codes/codes.json."
-  exit 1
-fi
-
-exit 0
diff --git a/scripts/circleci/pack_and_store_artifact.sh b/scripts/circleci/pack_and_store_artifact.sh
deleted file mode 100755
index 061101b6fdec2..0000000000000
--- a/scripts/circleci/pack_and_store_artifact.sh
+++ /dev/null
@@ -1,15 +0,0 @@
-#!/bin/bash
-
-set -e
-
-# Compress build directory into a single tarball for easy download
-tar -zcvf ./build.tgz ./build
-
-# NPM pack all modules to ensure we archive the correct set of files
-cd ./build/node_modules
-for dir in ./* ; do
-  npm pack "$dir"
-done
-
-# Compress packed modules into a single tarball for easy download by the publish script
-tar -zcvf ../../node_modules.tgz ./*.tgz
diff --git a/scripts/circleci/set_up_github_keys.sh b/scripts/circleci/set_up_github_keys.sh
deleted file mode 100755
index 4179f1e35b853..0000000000000
--- a/scripts/circleci/set_up_github_keys.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-
-set -e
-
-if [ -n "$GITHUB_TOKEN" ]; then
-
-  GH_PAGES_DIR=$(pwd)/../react-gh-pages
-  echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
-  git config --global user.name "Circle CI"
-  git config --global user.email "circle@reactjs.org"
-
-fi
diff --git a/scripts/circleci/test_coverage.sh b/scripts/circleci/test_coverage.sh
deleted file mode 100755
index af5fa9b7b1503..0000000000000
--- a/scripts/circleci/test_coverage.sh
+++ /dev/null
@@ -1,11 +0,0 @@
-#!/bin/bash
-
-set -e
-
-yarn test --coverage --maxWorkers=2
-if [ -z "$CI_PULL_REQUEST" ]; then
-  ./node_modules/.bin/coveralls < ./coverage/lcov.info
-fi
-
-# TODO: should we also track prod code coverage somehow?
-# yarn test-prod --coverage
diff --git a/scripts/circleci/update_package_versions.sh b/scripts/circleci/update_package_versions.sh
deleted file mode 100755
index 3661e80cdef77..0000000000000
--- a/scripts/circleci/update_package_versions.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-node ./scripts/release/ci-update-package-versions.js
diff --git a/scripts/release/ci-add-build-info-json.js b/scripts/release/ci-add-build-info-json.js
deleted file mode 100755
index 92af86946af7d..0000000000000
--- a/scripts/release/ci-add-build-info-json.js
+++ /dev/null
@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-// This script is run by Circle CI (see ../scripts/circleci).
-// It is not meant to be run as part of the local build or publish process.
-// It exists to share code between the Node release scripts and CI bash scripts.
-
-// IMPORTANT:
-// Changes below should be mirrored in ./build-release-locally-commands/add-build-info-json.js
-
-const {exec} = require('child_process');
-const {existsSync} = require('fs');
-const {join} = require('path');
-
-const run = async () => {
-  const {writeJson, readJson} = require('fs-extra');
-  const {getBuildInfo, getPublicPackages} = require('./utils');
-
-  const cwd = join(__dirname, '..', '..');
-
-  const {
-    branch,
-    buildNumber,
-    checksum,
-    commit,
-    reactVersion,
-  } = await getBuildInfo();
-
-  const isExperimental = process.env.RELEASE_CHANNEL === 'experimental';
-  const packages = getPublicPackages(isExperimental);
-  const packagesDir = join(cwd, 'packages');
-
-  const buildInfoJSON = {
-    branch,
-    buildNumber,
-    checksum,
-    commit,
-    environment: 'ci',
-    reactVersion,
-  };
-
-  for (let i = 0; i < packages.length; i++) {
-    const packageName = packages[i];
-    const packagePath = join(packagesDir, packageName);
-    const packageJSON = await readJson(join(packagePath, 'package.json'));
-
-    // Verify all public packages include "build-info.json" in the files array.
-    if (!packageJSON.files.includes('build-info.json')) {
-      console.error(
-        `${packageName} must include "build-info.json" in files array.`
-      );
-      process.exit(1);
-    }
-
-    // Add build info JSON to package.
-    if (existsSync(join(packagePath, 'npm'))) {
-      const buildInfoJSONPath = join(packagePath, 'npm', 'build-info.json');
-      await writeJson(buildInfoJSONPath, buildInfoJSON, {spaces: 2});
-    }
-  }
-};
-
-// Install (or update) release script dependencies before proceeding.
-// This needs to be done before we require() the first NPM module.
-exec('yarn install', {cwd: __dirname}, (error, stdout, stderr) => {
-  if (error) {
-    console.error(error);
-    process.exit(1);
-  } else {
-    run();
-  }
-});
diff --git a/scripts/release/ci-update-package-versions.js b/scripts/release/ci-update-package-versions.js
deleted file mode 100755
index c5f75eb6b0d23..0000000000000
--- a/scripts/release/ci-update-package-versions.js
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-// This script is run by Circle CI (see ../scripts/circleci).
-// It is not meant to be run as part of the local build or publish process.
-// It exists to share code between the Node release scripts and CI bash scripts.
-
-const {exec} = require('child_process');
-const {join} = require('path');
-
-const run = async () => {
-  const {getBuildInfo, updateVersionsForNext} = require('./utils');
-
-  const cwd = join(__dirname, '..', '..');
-
-  const {reactVersion, version} = await getBuildInfo();
-
-  await updateVersionsForNext(cwd, reactVersion, version);
-};
-
-// Install (or update) release script dependencies before proceeding.
-// This needs to be done before we require() the first NPM module.
-exec('yarn install', {cwd: __dirname}, (error, stdout, stderr) => {
-  if (error) {
-    console.error(error);
-    process.exit(1);
-  } else {
-    run();
-  }
-});

From 99a73ac670ce8d71ae8a690e9795d35cbdfa20b6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Nov 2021 12:28:33 -0500
Subject: [PATCH 088/109] Timeline: Improved snapshot view (#22706)

---
 .../react-devtools-timeline/src/CanvasPage.js |  2 +
 .../src/EventTooltip.js                       | 34 ++++++++++++--
 .../react-devtools-timeline/src/constants.js  |  2 +
 .../src/content-views/SnapshotsView.js        | 46 +++++++++++++++++--
 .../src/content-views/constants.js            | 10 +++-
 .../__tests__/preprocessData-test.internal.js |  4 ++
 .../src/import-worker/preprocessData.js       | 20 +++++++-
 packages/react-devtools-timeline/src/types.js |  1 +
 .../src/view-base/View.js                     |  4 +-
 9 files changed, 113 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index ab5c828280c0a..4084fa4eeb860 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -753,8 +753,10 @@ function AutoSizedCanvas({
         <EventTooltip
           canvasRef={canvasRef}
           data={data}
+          height={height}
           hoveredEvent={hoveredEvent}
           origin={mouseLocation}
+          width={width}
         />
       )}
     </Fragment>
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index d3ca5d5625f13..1cb4b3d8bbf2e 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -34,8 +34,10 @@ const MAX_TOOLTIP_TEXT_LENGTH = 60;
 type Props = {|
   canvasRef: {|current: HTMLCanvasElement | null|},
   data: ReactProfilerData,
+  height: number,
   hoveredEvent: ReactHoverContextInfo | null,
   origin: Point,
+  width: number,
 |};
 
 function getSchedulingEventLabel(event: SchedulingEvent): string | null {
@@ -71,8 +73,10 @@ function getReactMeasureLabel(type): string | null {
 export default function EventTooltip({
   canvasRef,
   data,
+  height,
   hoveredEvent,
   origin,
+  width,
 }: Props) {
   const ref = useSmartTooltip({
     canvasRef,
@@ -111,7 +115,9 @@ export default function EventTooltip({
       <TooltipSchedulingEvent data={data} schedulingEvent={schedulingEvent} />
     );
   } else if (snapshot !== null) {
-    content = <TooltipSnapshot snapshot={snapshot} />;
+    content = (
+      <TooltipSnapshot height={height} snapshot={snapshot} width={width} />
+    );
   } else if (suspenseEvent !== null) {
     content = <TooltipSuspenseEvent suspenseEvent={suspenseEvent} />;
   } else if (measure !== null) {
@@ -333,12 +339,34 @@ const TooltipSchedulingEvent = ({
   );
 };
 
-const TooltipSnapshot = ({snapshot}: {|snapshot: Snapshot|}) => {
+const TooltipSnapshot = ({
+  height,
+  snapshot,
+  width,
+}: {|
+  height: number,
+  snapshot: Snapshot,
+  width: number,
+|}) => {
+  const aspectRatio = snapshot.width / snapshot.height;
+
+  // Zoomed in view should not be any bigger than the DevTools viewport.
+  let safeWidth = snapshot.width;
+  let safeHeight = snapshot.height;
+  if (safeWidth > width) {
+    safeWidth = width;
+    safeHeight = safeWidth / aspectRatio;
+  }
+  if (safeHeight > height) {
+    safeHeight = height;
+    safeWidth = safeHeight * aspectRatio;
+  }
+
   return (
     <img
       className={styles.Image}
       src={snapshot.imageSource}
-      style={{width: snapshot.width / 2, height: snapshot.height / 2}}
+      style={{height: safeHeight, width: safeWidth}}
     />
   );
 };
diff --git a/packages/react-devtools-timeline/src/constants.js b/packages/react-devtools-timeline/src/constants.js
index e29b8901d81fd..e9b18ab65716e 100644
--- a/packages/react-devtools-timeline/src/constants.js
+++ b/packages/react-devtools-timeline/src/constants.js
@@ -16,3 +16,5 @@ export const REACT_TOTAL_NUM_LANES = 31;
 
 // Increment this number any time a backwards breaking change is made to the profiler metadata.
 export const SCHEDULING_PROFILER_VERSION = 1;
+
+export const SNAPSHOT_MAX_HEIGHT = 60;
diff --git a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
index fbaa7c5d83570..b027acae37693 100644
--- a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
@@ -24,11 +24,12 @@ import {
   rectEqualToRect,
   View,
 } from '../view-base';
-import {BORDER_SIZE, COLORS, SNAPSHOT_HEIGHT} from './constants';
+import {BORDER_SIZE, COLORS, SNAPSHOT_SCRUBBER_SIZE} from './constants';
 
 type OnHover = (node: Snapshot | null) => void;
 
 export class SnapshotsView extends View {
+  _hoverLocation: Point | null = null;
   _intrinsicSize: Size;
   _profilerData: ReactProfilerData;
 
@@ -39,7 +40,7 @@ export class SnapshotsView extends View {
 
     this._intrinsicSize = {
       width: profilerData.duration,
-      height: SNAPSHOT_HEIGHT,
+      height: profilerData.snapshotHeight,
     };
     this._profilerData = profilerData;
   }
@@ -49,6 +50,7 @@ export class SnapshotsView extends View {
   }
 
   draw(context: CanvasRenderingContext2D) {
+    const snapshotHeight = this._profilerData.snapshotHeight;
     const {visibleArea} = this;
 
     context.fillStyle = COLORS.BACKGROUND;
@@ -72,8 +74,8 @@ export class SnapshotsView extends View {
         break;
       }
 
-      const scaledHeight = SNAPSHOT_HEIGHT;
-      const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) / snapshot.height;
+      const scaledHeight = snapshotHeight;
+      const scaledWidth = (snapshot.width * snapshotHeight) / snapshot.height;
 
       const imageRect: Rect = {
         origin: {
@@ -96,6 +98,28 @@ export class SnapshotsView extends View {
 
       x += scaledWidth + BORDER_SIZE;
     }
+
+    const hoverLocation = this._hoverLocation;
+    if (hoverLocation !== null) {
+      const scrubberWidth = SNAPSHOT_SCRUBBER_SIZE + BORDER_SIZE * 2;
+      const scrubberOffset = scrubberWidth / 2;
+
+      context.fillStyle = COLORS.SCRUBBER_BORDER;
+      context.fillRect(
+        hoverLocation.x - scrubberOffset,
+        visibleArea.origin.y,
+        scrubberWidth,
+        visibleArea.size.height,
+      );
+
+      context.fillStyle = COLORS.SCRUBBER_BACKGROUND;
+      context.fillRect(
+        hoverLocation.x - scrubberOffset + BORDER_SIZE,
+        visibleArea.origin.y,
+        SNAPSHOT_SCRUBBER_SIZE,
+        visibleArea.size.height,
+      );
+    }
   }
 
   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
@@ -208,15 +232,29 @@ export class SnapshotsView extends View {
     }
 
     if (!rectContainsPoint(location, visibleArea)) {
+      if (this._hoverLocation !== null) {
+        this._hoverLocation = null;
+
+        this.setNeedsDisplay();
+      }
+
       onHover(null);
       return;
     }
 
     const snapshot = this._findClosestSnapshot(location.x);
     if (snapshot !== null) {
+      this._hoverLocation = location;
+
       onHover(snapshot);
     } else {
+      this._hoverLocation = null;
+
       onHover(null);
     }
+
+    // Any time the mouse moves within the boundaries of this view, we need to re-render.
+    // This is because we draw a scrubbing bar that shows the location corresponding to the current tooltip.
+    this.setNeedsDisplay();
   }
 }
diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
index 216234508f5e1..f2920ac19b516 100644
--- a/packages/react-devtools-timeline/src/content-views/constants.js
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -24,7 +24,7 @@ export const REACT_MEASURE_HEIGHT = 14;
 export const BORDER_SIZE = 1 / DPR;
 export const FLAMECHART_FRAME_HEIGHT = 14;
 export const TEXT_PADDING = 3;
-export const SNAPSHOT_HEIGHT = 35;
+export const SNAPSHOT_SCRUBBER_SIZE = 3;
 
 export const INTERVAL_TIMES = [
   1,
@@ -89,6 +89,8 @@ export let COLORS = {
   REACT_THROWN_ERROR_HOVER: '',
   REACT_WORK_BORDER: '',
   SCROLL_CARET: '',
+  SCRUBBER_BACKGROUND: '',
+  SCRUBBER_BORDER: '',
   TEXT_COLOR: '',
   TEXT_DIM_COLOR: '',
   TIME_MARKER_LABEL: '',
@@ -230,6 +232,12 @@ export function updateColorsToMatchTheme(element: Element): boolean {
       '--color-timeline-react-work-border',
     ),
     SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
+    SCRUBBER_BACKGROUND: computedStyle.getPropertyValue(
+      '--color-timeline-react-suspense-rejected',
+    ),
+    SCRUBBER_BORDER: computedStyle.getPropertyValue(
+      '--color-timeline-text-color',
+    ),
     TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
     TEXT_DIM_COLOR: computedStyle.getPropertyValue(
       '--color-timeline-text-dim-color',
diff --git a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
index 758afc1e15f2c..f902ddc57e14e 100644
--- a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -354,6 +354,7 @@ describe('preprocessData', () => {
           "otherUserTimingMarks": Array [],
           "reactVersion": "17.0.3",
           "schedulingEvents": Array [],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
@@ -572,6 +573,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
@@ -765,6 +767,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
@@ -1129,6 +1132,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
index caf27e707563b..98e802793f6a8 100644
--- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -29,7 +29,11 @@ import type {
   SchedulingEvent,
   SuspenseEvent,
 } from '../types';
-import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
+import {
+  REACT_TOTAL_NUM_LANES,
+  SCHEDULING_PROFILER_VERSION,
+  SNAPSHOT_MAX_HEIGHT,
+} from '../constants';
 import InvalidProfileError from './InvalidProfileError';
 import {getBatchRange} from '../utils/getBatchRange';
 import ErrorStackParser from 'error-stack-parser';
@@ -1066,6 +1070,7 @@ export default async function preprocessData(
     reactVersion: null,
     schedulingEvents: [],
     snapshots: [],
+    snapshotHeight: 0,
     startTime: 0,
     suspenseEvents: [],
     thrownErrors: [],
@@ -1189,5 +1194,18 @@ export default async function preprocessData(
   // Since processing is done in a worker, async work must complete before data is serialized and returned.
   await Promise.all(state.asyncProcessingPromises);
 
+  // Now that all images have been loaded, let's figure out the display size we're going to use for our thumbnails:
+  // both the ones rendered to the canvas and the ones shown on hover.
+  if (profilerData.snapshots.length > 0) {
+    // NOTE We assume a static window size here, which is not necessarily true but should be for most cases.
+    // Regardless, Chrome also sets a single size/ratio and stick with it- so we'll do the same.
+    const snapshot = profilerData.snapshots[0];
+
+    profilerData.snapshotHeight = Math.min(
+      snapshot.height,
+      SNAPSHOT_MAX_HEIGHT,
+    );
+  }
+
   return profilerData;
 }
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index cf504229b01c5..5a532495187ee 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -202,6 +202,7 @@ export type ReactProfilerData = {|
   reactVersion: string | null,
   schedulingEvents: SchedulingEvent[],
   snapshots: Snapshot[],
+  snapshotHeight: number,
   startTime: number,
   suspenseEvents: SuspenseEvent[],
   thrownErrors: ThrownError[],
diff --git a/packages/react-devtools-timeline/src/view-base/View.js b/packages/react-devtools-timeline/src/view-base/View.js
index 0edac1120862b..3e2a5a06f1cd5 100644
--- a/packages/react-devtools-timeline/src/view-base/View.js
+++ b/packages/react-devtools-timeline/src/view-base/View.js
@@ -197,7 +197,9 @@ export class View {
       !sizeIsEmpty(this.visibleArea.size)
     ) {
       this.layoutSubviews();
-      if (this._needsDisplay) this._needsDisplay = false;
+      if (this._needsDisplay) {
+        this._needsDisplay = false;
+      }
       if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;
 
       // Clip anything drawn by the view to prevent it from overflowing its visible area.

From 2db6d6a5a7a2ecf74610d5a55732d6753b15b836 Mon Sep 17 00:00:00 2001
From: Yash Joshi <jyash97@gmail.com>
Date: Tue, 9 Nov 2021 01:47:22 +0530
Subject: [PATCH 089/109] fix(devtools): expose css vars to reach-ui portal
 components (#22716)

---
 .../src/devtools/views/Button.js              |  9 ++---
 .../devtools/views/Components/OwnersStack.js  |  9 +++--
 .../{ => Components/reach-ui}/Tooltip.css     |  0
 .../views/Components/reach-ui/menu-button.js  | 28 +++++++++++++++
 .../views/Components/reach-ui/tooltip.js      | 35 +++++++++++++++++++
 .../views/Settings/SettingsContext.js         | 28 ---------------
 .../src/devtools/views/TabBar.js              |  5 ++-
 .../src/devtools/views/ThemeProvider.js       | 18 ++++------
 .../src/devtools/views/Toggle.js              |  9 ++---
 .../src/devtools/views/root.css               | 28 +--------------
 .../src/devtools/views/useThemeStyles.js      | 28 +++++++++++++++
 11 files changed, 112 insertions(+), 85 deletions(-)
 rename packages/react-devtools-shared/src/devtools/views/{ => Components/reach-ui}/Tooltip.css (100%)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/useThemeStyles.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index 0d706fc2ebd6b..aa006cbbc7227 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -8,10 +8,9 @@
  */
 
 import * as React from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -35,11 +34,7 @@ export default function Button({
   );
 
   if (title) {
-    button = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {button}
-      </Tooltip>
-    );
+    button = <Tooltip label={title}>{button}</Tooltip>;
   }
 
   return button;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index d7efafee6c522..cc9c43fd775ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -16,8 +16,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import Tooltip from '@reach/tooltip';
-import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
@@ -26,6 +24,13 @@ import {OwnersListContext} from './OwnersListContext';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {useIsOverflowing} from '../hooks';
 import {StoreContext} from '../context';
+import Tooltip from '../Components/reach-ui/tooltip';
+import {
+  Menu,
+  MenuList,
+  MenuButton,
+  MenuItem,
+} from '../Components/reach-ui/menu-button';
 
 import type {SerializedElement} from './types';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
similarity index 100%
rename from packages/react-devtools-shared/src/devtools/views/Tooltip.css
rename to packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
new file mode 100644
index 0000000000000..cee8021a191f3
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {
+  Menu,
+  MenuList as ReachMenuList,
+  MenuButton,
+  MenuItem,
+} from '@reach/menu-button';
+import useThemeStyles from '../../useThemeStyles';
+
+const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
+  const style = useThemeStyles();
+  return (
+    <ReachMenuList style={style} {...props}>
+      {children}
+    </ReachMenuList>
+  );
+};
+
+export {MenuItem, MenuButton, MenuList, Menu};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
new file mode 100644
index 0000000000000..d3f07258c8b5b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import ReachTooltip from '@reach/tooltip';
+import tooltipStyles from './Tooltip.css';
+import useThemeStyles from '../../useThemeStyles';
+
+const Tooltip = ({
+  children,
+  className = '',
+  ...props
+}: {
+  children: React$Node,
+  className: string,
+  ...
+}) => {
+  const style = useThemeStyles();
+  return (
+    <ReachTooltip
+      className={`${tooltipStyles.Tooltip} ${className}`}
+      style={style}
+      {...props}>
+      {children}
+    </ReachTooltip>
+  );
+};
+
+export default Tooltip;
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 7f8cfe614b0cc..09c815b49b974 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -248,28 +248,6 @@ function SettingsContextController({
   );
 }
 
-function setStyleVariable(
-  name: string,
-  value: string,
-  documentElements: DocumentElements,
-) {
-  documentElements.forEach(documentElement =>
-    documentElement.style.setProperty(name, value),
-  );
-}
-
-function updateStyleHelper(
-  themeKey: string,
-  style: string,
-  documentElements: DocumentElements,
-) {
-  setStyleVariable(
-    `--${style}`,
-    `var(--${themeKey}-${style})`,
-    documentElements,
-  );
-}
-
 export function updateDisplayDensity(
   displayDensity: DisplayDensity,
   documentElements: DocumentElements,
@@ -296,12 +274,6 @@ export function updateThemeVariables(
     // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
     documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
   });
-
-  // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
-  // Because Portals render in a different DOM subtree, these variables don't propagate.
-  // So we need to also set @reach/tooltip specific styles on the root.
-  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 }
 
 export {SettingsContext, SettingsContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index c195710a42b49..32bd32827f14f 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -9,11 +9,10 @@
 
 import * as React from 'react';
 import {Fragment, useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 import Icon from './Icon';
 
 import styles from './TabBar.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 import type {IconType} from './Icon';
 
@@ -127,7 +126,7 @@ export default function TabBar({
 
         if (title) {
           button = (
-            <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>
+            <Tooltip key={id} label={title}>
               {button}
             </Tooltip>
           );
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index 8fb93469ad4a4..a353b4c6eec66 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -8,22 +8,18 @@
  */
 
 import * as React from 'react';
-import {useContext, useMemo} from 'react';
-import {SettingsContext} from './Settings/SettingsContext';
-import {THEME_STYLES} from '../../constants';
+import useThemeStyles from './useThemeStyles';
 
 export default function ThemeProvider({children}: {|children: React$Node|}) {
-  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+  const themeStyle = useThemeStyles();
 
-  const style = useMemo(
-    () => ({
+  const style = React.useMemo(() => {
+    return {
+      ...themeStyle,
       width: '100%',
       height: '100%',
-      ...THEME_STYLES[displayDensity],
-      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
-    }),
-    [theme, browserTheme, displayDensity],
-  );
+    };
+  }, [themeStyle]);
 
   return <div style={style}>{children}</div>;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
index c5961a9bbfc5c..20e78fee772aa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -9,10 +9,9 @@
 
 import * as React from 'react';
 import {useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -58,11 +57,7 @@ export default function Toggle({
   );
 
   if (title) {
-    toggle = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {toggle}
-      </Tooltip>
-    );
+    toggle = <Tooltip label={title}>{toggle}</Tooltip>;
   }
 
   return toggle;
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 9bb749ff23703..cbf8ece0066af 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -1,36 +1,10 @@
 :root {
-  /**
-   * The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants'
-   * They are repeated here because they're used by e.g. tooltips or context menus
-   * which get rendered outside of the DOM subtree (where normal theme/styles are written).
-   */
-
-  /* Light theme */
-  --light-color-scroll-thumb: #c2c2c2;
-  --light-color-scroll-track: #fafafa;
-  --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
-  --light-color-tooltip-text: #ffffff;
-
-  /* Dark theme */
-  --dark-color-scroll-thumb: #afb3b9;
-  --dark-color-scroll-track: #313640;
-  --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
-  --dark-color-tooltip-text: #000000;
-
   /* Font smoothing */
   --font-smoothing: auto;
 
-  /* Compact density */
-  --compact-line-height-data: 18px;
-  --compact-root-font-size: 16px;
-
-  /* Comfortable density */
-  --comfortable-line-height-data: 22px;
-  --comfortable-root-font-size: 20px;
-
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
\ No newline at end of file
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
new file mode 100644
index 0000000000000..009cf1a50d575
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {useContext, useMemo} from 'react';
+import {SettingsContext} from './Settings/SettingsContext';
+import {THEME_STYLES} from '../../constants';
+
+const useThemeStyles = () => {
+  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+
+  const style = useMemo(
+    () => ({
+      ...THEME_STYLES[displayDensity],
+      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
+    }),
+    [theme, browserTheme, displayDensity],
+  );
+
+  return style;
+};
+
+export default useThemeStyles;

From 2b77ab26adc2601dc223ede75ff4d19bc19c8684 Mon Sep 17 00:00:00 2001
From: Yash Joshi <jyash97@gmail.com>
Date: Tue, 9 Nov 2021 03:05:35 +0530
Subject: [PATCH 090/109] fix(devtools): accept json file in import fileinput
 (#22717)

---
 .../src/devtools/views/Profiler/ProfilingImportExportButtons.js  | 1 +
 packages/react-devtools-timeline/src/ImportButton.js             | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 574da0639e973..5b53e04410df0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -122,6 +122,7 @@ export default function ProfilingImportExportButtons() {
         ref={inputRef}
         className={styles.Input}
         type="file"
+        accept=".json"
         onChange={
           selectedTabID === 'timeline'
             ? importTimelineDataWrapper
diff --git a/packages/react-devtools-timeline/src/ImportButton.js b/packages/react-devtools-timeline/src/ImportButton.js
index 6f018bf30934c..12eb6623fbe67 100644
--- a/packages/react-devtools-timeline/src/ImportButton.js
+++ b/packages/react-devtools-timeline/src/ImportButton.js
@@ -46,6 +46,7 @@ export default function ImportButton({children = null, onFileSelect}: Props) {
         ref={inputRef}
         className={styles.Input}
         type="file"
+        accept=".json"
         onChange={handleFiles}
         tabIndex={-1}
       />

From 827021c4e30d632f48cdaa41b2e6b2da8719eb8d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 9 Nov 2021 13:55:27 +0000
Subject: [PATCH 091/109] Changelog for eslint-plugin-react-hooks@4.3.0

---
 packages/eslint-plugin-react-hooks/CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index b3e5d1736cb4c..6a560c6012f41 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 4.3.0
+
+* Support ESLint 8. ([@MichaelDeBoey](https://github.com/MichaelDeBoey) in [#22248](https://github.com/facebook/react/pull/22248))
+* Fix a crash with an empty effect. ([@ChrisRu](https://github.com/ChrisRu) in [#20385](https://github.com/facebook/react/pull/20385))
+* Improve the error message. ([@callmetwan](https://github.com/callmetwan) in [#20692](https://github.com/facebook/react/pull/20692))
+* Handle optional chained methods as dependency. ([@AriPerkkio](https://github.com/AriPerkkio) in [#20247](https://github.com/facebook/react/pull/20247))
+* Assume the new `useTransition` signature in the rule. ([@rickhanlonii](https://github.com/rickhanlonii) in [#20976](https://github.com/facebook/react/pull/20976))
+
 ## 4.2.0
 
 * No changes, this was an automated release together with React 17.

From c3f34e4beb67a4ddd85a9456ebc9013d123aa6ee Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 9 Nov 2021 13:58:55 +0000
Subject: [PATCH 092/109] eslint-plugin-react-hooks@4.3.0

---
 packages/eslint-plugin-react-hooks/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 1cda188fc5dc7..6bf810a7712bf 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 0ddd69d1226c660ee4930b0dce7860b706e548bc Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 9 Nov 2021 13:40:50 -0500
Subject: [PATCH 093/109] Throw on hydration mismatch and force client
 rendering if boundary hasn't suspended within concurrent root (#22629)

* Throw on hydration mismatch

* remove debugger

* update error message

* update error message part2...

* fix test?

* test? :(

* tests 4real

* remove useRefAccessWarning gating

* split markSuspenseBoundary and getNearestBoundary

* also assert html is correct

* replace-fork

* also remove client render flag on suspend

* replace-fork

* fix mismerge????
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  59 +---
 ...DOMServerPartialHydration-test.internal.js | 102 +++++-
 .../src/ReactFiberHydrationContext.new.js     |  11 +
 .../src/ReactFiberHydrationContext.old.js     |  11 +
 .../src/ReactFiberThrow.new.js                | 302 +++++++++---------
 .../src/ReactFiberThrow.old.js                | 302 +++++++++---------
 scripts/error-codes/codes.json                |   3 +-
 7 files changed, 444 insertions(+), 346 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index abbbdc1578753..8c282e1bb730e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1677,25 +1677,19 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot', async () => {
-    const ref = React.createRef();
-
     function getServerSnapshot() {
       return 'server';
     }
-
     function getClientSnapshot() {
       return 'client';
     }
-
     function subscribe() {
       return () => {};
     }
-
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
       return text;
     }
-
     function App() {
       const value = useSyncExternalStore(
         subscribe,
@@ -1703,19 +1697,17 @@ describe('ReactDOMFizzServer', () => {
         getServerSnapshot,
       );
       return (
-        <div ref={ref}>
+        <div>
           <Child text={value} />
         </div>
       );
     }
-
     const loggedErrors = [];
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-
         {
           onError(x) {
             loggedErrors.push(x);
@@ -1726,56 +1718,43 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    const serverRenderedDiv = container.getElementsByTagName('div')[0];
-
     ReactDOM.hydrateRoot(container, <App />);
 
-    // The first paint uses the server snapshot
-    expect(Scheduler).toFlushUntilNextPaint(['server']);
-    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-    // Hydration succeeded
-    expect(ref.current).toEqual(serverRenderedDiv);
-
-    // Asynchronously we detect that the store has changed on the client,
-    // and patch up the inconsistency
-    expect(Scheduler).toFlushUntilNextPaint(['client']);
+    expect(() => {
+      // The first paint switches to client rendering due to mismatch
+      expect(Scheduler).toFlushUntilNextPaint(['client']);
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+      {withoutStack: true},
+    );
     expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    expect(ref.current).toEqual(serverRenderedDiv);
   });
 
   // The selector implementation uses the lazy ref initialization pattern
-  // @gate !(enableUseRefAccessWarning && __DEV__)
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot (with selector and isEqual)', async () => {
     // Same as previous test, but with a selector that returns a complex object
     // that is memoized with a custom `isEqual` function.
     const ref = React.createRef();
-
     function getServerSnapshot() {
       return {env: 'server', other: 'unrelated'};
     }
-
     function getClientSnapshot() {
       return {env: 'client', other: 'unrelated'};
     }
-
     function selector({env}) {
       return {env};
     }
-
     function isEqual(a, b) {
       return a.env === b.env;
     }
-
     function subscribe() {
       return () => {};
     }
-
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
       return text;
     }
-
     function App() {
       const {env} = useSyncExternalStoreWithSelector(
         subscribe,
@@ -1790,14 +1769,12 @@ describe('ReactDOMFizzServer', () => {
         </div>
       );
     }
-
     const loggedErrors = [];
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-
         {
           onError(x) {
             loggedErrors.push(x);
@@ -1808,21 +1785,17 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    const serverRenderedDiv = container.getElementsByTagName('div')[0];
-
     ReactDOM.hydrateRoot(container, <App />);
 
-    // The first paint uses the server snapshot
-    expect(Scheduler).toFlushUntilNextPaint(['server']);
-    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-    // Hydration succeeded
-    expect(ref.current).toEqual(serverRenderedDiv);
-
-    // Asynchronously we detect that the store has changed on the client,
-    // and patch up the inconsistency
-    expect(Scheduler).toFlushUntilNextPaint(['client']);
+    // The first paint uses the client due to mismatch forcing client render
+    expect(() => {
+      // The first paint switches to client rendering due to mismatch
+      expect(Scheduler).toFlushUntilNextPaint(['client']);
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+      {withoutStack: true},
+    );
     expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    expect(ref.current).toEqual(serverRenderedDiv);
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 505a100df3aa6..9aab3bf94536f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -197,12 +197,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     ReactDOM.hydrateRoot(container, <App />);
-    expect(() => {
-      Scheduler.unstable_flushAll();
-    }).toErrorDev(
-      // TODO: This error should not be logged in this case. It's a false positive.
-      'Did not expect server HTML to contain the text node "Hello" in <div>.',
-    );
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // Expect the server-generated HTML to stay intact.
@@ -218,6 +213,101 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('HelloHello');
   });
 
+  it('falls back to client rendering boundary on mismatch', async () => {
+    let client = false;
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+    function Child() {
+      if (suspend) {
+        Scheduler.unstable_yieldValue('Suspend');
+        throw promise;
+      } else {
+        Scheduler.unstable_yieldValue('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.unstable_yieldValue('Component');
+      if (shouldMismatch && client) {
+        return <article>Mismatch</article>;
+      }
+      return <div>Component</div>;
+    }
+    function App() {
+      return (
+        <Suspense fallback="Loading...">
+          <Child />
+          <Component />
+          <Component />
+          <Component />
+          <Component shouldMismatch={true} />
+        </Suspense>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+    expect(Scheduler).toHaveYielded([
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
+
+    suspend = true;
+    client = true;
+
+    ReactDOM.hydrateRoot(container, <App />);
+    expect(Scheduler).toFlushAndYield([
+      'Suspend',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+    jest.runAllTimers();
+
+    // Unchanged
+    expect(container.innerHTML).toBe(
+      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+    );
+
+    suspend = false;
+    resolve();
+    await promise;
+
+    expect(Scheduler).toFlushAndYield([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+      // second pass as client render
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
+    );
+  });
+
   it('calls the hydration callbacks after hydration or deletion', async () => {
     let suspend = false;
     let resolve;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index eabc5e43116bb..5e915579a7c0d 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
 import type {
   Instance,
   TextInstance,
@@ -323,12 +324,21 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
+function throwOnHydrationMismatchIfConcurrentMode(fiber) {
+  if ((fiber.mode & ConcurrentMode) !== NoMode) {
+    throw new Error(
+      'An error occurred during hydration. The server HTML was replaced with client content',
+    );
+  }
+}
+
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -337,6 +347,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 48e60581e0f28..e7e08d5f3b8bb 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
 import type {
   Instance,
   TextInstance,
@@ -323,12 +324,21 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
+function throwOnHydrationMismatchIfConcurrentMode(fiber) {
+  if ((fiber.mode & ConcurrentMode) !== NoMode) {
+    throw new Error(
+      'An error occurred during hydration. The server HTML was replaced with client content',
+    );
+  }
+}
+
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -337,6 +347,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 85728d96bb730..cd9931687ba5a 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -268,158 +268,157 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber: Fiber,
-  sourceFiber: Fiber,
-  root: FiberRoot,
-  rootRenderLanes: Lanes,
-): Fiber | null {
+function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
+  let node = returnFiber;
   const hasInvisibleParentBoundary = hasSuspenseContext(
     suspenseStackCursor.current,
     (InvisibleParentSuspenseContext: SuspenseContext),
   );
-  let node = returnFiber;
   do {
     if (
       node.tag === SuspenseComponent &&
       shouldCaptureSuspense(node, hasInvisibleParentBoundary)
     ) {
-      // Found the nearest boundary.
-      const 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;
+      return node;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+  return null;
+}
 
-          // 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);
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary: Fiber,
+  returnFiber: Fiber,
+  sourceFiber: Fiber,
+  root: FiberRoot,
+  rootRenderLanes: Lanes,
+): Fiber | null {
+  // 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;
 
-          if (supportsPersistence && 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.
-            const currentSuspenseBoundary = suspenseBoundary.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
-              }
-            }
-          }
+      // 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) {
-            const currentSourceFiber = sourceFiber.alternate;
-            if (currentSourceFiber === null) {
-              // This is a new mount. Change the tag so it's not mistaken for a
-              // completed class component. For example, we should not call
-              // componentWillUnmount if it is deleted.
-              sourceFiber.tag = IncompleteClassComponent;
-            } else {
-              // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
-              // prevent a bail out.
-              const update = createUpdate(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
-            }
+      if (supportsPersistence && 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.
+        const currentSuspenseBoundary = suspenseBoundary.alternate;
+        if (currentSuspenseBoundary === null) {
+          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+          const offscreenContainer = offscreenFiber.child;
+          if (offscreenContainer !== null) {
+            const children = offscreenContainer.memoizedProps.children;
+            const containerProps = getOffscreenContainerProps(
+              'hidden',
+              children,
+            );
+            offscreenContainer.pendingProps = containerProps;
+            offscreenContainer.memoizedProps = containerProps;
           }
+        }
+      }
 
-          // The source fiber did not complete. Mark it with Sync priority to
-          // indicate that it still has pending work.
-          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
+      if (sourceFiber.tag === ClassComponent) {
+        const currentSourceFiber = sourceFiber.alternate;
+        if (currentSourceFiber === null) {
+          // This is a new mount. Change the tag so it's not mistaken for a
+          // completed class component. For example, we should not call
+          // componentWillUnmount if it is deleted.
+          sourceFiber.tag = IncompleteClassComponent;
+        } else {
+          // When we try rendering again, we should not reuse the current fiber,
+          // since it's known to be in an inconsistent state. Use a force update to
+          // prevent a bail out.
+          const update = createUpdate(NoTimestamp, SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update, 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;
+      // The source fiber did not complete. Mark it with Sync priority to
+      // indicate that it still has pending work.
+      sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
     }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== 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.
 
-  // Could not find a Suspense boundary capable of capturing.
-  return null;
+  // 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(
@@ -458,13 +457,16 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-      returnFiber,
-      sourceFiber,
-      root,
-      rootRenderLanes,
-    );
+    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
     if (suspenseBoundary !== null) {
+      suspenseBoundary.flags &= ~ForceClientRender;
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
       attachWakeableListeners(
         suspenseBoundary,
         root,
@@ -487,20 +489,24 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.
       // Instead of surfacing the error, find the nearest Suspense boundary
       // and render it again without hydration.
-      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
       if (suspenseBoundary !== null) {
-        // Set a flag to indicate that we should try rendering the normal
-        // children again, not the fallback.
-        suspenseBoundary.flags |= ForceClientRender;
+        if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
+          // Set a flag to indicate that we should try rendering the normal
+          // children again, not the fallback.
+          suspenseBoundary.flags |= ForceClientRender;
+        }
+        markSuspenseBoundaryShouldCapture(
+          suspenseBoundary,
+          returnFiber,
+          sourceFiber,
+          root,
+          rootRenderLanes,
+        );
         return;
       }
     } else {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 27b0719ba8532..8f6d18a48dea3 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -268,158 +268,157 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber: Fiber,
-  sourceFiber: Fiber,
-  root: FiberRoot,
-  rootRenderLanes: Lanes,
-): Fiber | null {
+function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
+  let node = returnFiber;
   const hasInvisibleParentBoundary = hasSuspenseContext(
     suspenseStackCursor.current,
     (InvisibleParentSuspenseContext: SuspenseContext),
   );
-  let node = returnFiber;
   do {
     if (
       node.tag === SuspenseComponent &&
       shouldCaptureSuspense(node, hasInvisibleParentBoundary)
     ) {
-      // Found the nearest boundary.
-      const 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;
+      return node;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+  return null;
+}
 
-          // 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);
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary: Fiber,
+  returnFiber: Fiber,
+  sourceFiber: Fiber,
+  root: FiberRoot,
+  rootRenderLanes: Lanes,
+): Fiber | null {
+  // 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;
 
-          if (supportsPersistence && 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.
-            const currentSuspenseBoundary = suspenseBoundary.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
-              }
-            }
-          }
+      // 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) {
-            const currentSourceFiber = sourceFiber.alternate;
-            if (currentSourceFiber === null) {
-              // This is a new mount. Change the tag so it's not mistaken for a
-              // completed class component. For example, we should not call
-              // componentWillUnmount if it is deleted.
-              sourceFiber.tag = IncompleteClassComponent;
-            } else {
-              // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
-              // prevent a bail out.
-              const update = createUpdate(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
-            }
+      if (supportsPersistence && 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.
+        const currentSuspenseBoundary = suspenseBoundary.alternate;
+        if (currentSuspenseBoundary === null) {
+          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+          const offscreenContainer = offscreenFiber.child;
+          if (offscreenContainer !== null) {
+            const children = offscreenContainer.memoizedProps.children;
+            const containerProps = getOffscreenContainerProps(
+              'hidden',
+              children,
+            );
+            offscreenContainer.pendingProps = containerProps;
+            offscreenContainer.memoizedProps = containerProps;
           }
+        }
+      }
 
-          // The source fiber did not complete. Mark it with Sync priority to
-          // indicate that it still has pending work.
-          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
+      if (sourceFiber.tag === ClassComponent) {
+        const currentSourceFiber = sourceFiber.alternate;
+        if (currentSourceFiber === null) {
+          // This is a new mount. Change the tag so it's not mistaken for a
+          // completed class component. For example, we should not call
+          // componentWillUnmount if it is deleted.
+          sourceFiber.tag = IncompleteClassComponent;
+        } else {
+          // When we try rendering again, we should not reuse the current fiber,
+          // since it's known to be in an inconsistent state. Use a force update to
+          // prevent a bail out.
+          const update = createUpdate(NoTimestamp, SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update, 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;
+      // The source fiber did not complete. Mark it with Sync priority to
+      // indicate that it still has pending work.
+      sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);
     }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== 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.
 
-  // Could not find a Suspense boundary capable of capturing.
-  return null;
+  // 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(
@@ -458,13 +457,16 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-      returnFiber,
-      sourceFiber,
-      root,
-      rootRenderLanes,
-    );
+    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
     if (suspenseBoundary !== null) {
+      suspenseBoundary.flags &= ~ForceClientRender;
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
       attachWakeableListeners(
         suspenseBoundary,
         root,
@@ -487,20 +489,24 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.
       // Instead of surfacing the error, find the nearest Suspense boundary
       // and render it again without hydration.
-      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
       if (suspenseBoundary !== null) {
-        // Set a flag to indicate that we should try rendering the normal
-        // children again, not the fallback.
-        suspenseBoundary.flags |= ForceClientRender;
+        if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
+          // Set a flag to indicate that we should try rendering the normal
+          // children again, not the fallback.
+          suspenseBoundary.flags |= ForceClientRender;
+        }
+        markSuspenseBoundaryShouldCapture(
+          suspenseBoundary,
+          returnFiber,
+          sourceFiber,
+          root,
+          rootRenderLanes,
+        );
         return;
       }
     } else {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 93391eb309d49..6703e2cd36539 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -402,5 +402,6 @@
   "414": "Did not expect this call in production. This is a bug in React. Please file an issue.",
   "415": "Error parsing the data. It's probably an error code or network corruption.",
   "416": "This environment don't support binary chunks.",
-  "417": "React currently only supports piping to one writable stream."
+  "417": "React currently only supports piping to one writable stream.",
+  "418": "An error occurred during hydration. The server HTML was replaced with client content"
 }

From ff9897d23ec713d4e0c802386dffe4024916749e Mon Sep 17 00:00:00 2001
From: irinakk <irinakk@hotmail.com>
Date: Wed, 10 Nov 2021 04:22:19 +0800
Subject: [PATCH 094/109] [React Refresh] support typescript namespace syntax
 (#22621)

* [React Refresh] support typescript namespace syntax

* [React Refresh] handle nested namespace

Co-authored-by: Wang Yilin <wang_yil@worksap.co.jp>
---
 package.json                                  |   3 +-
 .../src/ReactFreshBabelPlugin.js              |  77 +++++++++--
 .../__tests__/ReactFreshBabelPlugin-test.js   |  25 ++++
 .../__tests__/ReactFreshIntegration-test.js   | 126 +++++++++++++-----
 .../ReactFreshBabelPlugin-test.js.snap        |  28 ++++
 yarn.lock                                     |  13 ++
 6 files changed, 227 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index e4ea1c83be801..fb428f35c04b9 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-syntax-jsx": "^7.10.4",
+    "@babel/plugin-syntax-typescript": "^7.14.5",
     "@babel/plugin-transform-arrow-functions": "^7.10.4",
     "@babel/plugin-transform-async-to-generator": "^7.10.4",
     "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
@@ -35,7 +36,6 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/traverse": "^7.11.0",
-    "web-streams-polyfill": "^3.1.1",
     "abort-controller": "^3.0.0",
     "art": "0.10.1",
     "babel-eslint": "^10.0.3",
@@ -96,6 +96,7 @@
     "through2": "^3.0.1",
     "tmp": "^0.1.0",
     "typescript": "^3.7.5",
+    "web-streams-polyfill": "^3.1.1",
     "webpack": "^4.41.2",
     "yargs": "^15.3.1"
   },
diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
index 64013db181a3f..9d1aed0d1d793 100644
--- a/packages/react-refresh/src/ReactFreshBabelPlugin.js
+++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -478,11 +478,16 @@ export default function(babel, opts = {}) {
           const node = path.node;
           let programPath;
           let insertAfterPath;
+          let modulePrefix = '';
           switch (path.parent.type) {
             case 'Program':
               insertAfterPath = path;
               programPath = path.parentPath;
               break;
+            case 'TSModuleBlock':
+              insertAfterPath = path;
+              programPath = insertAfterPath.parentPath.parentPath;
+              break;
             case 'ExportNamedDeclaration':
               insertAfterPath = path.parentPath;
               programPath = insertAfterPath.parentPath;
@@ -494,6 +499,28 @@ export default function(babel, opts = {}) {
             default:
               return;
           }
+
+          // These types can be nested in typescript namespace
+          // We need to find the export chain
+          // Or return if it stays local
+          if (
+            path.parent.type === 'TSModuleBlock' ||
+            path.parent.type === 'ExportNamedDeclaration'
+          ) {
+            while (programPath.type !== 'Program') {
+              if (programPath.type === 'TSModuleDeclaration') {
+                if (
+                  programPath.parentPath.type !== 'Program' &&
+                  programPath.parentPath.type !== 'ExportNamedDeclaration'
+                ) {
+                  return;
+                }
+                modulePrefix = programPath.node.id.name + '$' + modulePrefix;
+              }
+              programPath = programPath.parentPath;
+            }
+          }
+
           const id = node.id;
           if (id === null) {
             // We don't currently handle anonymous default exports.
@@ -512,20 +539,17 @@ export default function(babel, opts = {}) {
           seenForRegistration.add(node);
           // Don't mutate the tree above this point.
 
+          const innerName = modulePrefix + inferredName;
           // export function Named() {}
           // function Named() {}
-          findInnerComponents(
-            inferredName,
-            path,
-            (persistentID, targetExpr) => {
-              const handle = createRegistration(programPath, persistentID);
-              insertAfterPath.insertAfter(
-                t.expressionStatement(
-                  t.assignmentExpression('=', handle, targetExpr),
-                ),
-              );
-            },
-          );
+          findInnerComponents(innerName, path, (persistentID, targetExpr) => {
+            const handle = createRegistration(programPath, persistentID);
+            insertAfterPath.insertAfter(
+              t.expressionStatement(
+                t.assignmentExpression('=', handle, targetExpr),
+              ),
+            );
+          });
         },
         exit(path) {
           const node = path.node;
@@ -679,11 +703,16 @@ export default function(babel, opts = {}) {
         const node = path.node;
         let programPath;
         let insertAfterPath;
+        let modulePrefix = '';
         switch (path.parent.type) {
           case 'Program':
             insertAfterPath = path;
             programPath = path.parentPath;
             break;
+          case 'TSModuleBlock':
+            insertAfterPath = path;
+            programPath = insertAfterPath.parentPath.parentPath;
+            break;
           case 'ExportNamedDeclaration':
             insertAfterPath = path.parentPath;
             programPath = insertAfterPath.parentPath;
@@ -696,6 +725,27 @@ export default function(babel, opts = {}) {
             return;
         }
 
+        // These types can be nested in typescript namespace
+        // We need to find the export chain
+        // Or return if it stays local
+        if (
+          path.parent.type === 'TSModuleBlock' ||
+          path.parent.type === 'ExportNamedDeclaration'
+        ) {
+          while (programPath.type !== 'Program') {
+            if (programPath.type === 'TSModuleDeclaration') {
+              if (
+                programPath.parentPath.type !== 'Program' &&
+                programPath.parentPath.type !== 'ExportNamedDeclaration'
+              ) {
+                return;
+              }
+              modulePrefix = programPath.node.id.name + '$' + modulePrefix;
+            }
+            programPath = programPath.parentPath;
+          }
+        }
+
         // Make sure we're not mutating the same tree twice.
         // This can happen if another Babel plugin replaces parents.
         if (seenForRegistration.has(node)) {
@@ -710,8 +760,9 @@ export default function(babel, opts = {}) {
         }
         const declPath = declPaths[0];
         const inferredName = declPath.node.id.name;
+        const innerName = modulePrefix + inferredName;
         findInnerComponents(
-          inferredName,
+          innerName,
           declPath,
           (persistentID, targetExpr, targetPath) => {
             if (targetPath === null) {
diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
index f56f16069dd77..d528d46bb8eaf 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -536,4 +536,29 @@ describe('ReactFreshBabelPlugin', () => {
       `),
     ).toMatchSnapshot();
   });
+
+  it('supports typescript namespace syntax', () => {
+    expect(
+      transform(
+        `
+        namespace Foo {
+          export namespace Bar {
+            export const A = () => {};
+
+            function B() {};
+            export const B1 = B;
+          }
+
+          export const C = () => {};
+          export function D() {};
+
+          namespace NotExported {
+            export const E = () => {};
+          }
+        }
+      `,
+        {plugins: [['@babel/plugin-syntax-typescript', {isTSX: true}]]},
+      ),
+    ).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
index 09edf1d897288..8a98fe097f1b9 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -18,6 +18,7 @@ let act;
 
 const babel = require('@babel/core');
 const freshPlugin = require('react-refresh/babel');
+const ts = require('typescript');
 
 describe('ReactFreshIntegration', () => {
   let container;
@@ -46,42 +47,72 @@ describe('ReactFreshIntegration', () => {
     }
   });
 
+  function executeCommon(source, compileDestructuring) {
+    const compiled = babel.transform(source, {
+      babelrc: false,
+      presets: ['@babel/react'],
+      plugins: [
+        [freshPlugin, {skipEnvCheck: true}],
+        '@babel/plugin-transform-modules-commonjs',
+        compileDestructuring && '@babel/plugin-transform-destructuring',
+      ].filter(Boolean),
+    }).code;
+    return executeCompiled(compiled);
+  }
+
+  function executeCompiled(compiled) {
+    exportsObj = {};
+    // eslint-disable-next-line no-new-func
+    new Function(
+      'global',
+      'React',
+      'exports',
+      '$RefreshReg$',
+      '$RefreshSig$',
+      compiled,
+    )(global, React, exportsObj, $RefreshReg$, $RefreshSig$);
+    // Module systems will register exports as a fallback.
+    // This is useful for cases when e.g. a class is exported,
+    // and we don't want to propagate the update beyond this module.
+    $RefreshReg$(exportsObj.default, 'exports.default');
+    return exportsObj.default;
+  }
+
+  function $RefreshReg$(type, id) {
+    ReactFreshRuntime.register(type, id);
+  }
+
+  function $RefreshSig$() {
+    return ReactFreshRuntime.createSignatureFunctionForTransform();
+  }
+
   describe('with compiled destructuring', () => {
-    runTests(true);
+    runTests(executeCommon, testCommon);
   });
 
   describe('without compiled destructuring', () => {
-    runTests(false);
+    runTests(executeCommon, testCommon);
   });
 
-  function runTests(compileDestructuring) {
-    function execute(source) {
-      const compiled = babel.transform(source, {
+  describe('with typescript syntax', () => {
+    runTests(function(source) {
+      const typescriptSource = babel.transform(source, {
         babelrc: false,
+        configFile: false,
         presets: ['@babel/react'],
         plugins: [
           [freshPlugin, {skipEnvCheck: true}],
-          '@babel/plugin-transform-modules-commonjs',
-          compileDestructuring && '@babel/plugin-transform-destructuring',
-        ].filter(Boolean),
+          ['@babel/plugin-syntax-typescript', {isTSX: true}],
+        ],
       }).code;
-      exportsObj = {};
-      // eslint-disable-next-line no-new-func
-      new Function(
-        'global',
-        'React',
-        'exports',
-        '$RefreshReg$',
-        '$RefreshSig$',
-        compiled,
-      )(global, React, exportsObj, $RefreshReg$, $RefreshSig$);
-      // Module systems will register exports as a fallback.
-      // This is useful for cases when e.g. a class is exported,
-      // and we don't want to propagate the update beyond this module.
-      $RefreshReg$(exportsObj.default, 'exports.default');
-      return exportsObj.default;
-    }
+      const compiled = ts.transpileModule(typescriptSource, {
+        module: ts.ModuleKind.CommonJS,
+      }).outputText;
+      return executeCompiled(compiled);
+    }, testTypescript);
+  });
 
+  function runTests(execute, test) {
     function render(source) {
       const Component = execute(source);
       act(() => {
@@ -127,14 +158,10 @@ describe('ReactFreshIntegration', () => {
       expect(ReactFreshRuntime._getMountedRootCount()).toBe(1);
     }
 
-    function $RefreshReg$(type, id) {
-      ReactFreshRuntime.register(type, id);
-    }
-
-    function $RefreshSig$() {
-      return ReactFreshRuntime.createSignatureFunctionForTransform();
-    }
+    test(render, patch);
+  }
 
+  function testCommon(render, patch) {
     it('reloads function declarations', () => {
       if (__DEV__) {
         render(`
@@ -1947,4 +1974,41 @@ describe('ReactFreshIntegration', () => {
       });
     });
   }
+
+  function testTypescript(render, patch) {
+    it('reloads component exported in typescript namespace', () => {
+      if (__DEV__) {
+        render(`
+          namespace Foo {
+            export namespace Bar {
+              export const Child = ({prop}) => {
+                return <h1>{prop}1</h1>
+              };
+            }
+          }
+
+          export default function Parent() {
+            return <Foo.Bar.Child prop={'A'} />;
+          }
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          namespace Foo {
+            export namespace Bar {
+              export const Child = ({prop}) => {
+                return <h1>{prop}2</h1>
+              };
+            }
+          }
+
+          export default function Parent() {
+            return <Foo.Bar.Child prop={'B'} />;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        expect(el.textContent).toBe('B2');
+      }
+    });
+  }
 });
diff --git a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
index 7c1276f817880..7b18834ae495f 100644
--- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -618,6 +618,34 @@ $RefreshReg$(_c, "Hello");
 $RefreshReg$(_c2, "Bar");
 `;
 
+exports[`ReactFreshBabelPlugin supports typescript namespace syntax 1`] = `
+namespace Foo {
+  export namespace Bar {
+    export const A = () => {};
+    _c = A;
+    function B() {}
+    _c2 = B;
+    ;
+    export const B1 = B;
+  }
+  export const C = () => {};
+  _c3 = C;
+  export function D() {}
+  _c4 = D;
+  ;
+  namespace NotExported {
+    export const E = () => {};
+  }
+}
+
+var _c, _c2, _c3, _c4;
+
+$RefreshReg$(_c, "Foo$Bar$A");
+$RefreshReg$(_c2, "Foo$Bar$B");
+$RefreshReg$(_c3, "Foo$C");
+$RefreshReg$(_c4, "Foo$D");
+`;
+
 exports[`ReactFreshBabelPlugin uses custom identifiers for $RefreshReg$ and $RefreshSig$ 1`] = `
 var _s = import.meta.refreshSig();
 
diff --git a/yarn.lock b/yarn.lock
index 0055fc9a6d2f7..d02e5cf4a5c43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -405,6 +405,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-regex@^7.10.4":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
@@ -847,6 +852,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-syntax-typescript@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
+  integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-transform-arrow-functions@^7.0.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
@@ -6442,6 +6454,7 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
+  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"

From a04f13d299230d1d987548f07f4506038d7367b1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 9 Nov 2021 20:23:32 +0000
Subject: [PATCH 095/109] react-refresh@0.11.0

---
 packages/react-refresh/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 4f5f3c31c5e0d..d5295574058b1 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "0.10.0",
+  "version": "0.11.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",

From e0aa5e205feee53043ce1ae8726fe732866e6ea7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Nov 2021 16:10:48 -0500
Subject: [PATCH 096/109] Add Scheduling Profiler GK link to Timeline UI for FB
 build (#22730)

This is a constant source of confusion for FB engineers trying to figure out why Chrome profiling data does not have any React marks.
---
 packages/react-devtools-timeline/src/Timeline.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index 4b6d21f8a8f7a..33459fc4543ef 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -10,6 +10,7 @@
 import type {DataResource} from './createDataResourceFromImportedFile';
 import type {ViewState} from './types';
 
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
 import * as React from 'react';
 import {
   Suspense,
@@ -79,6 +80,19 @@ export function Timeline(_: {||}) {
 
 const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
   <ol className={styles.WelcomeInstructionsList}>
+    {isInternalFacebookBuild && (
+      <li className={styles.WelcomeInstructionsListItem}>
+        Enable the
+        <a
+          className={styles.WelcomeInstructionsListItemLink}
+          href="https://fburl.com/react-devtools-scheduling-profiler-gk"
+          rel="noopener noreferrer"
+          target="_blank">
+          <code>react_enable_scheduling_profiler</code> GK
+        </a>
+        .
+      </li>
+    )}
     <li className={styles.WelcomeInstructionsListItem}>
       Open a website that's built with the
       <a

From a44a7a2a3f8d7b24ddf5d0c6efeb6127e6b395c3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Nov 2021 10:35:16 -0500
Subject: [PATCH 097/109] Filter empty commits (all Fibers bailed out) from
 Profiler (#22745)

---
 .../__snapshots__/profilingCache-test.js.snap | 197 ------------------
 .../src/__tests__/profilerStore-test.js       |  51 +++++
 .../src/__tests__/profilingCache-test.js      |   5 +-
 .../src/backend/renderer.js                   |  41 +++-
 4 files changed, 86 insertions(+), 208 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 92555b0761cd2..f07f405a85f2e 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -1700,94 +1700,6 @@ Object {
 }
 `;
 
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
-Object {
-  "commitData": Array [
-    Object {
-      "changeDescriptions": Map {},
-      "duration": 0,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {},
-      "fiberSelfDurations": Map {},
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 34,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 7,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-  ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {
-    7 => 11,
-    8 => 11,
-    10 => 0,
-    11 => 1,
-  },
-  "operations": Array [
-    Array [
-      1,
-      7,
-      0,
-      2,
-      4,
-      11,
-      10,
-      8,
-      7,
-    ],
-  ],
-  "rootID": 7,
-  "snapshots": Map {
-    7 => Object {
-      "children": Array [
-        8,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 7,
-      "key": null,
-      "type": 11,
-    },
-    8 => Object {
-      "children": Array [
-        10,
-        11,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 8,
-      "key": null,
-      "type": 5,
-    },
-    10 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 10,
-      "key": "0",
-      "type": 5,
-    },
-    11 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": Array [
-        "Memo",
-      ],
-      "id": 11,
-      "key": null,
-      "type": 8,
-    },
-  },
-}
-`;
-
 exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
 Object {
   "dataForRoots": Array [
@@ -2330,115 +2242,6 @@ Object {
       "rootID": 13,
       "snapshots": Array [],
     },
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [],
-          "fiberSelfDurations": Array [],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 34,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 7,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [
-        Array [
-          7,
-          11,
-        ],
-        Array [
-          8,
-          11,
-        ],
-        Array [
-          10,
-          0,
-        ],
-        Array [
-          11,
-          1,
-        ],
-      ],
-      "operations": Array [
-        Array [
-          1,
-          7,
-          0,
-          2,
-          4,
-          11,
-          10,
-          8,
-          7,
-        ],
-      ],
-      "rootID": 7,
-      "snapshots": Array [
-        Array [
-          7,
-          Object {
-            "children": Array [
-              8,
-            ],
-            "displayName": null,
-            "hocDisplayNames": null,
-            "id": 7,
-            "key": null,
-            "type": 11,
-          },
-        ],
-        Array [
-          8,
-          Object {
-            "children": Array [
-              10,
-              11,
-            ],
-            "displayName": "Parent",
-            "hocDisplayNames": null,
-            "id": 8,
-            "key": null,
-            "type": 5,
-          },
-        ],
-        Array [
-          10,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 10,
-            "key": "0",
-            "type": 5,
-          },
-        ],
-        Array [
-          11,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": Array [
-              "Memo",
-            ],
-            "id": 11,
-            "key": null,
-            "type": 8,
-          },
-        ],
-      ],
-    },
   ],
   "version": 5,
 }
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index ea81b1dceef1e..06ce6a9dc4c8f 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -124,6 +124,57 @@ describe('ProfilerStore', () => {
     expect(data.operations).toHaveLength(1);
   });
 
+  it('should filter empty commits alt', () => {
+    let commitCount = 0;
+
+    const inputRef = React.createRef();
+    const Example = () => {
+      const [, setTouched] = React.useState(false);
+
+      const handleBlur = () => {
+        setTouched(true);
+      };
+
+      require('scheduler').unstable_advanceTime(1);
+
+      React.useLayoutEffect(() => {
+        commitCount++;
+      });
+
+      return <input ref={inputRef} onBlur={handleBlur} />;
+    };
+
+    const container = document.createElement('div');
+
+    // This element has to be in the <body> for the event system to work.
+    document.body.appendChild(container);
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    legacyRender(<Example />, container);
+
+    expect(commitCount).toBe(1);
+    commitCount = 0;
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    // Focus and blur.
+    const target = inputRef.current;
+    target.focus();
+    target.blur();
+    target.focus();
+    target.blur();
+    expect(commitCount).toBe(1);
+
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    // Only one commit should have been recorded (in response to the "change" event).
+    const root = store.roots[0];
+    const data = store.profilerStore.getDataForRoot(root);
+    expect(data.commitData).toHaveLength(1);
+    expect(data.operations).toHaveLength(1);
+  });
+
   it('should throw if component filters are modified while profiling', () => {
     utils.act(() => store.profilerStore.startProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index bbb5c6ffaf03f..00605d857a153 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -108,7 +108,10 @@ describe('ProfilingCache', () => {
       });
     }
 
-    expect(allProfilingDataForRoots).toHaveLength(3);
+    // No profiling data gets logged for the 2nd root (container B)
+    // because it doesn't render anything while profiling.
+    // (Technically it unmounts but we don't profile root unmounts.)
+    expect(allProfilingDataForRoots).toHaveLength(2);
 
     utils.exportImportHelper(bridge, store);
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 9d2005522da4b..7ce78e564e390 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1546,6 +1546,19 @@ export function attach(
   }
 
   function flushOrQueueOperations(operations: OperationsArray): void {
+    if (operations.length === 3) {
+      // This operations array is a no op: [renderer ID, root ID, string table size (0)]
+      // We can usually skip sending updates like this across the bridge, unless we're Profiling.
+      // In that case, even though the tree didn't change– some Fibers may have still rendered.
+      if (
+        !isProfiling ||
+        currentCommitProfilingMetadata == null ||
+        currentCommitProfilingMetadata.durations.length === 0
+      ) {
+        return;
+      }
+    }
+
     if (pendingOperationsQueue !== null) {
       pendingOperationsQueue.push(operations);
     } else {
@@ -2608,18 +2621,26 @@ export function attach(
     }
 
     if (isProfiling && isProfilingSupported) {
-      const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-        currentRootID,
-      );
-      if (commitProfilingMetadata != null) {
-        commitProfilingMetadata.push(
-          ((currentCommitProfilingMetadata: any): CommitProfilingData),
-        );
-      } else {
-        ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+      // Make sure at least one Fiber performed work during this commit.
+      // If not, don't send it to the frontend; showing an empty commit in the Profiler is confusing.
+      if (
+        currentCommitProfilingMetadata != null &&
+        currentCommitProfilingMetadata.durations.length > 0
+      ) {
+        const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
           currentRootID,
-          [((currentCommitProfilingMetadata: any): CommitProfilingData)],
         );
+
+        if (commitProfilingMetadata != null) {
+          commitProfilingMetadata.push(
+            ((currentCommitProfilingMetadata: any): CommitProfilingData),
+          );
+        } else {
+          ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+            currentRootID,
+            [((currentCommitProfilingMetadata: any): CommitProfilingData)],
+          );
+        }
       }
     }
 

From 56efc65e5857abe22062c9506207abc35c9532d1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Nov 2021 14:22:22 -0500
Subject: [PATCH 098/109] DevTools should properly report re-renders due to
 (use)context changes (#22746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Note that this only fixes things for newer versions of React (e.g. 18 alpha). Older versions will remain broken because there's not a good way to read the most recent context value for a location in the tree after render has completed. This is because React maintains a stack of context values during render, but by the time DevTools is called– render has finished and the stack is empty.
---
 .../profilerChangeDescriptions-test.js        | 151 ++++++++++++++++++
 .../src/backend/renderer.js                   |  12 +-
 2 files changed, 162 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js

diff --git a/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
new file mode 100644
index 0000000000000..eee3a66b03a55
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+describe('Profiler change descriptions', () => {
+  let React;
+  let legacyRender;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    legacyRender = utils.legacyRender;
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+  });
+
+  it('should identify useContext as the cause for a re-render', () => {
+    const Context = React.createContext(0);
+
+    function Child() {
+      const context = React.useContext(Context);
+      return context;
+    }
+
+    function areEqual() {
+      return true;
+    }
+
+    const MemoizedChild = React.memo(Child, areEqual);
+    const ForwardRefChild = React.forwardRef(function RefForwardingComponent(
+      props,
+      ref,
+    ) {
+      return <Child />;
+    });
+
+    let forceUpdate = null;
+
+    const App = function App() {
+      const [val, dispatch] = React.useReducer(x => x + 1, 0);
+
+      forceUpdate = dispatch;
+
+      return (
+        <Context.Provider value={val}>
+          <Child />
+          <MemoizedChild />
+          <ForwardRefChild />
+        </Context.Provider>
+      );
+    };
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => legacyRender(<App />, container));
+    utils.act(() => forceUpdate());
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const rootID = store.roots[0];
+    const commitData = store.profilerStore.getCommitData(rootID, 1);
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Context.Provider>
+              <Child>
+            ▾ <Child> [Memo]
+                <Child>
+            ▾ <RefForwardingComponent> [ForwardRef]
+                <Child>
+    `);
+
+    let element = store.getElementAtIndex(2);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(3);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toEqual(['Memo']);
+    expect(commitData.changeDescriptions.get(element.id)).toBeUndefined();
+
+    element = store.getElementAtIndex(4);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(5);
+    expect(element.displayName).toBe('RefForwardingComponent');
+    expect(element.hocDisplayNames).toEqual(['ForwardRef']);
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": null,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(6);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 7ce78e564e390..8a89a5406c6ef 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1253,8 +1253,10 @@ export function attach(
 
   function updateContextsForFiber(fiber: Fiber) {
     switch (getElementTypeForFiber(fiber)) {
-      case ElementTypeFunction:
       case ElementTypeClass:
+      case ElementTypeForwardRef:
+      case ElementTypeFunction:
+      case ElementTypeMemo:
         if (idToContextsMap !== null) {
           const id = getFiberIDThrows(fiber);
           const contexts = getContextsForFiber(fiber);
@@ -1292,7 +1294,9 @@ export function attach(
           }
         }
         return [legacyContext, modernContext];
+      case ElementTypeForwardRef:
       case ElementTypeFunction:
+      case ElementTypeMemo:
         const dependencies = fiber.dependencies;
         if (dependencies && dependencies.firstContext) {
           modernContext = dependencies.firstContext;
@@ -1341,12 +1345,18 @@ export function attach(
             }
           }
           break;
+        case ElementTypeForwardRef:
         case ElementTypeFunction:
+        case ElementTypeMemo:
           if (nextModernContext !== NO_CONTEXT) {
             let prevContext = prevModernContext;
             let nextContext = nextModernContext;
 
             while (prevContext && nextContext) {
+              // Note this only works for versions of React that support this key (e.v. 18+)
+              // For older versions, there's no good way to read the current context value after render has completed.
+              // This is because React maintains a stack of context values during render,
+              // but by the time DevTools is called, render has finished and the stack is empty.
               if (!is(prevContext.memoizedValue, nextContext.memoizedValue)) {
                 return true;
               }

From cb11155c86e756838a97679fb04c3256de101943 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Nov 2021 10:03:41 -0500
Subject: [PATCH 099/109] Add runtime type checks around module boundary code
 (#22748)

---
 .../react-reconciler/src/SchedulingProfiler.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 0304f39a12e56..6ef0b6293bc76 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -18,6 +18,7 @@ import {
 import ReactVersion from 'shared/ReactVersion';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
+import isArray from 'shared/isArray';
 
 import {
   getLabelForLane as getLabelForLane_old,
@@ -105,11 +106,18 @@ function markInternalModuleRanges() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === 'function'
   ) {
     const ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
-    for (let i = 0; i < ranges.length; i++) {
-      const [startStackFrame, stopStackFrame] = ranges[i];
-
-      markAndClear(`--react-internal-module-start-${startStackFrame}`);
-      markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+    // This check would not be required,
+    // except that it's possible for things to override __REACT_DEVTOOLS_GLOBAL_HOOK__.
+    if (isArray(ranges)) {
+      for (let i = 0; i < ranges.length; i++) {
+        const range = ranges[i];
+        if (isArray(range) && range.length === 2) {
+          const [startStackFrame, stopStackFrame] = ranges[i];
+
+          markAndClear(`--react-internal-module-start-${startStackFrame}`);
+          markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+        }
+      }
     }
   }
 }

From c0c71a868560b3042847722659579418bfe2d7e1 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 12 Nov 2021 16:54:59 -0500
Subject: [PATCH 100/109] Re-enable useMutableSource in internal RN (#22750)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index b61bbcf15747c..221e94fb855bb 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -74,7 +74,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
-export const enableUseMutableSource = false;
+export const enableUseMutableSource = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

From f86cd5408b3154b3aa55ca6d9d86aa3091b7b2e5 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 15 Nov 2021 15:46:17 +0000
Subject: [PATCH 101/109] devtools: dont restore profiling data if we're
 profling (#22753)

---
 packages/react-devtools-extensions/src/main.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 015472fa2e89c..2d67aa2cd7bde 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -156,7 +156,9 @@ function createPanelIfReactLoaded() {
           supportsTimeline: isChrome,
           supportsTraceUpdates: true,
         });
-        store.profilerStore.profilingData = profilingData;
+        if (!isProfiling) {
+          store.profilerStore.profilingData = profilingData;
+        }
 
         // Initialize the backend only once the Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.

From e6f60d2adda7d4ebf6631eb8166572c3706d52a3 Mon Sep 17 00:00:00 2001
From: 180909 <wjh180909@gmail.com>
Date: Mon, 15 Nov 2021 23:58:21 +0800
Subject: [PATCH 102/109] fix typos (#22715)

---
 packages/react-dom/src/__tests__/CSSPropertyOperations-test.js | 2 +-
 packages/react-reconciler/src/ReactFiberCompleteWork.new.js    | 2 +-
 packages/react-reconciler/src/ReactFiberCompleteWork.old.js    | 2 +-
 packages/react-reconciler/src/ReactFiberTreeContext.new.js     | 2 +-
 packages/react-reconciler/src/ReactFiberTreeContext.old.js     | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js        | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js        | 2 +-
 packages/react-server/src/ReactFizzTreeContext.js              | 2 +-
 scripts/release/README.md                                      | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
index 53d0903c7e9a2..5f177b17202a6 100644
--- a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
@@ -224,7 +224,7 @@ describe('CSSPropertyOperations', () => {
     ReactDOM.render(<Comp />, root);
   });
 
-  it('should warn about style containing a Infinity value', () => {
+  it('should warn about style containing an Infinity value', () => {
     class Comp extends React.Component {
       static displayName = 'Comp';
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index feb38f00461a0..5805ffe8da769 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -884,7 +884,7 @@ function completeWork(
           // Schedule an effect to clear this container at the start of the next commit.
           // This handles the case of React rendering into a container with previous children.
           // It's also safe to do for updates too, because current.child would only be null
-          // if the previous render was null (so the the container would already be empty).
+          // if the previous render was null (so the container would already be empty).
           workInProgress.flags |= Snapshot;
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index ea4d71e8ba371..c5eb5f70f48d6 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -884,7 +884,7 @@ function completeWork(
           // Schedule an effect to clear this container at the start of the next commit.
           // This handles the case of React rendering into a container with previous children.
           // It's also safe to do for updates too, because current.child would only be null
-          // if the previous render was null (so the the container would already be empty).
+          // if the previous render was null (so the container would already be empty).
           workInProgress.flags |= Snapshot;
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index 968e66155d3fa..f9c5104ed6b13 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -50,7 +50,7 @@
 // new level with a single slot. You can think of this as a fork with only one
 // prong, or an array of children with length 1.
 //
-// It's possible for the the size of the sequence to exceed 32 bits, the max
+// It's possible for the size of the sequence to exceed 32 bits, the max
 // size for bitwise operations. When this happens, we make more room by
 // converting the right part of the id to a string and storing it in an overflow
 // variable. We use a base 32 string representation, because 32 is the largest
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index 82990b22f983d..840335d00c4e4 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -50,7 +50,7 @@
 // new level with a single slot. You can think of this as a fork with only one
 // prong, or an array of children with length 1.
 //
-// It's possible for the the size of the sequence to exceed 32 bits, the max
+// It's possible for the size of the sequence to exceed 32 bits, the max
 // size for bitwise operations. When this happens, we make more room by
 // converting the right part of the id to a string and storing it in an overflow
 // variable. We use a base 32 string representation, because 32 is the largest
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 71bf8175105d6..f0f5eab4a99f5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1025,7 +1025,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
 
 function isRenderConsistentWithExternalStores(finishedWork: Fiber): boolean {
   // Search the rendered tree for external store reads, and check whether the
-  // stores were mutated in a concurrent event. Intentionally using a iterative
+  // stores were mutated in a concurrent event. Intentionally using an iterative
   // loop instead of recursion so we can exit early.
   let node: Fiber = finishedWork;
   while (true) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8be4630dc079d..353de50e1585a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1025,7 +1025,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
 
 function isRenderConsistentWithExternalStores(finishedWork: Fiber): boolean {
   // Search the rendered tree for external store reads, and check whether the
-  // stores were mutated in a concurrent event. Intentionally using a iterative
+  // stores were mutated in a concurrent event. Intentionally using an iterative
   // loop instead of recursion so we can exit early.
   let node: Fiber = finishedWork;
   while (true) {
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
index c9a47e5af72a6..3b924cf8eb3af 100644
--- a/packages/react-server/src/ReactFizzTreeContext.js
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -50,7 +50,7 @@
 // new level with a single slot. You can think of this as a fork with only one
 // prong, or an array of children with length 1.
 //
-// It's possible for the the size of the sequence to exceed 32 bits, the max
+// It's possible for the size of the sequence to exceed 32 bits, the max
 // size for bitwise operations. When this happens, we make more room by
 // converting the right part of the id to a string and storing it in an overflow
 // variable. We use a base 32 string representation, because 32 is the largest
diff --git a/scripts/release/README.md b/scripts/release/README.md
index 1737c3cf18800..04900c296d0cb 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -21,7 +21,7 @@ A typical release cycle goes like this:
 1. When a commit is pushed to the React repo, [Circle CI](https://circleci.com/gh/facebook/react/) will build all release bundles and run unit tests against both the source code and the built bundles.
 2. Each weekday, an automated CI cron job publishes prereleases to the `next` and `experimental` channels, from tip of the main branch.
    1. You can also [trigger an automated prerelease via the command line](#trigger-an-automated-prerelease), instead of waiting until the next time the cron job runs.
-   2. For advanced cases, you can [**manually prepare and publish to the `next` channel**](#publishing-release) using the [`prepare-release-from-ci`](#prepare-release-from-ci) and [`publish`](#publish) scripts; or to the [**`experimental` channel**](#publishing-an-experimental-release) using the the same scripts (but different build artifacts).
+   2. For advanced cases, you can [**manually prepare and publish to the `next` channel**](#publishing-release) using the [`prepare-release-from-ci`](#prepare-release-from-ci) and [`publish`](#publish) scripts; or to the [**`experimental` channel**](#publishing-an-experimental-release) using the same scripts (but different build artifacts).
 3. Finally, a "next" release can be [**promoted to stable**](#publishing-a-stable-release)<sup>1</sup> using the [`prepare-release-from-npm`](#prepare-release-from-npm) and [`publish`](#publish) scripts. (This process is always manual.)
 
 The high level process of creating releases is [documented below](#process). Individual scripts are documented as well:

From 0b329511b9aaff7e27990fc16354db8ea0a16de8 Mon Sep 17 00:00:00 2001
From: Han Han <haannn@qq.com>
Date: Mon, 15 Nov 2021 23:58:30 +0800
Subject: [PATCH 103/109] chore: fix comment typo (#22657)

---
 packages/react-reconciler/src/__tests__/ReactCache-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 7ef18875e087d..ed6b9fadf6488 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -1132,7 +1132,7 @@ describe('ReactCache', () => {
 
     // Unmount children: the first text cache instance is created only after the root
     // commits, so both fresh cache instances are released by their cache boundaries,
-    // cleaning up v1 (used for the first two children which render togeether) and
+    // cleaning up v1 (used for the first two children which render together) and
     // v2 (used for the third boundary added later).
     await act(async () => {
       root.render('Bye!');

From 200415c91c724e408c055445e8b99ac0f0c52dc4 Mon Sep 17 00:00:00 2001
From: Mert Ciflikli <uzeyirmertciflikli@gmail.com>
Date: Mon, 15 Nov 2021 16:59:35 +0100
Subject: [PATCH 104/109] fix typos (#22288)

---
 packages/react-devtools-inline/README.md | 2 +-
 packages/react-devtools/CONTRIBUTING.md  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 35b0127f41d54..b7b3f8373adc9 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -66,7 +66,7 @@ const DevTools = initialize(contentWindow);
 
 ### Supporting named hooks
 
-DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and infering the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.
+DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and inferring the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.
 
 To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
 ```js
diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 06816532838fd..cf6ff53d053d7 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -1,5 +1,5 @@
 
-Intrested in contributing to React DevTools, but not sure where to start? This is the place!
+Interested in contributing to React DevTools, but not sure where to start? This is the place!
 
 # Install project dependencies
 To get started, check out the React repo:

From d4144e6e54276362b05f4319bb38939aff37bdaa Mon Sep 17 00:00:00 2001
From: Brijesh Prasad <brijesh.prasad@omio.com>
Date: Mon, 15 Nov 2021 17:44:48 +0100
Subject: [PATCH 105/109] fix : grammatical typo for test description (#22764)

* fix : grammatical typo for test description

* fix linting issues
---
 .../src/__tests__/ReactHooksWithNoopRenderer-test.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index bcd96d732e09e..dae01c885fe5a 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1184,7 +1184,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
-      // This update is exists to test an internal implementation detail:
+      // This update exists to test an internal implementation detail:
       // Effects without updating dependencies lose their layout/passive tag during an update.
       act(() => {
         ReactNoop.render(<Child bar={1} foo={2} />, () =>

From 489b4bdcca00ddc808276a230f334c575bce9c84 Mon Sep 17 00:00:00 2001
From: MalikIdreesHasanKhan <pencilartassault@hotmail.com>
Date: Mon, 15 Nov 2021 23:01:35 +0530
Subject: [PATCH 106/109] Fixed typos (#22763)

* Fixed typos

* Update ReactFiberWorkLoop.new.js

* Update ReactFiberWorkLoop.old.js
---
 scripts/jest/matchers/toThrow.js | 2 +-
 scripts/release/README.md        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/jest/matchers/toThrow.js b/scripts/jest/matchers/toThrow.js
index 148fd49fa099d..204a2fc713cad 100644
--- a/scripts/jest/matchers/toThrow.js
+++ b/scripts/jest/matchers/toThrow.js
@@ -4,7 +4,7 @@
 // Older versions use e.g. "Cannot read property 'world' of undefined"
 // Newer versions use e.g. "Cannot read properties of undefined (reading 'world')"
 // This file overrides the built-in toThrow() matches to handle both cases,
-// enabling the React project to support Node 12-16 witout forking tests.
+// enabling the React project to support Node 12-16 without forking tests.
 
 const toThrowMatchers = require('expect/build/toThrowMatchers').default;
 const builtInToThrow = toThrowMatchers.toThrow;
diff --git a/scripts/release/README.md b/scripts/release/README.md
index 04900c296d0cb..119d62c6da255 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -34,7 +34,7 @@ The high level process of creating releases is [documented below](#process). Ind
 
 ## Trigger an Automated Prerelease
 
-If your code lands in the main branch, it will be automaticaly published to the prerelease channels within the next weekday. However, if you want to immediately publish a prerelease, you can trigger the job to run immediately:
+If your code lands in the main branch, it will be automatically published to the prerelease channels within the next weekday. However, if you want to immediately publish a prerelease, you can trigger the job to run immediately:
 
 ```sh
 yarn publish-prereleases

From 83564712b6e2907dcffdbf5f99b4713cf6c950de Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 15 Nov 2021 13:12:56 -0500
Subject: [PATCH 107/109] Move SuspenseList to experimental channel (#22765)

There's more work to be done to implement this correctly on the server,
so we're going to wait to release it until an 18.x minor.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  5 ++-
 ...DOMServerPartialHydration-test.internal.js |  9 +++-
 .../ReactDOMServerSuspense-test.internal.js   |  9 +++-
 .../__tests__/ReactWrongReturnPointer-test.js |  5 ++-
 .../react-is/src/__tests__/ReactIs-test.js    | 12 ++++--
 .../__tests__/ReactContextPropagation-test.js |  5 ++-
 .../ReactHooksWithNoopRenderer-test.js        |  7 ++-
 .../src/__tests__/ReactSuspenseList-test.js   | 43 ++++++++++++++++++-
 .../ReactFlightDOMRelay-test.internal.js      | 15 +++----
 packages/react/index.stable.js                |  1 -
 scripts/jest/TestFlags.js                     |  1 +
 11 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 8c282e1bb730e..6d169f9fbbb17 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -42,7 +42,9 @@ describe('ReactDOMFizzServer', () => {
     }
     Stream = require('stream');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     PropTypes = require('prop-types');
 
@@ -656,6 +658,7 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   // @gate experimental
   it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
     const ref = React.createRef();
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 9aab3bf94536f..0e1e220e4fe07 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -84,7 +84,9 @@ describe('ReactDOMServerPartialHydration', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
@@ -1545,6 +1547,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
+  // @gate enableSuspenseList
   it('shows inserted items in a SuspenseList before content is hydrated', async () => {
     let suspend = false;
     let resolve;
@@ -1630,6 +1633,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(spanB);
   });
 
+  // @gate enableSuspenseList
   it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
     let suspend = false;
     let resolve;
@@ -1704,7 +1708,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('ALoading B');
   });
 
-  // @gate experimental || www
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
     let suspend = false;
     let resolve;
@@ -1807,6 +1811,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList suspends last row hydrating', async () => {
     let suspend = false;
     let resolve;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 60ab2edbdcf2b..c2eb630e52acd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -16,6 +16,7 @@ let ReactDOM;
 let ReactDOMServer;
 let ReactTestUtils;
 let act;
+let SuspenseList;
 
 function initModules() {
   // Reset warning cache.
@@ -26,6 +27,9 @@ function initModules() {
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
   act = require('jest-react').act;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.SuspenseList;
+  }
 
   // Make them available to the helpers.
   return {
@@ -137,16 +141,17 @@ describe('ReactDOMServerSuspense', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('server renders a SuspenseList component and its children', async () => {
     const example = (
-      <React.SuspenseList>
+      <SuspenseList>
         <React.Suspense fallback="Loading A">
           <div>A</div>
         </React.Suspense>
         <React.Suspense fallback="Loading B">
           <div>B</div>
         </React.Suspense>
-      </React.SuspenseList>
+      </SuspenseList>
     );
     const element = await serverRender(example);
     const parent = element.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index 66cf344814dc8..ca5c9fac51624 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -24,7 +24,9 @@ beforeEach(() => {
   act = require('jest-react').act;
 
   Suspense = React.Suspense;
-  SuspenseList = React.SuspenseList;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.SuspenseList;
+  }
 
   getCacheForType = React.unstable_getCacheForType;
 
@@ -197,6 +199,7 @@ test('warns in DEV if return pointer is inconsistent', async () => {
 });
 
 // @gate enableCache
+// @gate enableSuspenseList
 test('regression (#20932): return pointer is correct before entering deleted tree', async () => {
   // Based on a production bug. Designed to trigger a very specific
   // implementation path.
diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js
index b6adc66b00b53..6a5976e97194f 100644
--- a/packages/react-is/src/__tests__/ReactIs-test.js
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -12,6 +12,7 @@
 let React;
 let ReactDOM;
 let ReactIs;
+let SuspenseList;
 
 describe('ReactIs', () => {
   beforeEach(() => {
@@ -20,6 +21,10 @@ describe('ReactIs', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactIs = require('react-is');
+
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   it('should return undefined for unknown/invalid types', () => {
@@ -186,10 +191,11 @@ describe('ReactIs', () => {
     expect(ReactIs.isSuspense(<div />)).toBe(false);
   });
 
+  // @gate enableSuspenseList
   it('should identify suspense list', () => {
-    expect(ReactIs.isValidElementType(React.SuspenseList)).toBe(true);
-    expect(ReactIs.typeOf(<React.SuspenseList />)).toBe(ReactIs.SuspenseList);
-    expect(ReactIs.isSuspenseList(<React.SuspenseList />)).toBe(true);
+    expect(ReactIs.isValidElementType(SuspenseList)).toBe(true);
+    expect(ReactIs.typeOf(<SuspenseList />)).toBe(ReactIs.SuspenseList);
+    expect(ReactIs.isSuspenseList(<SuspenseList />)).toBe(true);
     expect(ReactIs.isSuspenseList({type: ReactIs.SuspenseList})).toBe(false);
     expect(ReactIs.isSuspenseList('React.SuspenseList')).toBe(false);
     expect(ReactIs.isSuspenseList(<div />)).toBe(false);
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index f568e40ccad7c..24e57002ef303 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -21,7 +21,9 @@ describe('ReactLazyContextPropagation', () => {
     useState = React.useState;
     useContext = React.useContext;
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     getCacheForType = React.unstable_getCacheForType;
 
@@ -651,6 +653,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BBB');
   });
 
+  // @gate enableSuspenseList
   test('contexts are propagated through SuspenseList', async () => {
     // This kinda tests an implementation detail. SuspenseList has an early
     // bailout that doesn't use `bailoutOnAlreadyFinishedWork`. It probably
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index dae01c885fe5a..811be09639158 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -34,6 +34,7 @@ let forwardRef;
 let memo;
 let act;
 let ContinuousEventPriority;
+let SuspenseList;
 
 describe('ReactHooksWithNoopRenderer', () => {
   beforeEach(() => {
@@ -60,6 +61,9 @@ describe('ReactHooksWithNoopRenderer', () => {
     Suspense = React.Suspense;
     ContinuousEventPriority = require('react-reconciler/constants')
       .ContinuousEventPriority;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     textCache = new Map();
 
@@ -4291,9 +4295,8 @@ describe('ReactHooksWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('regression: SuspenseList causes unmounts to be dropped on deletion', async () => {
-    const SuspenseList = React.SuspenseList;
-
     function Row({label}) {
       useEffect(() => {
         Scheduler.unstable_yieldValue('Mount ' + label);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index e969a59c4f60f..d357094f78c96 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -16,7 +16,9 @@ describe('ReactSuspenseList', () => {
     act = require('jest-react').act;
     Profiler = React.Profiler;
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   function Text(props) {
@@ -42,6 +44,7 @@ describe('ReactSuspenseList', () => {
     return Component;
   }
 
+  // @gate enableSuspenseList
   it('warns if an unsupported revealOrder option is used', () => {
     function Foo() {
       return (
@@ -61,6 +64,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a upper case revealOrder option is used', () => {
     function Foo() {
       return (
@@ -80,6 +84,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a misspelled revealOrder option is used', () => {
     function Foo() {
       return (
@@ -100,6 +105,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a single element is passed to a "forwards" list', () => {
     function Foo({children}) {
       return <SuspenseList revealOrder="forwards">{children}</SuspenseList>;
@@ -132,6 +138,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a single fragment is passed to a "backwards" list', () => {
     function Foo() {
       return (
@@ -152,6 +159,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a nested array is passed to a "forwards" list', () => {
     function Foo({items}) {
       return (
@@ -179,6 +187,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('shows content independently by default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -245,6 +254,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('shows content independently in legacy mode regardless of option', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -315,6 +325,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together"', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -384,6 +395,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" even when nested as siblings', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -469,6 +481,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" in nested SuspenseLists', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -530,6 +543,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" in nested SuspenseLists where the inner is default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -589,6 +603,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" during an update', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -673,6 +688,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('avoided boundaries can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -771,6 +787,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('boundaries without fallbacks can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -854,6 +871,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays each items in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -919,6 +937,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays each items in "backwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -984,6 +1003,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays added row at the top "together" and the bottom in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1138,6 +1158,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays added row at the top "together" and the bottom in "backwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1322,6 +1343,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('switches to rendering fallbacks if the tail takes long CPU time', async () => {
     function Foo() {
       return (
@@ -1390,6 +1412,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('only shows one loading state at a time for "collapsed" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1459,6 +1482,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('warns if an unsupported tail option is used', () => {
     function Foo() {
       return (
@@ -1479,6 +1503,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a tail option is used with "together"', () => {
     function Foo() {
       return (
@@ -1499,6 +1524,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('renders one "collapsed" fallback even if CPU time elapsed', async () => {
     function Foo() {
       return (
@@ -1571,6 +1597,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle does not collapse insertions (forwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1713,6 +1740,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle does not collapse insertions (backwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1860,6 +1888,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle of committed tail does not collapse insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2017,6 +2046,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('only shows no initial loading state "hidden" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2080,6 +2110,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves a nested forwards suspense list', async () => {
     const B = createAsyncText('B');
 
@@ -2142,6 +2173,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves a nested forwards suspense list with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2188,6 +2220,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves two nested forwards suspense lists with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2255,6 +2288,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('can do unrelated adjacent updates', async () => {
     let updateAdjacent;
     function Adjacent() {
@@ -2301,6 +2335,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2389,6 +2424,7 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
+  // @gate enableSuspenseList
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2477,6 +2513,7 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
+  // @gate enableSuspenseList
   it('is able to interrupt a partially rendered tree and continue later', async () => {
     const AsyncA = createAsyncText('A');
 
@@ -2555,6 +2592,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('can resume class components when revealed together', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2617,6 +2655,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('should be able to progressively show CPU expensive rows with two pass rendering', async () => {
     function TwoPass({text}) {
       const [pass, setPass] = React.useState(0);
@@ -2687,6 +2726,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('should be able to progressively show rows with two pass rendering and visible', async () => {
     function TwoPass({text}) {
       const [pass, setPass] = React.useState(0);
@@ -2769,6 +2809,7 @@ describe('ReactSuspenseList', () => {
   });
 
   // @gate enableProfilerTimer
+  // @gate enableSuspenseList
   it('counts the actual duration when profiling a SuspenseList', async () => {
     // Order of parameters: id, phase, actualDuration, treeBaseDuration
     const onRender = jest.fn();
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 75ac4ef8850a2..11d25a5a11966 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -13,6 +13,7 @@ let ReactDOM;
 let JSResourceReference;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
+let SuspenseList;
 
 describe('ReactFlightDOMRelay', () => {
   beforeEach(() => {
@@ -24,6 +25,9 @@ describe('ReactFlightDOMRelay', () => {
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-server-dom-relay');
     JSResourceReference = require('JSResourceReference');
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   function readThrough(data) {
@@ -104,16 +108,9 @@ describe('ReactFlightDOMRelay', () => {
     expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
   });
 
+  // @gate enableSuspenseList
   it('can reasonably handle different element types', () => {
-    const {
-      forwardRef,
-      memo,
-      Fragment,
-      StrictMode,
-      Profiler,
-      Suspense,
-      SuspenseList,
-    } = React;
+    const {forwardRef, memo, Fragment, StrictMode, Profiler, Suspense} = React;
 
     const Inner = memo(
       forwardRef((props, ref) => {
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 234ec8336a9ed..b0f6f409bb0e1 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -17,7 +17,6 @@ export {
   PureComponent,
   StrictMode,
   Suspense,
-  SuspenseList,
   cloneElement,
   createContext,
   createElement,
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index af83baf0f3ec9..e76a93638336f 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -86,6 +86,7 @@ function getTestFlags() {
 
       // This isn't a flag, just a useful alias for tests.
       enableUseSyncExternalStoreShim: !__VARIANT__,
+      enableSuspenseList: releaseChannel === 'experimental' || www,
 
       // If there's a naming conflict between scheduler and React feature flags, the
       // React ones take precedence.

From a52d76b877cbb7d62f914d32dfede1275da18337 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 15 Nov 2021 13:26:30 -0500
Subject: [PATCH 108/109] Bump 18 from alpha to beta (#22766)

---
 .circleci/config.yml | 4 ++--
 ReactVersions.js     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 843e2f5fba4a4..a21dc532e69db 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -464,7 +464,7 @@ workflows:
             - setup
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
@@ -496,7 +496,7 @@ workflows:
             - setup
           commit_sha: << pipeline.git.revision >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
diff --git a/ReactVersions.js b/ReactVersions.js
index bdab35424e885..03c9db2332b73 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -22,7 +22,7 @@ const ReactVersion = '18.0.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'alpha';
+const nextChannelLabel = 'beta';
 
 const stablePackages = {
   'create-subscription': ReactVersion,

From 96ca8d9155043e4636308edd6501fde67ce40aa5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 15 Nov 2021 13:43:40 -0500
Subject: [PATCH 109/109] Allow publishing with `beta` tag (#22768)

---
 scripts/release/publish-commands/parse-params.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/release/publish-commands/parse-params.js b/scripts/release/publish-commands/parse-params.js
index a441168226a76..2c0439dd56394 100644
--- a/scripts/release/publish-commands/parse-params.js
+++ b/scripts/release/publish-commands/parse-params.js
@@ -44,6 +44,7 @@ module.exports = () => {
       case 'next':
       case 'experimental':
       case 'alpha':
+      case 'beta':
       case 'untagged':
         break;
       default: