diff --git a/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js
index c448a25b83..7589463c49 100644
--- a/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js
+++ b/packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js
@@ -148,7 +148,15 @@ describe('ReactCache', () => {
       error = e;
     }
     expect(error.message).toMatch('Failed to load: Hi');
-    assertLog(['Promise rejected [Hi]', 'Error! [Hi]', 'Error! [Hi]']);
+    assertLog([
+      'Promise rejected [Hi]',
+      'Error! [Hi]',
+      'Error! [Hi]',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Error! [Hi]', 'Error! [Hi]']
+        : []),
+    ]);
 
     // Should throw again on a subsequent read
     root.render(<App />);
@@ -191,6 +199,7 @@ describe('ReactCache', () => {
     }
   });
 
+  // @gate enableSiblingPrerendering
   it('evicts least recently used values', async () => {
     ReactCache.unstable_setGlobalCacheLimit(3);
 
@@ -206,15 +215,13 @@ describe('ReactCache', () => {
     await waitForAll(['Suspend! [1]', 'Loading...']);
     jest.advanceTimersByTime(100);
     assertLog(['Promise resolved [1]']);
-    await waitForAll([1, 'Suspend! [2]']);
+    await waitForAll([1, 'Suspend! [2]', 1, 'Suspend! [2]', 'Suspend! [3]']);
 
     jest.advanceTimersByTime(100);
-    assertLog(['Promise resolved [2]']);
-    await waitForAll([1, 2, 'Suspend! [3]']);
+    assertLog(['Promise resolved [2]', 'Promise resolved [3]']);
+    await waitForAll([1, 2, 3]);
 
     await act(() => jest.advanceTimersByTime(100));
-    assertLog(['Promise resolved [3]', 1, 2, 3]);
-
     expect(root).toMatchRenderedOutput('123');
 
     // Render 1, 4, 5
@@ -234,6 +241,9 @@ describe('ReactCache', () => {
       1,
       4,
       'Suspend! [5]',
+      1,
+      4,
+      'Suspend! [5]',
       'Promise resolved [5]',
       1,
       4,
@@ -267,6 +277,9 @@ describe('ReactCache', () => {
       1,
       2,
       'Suspend! [3]',
+      1,
+      2,
+      'Suspend! [3]',
       'Promise resolved [3]',
       1,
       2,
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 4a42cf2703..c22ac6e05d 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -284,6 +284,19 @@ export function createHOCFilter(isEnabled: boolean = true) {
   };
 }
 
+export function createEnvironmentNameFilter(
+  env: string,
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/frontend/types');
+  return {
+    type: Types.ComponentFilterEnvironmentName,
+    isEnabled,
+    isValid: true,
+    value: env,
+  };
+}
+
 export function createElementTypeFilter(
   elementType: ElementType,
   isEnabled: boolean = true,
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index a71b259441..92db4c062d 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -220,6 +220,7 @@ export default class Agent extends EventEmitter<{
       this.updateConsolePatchSettings,
     );
     bridge.addListener('updateComponentFilters', this.updateComponentFilters);
+    bridge.addListener('getEnvironmentNames', this.getEnvironmentNames);
 
     // Temporarily support older standalone front-ends sending commands to newer embedded backends.
     // We do this because React Native embeds the React DevTools backend,
@@ -341,84 +342,123 @@ export default class Agent extends EventEmitter<{
   }
 
   getIDForHostInstance(target: HostInstance): number | null {
-    let bestMatch: null | HostInstance = null;
-    let bestRenderer: null | RendererInterface = null;
-    // Find the nearest ancestor which is mounted by a React.
-    for (const rendererID in this._rendererInterfaces) {
-      const renderer = ((this._rendererInterfaces[
-        (rendererID: any)
-      ]: any): RendererInterface);
-      const nearestNode: null = renderer.getNearestMountedHostInstance(target);
-      if (nearestNode !== null) {
-        if (nearestNode === target) {
-          // Exact match we can exit early.
-          bestMatch = nearestNode;
-          bestRenderer = renderer;
-          break;
-        }
-        if (
-          bestMatch === null ||
-          (!isReactNativeEnvironment() && bestMatch.contains(nearestNode))
-        ) {
-          // If this is the first match or the previous match contains the new match,
-          // so the new match is a deeper and therefore better match.
-          bestMatch = nearestNode;
-          bestRenderer = renderer;
+    if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
+      // In React Native or non-DOM we simply pick any renderer that has a match.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        try {
+          const match = renderer.getElementIDForHostInstance(target);
+          if (match != null) {
+            return match;
+          }
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
         }
       }
-    }
-    if (bestRenderer != null && bestMatch != null) {
-      try {
-        return bestRenderer.getElementIDForHostInstance(bestMatch, true);
-      } catch (error) {
-        // Some old React versions might throw if they can't find a match.
-        // If so we should ignore it...
+      return null;
+    } else {
+      // In the DOM we use a smarter mechanism to find the deepest a DOM node
+      // that is registered if there isn't an exact match.
+      let bestMatch: null | Element = null;
+      let bestRenderer: null | RendererInterface = null;
+      // Find the nearest ancestor which is mounted by a React.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        const nearestNode: null | Element = renderer.getNearestMountedDOMNode(
+          (target: any),
+        );
+        if (nearestNode !== null) {
+          if (nearestNode === target) {
+            // Exact match we can exit early.
+            bestMatch = nearestNode;
+            bestRenderer = renderer;
+            break;
+          }
+          if (bestMatch === null || bestMatch.contains(nearestNode)) {
+            // If this is the first match or the previous match contains the new match,
+            // so the new match is a deeper and therefore better match.
+            bestMatch = nearestNode;
+            bestRenderer = renderer;
+          }
+        }
       }
+      if (bestRenderer != null && bestMatch != null) {
+        try {
+          return bestRenderer.getElementIDForHostInstance(bestMatch);
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
+        }
+      }
+      return null;
     }
-    return null;
   }
 
   getComponentNameForHostInstance(target: HostInstance): string | null {
     // We duplicate this code from getIDForHostInstance to avoid an object allocation.
-    let bestMatch: null | HostInstance = null;
-    let bestRenderer: null | RendererInterface = null;
-    // Find the nearest ancestor which is mounted by a React.
-    for (const rendererID in this._rendererInterfaces) {
-      const renderer = ((this._rendererInterfaces[
-        (rendererID: any)
-      ]: any): RendererInterface);
-      const nearestNode = renderer.getNearestMountedHostInstance(target);
-      if (nearestNode !== null) {
-        if (nearestNode === target) {
-          // Exact match we can exit early.
-          bestMatch = nearestNode;
-          bestRenderer = renderer;
-          break;
-        }
-        if (
-          bestMatch === null ||
-          (!isReactNativeEnvironment() && bestMatch.contains(nearestNode))
-        ) {
-          // If this is the first match or the previous match contains the new match,
-          // so the new match is a deeper and therefore better match.
-          bestMatch = nearestNode;
-          bestRenderer = renderer;
+    if (isReactNativeEnvironment() || typeof target.nodeType !== 'number') {
+      // In React Native or non-DOM we simply pick any renderer that has a match.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        try {
+          const id = renderer.getElementIDForHostInstance(target);
+          if (id) {
+            return renderer.getDisplayNameForElementID(id);
+          }
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
         }
       }
-    }
-
-    if (bestRenderer != null && bestMatch != null) {
-      try {
-        const id = bestRenderer.getElementIDForHostInstance(bestMatch, true);
-        if (id) {
-          return bestRenderer.getDisplayNameForElementID(id);
+      return null;
+    } else {
+      // In the DOM we use a smarter mechanism to find the deepest a DOM node
+      // that is registered if there isn't an exact match.
+      let bestMatch: null | Element = null;
+      let bestRenderer: null | RendererInterface = null;
+      // Find the nearest ancestor which is mounted by a React.
+      for (const rendererID in this._rendererInterfaces) {
+        const renderer = ((this._rendererInterfaces[
+          (rendererID: any)
+        ]: any): RendererInterface);
+        const nearestNode: null | Element = renderer.getNearestMountedDOMNode(
+          (target: any),
+        );
+        if (nearestNode !== null) {
+          if (nearestNode === target) {
+            // Exact match we can exit early.
+            bestMatch = nearestNode;
+            bestRenderer = renderer;
+            break;
+          }
+          if (bestMatch === null || bestMatch.contains(nearestNode)) {
+            // If this is the first match or the previous match contains the new match,
+            // so the new match is a deeper and therefore better match.
+            bestMatch = nearestNode;
+            bestRenderer = renderer;
+          }
         }
-      } catch (error) {
-        // Some old React versions might throw if they can't find a match.
-        // If so we should ignore it...
       }
+      if (bestRenderer != null && bestMatch != null) {
+        try {
+          const id = bestRenderer.getElementIDForHostInstance(bestMatch);
+          if (id) {
+            return bestRenderer.getDisplayNameForElementID(id);
+          }
+        } catch (error) {
+          // Some old React versions might throw if they can't find a match.
+          // If so we should ignore it...
+        }
+      }
+      return null;
     }
-    return null;
   }
 
   getBackendVersion: () => void = () => {
@@ -814,6 +854,24 @@ export default class Agent extends EventEmitter<{
       }
     };
 
+  getEnvironmentNames: () => void = () => {
+    let accumulatedNames = null;
+    for (const rendererID in this._rendererInterfaces) {
+      const renderer = this._rendererInterfaces[+rendererID];
+      const names = renderer.getEnvironmentNames();
+      if (accumulatedNames === null) {
+        accumulatedNames = names;
+      } else {
+        for (let i = 0; i < names.length; i++) {
+          if (accumulatedNames.indexOf(names[i]) === -1) {
+            accumulatedNames.push(names[i]);
+          }
+        }
+      }
+    }
+    this._bridge.send('environmentNames', accumulatedNames || []);
+  };
+
   onTraceUpdates: (nodes: Set<HostInstance>) => void = nodes => {
     this.emit('traceUpdates', nodes);
   };
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 93725c4428..05d9055d0b 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -135,17 +135,7 @@ export function registerRenderer(
   renderer: ReactRenderer,
   onErrorOrWarning?: OnErrorOrWarning,
 ): void {
-  const {
-    currentDispatcherRef,
-    getCurrentFiber,
-    findFiberByHostInstance,
-    version,
-  } = renderer;
-
-  // Ignore React v15 and older because they don't expose a component stack anyway.
-  if (typeof findFiberByHostInstance !== 'function') {
-    return;
-  }
+  const {currentDispatcherRef, getCurrentFiber, version} = renderer;
 
   // currentDispatcherRef gets injected for v16.8+ to support hooks inspection.
   // getCurrentFiber gets injected for v16.9+.
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 47cb12bf17..5e5167557f 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -14,6 +14,7 @@ import {
   ComponentFilterElementType,
   ComponentFilterHOC,
   ComponentFilterLocation,
+  ComponentFilterEnvironmentName,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeFunction,
@@ -113,7 +114,7 @@ import {getStyleXData} from '../StyleX/utils';
 import {createProfilingHooks} from '../profilingHooks';
 
 import type {GetTimelineData, ToggleProfilingStatus} from '../profilingHooks';
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   ChangeDescription,
   CommitDataBackend,
@@ -145,6 +146,7 @@ import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
 // Kinds
 const FIBER_INSTANCE = 0;
 const VIRTUAL_INSTANCE = 1;
+const FILTERED_FIBER_INSTANCE = 2;
 
 // Flags
 const FORCE_SUSPENSE_FALLBACK = /*    */ 0b001;
@@ -156,9 +158,9 @@ const FORCE_ERROR_RESET = /*          */ 0b100;
 type FiberInstance = {
   kind: 0,
   id: number,
-  parent: null | DevToolsInstance, // filtered parent, including virtual
-  firstChild: null | DevToolsInstance, // filtered first child, including virtual
-  nextSibling: null | DevToolsInstance, // filtered next sibling, including virtual
+  parent: null | DevToolsInstance,
+  firstChild: null | DevToolsInstance,
+  nextSibling: null | DevToolsInstance,
   flags: number, // Force Error/Suspense
   source: null | string | Error | Source, // source location of this component function, or owned child stack
   errors: null | Map<string, number>, // error messages and count
@@ -183,6 +185,39 @@ function createFiberInstance(fiber: Fiber): FiberInstance {
   };
 }
 
+type FilteredFiberInstance = {
+  kind: 2,
+  // We exclude id from the type to get errors if we try to access it.
+  // However it is still in the object to preserve hidden class.
+  // id: number,
+  parent: null | DevToolsInstance,
+  firstChild: null | DevToolsInstance,
+  nextSibling: null | DevToolsInstance,
+  flags: number, // Force Error/Suspense
+  source: null | string | Error | Source, // always null here.
+  errors: null, // error messages and count
+  warnings: null, // warning messages and count
+  treeBaseDuration: number, // the profiled time of the last render of this subtree
+  data: Fiber, // one of a Fiber pair
+};
+
+// This is used to represent a filtered Fiber but still lets us find its host instance.
+function createFilteredFiberInstance(fiber: Fiber): FilteredFiberInstance {
+  return ({
+    kind: FILTERED_FIBER_INSTANCE,
+    id: 0,
+    parent: null,
+    firstChild: null,
+    nextSibling: null,
+    flags: 0,
+    componentStack: null,
+    errors: null,
+    warnings: null,
+    treeBaseDuration: 0,
+    data: fiber,
+  }: any);
+}
+
 // This type represents a stateful instance of a Server Component or a Component
 // that gets optimized away - e.g. call-through without creating a Fiber.
 // It's basically a virtual Fiber. This is not a semantic concept in React.
@@ -191,9 +226,9 @@ function createFiberInstance(fiber: Fiber): FiberInstance {
 type VirtualInstance = {
   kind: 1,
   id: number,
-  parent: null | DevToolsInstance, // filtered parent, including virtual
-  firstChild: null | DevToolsInstance, // filtered first child, including virtual
-  nextSibling: null | DevToolsInstance, // filtered next sibling, including virtual
+  parent: null | DevToolsInstance,
+  firstChild: null | DevToolsInstance,
+  nextSibling: null | DevToolsInstance,
   flags: number,
   source: null | string | Error | Source, // source location of this server component, or owned child stack
   // Errors and Warnings happen per ReactComponentInfo which can appear in
@@ -225,7 +260,7 @@ function createVirtualInstance(
   };
 }
 
-type DevToolsInstance = FiberInstance | VirtualInstance;
+type DevToolsInstance = FiberInstance | VirtualInstance | FilteredFiberInstance;
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => symbol | number;
@@ -721,6 +756,14 @@ export function getInternalReactConstants(version: string): {
   };
 }
 
+// All environment names we've seen so far. This lets us create a list of filters to apply.
+// This should ideally include env of filtered Components too so that you can add those as
+// filters at the same time as removing some other filter.
+const knownEnvironmentNames: Set<string> = new Set();
+
+// Map of FiberRoot to their root FiberInstance.
+const rootToFiberInstanceMap: Map<FiberRoot, FiberInstance> = new Map();
+
 // Map of one or more Fibers in a pair to their unique id number.
 // We track both Fibers to support Fast Refresh,
 // which may forcefully replace one of the pair as part of hot reloading.
@@ -730,37 +773,96 @@ const fiberToFiberInstanceMap: Map<Fiber, FiberInstance> = new Map();
 // Map of id to one (arbitrary) Fiber in a pair.
 // This Map is used to e.g. get the display name for a Fiber or schedule an update,
 // operations that should be the same whether the current and work-in-progress Fiber is used.
-const idToDevToolsInstanceMap: Map<number, DevToolsInstance> = new Map();
+const idToDevToolsInstanceMap: Map<number, FiberInstance | VirtualInstance> =
+  new Map();
 
-// Map of resource DOM nodes to all the Fibers that depend on it.
-const hostResourceToFiberMap: Map<HostInstance, Set<Fiber>> = new Map();
+// Map of canonical HostInstances to the nearest parent DevToolsInstance.
+const publicInstanceToDevToolsInstanceMap: Map<HostInstance, DevToolsInstance> =
+  new Map();
+// Map of resource DOM nodes to all the nearest DevToolsInstances that depend on it.
+const hostResourceToDevToolsInstanceMap: Map<
+  HostInstance,
+  Set<DevToolsInstance>,
+> = new Map();
+
+function getPublicInstance(instance: HostInstance): HostInstance {
+  // Typically the PublicInstance and HostInstance is the same thing but not in Fabric.
+  // So we need to detect this and use that as the public instance.
+  return typeof instance === 'object' &&
+    instance !== null &&
+    typeof instance.canonical === 'object'
+    ? (instance.canonical: any)
+    : typeof instance._nativeTag === 'number'
+      ? instance._nativeTag
+      : instance;
+}
+
+function aquireHostInstance(
+  nearestInstance: DevToolsInstance,
+  hostInstance: HostInstance,
+): void {
+  const publicInstance = getPublicInstance(hostInstance);
+  publicInstanceToDevToolsInstanceMap.set(publicInstance, nearestInstance);
+}
+
+function releaseHostInstance(
+  nearestInstance: DevToolsInstance,
+  hostInstance: HostInstance,
+): void {
+  const publicInstance = getPublicInstance(hostInstance);
+  if (
+    publicInstanceToDevToolsInstanceMap.get(publicInstance) === nearestInstance
+  ) {
+    publicInstanceToDevToolsInstanceMap.delete(publicInstance);
+  }
+}
 
 function aquireHostResource(
-  fiber: Fiber,
+  nearestInstance: DevToolsInstance,
   resource: ?{instance?: HostInstance},
 ): void {
   const hostInstance = resource && resource.instance;
   if (hostInstance) {
-    let resourceFibers = hostResourceToFiberMap.get(hostInstance);
-    if (resourceFibers === undefined) {
-      resourceFibers = new Set();
-      hostResourceToFiberMap.set(hostInstance, resourceFibers);
+    const publicInstance = getPublicInstance(hostInstance);
+    let resourceInstances =
+      hostResourceToDevToolsInstanceMap.get(publicInstance);
+    if (resourceInstances === undefined) {
+      resourceInstances = new Set();
+      hostResourceToDevToolsInstanceMap.set(publicInstance, resourceInstances);
+      // Store the first match in the main map for quick access when selecting DOM node.
+      publicInstanceToDevToolsInstanceMap.set(publicInstance, nearestInstance);
     }
-    resourceFibers.add(fiber);
+    resourceInstances.add(nearestInstance);
   }
 }
 
 function releaseHostResource(
-  fiber: Fiber,
+  nearestInstance: DevToolsInstance,
   resource: ?{instance?: HostInstance},
 ): void {
   const hostInstance = resource && resource.instance;
   if (hostInstance) {
-    const resourceFibers = hostResourceToFiberMap.get(hostInstance);
-    if (resourceFibers !== undefined) {
-      resourceFibers.delete(fiber);
-      if (resourceFibers.size === 0) {
-        hostResourceToFiberMap.delete(hostInstance);
+    const publicInstance = getPublicInstance(hostInstance);
+    const resourceInstances =
+      hostResourceToDevToolsInstanceMap.get(publicInstance);
+    if (resourceInstances !== undefined) {
+      resourceInstances.delete(nearestInstance);
+      if (resourceInstances.size === 0) {
+        hostResourceToDevToolsInstanceMap.delete(publicInstance);
+        publicInstanceToDevToolsInstanceMap.delete(publicInstance);
+      } else if (
+        publicInstanceToDevToolsInstanceMap.get(publicInstance) ===
+        nearestInstance
+      ) {
+        // This was the first one. Store the next first one in the main map for easy access.
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const firstInstance of resourceInstances) {
+          publicInstanceToDevToolsInstanceMap.set(
+            firstInstance,
+            nearestInstance,
+          );
+          break;
+        }
       }
     }
   }
@@ -996,7 +1098,10 @@ export function attach(
     // even if objects are different
     const message = formatConsoleArgumentsToSingleString(...args);
     if (__DEBUG__) {
-      debug('onErrorOrWarning', fiber, null, `${type}: "${message}"`);
+      const fiberInstance = fiberToFiberInstanceMap.get(fiber);
+      if (fiberInstance !== undefined) {
+        debug('onErrorOrWarning', fiberInstance, null, `${type}: "${message}"`);
+      }
     }
 
     // Mark this Fiber as needed its warning/error count updated during the next flush.
@@ -1032,32 +1137,37 @@ export function attach(
   // It relies on the extension to pass the preference through via the global.
   patchConsoleUsingWindowValues();
 
-  const debug = (
+  function debug(
     name: string,
-    fiber: Fiber,
+    instance: DevToolsInstance,
     parentInstance: null | DevToolsInstance,
     extraString: string = '',
-  ): void => {
+  ): void {
     if (__DEBUG__) {
       const displayName =
-        fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null');
+        instance.kind === VIRTUAL_INSTANCE
+          ? instance.data.name || 'null'
+          : instance.data.tag +
+            ':' +
+            (getDisplayNameForFiber(instance.data) || 'null');
 
-      const maybeID = getFiberIDUnsafe(fiber) || '<no id>';
+      const maybeID =
+        instance.kind === FILTERED_FIBER_INSTANCE ? '<no id>' : instance.id;
 
-      let parentDisplayName;
-      let maybeParentID;
-      if (parentInstance !== null && parentInstance.kind === FIBER_INSTANCE) {
-        const parentFiber = parentInstance.data;
-        parentDisplayName =
-          parentFiber.tag +
-          ':' +
-          (getDisplayNameForFiber(parentFiber) || 'null');
-        maybeParentID = String(parentInstance.id);
-      } else {
-        // TODO: Handle VirtualInstance
-        parentDisplayName = '';
-        maybeParentID = '<no-id>';
-      }
+      const parentDisplayName =
+        parentInstance === null
+          ? ''
+          : parentInstance.kind === VIRTUAL_INSTANCE
+            ? parentInstance.data.name || 'null'
+            : parentInstance.data.tag +
+              ':' +
+              (getDisplayNameForFiber(parentInstance.data) || 'null');
+
+      const maybeParentID =
+        parentInstance === null ||
+        parentInstance.kind === FILTERED_FIBER_INSTANCE
+          ? '<no id>'
+          : parentInstance.id;
 
       console.groupCollapsed(
         `[renderer] %c${name} %c${displayName} (${maybeID}) %c${
@@ -1071,19 +1181,28 @@ export function attach(
       console.log(new Error().stack.split('\n').slice(1).join('\n'));
       console.groupEnd();
     }
-  };
+  }
 
   // eslint-disable-next-line no-unused-vars
   function debugTree(instance: DevToolsInstance, indent: number = 0) {
     if (__DEBUG__) {
       const name =
-        (instance.kind === FIBER_INSTANCE
+        (instance.kind !== VIRTUAL_INSTANCE
           ? getDisplayNameForFiber(instance.data)
           : instance.data.name) || '';
       console.log(
-        '  '.repeat(indent) + '- ' + instance.id + ' (' + name + ')',
+        '  '.repeat(indent) +
+          '- ' +
+          (instance.kind === FILTERED_FIBER_INSTANCE ? 0 : instance.id) +
+          ' (' +
+          name +
+          ')',
         'parent',
-        instance.parent === null ? ' ' : instance.parent.id,
+        instance.parent === null
+          ? ' '
+          : instance.parent.kind === FILTERED_FIBER_INSTANCE
+            ? 0
+            : instance.parent.id,
         'next',
         instance.nextSibling === null ? ' ' : instance.nextSibling.id,
       );
@@ -1099,6 +1218,7 @@ export function attach(
   const hideElementsWithDisplayNames: Set<RegExp> = new Set();
   const hideElementsWithPaths: Set<RegExp> = new Set();
   const hideElementsWithTypes: Set<ElementType> = new Set();
+  const hideElementsWithEnvs: Set<string> = new Set();
 
   // Highlight updates
   let traceUpdatesEnabled: boolean = false;
@@ -1108,6 +1228,7 @@ export function attach(
     hideElementsWithTypes.clear();
     hideElementsWithDisplayNames.clear();
     hideElementsWithPaths.clear();
+    hideElementsWithEnvs.clear();
 
     componentFilters.forEach(componentFilter => {
       if (!componentFilter.isEnabled) {
@@ -1133,6 +1254,9 @@ export function attach(
         case ComponentFilterHOC:
           hideElementsWithDisplayNames.add(new RegExp('\\('));
           break;
+        case ComponentFilterEnvironmentName:
+          hideElementsWithEnvs.add(componentFilter.value);
+          break;
         default:
           console.warn(
             `Invalid component filter type "${componentFilter.type}"`,
@@ -1174,9 +1298,15 @@ export function attach(
 
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
-      const rootInstance = getFiberInstanceThrows(root.current);
+      const rootInstance = rootToFiberInstanceMap.get(root);
+      if (rootInstance === undefined) {
+        throw new Error(
+          'Expected the root instance to already exist when applying filters',
+        );
+      }
       currentRootID = rootInstance.id;
       unmountInstanceRecursively(rootInstance);
+      rootToFiberInstanceMap.delete(root);
       flushPendingEvents(root);
       currentRootID = -1;
     });
@@ -1191,6 +1321,7 @@ export function attach(
       const current = root.current;
       const alternate = current.alternate;
       const newRoot = createFiberInstance(current);
+      rootToFiberInstanceMap.set(root, newRoot);
       idToDevToolsInstanceMap.set(newRoot.id, newRoot);
       fiberToFiberInstanceMap.set(current, newRoot);
       if (alternate) {
@@ -1215,7 +1346,14 @@ export function attach(
     flushPendingEvents();
   }
 
-  function shouldFilterVirtual(data: ReactComponentInfo): boolean {
+  function getEnvironmentNames(): Array<string> {
+    return Array.from(knownEnvironmentNames);
+  }
+
+  function shouldFilterVirtual(
+    data: ReactComponentInfo,
+    secondaryEnv: null | string,
+  ): boolean {
     // For purposes of filtering Server Components are always Function Components.
     // Environment will be used to filter Server vs Client.
     // Technically they can be forwardRef and memo too but those filters will go away
@@ -1236,6 +1374,14 @@ export function attach(
       }
     }
 
+    if (
+      (data.env == null || hideElementsWithEnvs.has(data.env)) &&
+      (secondaryEnv === null || hideElementsWithEnvs.has(secondaryEnv))
+    ) {
+      // If a Component has two environments, you have to filter both for it not to appear.
+      return true;
+    }
+
     return false;
   }
 
@@ -1294,6 +1440,26 @@ export function attach(
       }
     }
 
+    if (hideElementsWithEnvs.has('Client')) {
+      // If we're filtering out the Client environment we should filter out all
+      // "Client Components". Technically that also includes the built-ins but
+      // since that doesn't actually include any additional code loading it's
+      // useful to not filter out the built-ins. Those can be filtered separately.
+      // There's no other way to filter out just Function components on the Client.
+      // Therefore, this only filters Class and Function components.
+      switch (tag) {
+        case ClassComponent:
+        case IncompleteClassComponent:
+        case IncompleteFunctionComponent:
+        case FunctionComponent:
+        case IndeterminateComponent:
+        case ForwardRef:
+        case MemoComponent:
+        case SimpleMemoComponent:
+          return true;
+      }
+    }
+
     /* DISABLED: https://github.com/facebook/react/pull/28417
     if (hideElementsWithPaths.size > 0) {
       const source = getSourceForFiber(fiber);
@@ -1375,17 +1541,6 @@ export function attach(
   // When a mount or update is in progress, this value tracks the root that is being operated on.
   let currentRootID: number = -1;
 
-  // Returns a FiberInstance if one has already been generated for the Fiber or throws.
-  function getFiberInstanceThrows(fiber: Fiber): FiberInstance {
-    const fiberInstance = getFiberInstanceUnsafe(fiber);
-    if (fiberInstance !== null) {
-      return fiberInstance;
-    }
-    throw Error(
-      `Could not find ID for Fiber "${getDisplayNameForFiber(fiber) || ''}"`,
-    );
-  }
-
   function getFiberIDThrows(fiber: Fiber): number {
     const fiberInstance = getFiberInstanceUnsafe(fiber);
     if (fiberInstance !== null) {
@@ -1421,50 +1576,26 @@ export function attach(
 
   // Removes a Fiber (and its alternate) from the Maps used to track their id.
   // This method should always be called when a Fiber is unmounting.
-  function untrackFiber(fiberInstance: FiberInstance) {
-    if (__DEBUG__) {
-      debug('untrackFiber()', fiberInstance.data, null);
+  function untrackFiber(nearestInstance: DevToolsInstance, fiber: Fiber) {
+    // TODO: Consider using a WeakMap instead. The only thing where that doesn't work
+    // is React Native Paper which tracks tags but that support is eventually going away
+    // and can use the old findFiberByHostInstance strategy.
+
+    if (fiber.tag === HostHoistable) {
+      releaseHostResource(nearestInstance, fiber.memoizedState);
+    } else if (
+      fiber.tag === HostComponent ||
+      fiber.tag === HostText ||
+      fiber.tag === HostSingleton
+    ) {
+      releaseHostInstance(nearestInstance, fiber.stateNode);
     }
 
-    idToDevToolsInstanceMap.delete(fiberInstance.id);
-
-    const fiber = fiberInstance.data;
-
-    // Restore any errors/warnings associated with this fiber to the pending
-    // map. I.e. treat it as before we tracked the instances. This lets us
-    // restore them if we remount the same Fibers later. Otherwise we rely
-    // on the GC of the Fibers to clean them up.
-    if (fiberInstance.errors !== null) {
-      pendingFiberToErrorsMap.set(fiber, fiberInstance.errors);
-      fiberInstance.errors = null;
-    }
-    if (fiberInstance.warnings !== null) {
-      pendingFiberToWarningsMap.set(fiber, fiberInstance.warnings);
-      fiberInstance.warnings = null;
-    }
-
-    if (fiberInstance.flags & FORCE_ERROR) {
-      fiberInstance.flags &= ~FORCE_ERROR;
-      forceErrorCount--;
-      if (forceErrorCount === 0 && setErrorHandler != null) {
-        setErrorHandler(shouldErrorFiberAlwaysNull);
-      }
-    }
-    if (fiberInstance.flags & FORCE_SUSPENSE_FALLBACK) {
-      fiberInstance.flags &= ~FORCE_SUSPENSE_FALLBACK;
-      forceFallbackCount--;
-      if (forceFallbackCount === 0 && setSuspenseHandler != null) {
-        setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
-      }
-    }
-
-    if (fiberToFiberInstanceMap.get(fiber) === fiberInstance) {
-      fiberToFiberInstanceMap.delete(fiber);
-    }
-    const {alternate} = fiber;
-    if (alternate !== null) {
-      if (fiberToFiberInstanceMap.get(alternate) === fiberInstance) {
-        fiberToFiberInstanceMap.delete(alternate);
+    // Recursively clean up any filtered Fibers below this one as well since
+    // we won't recordUnmount on those.
+    for (let child = fiber.child; child !== null; child = child.sibling) {
+      if (shouldFilterFiber(child)) {
+        untrackFiber(nearestInstance, child);
       }
     }
   }
@@ -2098,7 +2229,7 @@ export function attach(
     const isRoot = fiber.tag === HostRoot;
     let fiberInstance;
     if (isRoot) {
-      const entry = fiberToFiberInstanceMap.get(fiber);
+      const entry = rootToFiberInstanceMap.get(fiber.stateNode);
       if (entry === undefined) {
         throw new Error('The root should have been registered at this point');
       }
@@ -2119,7 +2250,7 @@ export function attach(
     const id = fiberInstance.id;
 
     if (__DEBUG__) {
-      debug('recordMount()', fiber, parentInstance);
+      debug('recordMount()', fiberInstance, parentInstance);
     }
 
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
@@ -2181,7 +2312,12 @@ export function attach(
         ownerInstance.source = fiber._debugStack;
       }
       const ownerID = ownerInstance === null ? 0 : ownerInstance.id;
-      const parentID = parentInstance ? parentInstance.id : 0;
+      const parentID = parentInstance
+        ? parentInstance.kind === FILTERED_FIBER_INSTANCE
+          ? // A Filtered Fiber Instance will always have a Virtual Instance as a parent.
+            ((parentInstance.parent: any): VirtualInstance).id
+          : parentInstance.id
+        : 0;
 
       const displayNameStringID = getStringID(displayName);
 
@@ -2265,7 +2401,12 @@ export function attach(
       ownerInstance.source = componentInfo.debugStack;
     }
     const ownerID = ownerInstance === null ? 0 : ownerInstance.id;
-    const parentID = parentInstance ? parentInstance.id : 0;
+    const parentID = parentInstance
+      ? parentInstance.kind === FILTERED_FIBER_INSTANCE
+        ? // A Filtered Fiber Instance will always have a Virtual Instance as a parent.
+          ((parentInstance.parent: any): VirtualInstance).id
+        : parentInstance.id
+      : 0;
 
     const displayNameStringID = getStringID(displayName);
 
@@ -2286,7 +2427,7 @@ export function attach(
   function recordUnmount(fiberInstance: FiberInstance): void {
     const fiber = fiberInstance.data;
     if (__DEBUG__) {
-      debug('recordUnmount()', fiber, null);
+      debug('recordUnmount()', fiberInstance, reconcilingParent);
     }
 
     if (trackedPathMatchInstance === fiberInstance) {
@@ -2309,7 +2450,47 @@ export function attach(
       pendingRealUnmountedIDs.push(id);
     }
 
-    untrackFiber(fiberInstance);
+    idToDevToolsInstanceMap.delete(fiberInstance.id);
+
+    // Restore any errors/warnings associated with this fiber to the pending
+    // map. I.e. treat it as before we tracked the instances. This lets us
+    // restore them if we remount the same Fibers later. Otherwise we rely
+    // on the GC of the Fibers to clean them up.
+    if (fiberInstance.errors !== null) {
+      pendingFiberToErrorsMap.set(fiber, fiberInstance.errors);
+      fiberInstance.errors = null;
+    }
+    if (fiberInstance.warnings !== null) {
+      pendingFiberToWarningsMap.set(fiber, fiberInstance.warnings);
+      fiberInstance.warnings = null;
+    }
+
+    if (fiberInstance.flags & FORCE_ERROR) {
+      fiberInstance.flags &= ~FORCE_ERROR;
+      forceErrorCount--;
+      if (forceErrorCount === 0 && setErrorHandler != null) {
+        setErrorHandler(shouldErrorFiberAlwaysNull);
+      }
+    }
+    if (fiberInstance.flags & FORCE_SUSPENSE_FALLBACK) {
+      fiberInstance.flags &= ~FORCE_SUSPENSE_FALLBACK;
+      forceFallbackCount--;
+      if (forceFallbackCount === 0 && setSuspenseHandler != null) {
+        setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+      }
+    }
+
+    if (fiberToFiberInstanceMap.get(fiber) === fiberInstance) {
+      fiberToFiberInstanceMap.delete(fiber);
+    }
+    const {alternate} = fiber;
+    if (alternate !== null) {
+      if (fiberToFiberInstanceMap.get(alternate) === fiberInstance) {
+        fiberToFiberInstanceMap.delete(alternate);
+      }
+    }
+
+    untrackFiber(fiberInstance, fiber);
   }
 
   // Running state of the remaining children from the previous version of this parent that
@@ -2489,7 +2670,14 @@ export function attach(
           }
           // Scan up until the next Component to see if this component changed environment.
           const componentInfo: ReactComponentInfo = (debugEntry: any);
-          if (shouldFilterVirtual(componentInfo)) {
+          const secondaryEnv = getSecondaryEnvironmentName(fiber._debugInfo, i);
+          if (componentInfo.env != null) {
+            knownEnvironmentNames.add(componentInfo.env);
+          }
+          if (secondaryEnv !== null) {
+            knownEnvironmentNames.add(secondaryEnv);
+          }
+          if (shouldFilterVirtual(componentInfo, secondaryEnv)) {
             // Skip.
             continue;
           }
@@ -2511,10 +2699,6 @@ export function attach(
                 );
               }
               previousVirtualInstance = createVirtualInstance(componentInfo);
-              const secondaryEnv = getSecondaryEnvironmentName(
-                fiber._debugInfo,
-                i,
-              );
               recordVirtualMount(
                 previousVirtualInstance,
                 reconcilingParent,
@@ -2578,15 +2762,36 @@ export function attach(
     fiber: Fiber,
     traceNearestHostComponentUpdate: boolean,
   ): void {
-    if (__DEBUG__) {
-      debug('mountFiberRecursively()', fiber, reconcilingParent);
-    }
-
     const shouldIncludeInTree = !shouldFilterFiber(fiber);
     let newInstance = null;
     if (shouldIncludeInTree) {
       newInstance = recordMount(fiber, reconcilingParent);
       insertChild(newInstance);
+      if (__DEBUG__) {
+        debug('mountFiberRecursively()', newInstance, reconcilingParent);
+      }
+    } else if (
+      reconcilingParent !== null &&
+      reconcilingParent.kind === VIRTUAL_INSTANCE
+    ) {
+      // If the parent is a Virtual Instance and we filtered this Fiber we include a
+      // hidden node.
+
+      if (
+        reconcilingParent.data === fiber._debugOwner &&
+        fiber._debugStack != null &&
+        reconcilingParent.source === null
+      ) {
+        // The new Fiber is directly owned by the parent. Therefore somewhere on the
+        // debugStack will be a stack frame inside parent that we can use as its soruce.
+        reconcilingParent.source = fiber._debugStack;
+      }
+
+      newInstance = createFilteredFiberInstance(fiber);
+      insertChild(newInstance);
+      if (__DEBUG__) {
+        debug('mountFiberRecursively()', newInstance, reconcilingParent);
+      }
     }
 
     // If we have the tree selection from previous reload, try to match this Fiber.
@@ -2599,7 +2804,7 @@ export function attach(
     const stashedParent = reconcilingParent;
     const stashedPrevious = previouslyReconciledSibling;
     const stashedRemaining = remainingReconcilingChildren;
-    if (shouldIncludeInTree) {
+    if (newInstance !== null) {
       // Push a new DevTools instance parent while reconciling this subtree.
       reconcilingParent = newInstance;
       previouslyReconciledSibling = null;
@@ -2621,7 +2826,21 @@ export function attach(
       }
 
       if (fiber.tag === HostHoistable) {
-        aquireHostResource(fiber, fiber.memoizedState);
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        aquireHostResource(nearestInstance, fiber.memoizedState);
+      } else if (
+        fiber.tag === HostComponent ||
+        fiber.tag === HostText ||
+        fiber.tag === HostSingleton
+      ) {
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        aquireHostInstance(nearestInstance, fiber.stateNode);
       }
 
       if (fiber.tag === SuspenseComponent) {
@@ -2670,7 +2889,7 @@ export function attach(
         }
       }
     } finally {
-      if (shouldIncludeInTree) {
+      if (newInstance !== null) {
         reconcilingParent = stashedParent;
         previouslyReconciledSibling = stashedPrevious;
         remainingReconcilingChildren = stashedRemaining;
@@ -2686,9 +2905,7 @@ export function attach(
   // when we switch from primary to fallback, or deleting a subtree.
   function unmountInstanceRecursively(instance: DevToolsInstance) {
     if (__DEBUG__) {
-      if (instance.kind === FIBER_INSTANCE) {
-        debug('unmountInstanceRecursively()', instance.data, null);
-      }
+      debug('unmountInstanceRecursively()', instance, reconcilingParent);
     }
 
     const stashedParent = reconcilingParent;
@@ -2710,8 +2927,10 @@ export function attach(
     }
     if (instance.kind === FIBER_INSTANCE) {
       recordUnmount(instance);
-    } else {
+    } else if (instance.kind === VIRTUAL_INSTANCE) {
       recordVirtualUnmount(instance);
+    } else {
+      untrackFiber(instance, instance.data);
     }
     removeChild(instance, null);
   }
@@ -2816,15 +3035,14 @@ export function attach(
     virtualInstance.treeBaseDuration = treeBaseDuration;
   }
 
-  function recordResetChildren(parentInstance: DevToolsInstance) {
+  function recordResetChildren(
+    parentInstance: FiberInstance | VirtualInstance,
+  ) {
     if (__DEBUG__) {
-      if (
-        parentInstance.firstChild !== null &&
-        parentInstance.firstChild.kind === FIBER_INSTANCE
-      ) {
+      if (parentInstance.firstChild !== null) {
         debug(
           'recordResetChildren()',
-          parentInstance.firstChild.data,
+          parentInstance.firstChild,
           parentInstance,
         );
       }
@@ -2836,7 +3054,17 @@ export function attach(
 
     let child: null | DevToolsInstance = parentInstance.firstChild;
     while (child !== null) {
-      nextChildren.push(child.id);
+      if (child.kind === FILTERED_FIBER_INSTANCE) {
+        for (
+          let innerChild: null | DevToolsInstance = parentInstance.firstChild;
+          innerChild !== null;
+          innerChild = innerChild.nextSibling
+        ) {
+          nextChildren.push((innerChild: any).id);
+        }
+      } else {
+        nextChildren.push(child.id);
+      }
       child = child.nextSibling;
     }
 
@@ -2919,7 +3147,17 @@ export function attach(
             continue;
           }
           const componentInfo: ReactComponentInfo = (debugEntry: any);
-          if (shouldFilterVirtual(componentInfo)) {
+          const secondaryEnv = getSecondaryEnvironmentName(
+            nextChild._debugInfo,
+            i,
+          );
+          if (componentInfo.env != null) {
+            knownEnvironmentNames.add(componentInfo.env);
+          }
+          if (secondaryEnv !== null) {
+            knownEnvironmentNames.add(secondaryEnv);
+          }
+          if (shouldFilterVirtual(componentInfo, secondaryEnv)) {
             continue;
           }
           if (level === virtualLevel) {
@@ -2983,10 +3221,6 @@ export function attach(
               } else {
                 // Otherwise we create a new instance.
                 const newVirtualInstance = createVirtualInstance(componentInfo);
-                const secondaryEnv = getSecondaryEnvironmentName(
-                  nextChild._debugInfo,
-                  i,
-                );
                 recordVirtualMount(
                   newVirtualInstance,
                   reconcilingParent,
@@ -3185,7 +3419,9 @@ export function attach(
     traceNearestHostComponentUpdate: boolean,
   ): boolean {
     if (__DEBUG__) {
-      debug('updateFiberRecursively()', nextFiber, reconcilingParent);
+      if (fiberInstance !== null) {
+        debug('updateFiberRecursively()', fiberInstance, reconcilingParent);
+      }
     }
 
     if (traceUpdatesEnabled) {
@@ -3236,8 +3472,12 @@ export function attach(
     }
     try {
       if (nextFiber.tag === HostHoistable) {
-        releaseHostResource(prevFiber, prevFiber.memoizedState);
-        aquireHostResource(nextFiber, nextFiber.memoizedState);
+        const nearestInstance = reconcilingParent;
+        if (nearestInstance === null) {
+          throw new Error('Did not expect a host hoistable to be the root');
+        }
+        releaseHostResource(nearestInstance, prevFiber.memoizedState);
+        aquireHostResource(nearestInstance, nextFiber.memoizedState);
       }
 
       const isSuspense = nextFiber.tag === SuspenseComponent;
@@ -3338,6 +3578,18 @@ export function attach(
             // I.e. we just restore them by undoing what we did above.
             fiberInstance.firstChild = remainingReconcilingChildren;
             remainingReconcilingChildren = null;
+
+            if (traceUpdatesEnabled) {
+              // If we're tracing updates and we've bailed out before reaching a host node,
+              // we should fall back to recursively marking the nearest host descendants for highlight.
+              if (traceNearestHostComponentUpdate) {
+                const hostInstances =
+                  findAllCurrentHostInstances(fiberInstance);
+                hostInstances.forEach(hostInstance => {
+                  traceUpdatesForNodes.add(hostInstance);
+                });
+              }
+            }
           } else {
             // If this fiber is filtered there might be changes to this set elsewhere so we have
             // to visit each child to place it back in the set. We let the child bail out instead.
@@ -3349,19 +3601,6 @@ export function attach(
               );
             }
           }
-
-          if (traceUpdatesEnabled) {
-            // If we're tracing updates and we've bailed out before reaching a host node,
-            // we should fall back to recursively marking the nearest host descendants for highlight.
-            if (traceNearestHostComponentUpdate) {
-              const hostInstances = findAllCurrentHostInstances(
-                getFiberInstanceThrows(nextFiber),
-              );
-              hostInstances.forEach(hostInstance => {
-                traceUpdatesForNodes.add(hostInstance);
-              });
-            }
-          }
         }
       }
 
@@ -3442,6 +3681,7 @@ export function attach(
         const current = root.current;
         const alternate = current.alternate;
         const newRoot = createFiberInstance(current);
+        rootToFiberInstanceMap.set(root, newRoot);
         idToDevToolsInstanceMap.set(newRoot.id, newRoot);
         fiberToFiberInstanceMap.set(current, newRoot);
         if (alternate) {
@@ -3508,15 +3748,17 @@ export function attach(
     }
   }
 
-  function handleCommitFiberRoot(root: any, priorityLevel: void | number) {
+  function handleCommitFiberRoot(
+    root: FiberRoot,
+    priorityLevel: void | number,
+  ) {
     const current = root.current;
     const alternate = current.alternate;
 
-    let rootInstance =
-      fiberToFiberInstanceMap.get(current) ||
-      (alternate && fiberToFiberInstanceMap.get(alternate));
+    let rootInstance = rootToFiberInstanceMap.get(root);
     if (!rootInstance) {
       rootInstance = createFiberInstance(current);
+      rootToFiberInstanceMap.set(root, rootInstance);
       idToDevToolsInstanceMap.set(rootInstance.id, rootInstance);
       fiberToFiberInstanceMap.set(current, rootInstance);
       if (alternate) {
@@ -3581,8 +3823,9 @@ export function attach(
         updateFiberRecursively(rootInstance, current, alternate, false);
       } else if (wasMounted && !isMounted) {
         // Unmount an existing root.
-        removeRootPseudoKey(currentRootID);
         unmountInstanceRecursively(rootInstance);
+        removeRootPseudoKey(currentRootID);
+        rootToFiberInstanceMap.delete(root);
       }
     } else {
       // Mount a new root.
@@ -3635,15 +3878,31 @@ export function attach(
     return null;
   }
 
-  function findAllCurrentHostInstances(
-    fiberInstance: FiberInstance,
-  ): $ReadOnlyArray<HostInstance> {
-    const hostInstances = [];
-    const fiber = fiberInstance.data;
-    if (!fiber) {
-      return hostInstances;
+  function appendHostInstancesByDevToolsInstance(
+    devtoolsInstance: DevToolsInstance,
+    hostInstances: Array<HostInstance>,
+  ) {
+    if (devtoolsInstance.kind !== VIRTUAL_INSTANCE) {
+      const fiber = devtoolsInstance.data;
+      appendHostInstancesByFiber(fiber, hostInstances);
+      return;
     }
+    // Search the tree for the nearest child Fiber and add all its host instances.
+    // TODO: If the true nearest Fiber is filtered, we might skip it and instead include all
+    // the children below it. In the extreme case, searching the whole tree.
+    for (
+      let child = devtoolsInstance.firstChild;
+      child !== null;
+      child = child.nextSibling
+    ) {
+      appendHostInstancesByDevToolsInstance(child, hostInstances);
+    }
+  }
 
+  function appendHostInstancesByFiber(
+    fiber: Fiber,
+    hostInstances: Array<HostInstance>,
+  ): void {
     // Next we'll drill down this component to find all HostComponent/Text.
     let node: Fiber = fiber;
     while (true) {
@@ -3663,19 +3922,24 @@ export function attach(
         continue;
       }
       if (node === fiber) {
-        return hostInstances;
+        return;
       }
       while (!node.sibling) {
         if (!node.return || node.return === fiber) {
-          return hostInstances;
+          return;
         }
         node = node.return;
       }
       node.sibling.return = node.return;
       node = node.sibling;
     }
-    // Flow needs the return here, but ESLint complains about it.
-    // eslint-disable-next-line no-unreachable
+  }
+
+  function findAllCurrentHostInstances(
+    devtoolsInstance: DevToolsInstance,
+  ): $ReadOnlyArray<HostInstance> {
+    const hostInstances: Array<HostInstance> = [];
+    appendHostInstancesByDevToolsInstance(devtoolsInstance, hostInstances);
     return hostInstances;
   }
 
@@ -3686,17 +3950,7 @@ export function attach(
         console.warn(`Could not find DevToolsInstance with id "${id}"`);
         return null;
       }
-      if (devtoolsInstance.kind !== FIBER_INSTANCE) {
-        // TODO: Handle VirtualInstance.
-        return null;
-      }
-      const fiber = devtoolsInstance.data;
-      if (fiber === null) {
-        return null;
-      }
-
-      const hostInstances = findAllCurrentHostInstances(devtoolsInstance);
-      return hostInstances;
+      return findAllCurrentHostInstances(devtoolsInstance);
     } catch (err) {
       // The fiber might have unmounted by now.
       return null;
@@ -3715,82 +3969,25 @@ export function attach(
     }
   }
 
-  function getNearestMountedHostInstance(
-    hostInstance: HostInstance,
-  ): null | HostInstance {
-    const mountedFiber = renderer.findFiberByHostInstance(hostInstance);
-    if (mountedFiber != null) {
-      if (mountedFiber.stateNode !== hostInstance) {
-        // If it's not a perfect match the specific one might be a resource.
-        // We don't need to look at any parents because host resources don't have
-        // children so it won't be in any parent if it's not this one.
-        if (hostResourceToFiberMap.has(hostInstance)) {
-          return hostInstance;
-        }
-      }
-      return mountedFiber.stateNode;
+  function getNearestMountedDOMNode(publicInstance: Element): null | Element {
+    let domNode: null | Element = publicInstance;
+    while (domNode && !publicInstanceToDevToolsInstanceMap.has(domNode)) {
+      // $FlowFixMe: In practice this is either null or Element.
+      domNode = domNode.parentNode;
     }
-    if (hostResourceToFiberMap.has(hostInstance)) {
-      return hostInstance;
-    }
-    return null;
-  }
-
-  function findNearestUnfilteredElementID(searchFiber: Fiber) {
-    let fiber: null | Fiber = searchFiber;
-    while (fiber !== null) {
-      const fiberInstance = getFiberInstanceUnsafe(fiber);
-      if (fiberInstance !== null) {
-        // TODO: Ideally we would not have any filtered FiberInstances which
-        // would make this logic much simpler. Unfortunately, we sometimes
-        // eagerly add to the map and some times don't eagerly clean it up.
-        // TODO: If the fiber is filtered, the FiberInstance wouldn't really
-        // exist which would mean that we also don't have a way to get to the
-        // VirtualInstances.
-        if (!shouldFilterFiber(fiberInstance.data)) {
-          return fiberInstance.id;
-        }
-        // We couldn't use this Fiber but we might have a VirtualInstance
-        // that is the nearest unfiltered instance.
-        const parentInstance = fiberInstance.parent;
-        if (
-          parentInstance !== null &&
-          parentInstance.kind === VIRTUAL_INSTANCE
-        ) {
-          // Virtual Instances only exist if they're unfiltered.
-          return parentInstance.id;
-        }
-        // If we find a parent Fiber, it might not be the nearest parent
-        // so we break out and continue walking the Fiber tree instead.
-      }
-      fiber = fiber.return;
-    }
-    return null;
+    return domNode;
   }
 
   function getElementIDForHostInstance(
-    hostInstance: HostInstance,
-    findNearestUnfilteredAncestor: boolean = false,
+    publicInstance: HostInstance,
   ): number | null {
-    const resourceFibers = hostResourceToFiberMap.get(hostInstance);
-    if (resourceFibers !== undefined) {
-      // This is a resource. Find the first unfiltered instance.
-      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-      for (const resourceFiber of resourceFibers) {
-        const elementID = findNearestUnfilteredElementID(resourceFiber);
-        if (elementID !== null) {
-          return elementID;
-        }
+    const instance = publicInstanceToDevToolsInstanceMap.get(publicInstance);
+    if (instance !== undefined) {
+      if (instance.kind === FILTERED_FIBER_INSTANCE) {
+        // A Filtered Fiber Instance will always have a Virtual Instance as a parent.
+        return ((instance.parent: any): VirtualInstance).id;
       }
-      // If we don't find one, fallthrough to select the parent instead.
-    }
-    const fiber = renderer.findFiberByHostInstance(hostInstance);
-    if (fiber != null) {
-      if (!findNearestUnfilteredAncestor) {
-        // TODO: Remove this option. It's not used.
-        return getFiberIDThrows(fiber);
-      }
-      return findNearestUnfilteredElementID(fiber);
+      return instance.id;
     }
     return null;
   }
@@ -3842,7 +4039,7 @@ export function attach(
   }
 
   function instanceToSerializedElement(
-    instance: DevToolsInstance,
+    instance: FiberInstance | VirtualInstance,
   ): SerializedElement {
     if (instance.kind === FIBER_INSTANCE) {
       const fiber = instance.data;
@@ -3925,7 +4122,7 @@ export function attach(
         owner = ownerFiber._debugOwner;
       } else {
         const ownerInfo: ReactComponentInfo = (owner: any); // Refined
-        if (!shouldFilterVirtual(ownerInfo)) {
+        if (!shouldFilterVirtual(ownerInfo, null)) {
           return ownerInfo;
         }
         owner = ownerInfo.owner;
@@ -3937,7 +4134,7 @@ export function attach(
   function findNearestOwnerInstance(
     parentInstance: null | DevToolsInstance,
     owner: void | null | ReactComponentInfo | Fiber,
-  ): null | DevToolsInstance {
+  ): null | FiberInstance | VirtualInstance {
     if (owner == null) {
       return null;
     }
@@ -3952,6 +4149,9 @@ export function attach(
         // needs a duck type check anyway.
         parentInstance.data === (owner: any).alternate
       ) {
+        if (parentInstance.kind === FILTERED_FIBER_INSTANCE) {
+          return null;
+        }
         return parentInstance;
       }
       parentInstance = parentInstance.parent;
@@ -4029,7 +4229,11 @@ export function attach(
     if (devtoolsInstance.kind === VIRTUAL_INSTANCE) {
       return inspectVirtualInstanceRaw(devtoolsInstance);
     }
-    return inspectFiberInstanceRaw(devtoolsInstance);
+    if (devtoolsInstance.kind === FIBER_INSTANCE) {
+      return inspectFiberInstanceRaw(devtoolsInstance);
+    }
+    (devtoolsInstance: FilteredFiberInstance); // assert exhaustive
+    throw new Error('Unsupported instance kind');
   }
 
   function inspectFiberInstanceRaw(
@@ -4332,7 +4536,7 @@ export function attach(
     let targetErrorBoundaryID = null;
     let parent = virtualInstance.parent;
     while (parent !== null) {
-      if (parent.kind === FIBER_INSTANCE) {
+      if (parent.kind !== VIRTUAL_INSTANCE) {
         targetErrorBoundaryID = getNearestErrorBoundaryID(parent.data);
         let current = parent.data;
         while (current.return !== null) {
@@ -5123,7 +5327,9 @@ export function attach(
   ) {
     // We don't need to convert milliseconds to microseconds in this case,
     // because the profiling summary is JSON serialized.
-    target.push([instance.id, instance.treeBaseDuration]);
+    if (instance.kind !== FILTERED_FIBER_INSTANCE) {
+      target.push([instance.id, instance.treeBaseDuration]);
+    }
     for (
       let child = instance.firstChild;
       child !== null;
@@ -5149,7 +5355,12 @@ export function attach(
     idToContextsMap = new Map();
 
     hook.getFiberRoots(rendererID).forEach(root => {
-      const rootInstance = getFiberInstanceThrows(root.current);
+      const rootInstance = rootToFiberInstanceMap.get(root);
+      if (rootInstance === undefined) {
+        throw new Error(
+          'Expected the root instance to already exist when starting profiling',
+        );
+      }
       const rootID = rootInstance.id;
       ((displayNamesByRootID: any): DisplayNamesByRootID).set(
         rootID,
@@ -5337,7 +5548,7 @@ export function attach(
   // In that case, we'll do some extra checks for matching mounts.
   let trackedPath: Array<PathFrame> | null = null;
   let trackedPathMatchFiber: Fiber | null = null; // This is the deepest unfiltered match of a Fiber.
-  let trackedPathMatchInstance: DevToolsInstance | null = null; // This is the deepest matched filtered Instance.
+  let trackedPathMatchInstance: FiberInstance | VirtualInstance | null = null; // This is the deepest matched filtered Instance.
   let trackedPathMatchDepth = -1;
   let mightBeOnTrackedPath = false;
 
@@ -5356,7 +5567,7 @@ export function attach(
   // The return value signals whether we should keep matching siblings or not.
   function updateTrackedPathStateBeforeMount(
     fiber: Fiber,
-    fiberInstance: null | FiberInstance,
+    fiberInstance: null | FiberInstance | FilteredFiberInstance,
   ): boolean {
     if (trackedPath === null || !mightBeOnTrackedPath) {
       // Fast path: there's nothing to track so do nothing and ignore siblings.
@@ -5385,7 +5596,7 @@ export function attach(
       ) {
         // We have our next match.
         trackedPathMatchFiber = fiber;
-        if (fiberInstance !== null) {
+        if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
           trackedPathMatchInstance = fiberInstance;
         }
         trackedPathMatchDepth++;
@@ -5546,8 +5757,13 @@ export function attach(
       case HostRoot:
         // Roots don't have a real displayName, index, or key.
         // Instead, we'll use the pseudo key (childDisplayName:indexWithThatName).
-        const id = getFiberIDThrows(fiber);
-        const pseudoKey = rootPseudoKeys.get(id);
+        const rootInstance = rootToFiberInstanceMap.get(fiber.stateNode);
+        if (rootInstance === undefined) {
+          throw new Error(
+            'Expected the root instance to exist when computing a path',
+          );
+        }
+        const pseudoKey = rootPseudoKeys.get(rootInstance.id);
         if (pseudoKey === undefined) {
           throw new Error('Expected mounted root to have known pseudo key.');
         }
@@ -5723,7 +5939,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getDisplayNameForElementID,
-    getNearestMountedHostInstance,
+    getNearestMountedDOMNode,
     getElementIDForHostInstance,
     getInstanceAndStyle,
     getOwnersList,
@@ -5750,5 +5966,6 @@ export function attach(
     storeAsGlobal,
     unpatchConsoleForStrictMode,
     updateComponentFilters,
+    getEnvironmentNames,
   };
 }
diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js
index 5c398ebf75..f264134b4b 100644
--- a/packages/react-devtools-shared/src/backend/index.js
+++ b/packages/react-devtools-shared/src/backend/index.js
@@ -73,7 +73,12 @@ export function initBackend(
 
     // Inject any not-yet-injected renderers (if we didn't reload-and-profile)
     if (rendererInterface == null) {
-      if (typeof renderer.findFiberByHostInstance === 'function') {
+      if (
+        // v16-19
+        typeof renderer.findFiberByHostInstance === 'function' ||
+        // v16.8+
+        renderer.currentDispatcherRef != null
+      ) {
         // react-reconciler v16+
         rendererInterface = attach(hook, id, renderer, global);
       } else if (renderer.ComponentTree) {
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 523fbbeba3..fa29d007a6 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -145,15 +145,13 @@ export function attach(
   let getElementIDForHostInstance: GetElementIDForHostInstance =
     ((null: any): GetElementIDForHostInstance);
   let findHostInstanceForInternalID: (id: number) => ?HostInstance;
-  let getNearestMountedHostInstance = (
-    node: HostInstance,
-  ): null | HostInstance => {
+  let getNearestMountedDOMNode = (node: Element): null | Element => {
     // Not implemented.
     return null;
   };
 
   if (renderer.ComponentTree) {
-    getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
+    getElementIDForHostInstance = node => {
       const internalInstance =
         renderer.ComponentTree.getClosestInstanceFromNode(node);
       return internalInstanceToIDMap.get(internalInstance) || null;
@@ -162,9 +160,7 @@ export function attach(
       const internalInstance = idToInternalInstanceMap.get(id);
       return renderer.ComponentTree.getNodeFromInstance(internalInstance);
     };
-    getNearestMountedHostInstance = (
-      node: HostInstance,
-    ): null | HostInstance => {
+    getNearestMountedDOMNode = (node: Element): null | Element => {
       const internalInstance =
         renderer.ComponentTree.getClosestInstanceFromNode(node);
       if (internalInstance != null) {
@@ -173,7 +169,7 @@ export function attach(
       return null;
     };
   } else if (renderer.Mount.getID && renderer.Mount.getNode) {
-    getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
+    getElementIDForHostInstance = node => {
       // Not implemented.
       return null;
     };
@@ -1078,6 +1074,11 @@ export function attach(
     // Not implemented.
   }
 
+  function getEnvironmentNames(): Array<string> {
+    // No RSC support.
+    return [];
+  }
+
   function setTraceUpdatesEnabled(enabled: boolean) {
     // Not implemented.
   }
@@ -1121,7 +1122,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getDisplayNameForElementID,
-    getNearestMountedHostInstance,
+    getNearestMountedDOMNode,
     getElementIDForHostInstance,
     getInstanceAndStyle,
     findHostInstancesForElementID: (id: number) => {
@@ -1152,5 +1153,6 @@ export function attach(
     storeAsGlobal,
     unpatchConsoleForStrictMode,
     updateComponentFilters,
+    getEnvironmentNames,
   };
 }
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 41c278d02e..982426f2ff 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -90,7 +90,6 @@ export type GetDisplayNameForElementID = (id: number) => string | null;
 
 export type GetElementIDForHostInstance = (
   component: HostInstance,
-  findNearestUnfilteredAncestor?: boolean,
 ) => number | null;
 export type FindHostInstancesForElementID = (
   id: number,
@@ -106,10 +105,11 @@ export type Lane = number;
 export type Lanes = number;
 
 export type ReactRenderer = {
-  findFiberByHostInstance: (hostInstance: HostInstance) => Fiber | null,
   version: string,
   rendererPackageName: string,
   bundleType: BundleType,
+  // 16.0+ - To be removed in future versions.
+  findFiberByHostInstance?: (hostInstance: HostInstance) => Fiber | null,
   // 16.9+
   overrideHookState?: ?(
     fiber: Object,
@@ -358,9 +358,7 @@ export type RendererInterface = {
   findHostInstancesForElementID: FindHostInstancesForElementID,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
-  getNearestMountedHostInstance: (
-    component: HostInstance,
-  ) => HostInstance | null,
+  getNearestMountedDOMNode: (component: Element) => Element | null,
   getElementIDForHostInstance: GetElementIDForHostInstance,
   getDisplayNameForElementID: GetDisplayNameForElementID,
   getInstanceAndStyle(id: number): InstanceAndStyle,
@@ -416,6 +414,7 @@ export type RendererInterface = {
   ) => void,
   unpatchConsoleForStrictMode: () => void,
   updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void,
+  getEnvironmentNames: () => Array<string>,
 
   // Timeline profiler interface
 
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index f4da08be6b..1e9b3c222d 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -189,6 +189,7 @@ export type BackendEvents = {
   operations: [Array<number>],
   ownersList: [OwnersList],
   overrideComponentFilters: [Array<ComponentFilter>],
+  environmentNames: [Array<string>],
   profilingData: [ProfilingDataBackend],
   profilingStatus: [boolean],
   reloadAppForProfiling: [],
@@ -237,6 +238,7 @@ type FrontendEvents = {
   stopProfiling: [],
   storeAsGlobal: [StoreAsGlobalParams],
   updateComponentFilters: [Array<ComponentFilter>],
+  getEnvironmentNames: [],
   updateConsolePatchSettings: [ConsolePatchSettings],
   viewAttributeSource: [ViewAttributeSourceParams],
   viewElementSource: [ElementAndRendererID],
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 a2a6a1d681..33552daa26 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -15,6 +15,7 @@ import {
   useMemo,
   useRef,
   useState,
+  use,
 } from 'react';
 import {
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
@@ -31,6 +32,7 @@ import {
   ComponentFilterElementType,
   ComponentFilterHOC,
   ComponentFilterLocation,
+  ComponentFilterEnvironmentName,
   ElementTypeClass,
   ElementTypeContext,
   ElementTypeFunction,
@@ -52,11 +54,16 @@ import type {
   ElementType,
   ElementTypeComponentFilter,
   RegExpComponentFilter,
+  EnvironmentNameComponentFilter,
 } from 'react-devtools-shared/src/frontend/types';
 
 const vscodeFilepath = 'vscode://file/{path}:{line}';
 
-export default function ComponentsSettings(_: {}): React.Node {
+export default function ComponentsSettings({
+  environmentNames,
+}: {
+  environmentNames: Promise<Array<string>>,
+}): React.Node {
   const store = useContext(StoreContext);
   const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
 
@@ -101,6 +108,30 @@ export default function ComponentsSettings(_: {}): React.Node {
     Array<ComponentFilter>,
   >(() => [...store.componentFilters]);
 
+  const usedEnvironmentNames = use(environmentNames);
+
+  const resolvedEnvironmentNames = useMemo(() => {
+    const set = new Set(usedEnvironmentNames);
+    // If there are other filters already specified but are not currently
+    // on the page, we still allow them as options.
+    for (let i = 0; i < componentFilters.length; i++) {
+      const filter = componentFilters[i];
+      if (filter.type === ComponentFilterEnvironmentName) {
+        set.add(filter.value);
+      }
+    }
+    // Client is special and is always available as a default.
+    if (set.size > 0) {
+      // Only show any options at all if there's any other option already
+      // used by a filter or if any environments are used by the page.
+      // Note that "Client" can have been added above which would mean
+      // that we should show it as an option regardless if it's the only
+      // option.
+      set.add('Client');
+    }
+    return Array.from(set).sort();
+  }, [usedEnvironmentNames, componentFilters]);
+
   const addFilter = useCallback(() => {
     setComponentFilters(prevComponentFilters => {
       return [
@@ -146,6 +177,13 @@ export default function ComponentsSettings(_: {}): React.Node {
               isEnabled: componentFilter.isEnabled,
               isValid: true,
             };
+          } else if (type === ComponentFilterEnvironmentName) {
+            cloned[index] = {
+              type: ComponentFilterEnvironmentName,
+              isEnabled: componentFilter.isEnabled,
+              isValid: true,
+              value: 'Client',
+            };
           }
         }
         return cloned;
@@ -210,6 +248,29 @@ export default function ComponentsSettings(_: {}): React.Node {
     [],
   );
 
+  const updateFilterValueEnvironmentName = useCallback(
+    (componentFilter: ComponentFilter, value: string) => {
+      if (componentFilter.type !== ComponentFilterEnvironmentName) {
+        throw Error('Invalid value for environment name filter');
+      }
+
+      setComponentFilters(prevComponentFilters => {
+        const cloned: Array<ComponentFilter> = [...prevComponentFilters];
+        if (componentFilter.type === ComponentFilterEnvironmentName) {
+          const index = prevComponentFilters.indexOf(componentFilter);
+          if (index >= 0) {
+            cloned[index] = {
+              ...componentFilter,
+              value,
+            };
+          }
+        }
+        return cloned;
+      });
+    },
+    [],
+  );
+
   const removeFilter = useCallback((index: number) => {
     setComponentFilters(prevComponentFilters => {
       const cloned: Array<ComponentFilter> = [...prevComponentFilters];
@@ -246,6 +307,11 @@ export default function ComponentsSettings(_: {}): React.Node {
               ...((cloned[index]: any): BooleanComponentFilter),
               isEnabled,
             };
+          } else if (componentFilter.type === ComponentFilterEnvironmentName) {
+            cloned[index] = {
+              ...((cloned[index]: any): EnvironmentNameComponentFilter),
+              isEnabled,
+            };
           }
         }
         return cloned;
@@ -380,10 +446,16 @@ export default function ComponentsSettings(_: {}): React.Node {
                   <option value={ComponentFilterDisplayName}>name</option>
                   <option value={ComponentFilterElementType}>type</option>
                   <option value={ComponentFilterHOC}>hoc</option>
+                  {resolvedEnvironmentNames.length > 0 && (
+                    <option value={ComponentFilterEnvironmentName}>
+                      environment
+                    </option>
+                  )}
                 </select>
               </td>
               <td className={styles.TableCell}>
-                {componentFilter.type === ComponentFilterElementType &&
+                {(componentFilter.type === ComponentFilterElementType ||
+                  componentFilter.type === ComponentFilterEnvironmentName) &&
                   'equals'}
                 {(componentFilter.type === ComponentFilterLocation ||
                   componentFilter.type === ComponentFilterDisplayName) &&
@@ -428,6 +500,23 @@ export default function ComponentsSettings(_: {}): React.Node {
                     value={componentFilter.value}
                   />
                 )}
+                {componentFilter.type === ComponentFilterEnvironmentName && (
+                  <select
+                    className={styles.Select}
+                    value={componentFilter.value}
+                    onChange={({currentTarget}) =>
+                      updateFilterValueEnvironmentName(
+                        componentFilter,
+                        currentTarget.value,
+                      )
+                    }>
+                    {resolvedEnvironmentNames.map(name => (
+                      <option key={name} value={name}>
+                        {name}
+                      </option>
+                    ))}
+                  </select>
+                )}
               </td>
               <td className={styles.TableCell}>
                 <Button
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
index ecaa80ea5e..24884098a0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
@@ -58,7 +58,8 @@ export default function SettingsModal(_: {}): React.Node {
 }
 
 function SettingsModalImpl(_: {}) {
-  const {setIsModalShowing} = useContext(SettingsModalContext);
+  const {setIsModalShowing, environmentNames} =
+    useContext(SettingsModalContext);
   const dismissModal = useCallback(
     () => setIsModalShowing(false),
     [setIsModalShowing],
@@ -81,7 +82,7 @@ function SettingsModalImpl(_: {}) {
   let view = null;
   switch (selectedTabID) {
     case 'components':
-      view = <ComponentsSettings />;
+      view = <ComponentsSettings environmentNames={environmentNames} />;
       break;
     // $FlowFixMe[incompatible-type] is this missing in TabID?
     case 'debugging':
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
index 465d01ec3e..55336a9d65 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
@@ -10,7 +10,16 @@
 import type {ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
-import {createContext, useMemo, useState} from 'react';
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useState,
+  startTransition,
+} from 'react';
+
+import {BridgeContext} from '../context';
+import type {FrontendBridge} from '../../../bridge';
 
 export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
@@ -18,7 +27,7 @@ export type Theme = 'auto' | 'light' | 'dark';
 type Context = {
   isModalShowing: boolean,
   setIsModalShowing: (value: boolean) => void,
-  ...
+  environmentNames: null | Promise<Array<string>>,
 };
 
 const SettingsModalContext: ReactContext<Context> = createContext<Context>(
@@ -26,20 +35,42 @@ const SettingsModalContext: ReactContext<Context> = createContext<Context>(
 );
 SettingsModalContext.displayName = 'SettingsModalContext';
 
+function fetchEnvironmentNames(bridge: FrontendBridge): Promise<Array<string>> {
+  return new Promise(resolve => {
+    function onEnvironmentNames(names: Array<string>) {
+      bridge.removeListener('environmentNames', onEnvironmentNames);
+      resolve(names);
+    }
+    bridge.addListener('environmentNames', onEnvironmentNames);
+    bridge.send('getEnvironmentNames');
+  });
+}
+
 function SettingsModalContextController({
   children,
 }: {
   children: React$Node,
 }): React.Node {
-  const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
+  const bridge = useContext(BridgeContext);
 
-  const value = useMemo(
-    () => ({isModalShowing, setIsModalShowing}),
-    [isModalShowing, setIsModalShowing],
-  );
+  const setIsModalShowing: boolean => void = useCallback((value: boolean) => {
+    startTransition(() => {
+      setContext({
+        isModalShowing: value,
+        setIsModalShowing,
+        environmentNames: value ? fetchEnvironmentNames(bridge) : null,
+      });
+    });
+  });
+
+  const [currentContext, setContext] = useState<Context>({
+    isModalShowing: false,
+    setIsModalShowing,
+    environmentNames: null,
+  });
 
   return (
-    <SettingsModalContext.Provider value={value}>
+    <SettingsModalContext.Provider value={currentContext}>
       {children}
     </SettingsModalContext.Provider>
   );
diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js
index 05fa9e9333..459015d050 100644
--- a/packages/react-devtools-shared/src/frontend/types.js
+++ b/packages/react-devtools-shared/src/frontend/types.js
@@ -76,8 +76,9 @@ export const ComponentFilterElementType = 1;
 export const ComponentFilterDisplayName = 2;
 export const ComponentFilterLocation = 3;
 export const ComponentFilterHOC = 4;
+export const ComponentFilterEnvironmentName = 5;
 
-export type ComponentFilterType = 1 | 2 | 3 | 4;
+export type ComponentFilterType = 1 | 2 | 3 | 4 | 5;
 
 // Hide all elements of types in this Set.
 // We hide host components only by default.
@@ -102,10 +103,18 @@ export type BooleanComponentFilter = {
   type: 4,
 };
 
+export type EnvironmentNameComponentFilter = {
+  isEnabled: boolean,
+  isValid: boolean,
+  type: 5,
+  value: string,
+};
+
 export type ComponentFilter =
   | BooleanComponentFilter
   | ElementTypeComponentFilter
-  | RegExpComponentFilter;
+  | RegExpComponentFilter
+  | EnvironmentNameComponentFilter;
 
 export type HookName = string | null;
 // Map of hook source ("<filename>:<line-number>:<column-number>") to name.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index ee843996be..027099d547 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -744,7 +744,7 @@ describe('ReactDOMFiberAsync', () => {
       // Because it suspended, it remains on the current path
       expect(div.textContent).toBe('/path/a');
     });
-    assertLog([]);
+    assertLog(gate('enableSiblingPrerendering') ? ['Suspend! [/path/b]'] : []);
 
     await act(async () => {
       resolvePromise();
diff --git a/packages/react-dom/src/__tests__/ReactDOMForm-test.js b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
index 7ba4bea06b..b2a45a4c71 100644
--- a/packages/react-dom/src/__tests__/ReactDOMForm-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMForm-test.js
@@ -699,7 +699,15 @@ describe('ReactDOMForm', () => {
     // This should suspend because form actions are implicitly wrapped
     // in startTransition.
     await submit(formRef.current);
-    assertLog(['Pending...', 'Suspend! [Updated]', 'Loading...']);
+    assertLog([
+      'Pending...',
+      'Suspend! [Updated]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Updated]', 'Loading...']
+        : []),
+    ]);
     expect(container.textContent).toBe('Pending...Initial');
 
     await act(() => resolveText('Updated'));
@@ -736,7 +744,15 @@ describe('ReactDOMForm', () => {
 
     // Update
     await submit(formRef.current);
-    assertLog(['Pending...', 'Suspend! [Count: 1]', 'Loading...']);
+    assertLog([
+      'Pending...',
+      'Suspend! [Count: 1]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Count: 1]', 'Loading...']
+        : []),
+    ]);
     expect(container.textContent).toBe('Pending...Count: 0');
 
     await act(() => resolveText('Count: 1'));
@@ -745,7 +761,15 @@ describe('ReactDOMForm', () => {
 
     // Update again
     await submit(formRef.current);
-    assertLog(['Pending...', 'Suspend! [Count: 2]', 'Loading...']);
+    assertLog([
+      'Pending...',
+      'Suspend! [Count: 2]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Count: 2]', 'Loading...']
+        : []),
+    ]);
     expect(container.textContent).toBe('Pending...Count: 1');
 
     await act(() => resolveText('Count: 2'));
@@ -789,7 +813,14 @@ describe('ReactDOMForm', () => {
     assertLog(['Async action started', 'Pending...']);
 
     await act(() => resolveText('Wait'));
-    assertLog(['Suspend! [Updated]', 'Loading...']);
+    assertLog([
+      'Suspend! [Updated]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Updated]', 'Loading...']
+        : []),
+    ]);
     expect(container.textContent).toBe('Pending...Initial');
 
     await act(() => resolveText('Updated'));
@@ -1475,7 +1506,15 @@ describe('ReactDOMForm', () => {
     // Now dispatch inside of a transition. This one does not trigger a
     // loading state.
     await act(() => startTransition(() => dispatch()));
-    assertLog(['Count: 1', 'Suspend! [Count: 2]', 'Loading...']);
+    assertLog([
+      'Count: 1',
+      'Suspend! [Count: 2]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Count: 2]', 'Loading...']
+        : []),
+    ]);
     expect(container.textContent).toBe('Count: 1');
 
     await act(() => resolveText('Count: 2'));
@@ -1495,7 +1534,11 @@ describe('ReactDOMForm', () => {
 
     const root = ReactDOMClient.createRoot(container);
     await act(() => root.render(<App />));
-    assertLog(['Suspend! [Count: 0]']);
+    assertLog([
+      'Suspend! [Count: 0]',
+
+      ...(gate('enableSiblingPrerendering') ? ['Suspend! [Count: 0]'] : []),
+    ]);
     await act(() => resolveText('Count: 0'));
     assertLog(['Count: 0']);
 
@@ -1508,7 +1551,11 @@ describe('ReactDOMForm', () => {
         {withoutStack: true},
       ],
     ]);
-    assertLog(['Suspend! [Count: 1]']);
+    assertLog([
+      'Suspend! [Count: 1]',
+
+      ...(gate('enableSiblingPrerendering') ? ['Suspend! [Count: 1]'] : []),
+    ]);
     expect(container.textContent).toBe('Count: 0');
   });
 
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index db9c477344..4147f0d04e 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -404,10 +404,16 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
   workInProgress.dependencies =
     currentDependencies === null
       ? null
-      : {
-          lanes: currentDependencies.lanes,
-          firstContext: currentDependencies.firstContext,
-        };
+      : __DEV__
+        ? {
+            lanes: currentDependencies.lanes,
+            firstContext: currentDependencies.firstContext,
+            _debugThenableState: currentDependencies._debugThenableState,
+          }
+        : {
+            lanes: currentDependencies.lanes,
+            firstContext: currentDependencies.firstContext,
+          };
 
   // These will be overridden during the parent's reconciliation
   workInProgress.sibling = current.sibling;
@@ -503,10 +509,16 @@ export function resetWorkInProgress(
     workInProgress.dependencies =
       currentDependencies === null
         ? null
-        : {
-            lanes: currentDependencies.lanes,
-            firstContext: currentDependencies.firstContext,
-          };
+        : __DEV__
+          ? {
+              lanes: currentDependencies.lanes,
+              firstContext: currentDependencies.firstContext,
+              _debugThenableState: currentDependencies._debugThenableState,
+            }
+          : {
+              lanes: currentDependencies.lanes,
+              firstContext: currentDependencies.firstContext,
+            };
 
     if (enableProfilerTimer) {
       // Note: We don't reset the actualTime counts. It's useful to accumulate
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index abe1516520..83b9d10fbf 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -637,6 +637,18 @@ function finishRenderingHooks<Props, SecondArg>(
 ): void {
   if (__DEV__) {
     workInProgress._debugHookTypes = hookTypesDev;
+    // Stash the thenable state for use by DevTools.
+    if (workInProgress.dependencies === null) {
+      if (thenableState !== null) {
+        workInProgress.dependencies = {
+          lanes: NoLanes,
+          firstContext: null,
+          _debugThenableState: thenableState,
+        };
+      }
+    } else {
+      workInProgress.dependencies._debugThenableState = thenableState;
+    }
   }
 
   // We can assume the previous dispatcher is always this one, since we set it
diff --git a/packages/react-reconciler/src/ReactFiberLane.js b/packages/react-reconciler/src/ReactFiberLane.js
index 6ed4caae70..2995548fbb 100644
--- a/packages/react-reconciler/src/ReactFiberLane.js
+++ b/packages/react-reconciler/src/ReactFiberLane.js
@@ -229,28 +229,49 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
 
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
+  const warmLanes = root.warmLanes;
 
   // Do not work on any idle work until all the non-idle work has finished,
   // even if the work is suspended.
   const nonIdlePendingLanes = pendingLanes & NonIdleLanes;
   if (nonIdlePendingLanes !== NoLanes) {
+    // First check for fresh updates.
     const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
     if (nonIdleUnblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
     } else {
+      // No fresh updates. Check if suspended work has been pinged.
       const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
       if (nonIdlePingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
+      } else {
+        // Nothing has been pinged. Check for lanes that need to be prewarmed.
+        const lanesToPrewarm = nonIdlePendingLanes & ~warmLanes;
+        if (lanesToPrewarm !== NoLanes) {
+          nextLanes = getHighestPriorityLanes(lanesToPrewarm);
+        }
       }
     }
   } else {
     // The only remaining work is Idle.
+    // TODO: Idle isn't really used anywhere, and the thinking around
+    // speculative rendering has evolved since this was implemented. Consider
+    // removing until we've thought about this again.
+
+    // First check for fresh updates.
     const unblockedLanes = pendingLanes & ~suspendedLanes;
     if (unblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(unblockedLanes);
     } else {
+      // No fresh updates. Check if suspended work has been pinged.
       if (pingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(pingedLanes);
+      } else {
+        // Nothing has been pinged. Check for lanes that need to be prewarmed.
+        const lanesToPrewarm = pendingLanes & ~warmLanes;
+        if (lanesToPrewarm !== NoLanes) {
+          nextLanes = getHighestPriorityLanes(lanesToPrewarm);
+        }
       }
     }
   }
@@ -335,6 +356,21 @@ export function getNextLanesToFlushSync(
   return NoLanes;
 }
 
+export function checkIfRootIsPrerendering(
+  root: FiberRoot,
+  renderLanes: Lanes,
+): boolean {
+  const pendingLanes = root.pendingLanes;
+  const suspendedLanes = root.suspendedLanes;
+  const pingedLanes = root.pingedLanes;
+  // Remove lanes that are suspended (but not pinged)
+  const unblockedLanes = pendingLanes & ~(suspendedLanes & ~pingedLanes);
+
+  // If there are no unsuspended or pinged lanes, that implies that we're
+  // performing a prerender.
+  return (unblockedLanes & renderLanes) === 0;
+}
+
 export function getEntangledLanes(root: FiberRoot, renderLanes: Lanes): Lanes {
   let entangledLanes = renderLanes;
 
@@ -670,6 +706,7 @@ export function markRootUpdated(root: FiberRoot, updateLane: Lane) {
   if (updateLane !== IdleLane) {
     root.suspendedLanes = NoLanes;
     root.pingedLanes = NoLanes;
+    root.warmLanes = NoLanes;
   }
 }
 
@@ -677,10 +714,19 @@ export function markRootSuspended(
   root: FiberRoot,
   suspendedLanes: Lanes,
   spawnedLane: Lane,
+  didSkipSuspendedSiblings: boolean,
 ) {
   root.suspendedLanes |= suspendedLanes;
   root.pingedLanes &= ~suspendedLanes;
 
+  if (!didSkipSuspendedSiblings) {
+    // Mark these lanes as warm so we know there's nothing else to work on.
+    root.warmLanes |= suspendedLanes;
+  } else {
+    // Render unwound without attempting all the siblings. Do no mark the lanes
+    // as warm. This will cause a prewarm render to be scheduled.
+  }
+
   // The suspended lanes are no longer CPU-bound. Clear their expiration times.
   const expirationTimes = root.expirationTimes;
   let lanes = suspendedLanes;
@@ -700,6 +746,9 @@ export function markRootSuspended(
 
 export function markRootPinged(root: FiberRoot, pingedLanes: Lanes) {
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
+  // The data that just resolved could have unblocked additional children, which
+  // will also need to be prewarmed if something suspends again.
+  root.warmLanes &= ~pingedLanes;
 }
 
 export function markRootFinished(
@@ -714,6 +763,7 @@ export function markRootFinished(
   // Let's try everything again
   root.suspendedLanes = NoLanes;
   root.pingedLanes = NoLanes;
+  root.warmLanes = NoLanes;
 
   root.expiredLanes &= remainingLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.js b/packages/react-reconciler/src/ReactFiberNewContext.js
index 57004e499b..bf28da19ce 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.js
@@ -825,10 +825,16 @@ function readContextForConsumer_withSelect<C>(
 
       // This is the first dependency for this component. Create a new list.
       lastContextDependency = contextItem;
-      consumer.dependencies = {
-        lanes: NoLanes,
-        firstContext: contextItem,
-      };
+      consumer.dependencies = __DEV__
+        ? {
+            lanes: NoLanes,
+            firstContext: contextItem,
+            _debugThenableState: null,
+          }
+        : {
+            lanes: NoLanes,
+            firstContext: contextItem,
+          };
       if (enableLazyContextPropagation) {
         consumer.flags |= NeedsPropagation;
       }
@@ -869,10 +875,16 @@ function readContextForConsumer<C>(
 
       // This is the first dependency for this component. Create a new list.
       lastContextDependency = contextItem;
-      consumer.dependencies = {
-        lanes: NoLanes,
-        firstContext: contextItem,
-      };
+      consumer.dependencies = __DEV__
+        ? {
+            lanes: NoLanes,
+            firstContext: contextItem,
+            _debugThenableState: null,
+          }
+        : {
+            lanes: NoLanes,
+            firstContext: contextItem,
+          };
       if (enableLazyContextPropagation) {
         consumer.flags |= NeedsPropagation;
       }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.js b/packages/react-reconciler/src/ReactFiberRoot.js
index 27590743ad..f62a5d7158 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.js
@@ -75,6 +75,7 @@ function FiberRootNode(
   this.pendingLanes = NoLanes;
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
+  this.warmLanes = NoLanes;
   this.expiredLanes = NoLanes;
   this.finishedLanes = NoLanes;
   this.errorRecoveryDisabledLanes = NoLanes;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 40eed7a713..69546293d3 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -43,6 +43,7 @@ import {
   disableLegacyMode,
   disableDefaultPropsExceptForClasses,
   disableStringRefs,
+  enableSiblingPrerendering,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import is from 'shared/objectIs';
@@ -160,6 +161,7 @@ import {
   SyncUpdateLanes,
   UpdateLanes,
   claimNextTransitionLane,
+  checkIfRootIsPrerendering,
 } from './ReactFiberLane';
 import {
   DiscreteEventPriority,
@@ -328,6 +330,15 @@ const SuspendedOnHydration: SuspendedReason = 8;
 let workInProgressSuspendedReason: SuspendedReason = NotSuspended;
 let workInProgressThrownValue: mixed = null;
 
+// Tracks whether any siblings were skipped during the unwind phase after
+// something suspends. Used to determine whether to schedule another render
+// to prewarm the skipped siblings.
+let workInProgressRootDidSkipSuspendedSiblings: boolean = false;
+// Whether the work-in-progress render is the result of a prewarm/prerender.
+// This tells us whether or not we should render the siblings after
+// something suspends.
+let workInProgressRootIsPrerendering: boolean = false;
+
 // Whether a ping listener was attached during this render. This is slightly
 // different that whether something suspended, because we don't add multiple
 // listeners to a promise we've already seen (per root and lane).
@@ -730,6 +741,7 @@ export function scheduleUpdateOnFiber(
       root,
       workInProgressRootRenderLanes,
       workInProgressDeferredLane,
+      workInProgressRootDidSkipSuspendedSiblings,
     );
   }
 
@@ -796,6 +808,7 @@ export function scheduleUpdateOnFiber(
           root,
           workInProgressRootRenderLanes,
           workInProgressDeferredLane,
+          workInProgressRootDidSkipSuspendedSiblings,
         );
       }
     }
@@ -908,7 +921,12 @@ export function performConcurrentWorkOnRoot(
         // The render unwound without completing the tree. This happens in special
         // cases where need to exit the current render without producing a
         // consistent tree or committing.
-        markRootSuspended(root, lanes, NoLane);
+        markRootSuspended(
+          root,
+          lanes,
+          NoLane,
+          workInProgressRootDidSkipSuspendedSiblings,
+        );
       } else {
         // The render completed.
 
@@ -964,7 +982,12 @@ export function performConcurrentWorkOnRoot(
         }
         if (exitStatus === RootFatalErrored) {
           prepareFreshStack(root, NoLanes);
-          markRootSuspended(root, lanes, NoLane);
+          markRootSuspended(
+            root,
+            lanes,
+            NoLane,
+            workInProgressRootDidSkipSuspendedSiblings,
+          );
           break;
         }
 
@@ -1087,7 +1110,12 @@ function finishConcurrentRender(
         // This is a transition, so we should exit without committing a
         // placeholder and without scheduling a timeout. Delay indefinitely
         // until we receive more data.
-        markRootSuspended(root, lanes, workInProgressDeferredLane);
+        markRootSuspended(
+          root,
+          lanes,
+          workInProgressDeferredLane,
+          workInProgressRootDidSkipSuspendedSiblings,
+        );
         return;
       }
       // Commit the placeholder.
@@ -1131,7 +1159,12 @@ function finishConcurrentRender(
 
       // Don't bother with a very short suspense time.
       if (msUntilTimeout > 10) {
-        markRootSuspended(root, lanes, workInProgressDeferredLane);
+        markRootSuspended(
+          root,
+          lanes,
+          workInProgressDeferredLane,
+          workInProgressRootDidSkipSuspendedSiblings,
+        );
 
         const nextLanes = getNextLanes(root, NoLanes);
         if (nextLanes !== NoLanes) {
@@ -1155,6 +1188,7 @@ function finishConcurrentRender(
             workInProgressRootDidIncludeRecursiveRenderUpdate,
             lanes,
             workInProgressDeferredLane,
+            workInProgressRootDidSkipSuspendedSiblings,
           ),
           msUntilTimeout,
         );
@@ -1169,6 +1203,7 @@ function finishConcurrentRender(
       workInProgressRootDidIncludeRecursiveRenderUpdate,
       lanes,
       workInProgressDeferredLane,
+      workInProgressRootDidSkipSuspendedSiblings,
     );
   }
 }
@@ -1181,6 +1216,7 @@ function commitRootWhenReady(
   didIncludeRenderPhaseUpdate: boolean,
   lanes: Lanes,
   spawnedLane: Lane,
+  didSkipSuspendedSiblings: boolean,
 ) {
   // TODO: Combine retry throttling with Suspensey commits. Right now they run
   // one after the other.
@@ -1220,7 +1256,7 @@ function commitRootWhenReady(
           didIncludeRenderPhaseUpdate,
         ),
       );
-      markRootSuspended(root, lanes, spawnedLane);
+      markRootSuspended(root, lanes, spawnedLane, didSkipSuspendedSiblings);
       return;
     }
   }
@@ -1332,6 +1368,7 @@ function markRootSuspended(
   root: FiberRoot,
   suspendedLanes: Lanes,
   spawnedLane: Lane,
+  didSkipSuspendedSiblings: boolean,
 ) {
   // When suspending, we should always exclude lanes that were pinged or (more
   // rarely, since we try to avoid it) updated during the render phase.
@@ -1340,7 +1377,12 @@ function markRootSuspended(
     suspendedLanes,
     workInProgressRootInterleavedUpdatedLanes,
   );
-  _markRootSuspended(root, suspendedLanes, spawnedLane);
+  _markRootSuspended(
+    root,
+    suspendedLanes,
+    spawnedLane,
+    didSkipSuspendedSiblings,
+  );
 }
 
 // This is the entry point for synchronous tasks that don't go
@@ -1392,7 +1434,7 @@ export function performSyncWorkOnRoot(root: FiberRoot, lanes: Lanes): null {
 
   if (exitStatus === RootFatalErrored) {
     prepareFreshStack(root, NoLanes);
-    markRootSuspended(root, lanes, NoLane);
+    markRootSuspended(root, lanes, NoLane, false);
     ensureRootIsScheduled(root);
     return null;
   }
@@ -1401,7 +1443,12 @@ export function performSyncWorkOnRoot(root: FiberRoot, lanes: Lanes): null {
     // The render unwound without completing the tree. This happens in special
     // cases where need to exit the current render without producing a
     // consistent tree or committing.
-    markRootSuspended(root, lanes, workInProgressDeferredLane);
+    markRootSuspended(
+      root,
+      lanes,
+      workInProgressDeferredLane,
+      workInProgressRootDidSkipSuspendedSiblings,
+    );
     ensureRootIsScheduled(root);
     return null;
   }
@@ -1635,6 +1682,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   workInProgressRootRenderLanes = lanes;
   workInProgressSuspendedReason = NotSuspended;
   workInProgressThrownValue = null;
+  workInProgressRootDidSkipSuspendedSiblings = false;
+  workInProgressRootIsPrerendering = checkIfRootIsPrerendering(root, lanes);
   workInProgressRootDidAttachPingListener = false;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootSkippedLanes = NoLanes;
@@ -1700,6 +1749,10 @@ function handleThrow(root: FiberRoot, thrownValue: any): void {
     // deprecate the old API in favor of `use`.
     thrownValue = getSuspendedThenable();
     workInProgressSuspendedReason =
+      // TODO: Suspending the work loop during the render phase is
+      // currently not compatible with sibling prerendering. We will add
+      // this optimization back in a later step.
+      !enableSiblingPrerendering &&
       shouldRemainOnPreviousScreen() &&
       // Check if there are other pending updates that might possibly unblock this
       // component from suspending. This mirrors the check in
@@ -1935,6 +1988,7 @@ export function renderDidSuspendDelayIfPossible(): void {
       workInProgressRoot,
       workInProgressRootRenderLanes,
       workInProgressDeferredLane,
+      workInProgressRootDidSkipSuspendedSiblings,
     );
   }
 }
@@ -2584,7 +2638,30 @@ function throwAndUnwindWorkLoop(
 
   if (unitOfWork.flags & Incomplete) {
     // Unwind the stack until we reach the nearest boundary.
-    unwindUnitOfWork(unitOfWork);
+    let skipSiblings;
+    if (!enableSiblingPrerendering) {
+      skipSiblings = true;
+    } else {
+      if (
+        // The current algorithm for both hydration and error handling assumes
+        // that the tree is rendered sequentially. So we always skip the siblings.
+        getIsHydrating() ||
+        workInProgressSuspendedReason === SuspendedOnError
+      ) {
+        skipSiblings = true;
+        // We intentionally don't set workInProgressRootDidSkipSuspendedSiblings,
+        // because we don't want to trigger another prerender attempt.
+      } else if (!workInProgressRootIsPrerendering) {
+        // This is not a prerender. Skip the siblings during this render. A
+        // separate prerender will be scheduled for later.
+        skipSiblings = true;
+        workInProgressRootDidSkipSuspendedSiblings = true;
+      } else {
+        // This is a prerender. Don't skip the siblings.
+        skipSiblings = false;
+      }
+    }
+    unwindUnitOfWork(unitOfWork, skipSiblings);
   } else {
     // Although the fiber suspended, we're intentionally going to commit it in
     // an inconsistent state. We can do this safely in cases where we know the
@@ -2620,15 +2697,16 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   // sibling. If there are no more siblings, return to the parent fiber.
   let completedWork: Fiber = unitOfWork;
   do {
-    if (__DEV__) {
-      if ((completedWork.flags & Incomplete) !== NoFlags) {
-        // NOTE: If we re-enable sibling prerendering in some cases, this branch
-        // is where we would switch to the unwinding path.
-        console.error(
-          'Internal React error: Expected this fiber to be complete, but ' +
-            "it isn't. It should have been unwound. This is a bug in React.",
-        );
-      }
+    if ((completedWork.flags & Incomplete) !== NoFlags) {
+      // This fiber did not complete, because one of its children did not
+      // complete. Switch to unwinding the stack instead of completing it.
+      //
+      // The reason "unwind" and "complete" is interleaved is because when
+      // something suspends, we continue rendering the siblings even though
+      // they will be replaced by a fallback.
+      const skipSiblings = workInProgressRootDidSkipSuspendedSiblings;
+      unwindUnitOfWork(completedWork, skipSiblings);
+      return;
     }
 
     // The current, flushed, state of this fiber is the alternate. Ideally
@@ -2692,7 +2770,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
-function unwindUnitOfWork(unitOfWork: Fiber): void {
+function unwindUnitOfWork(unitOfWork: Fiber, skipSiblings: boolean): void {
   let incompleteWork: Fiber = unitOfWork;
   do {
     // The current, flushed, state of this fiber is the alternate. Ideally
@@ -2749,9 +2827,14 @@ function unwindUnitOfWork(unitOfWork: Fiber): void {
       returnFiber.deletions = null;
     }
 
-    // NOTE: If we re-enable sibling prerendering in some cases, here we
-    // would switch to the normal completion path: check if a sibling
-    // exists, and if so, begin work on it.
+    if (!skipSiblings) {
+      const siblingFiber = incompleteWork.sibling;
+      if (siblingFiber !== null) {
+        // This branch will return us to the normal work loop.
+        workInProgress = siblingFiber;
+        return;
+      }
+    }
 
     // Otherwise, return to the parent
     // $FlowFixMe[incompatible-type] we bail out when we get a null
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 4549253ba7..d160aa0d22 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -37,6 +37,7 @@ import type {
 } from './ReactFiberTracingMarkerComponent';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates';
 import type {ComponentStackNode} from 'react-server/src/ReactFizzComponentStack';
+import type {ThenableState} from './ReactFiberThenable';
 
 // Unwind Circular: moved from ReactFiberHooks.old
 export type HookType =
@@ -81,7 +82,7 @@ export type Dependencies = {
     | ContextDependency<mixed>
     | ContextDependencyWithSelect<mixed>
     | null,
-  ...
+  _debugThenableState?: null | ThenableState, // DEV-only
 };
 
 export type MemoCache = {
@@ -255,6 +256,7 @@ type BaseFiberRootProperties = {
   pendingLanes: Lanes,
   suspendedLanes: Lanes,
   pingedLanes: Lanes,
+  warmLanes: Lanes,
   expiredLanes: Lanes,
   errorRecoveryDisabledLanes: Lanes,
   shellSuspendCounter: number,
diff --git a/packages/react-reconciler/src/__tests__/ActivitySuspense-test.js b/packages/react-reconciler/src/__tests__/ActivitySuspense-test.js
index d02ae70e52..c2a29c8f21 100644
--- a/packages/react-reconciler/src/__tests__/ActivitySuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ActivitySuspense-test.js
@@ -215,7 +215,15 @@ describe('Activity Suspense', () => {
         );
       });
     });
-    assertLog(['Open', 'Suspend! [Async]', 'Loading...']);
+    assertLog([
+      'Open',
+      'Suspend! [Async]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Open', 'Suspend! [Async]', 'Loading...']
+        : []),
+    ]);
     // It should suspend with delay to prevent the already-visible Suspense
     // boundary from switching to a fallback
     expect(root).toMatchRenderedOutput(<span>Closed</span>);
@@ -276,7 +284,15 @@ describe('Activity Suspense', () => {
         );
       });
     });
-    assertLog(['Open', 'Suspend! [Async]', 'Loading...']);
+    assertLog([
+      'Open',
+      'Suspend! [Async]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Open', 'Suspend! [Async]', 'Loading...']
+        : []),
+    ]);
     // It should suspend with delay to prevent the already-visible Suspense
     // boundary from switching to a fallback
     expect(root).toMatchRenderedOutput(
diff --git a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
index 03e04e8b1d..21fb672752 100644
--- a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
@@ -349,7 +349,14 @@ describe('act warnings', () => {
           root.render(<App showMore={true} />);
         });
       });
-      assertLog(['Suspend! [Async]', 'Loading...']);
+      assertLog([
+        'Suspend! [Async]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [Async]', 'Loading...']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput('(empty)');
 
       // This is a ping, not a retry, because no fallback is showing.
diff --git a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
index ad4c2d5e97..4cf830876b 100644
--- a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
@@ -297,7 +297,15 @@ describe('ReactAsyncActions', () => {
     // This will schedule an update on C, and also the async action scope
     // will end. This will allow React to attempt to render the updates.
     await act(() => resolveText('Wait before updating C'));
-    assertLog(['Async action ended', 'Pending: false', 'Suspend! [A1]']);
+    assertLog([
+      'Async action ended',
+      'Pending: false',
+      'Suspend! [A1]',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Pending: false', 'Suspend! [A1]', 'Suspend! [B1]', 'Suspend! [C1]']
+        : []),
+    ]);
     expect(root).toMatchRenderedOutput(
       <>
         <span>Pending: true</span>
@@ -309,7 +317,15 @@ describe('ReactAsyncActions', () => {
     // together, only when the all of A, B, and C updates are unblocked is the
     // render allowed to proceed.
     await act(() => resolveText('A1'));
-    assertLog(['Pending: false', 'A1', 'Suspend! [B1]']);
+    assertLog([
+      'Pending: false',
+      'A1',
+      'Suspend! [B1]',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Pending: false', 'A1', 'Suspend! [B1]', 'Suspend! [C1]']
+        : []),
+    ]);
     expect(root).toMatchRenderedOutput(
       <>
         <span>Pending: true</span>
@@ -317,7 +333,16 @@ describe('ReactAsyncActions', () => {
       </>,
     );
     await act(() => resolveText('B1'));
-    assertLog(['Pending: false', 'A1', 'B1', 'Suspend! [C1]']);
+    assertLog([
+      'Pending: false',
+      'A1',
+      'B1',
+      'Suspend! [C1]',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Pending: false', 'A1', 'B1', 'Suspend! [C1]']
+        : []),
+    ]);
     expect(root).toMatchRenderedOutput(
       <>
         <span>Pending: true</span>
@@ -690,6 +715,10 @@ describe('ReactAsyncActions', () => {
       // automatically reverted.
       'Pending: false',
       'Suspend! [B]',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Pending: false', 'Suspend! [B]']
+        : []),
     ]);
 
     // Resolve the transition
diff --git a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
index d640f87205..b36164fca2 100644
--- a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
@@ -231,7 +231,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     });
     // Inner contents suspended, so we continue showing a fallback.
-    assertLog(['Suspend! [Inner]']);
+    assertLog([
+      'Suspend! [Inner]',
+
+      ...(gate('enableSiblingPrerendering') ? ['Suspend! [Inner]'] : []),
+    ]);
     expect(root).toMatchRenderedOutput(
       <>
         Outer
diff --git a/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
index 1af61323fc..cec34dc722 100644
--- a/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
@@ -209,7 +209,16 @@ describe('ReactConcurrentErrorRecovery', () => {
         root.render(<App step={2} />);
       });
     });
-    assertLog(['Suspend! [A2]', 'Loading...', 'Suspend! [B2]', 'Loading...']);
+    assertLog([
+      'Suspend! [A2]',
+      'Loading...',
+      'Suspend! [B2]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A2]', 'Loading...', 'Suspend! [B2]', 'Loading...']
+        : []),
+    ]);
     // Because this is a refresh, we don't switch to a fallback
     expect(root).toMatchRenderedOutput('A1B1');
 
@@ -220,7 +229,16 @@ describe('ReactConcurrentErrorRecovery', () => {
 
     // Because we're still suspended on A, we can't show an error boundary. We
     // should wait for A to resolve.
-    assertLog(['Suspend! [A2]', 'Loading...', 'Error! [B2]', 'Oops!']);
+    assertLog([
+      'Suspend! [A2]',
+      'Loading...',
+      'Error! [B2]',
+      'Oops!',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A2]', 'Loading...', 'Error! [B2]', 'Oops!']
+        : []),
+    ]);
     // Remain on previous screen.
     expect(root).toMatchRenderedOutput('A1B1');
 
@@ -281,7 +299,16 @@ describe('ReactConcurrentErrorRecovery', () => {
         root.render(<App step={2} />);
       });
     });
-    assertLog(['Suspend! [A2]', 'Loading...', 'Suspend! [B2]', 'Loading...']);
+    assertLog([
+      'Suspend! [A2]',
+      'Loading...',
+      'Suspend! [B2]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A2]', 'Loading...', 'Suspend! [B2]', 'Loading...']
+        : []),
+    ]);
     // Because this is a refresh, we don't switch to a fallback
     expect(root).toMatchRenderedOutput('A1B1');
 
@@ -292,7 +319,16 @@ describe('ReactConcurrentErrorRecovery', () => {
 
     // Because we're still suspended on B, we can't show an error boundary. We
     // should wait for B to resolve.
-    assertLog(['Error! [A2]', 'Oops!', 'Suspend! [B2]', 'Loading...']);
+    assertLog([
+      'Error! [A2]',
+      'Oops!',
+      'Suspend! [B2]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Error! [A2]', 'Oops!', 'Suspend! [B2]', 'Loading...']
+        : []),
+    ]);
     // Remain on previous screen.
     expect(root).toMatchRenderedOutput('A1B1');
 
@@ -328,7 +364,11 @@ describe('ReactConcurrentErrorRecovery', () => {
         root.render(<AsyncText text="Async" />);
       });
     });
-    assertLog(['Suspend! [Async]']);
+    assertLog([
+      'Suspend! [Async]',
+
+      ...(gate('enableSiblingPrerendering') ? ['Suspend! [Async]'] : []),
+    ]);
     expect(root).toMatchRenderedOutput(null);
 
     // This also works if the suspended component is wrapped with an error
@@ -344,7 +384,11 @@ describe('ReactConcurrentErrorRecovery', () => {
         );
       });
     });
-    assertLog(['Suspend! [Async]']);
+    assertLog([
+      'Suspend! [Async]',
+
+      ...(gate('enableSiblingPrerendering') ? ['Suspend! [Async]'] : []),
+    ]);
     expect(root).toMatchRenderedOutput(null);
 
     // Continues rendering once data resolves
@@ -397,8 +441,14 @@ describe('ReactConcurrentErrorRecovery', () => {
           );
         });
       });
-      assertLog(['Suspend! [Async]']);
-      // The render suspended without committing or surfacing the error.
+      assertLog([
+        'Suspend! [Async]',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [Async]', 'Caught an error: Oops!']
+          : []),
+      ]);
+      // The render suspended without committing the error.
       expect(root).toMatchRenderedOutput(null);
 
       // Try the reverse order, too: throw then suspend
@@ -414,7 +464,13 @@ describe('ReactConcurrentErrorRecovery', () => {
           );
         });
       });
-      assertLog(['Suspend! [Async]']);
+      assertLog([
+        'Suspend! [Async]',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [Async]', 'Caught an error: Oops!']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput(null);
 
       await act(async () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js b/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
index b2c38696cc..bf4ecd02eb 100644
--- a/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
@@ -420,6 +420,8 @@ describe('ReactDeferredValue', () => {
         // The initial value suspended, so we attempt the final value, which
         // also suspends.
         'Suspend! [Final]',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend! [Final]'] : []),
       ]);
       expect(root).toMatchRenderedOutput(null);
 
@@ -459,6 +461,8 @@ describe('ReactDeferredValue', () => {
         // The initial value suspended, so we attempt the final value, which
         // also suspends.
         'Suspend! [Final]',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend! [Final]'] : []),
       ]);
       expect(root).toMatchRenderedOutput(null);
 
@@ -531,6 +535,8 @@ describe('ReactDeferredValue', () => {
         // The initial value suspended, so we attempt the final value, which
         // also suspends.
         'Suspend! [Final]',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend! [Final]'] : []),
       ]);
       expect(root).toMatchRenderedOutput(null);
 
@@ -540,6 +546,8 @@ describe('ReactDeferredValue', () => {
         'Loading...',
         // Still waiting for the final value.
         'Suspend! [Final]',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend! [Final]'] : []),
       ]);
       expect(root).toMatchRenderedOutput('Loading...');
 
@@ -584,6 +592,8 @@ describe('ReactDeferredValue', () => {
         // boundaries work, where we always prefer to show the innermost
         // loading state.)
         'Suspend! [Content]',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend! [Content]'] : []),
       ]);
       // Still showing the App preview state because the inner
       // content suspended.
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 1d659cae3c..50fc167709 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -652,7 +652,14 @@ describe('ReactExpiration', () => {
       React.startTransition(() => {
         root.render(<App step={1} />);
       });
-      await waitForAll(['Suspend! [A1]', 'Loading...']);
+      await waitForAll([
+        'Suspend! [A1]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [A1]', 'B', 'C', 'Loading...']
+          : []),
+      ]);
 
       // Lots of time elapses before the promise resolves
       Scheduler.unstable_advanceTime(10000);
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index b0d1182278..640a3d467e 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -652,14 +652,22 @@ describe('ReactHooksWithNoopRenderer', () => {
       React.startTransition(() => {
         root.render(<Foo signal={false} />);
       });
-      await waitForAll(['Suspend!']);
+      await waitForAll([
+        'Suspend!',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend!'] : []),
+      ]);
       expect(root).toMatchRenderedOutput(<span prop={0} />);
 
       // Rendering again should suspend again.
       React.startTransition(() => {
         root.render(<Foo signal={false} />);
       });
-      await waitForAll(['Suspend!']);
+      await waitForAll([
+        'Suspend!',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend!'] : []),
+      ]);
     });
 
     it('discards render phase updates if something suspends, but not other updates in the same component', async () => {
@@ -709,14 +717,22 @@ describe('ReactHooksWithNoopRenderer', () => {
           setLabel('B');
         });
 
-        await waitForAll(['Suspend!']);
+        await waitForAll([
+          'Suspend!',
+
+          ...(gate('enableSiblingPrerendering') ? ['Suspend!'] : []),
+        ]);
         expect(root).toMatchRenderedOutput(<span prop="A:0" />);
 
         // Rendering again should suspend again.
         React.startTransition(() => {
           root.render(<Foo signal={false} />);
         });
-        await waitForAll(['Suspend!']);
+        await waitForAll([
+          'Suspend!',
+
+          ...(gate('enableSiblingPrerendering') ? ['Suspend!'] : []),
+        ]);
 
         // Flip the signal back to "cancel" the update. However, the update to
         // label should still proceed. It shouldn't have been dropped.
@@ -3495,6 +3511,13 @@ describe('ReactHooksWithNoopRenderer', () => {
           'Before... Pending: true',
           'Suspend! [After... Pending: false]',
           'Loading... Pending: false',
+
+          ...(gate('enableSiblingPrerendering')
+            ? [
+                'Suspend! [After... Pending: false]',
+                'Loading... Pending: false',
+              ]
+            : []),
         ]);
         expect(ReactNoop).toMatchRenderedOutput(
           <span prop="Before... Pending: true" />,
@@ -3563,7 +3586,17 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       await act(async () => {
         _setText('B');
-        await waitForAll(['B', 'A', 'B', 'Suspend! [B]', 'Loading']);
+        await waitForAll([
+          'B',
+          'A',
+          'B',
+          'Suspend! [B]',
+          'Loading',
+
+          ...(gate('enableSiblingPrerendering')
+            ? ['B', 'Suspend! [B]', 'Loading']
+            : []),
+        ]);
         await waitForAll([]);
         expect(ReactNoop).toMatchRenderedOutput(
           <>
@@ -4201,7 +4234,13 @@ describe('ReactHooksWithNoopRenderer', () => {
     await act(async () => {
       await resolveText('A');
     });
-    assertLog(['Promise resolved [A]', 'A', 'Suspend! [B]']);
+    assertLog([
+      'Promise resolved [A]',
+      'A',
+      'Suspend! [B]',
+
+      ...(gate('enableSiblingPrerendering') ? ['A', 'Suspend! [B]'] : []),
+    ]);
 
     await act(() => {
       root.render(null);
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 22ffbfc4f0..b6c4227496 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -198,7 +198,11 @@ describe('ReactLazy', () => {
 
     await resolveFakeImport(Foo);
 
-    await waitForAll(['Foo']);
+    await waitForAll([
+      'Foo',
+
+      ...(gate('enableSiblingPrerendering') ? ['Foo'] : []),
+    ]);
     expect(root).not.toMatchRenderedOutput('FooBar');
 
     await act(() => resolveFakeImport(Bar));
@@ -235,6 +239,13 @@ describe('ReactLazy', () => {
     assertConsoleErrorDev([
       'Expected the result of a dynamic import() call',
       'Expected the result of a dynamic import() call',
+
+      ...(gate('enableSiblingPrerendering')
+        ? [
+            'Expected the result of a dynamic import() call',
+            'Expected the result of a dynamic import() call',
+          ]
+        : []),
     ]);
     expect(root).not.toMatchRenderedOutput('Hi');
   });
@@ -1072,7 +1083,7 @@ describe('ReactLazy', () => {
     expect(ref.current).toBe(null);
 
     await act(() => resolveFakeImport(Foo));
-    assertLog(['Foo']);
+    assertLog(['Foo', ...(gate('enableSiblingPrerendering') ? ['Foo'] : [])]);
 
     await act(() => resolveFakeImport(ForwardRefBar));
     assertLog(['Foo', 'forwardRef', 'Bar']);
@@ -1388,7 +1399,12 @@ describe('ReactLazy', () => {
     expect(root).not.toMatchRenderedOutput('AB');
 
     await act(() => resolveFakeImport(ChildA));
-    assertLog(['A', 'Init B']);
+    assertLog([
+      'A',
+      'Init B',
+
+      ...(gate('enableSiblingPrerendering') ? ['A'] : []),
+    ]);
 
     await act(() => resolveFakeImport(ChildB));
     assertLog(['A', 'B', 'Did mount: A', 'Did mount: B']);
@@ -1472,10 +1488,20 @@ describe('ReactLazy', () => {
     React.startTransition(() => {
       root.update(<Parent swap={true} />);
     });
-    await waitForAll(['Init B2', 'Loading...']);
+    await waitForAll([
+      'Init B2',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering') ? ['Loading...'] : []),
+    ]);
     await act(() => resolveFakeImport(ChildB2));
     // We need to flush to trigger the second one to load.
-    assertLog(['Init A2', 'Loading...']);
+    assertLog([
+      'Init A2',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering') ? ['Loading...'] : []),
+    ]);
     await act(() => resolveFakeImport(ChildA2));
     assertLog(['b', 'a', 'Did update: b', 'Did update: a']);
     expect(root).toMatchRenderedOutput('ba');
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 88c6e38160..164d3a9599 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -136,6 +136,10 @@ describe('ReactSuspense', () => {
       // A suspends
       'Suspend! [A]',
       'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Foo', 'Bar', 'Suspend! [A]', 'B', 'Loading...']
+        : []),
     ]);
     expect(container.textContent).toEqual('');
 
@@ -275,7 +279,15 @@ describe('ReactSuspense', () => {
     expect(container.textContent).toEqual('Loading...');
 
     await resolveText('A');
-    await waitForAll(['A', 'Suspend! [B]', 'Loading more...']);
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading more...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A', 'Suspend! [B]', 'Loading more...']
+        : []),
+    ]);
 
     // By this point, we have enough info to show "A" and "Loading more..."
     // However, we've just shown the outer fallback. So we'll delay
@@ -327,7 +339,14 @@ describe('ReactSuspense', () => {
     // B starts loading. Parent boundary is in throttle.
     // Still shows parent loading under throttle
     jest.advanceTimersByTime(10);
-    await waitForAll(['Suspend! [B]', 'Loading more...']);
+    await waitForAll([
+      'Suspend! [B]',
+      'Loading more...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A', 'Suspend! [B]', 'Loading more...']
+        : []),
+    ]);
     expect(container.textContent).toEqual('Loading...');
 
     // !! B could have finished before the throttle, but we show a fallback.
@@ -361,7 +380,15 @@ describe('ReactSuspense', () => {
     expect(container.textContent).toEqual('Loading...');
 
     await resolveText('A');
-    await waitForAll(['A', 'Suspend! [B]', 'Loading more...']);
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading more...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A', 'Suspend! [B]', 'Loading more...']
+        : []),
+    ]);
 
     // By this point, we have enough info to show "A" and "Loading more..."
     // However, we've just shown the outer fallback. So we'll delay
@@ -655,7 +682,14 @@ describe('ReactSuspense', () => {
 
     assertLog(['Suspend! [Child 1]', 'Loading...']);
     await resolveText('Child 1');
-    await waitForAll(['Child 1', 'Suspend! [Child 2]']);
+    await waitForAll([
+      'Child 1',
+      'Suspend! [Child 2]',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Child 1', 'Suspend! [Child 2]']
+        : []),
+    ]);
 
     jest.advanceTimersByTime(6000);
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index e013757516..688ff38a74 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -1150,7 +1150,19 @@ describe('ReactSuspenseEffectsSemantics', () => {
       await act(async () => {
         await resolveText('InnerAsync_1');
       });
-      assertLog(['Text:Outer render', 'Suspend:OuterAsync_1']);
+      assertLog([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+
+        ...(gate('enableSiblingPrerendering')
+          ? [
+              'Text:Outer render',
+              'Suspend:OuterAsync_1',
+              'Text:Inner render',
+              'AsyncText:InnerAsync_1 render',
+            ]
+          : []),
+      ]);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
           <span prop="Outer" hidden={true} />
@@ -1194,6 +1206,17 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Inner render',
         'Suspend:InnerAsync_2',
         'Text:InnerFallback render',
+
+        ...(gate('enableSiblingPrerendering')
+          ? [
+              'Text:Outer render',
+              'AsyncText:OuterAsync_1 render',
+              'Text:Inner render',
+              'Suspend:InnerAsync_2',
+              'Text:InnerFallback render',
+            ]
+          : []),
+
         'Text:OuterFallback destroy layout',
         'Text:Outer create layout',
         'AsyncText:OuterAsync_1 create layout',
@@ -2305,6 +2328,15 @@ describe('ReactSuspenseEffectsSemantics', () => {
         'Text:Function render',
         'AsyncText:Async_1 render',
         'Suspend:Async_2',
+
+        ...(gate('enableSiblingPrerendering')
+          ? [
+              'Text:Function render',
+              'AsyncText:Async_1 render',
+              'Suspend:Async_2',
+              'ClassText:Class render',
+            ]
+          : []),
       ]);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
@@ -2443,7 +2475,20 @@ describe('ReactSuspenseEffectsSemantics', () => {
       await act(async () => {
         await resolveText('A');
       });
-      assertLog(['Text:Function render', 'Suspender "B" render', 'Suspend:B']);
+      assertLog([
+        'Text:Function render',
+        'Suspender "B" render',
+        'Suspend:B',
+
+        ...(gate('enableSiblingPrerendering')
+          ? [
+              'Text:Function render',
+              'Suspender "B" render',
+              'Suspend:B',
+              'ClassText:Class render',
+            ]
+          : []),
+      ]);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
           <span prop="Function" hidden={true} />
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index 8ccced15b3..5d0d297bad 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -383,7 +383,13 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => B.resolve());
-    assertLog(['A', 'B', 'Suspend! [C]']);
+    assertLog([
+      'A',
+      'B',
+      'Suspend! [C]',
+
+      ...(gate('enableSiblingPrerendering') ? ['A', 'B', 'Suspend! [C]'] : []),
+    ]);
 
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -459,7 +465,13 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => B.resolve());
-    assertLog(['A', 'B', 'Suspend! [C]']);
+    assertLog([
+      'A',
+      'B',
+      'Suspend! [C]',
+
+      ...(gate('enableSiblingPrerendering') ? ['A', 'B', 'Suspend! [C]'] : []),
+    ]);
 
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -767,7 +779,12 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => B.resolve());
-    assertLog(['B', 'Suspend! [C]']);
+    assertLog([
+      'B',
+      'Suspend! [C]',
+
+      ...(gate('enableSiblingPrerendering') ? ['B', 'Suspend! [C]'] : []),
+    ]);
 
     // Even though we could now show B, we're still waiting on C.
     expect(ReactNoop).toMatchRenderedOutput(
@@ -854,7 +871,12 @@ describe('ReactSuspenseList', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
 
     await act(() => B.resolve());
-    assertLog(['B', 'Suspend! [C]']);
+    assertLog([
+      'B',
+      'Suspend! [C]',
+
+      ...(gate('enableSiblingPrerendering') ? ['B', 'Suspend! [C]'] : []),
+    ]);
 
     // Even though we could now show B, we're still waiting on C.
     expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
@@ -908,7 +930,12 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => A.resolve());
-    assertLog(['A', 'Suspend! [B]']);
+    assertLog([
+      'A',
+      'Suspend! [B]',
+
+      ...(gate('enableSiblingPrerendering') ? ['A', 'Suspend! [B]'] : []),
+    ]);
 
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -967,7 +994,12 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => C.resolve());
-    assertLog(['C', 'Suspend! [B]']);
+    assertLog([
+      'C',
+      'Suspend! [B]',
+
+      ...(gate('enableSiblingPrerendering') ? ['C', 'Suspend! [B]'] : []),
+    ]);
 
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -1072,7 +1104,12 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => A.resolve());
-    assertLog(['A', 'Suspend! [C]']);
+    assertLog([
+      'A',
+      'Suspend! [C]',
+
+      ...(gate('enableSiblingPrerendering') ? ['A', 'Suspend! [C]'] : []),
+    ]);
 
     // Even though we could show A, it is still in a fallback state because
     // C is not yet resolved. We need to resolve everything in the head first.
@@ -1088,7 +1125,13 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => C.resolve());
-    assertLog(['A', 'C', 'Suspend! [E]']);
+    assertLog([
+      'A',
+      'C',
+      'Suspend! [E]',
+
+      ...(gate('enableSiblingPrerendering') ? ['A', 'C', 'Suspend! [E]'] : []),
+    ]);
 
     // We can now resolve the full head.
     expect(ReactNoop).toMatchRenderedOutput(
@@ -1103,7 +1146,12 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => E.resolve());
-    assertLog(['E', 'Suspend! [F]']);
+    assertLog([
+      'E',
+      'Suspend! [F]',
+
+      ...(gate('enableSiblingPrerendering') ? ['E', 'Suspend! [F]'] : []),
+    ]);
 
     // In the tail we can resolve one-by-one.
     expect(ReactNoop).toMatchRenderedOutput(
@@ -1267,7 +1315,12 @@ describe('ReactSuspenseList', () => {
 
     await F.resolve();
 
-    await waitForAll(['Suspend! [D]', 'F']);
+    await waitForAll([
+      'Suspend! [D]',
+      'F',
+
+      ...(gate('enableSiblingPrerendering') ? ['Suspend! [D]', 'F'] : []),
+    ]);
 
     // Even though we could show F, it is still in a fallback state because
     // E is not yet resolved. We need to resolve everything in the head first.
@@ -1287,7 +1340,13 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => D.resolve());
-    assertLog(['D', 'F', 'Suspend! [B]']);
+    assertLog([
+      'D',
+      'F',
+      'Suspend! [B]',
+
+      ...(gate('enableSiblingPrerendering') ? ['D', 'F', 'Suspend! [B]'] : []),
+    ]);
 
     // We can now resolve the full head.
     expect(ReactNoop).toMatchRenderedOutput(
@@ -1304,7 +1363,12 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => B.resolve());
-    assertLog(['B', 'Suspend! [A]']);
+    assertLog([
+      'B',
+      'Suspend! [A]',
+
+      ...(gate('enableSiblingPrerendering') ? ['B', 'Suspend! [A]'] : []),
+    ]);
 
     // In the tail we can resolve one-by-one.
     expect(ReactNoop).toMatchRenderedOutput(
@@ -1429,7 +1493,15 @@ describe('ReactSuspenseList', () => {
 
     await A.resolve();
 
-    await waitForAll(['A', 'Suspend! [B]', 'Loading B']);
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A', 'Suspend! [B]', 'Loading B']
+        : []),
+    ]);
 
     // Incremental loading is suspended.
     jest.advanceTimersByTime(500);
@@ -1443,7 +1515,15 @@ describe('ReactSuspenseList', () => {
 
     await B.resolve();
 
-    await waitForAll(['B', 'Suspend! [C]', 'Loading C']);
+    await waitForAll([
+      'B',
+      'Suspend! [C]',
+      'Loading C',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['B', 'Suspend! [C]', 'Loading C']
+        : []),
+    ]);
 
     // Incremental loading is suspended.
     jest.advanceTimersByTime(500);
@@ -1667,7 +1747,12 @@ describe('ReactSuspenseList', () => {
 
     await B.resolve();
 
-    await waitForAll(['B', 'Suspend! [C]']);
+    await waitForAll([
+      'B',
+      'Suspend! [C]',
+
+      ...(gate('enableSiblingPrerendering') ? ['B', 'Suspend! [C]'] : []),
+    ]);
 
     // Incremental loading is suspended.
     jest.advanceTimersByTime(500);
@@ -1687,7 +1772,17 @@ describe('ReactSuspenseList', () => {
     await C.resolve();
     await E.resolve();
 
-    await waitForAll(['B', 'C', 'E', 'Suspend! [F]', 'Loading F']);
+    await waitForAll([
+      'B',
+      'C',
+      'E',
+      'Suspend! [F]',
+      'Loading F',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['B', 'C', 'E', 'Suspend! [F]', 'Loading F']
+        : []),
+    ]);
 
     jest.advanceTimersByTime(500);
 
@@ -1804,7 +1899,12 @@ describe('ReactSuspenseList', () => {
 
     await D.resolve();
 
-    await waitForAll(['D', 'Suspend! [E]']);
+    await waitForAll([
+      'D',
+      'Suspend! [E]',
+
+      ...(gate('enableSiblingPrerendering') ? ['D', 'Suspend! [E]'] : []),
+    ]);
 
     // Incremental loading is suspended.
     jest.advanceTimersByTime(500);
@@ -1829,7 +1929,17 @@ describe('ReactSuspenseList', () => {
     await D.resolve();
     await E.resolve();
 
-    await waitForAll(['D', 'E', 'B', 'Suspend! [A]', 'Loading A']);
+    await waitForAll([
+      'D',
+      'E',
+      'B',
+      'Suspend! [A]',
+      'Loading A',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['D', 'E', 'B', 'Suspend! [A]', 'Loading A']
+        : []),
+    ]);
 
     jest.advanceTimersByTime(500);
 
@@ -1958,7 +2068,12 @@ describe('ReactSuspenseList', () => {
 
     await B.resolve();
 
-    await waitForAll(['B', 'Suspend! [C]']);
+    await waitForAll([
+      'B',
+      'Suspend! [C]',
+
+      ...(gate('enableSiblingPrerendering') ? ['B', 'Suspend! [C]'] : []),
+    ]);
 
     // Incremental loading is suspended.
     jest.advanceTimersByTime(500);
@@ -1981,7 +2096,17 @@ describe('ReactSuspenseList', () => {
     await D.resolve();
     await E.resolve();
 
-    await waitForAll(['C', 'D', 'E', 'Suspend! [F]', 'Loading F']);
+    await waitForAll([
+      'C',
+      'D',
+      'E',
+      'Suspend! [F]',
+      'Loading F',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['C', 'D', 'E', 'Suspend! [F]', 'Loading F']
+        : []),
+    ]);
 
     jest.advanceTimersByTime(500);
 
@@ -2044,7 +2169,15 @@ describe('ReactSuspenseList', () => {
 
     await A.resolve();
 
-    await waitForAll(['A', 'Suspend! [B]', 'Loading B']);
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading B',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A', 'Suspend! [B]', 'Loading B']
+        : []),
+    ]);
 
     // Incremental loading is suspended.
     jest.advanceTimersByTime(500);
@@ -2052,7 +2185,15 @@ describe('ReactSuspenseList', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
 
     await act(() => B.resolve());
-    assertLog(['B', 'Suspend! [C]', 'Loading C']);
+    assertLog([
+      'B',
+      'Suspend! [C]',
+      'Loading C',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['B', 'Suspend! [C]', 'Loading C']
+        : []),
+    ]);
 
     // Incremental loading is suspended.
     jest.advanceTimersByTime(500);
@@ -2787,7 +2928,12 @@ describe('ReactSuspenseList', () => {
     expect(onRender.mock.calls[2][3]).toBe(1 + 4 + 3 + 3);
 
     await act(() => C.resolve());
-    assertLog(['C', 'Suspend! [D]']);
+    assertLog([
+      'C',
+      'Suspend! [D]',
+
+      ...(gate('enableSiblingPrerendering') ? ['C', 'Suspend! [D]'] : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(
       <>
         <span>A</span>
@@ -2873,7 +3019,12 @@ describe('ReactSuspenseList', () => {
     );
 
     await act(() => A.resolve());
-    assertLog(['A', 'Suspend! [B]']);
+    assertLog([
+      'A',
+      'Suspend! [B]',
+
+      ...(gate('enableSiblingPrerendering') ? ['A', 'Suspend! [B]'] : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(
       <>
         <span>A</span>
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index a0b0670726..f41de1c169 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -298,6 +298,19 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // We immediately unwind and switch to a fallback without
       // rendering siblings.
       'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? [
+            'Foo',
+            'Bar',
+            // A suspends
+            'Suspend! [A]',
+            'B',
+            // We immediately unwind and switch to a fallback without
+            // rendering siblings.
+            'Loading...',
+          ]
+        : []),
     ]);
     expect(ReactNoop).toMatchRenderedOutput(null);
 
@@ -379,7 +392,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
 
     // B suspends. Render a fallback
-    await waitForAll(['A', 'Suspend! [B]', 'Loading...']);
+    await waitForAll([
+      'A',
+      'Suspend! [B]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A', 'Suspend! [B]', 'C', 'D', 'Loading...']
+        : []),
+    ]);
     // Did not commit yet.
     expect(ReactNoop).toMatchRenderedOutput(null);
 
@@ -436,7 +457,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     React.startTransition(() => {
       ReactNoop.render(<App renderContent={true} />);
     });
-    await waitForAll(['Suspend! [Result]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [Result]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Result]', 'Loading...']
+        : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(null);
 
     await rejectText('Result', new Error('Failed to load: Result'));
@@ -496,6 +524,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // React retries one more time
       'Error! [Result]',
 
+      ...(gate('enableSiblingPrerendering')
+        ? ['Error! [Result]', 'Error! [Result]']
+        : []),
+
       // Errored again on retry. Now handle it.
       'Caught error: Failed to load: Result',
     ]);
@@ -547,7 +579,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Update the low-pri text
     await act(() => startTransition(() => setLowPri('2')));
     // Suspends
-    assertLog(['Suspend! [2]', 'Loading...']);
+    assertLog([
+      'Suspend! [2]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [2]', 'Loading...']
+        : []),
+    ]);
 
     // While we're still waiting for the low-pri update to complete, update the
     // high-pri text at high priority.
@@ -592,13 +631,27 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     React.startTransition(() => {
       ReactNoop.render(<App showA={true} showB={false} />);
     });
-    await waitForAll(['Suspend! [A]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A]', 'Loading...']
+        : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(null);
 
     React.startTransition(() => {
       ReactNoop.render(<App showA={true} showB={true} />);
     });
-    await waitForAll(['Suspend! [A]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A]', 'B', 'Loading...']
+        : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(null);
 
     await resolveText('A');
@@ -743,6 +796,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Outer content',
       'Suspend! [Inner content]',
       'Loading inner...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Outer content', 'Suspend! [Inner content]', 'Loading inner...']
+        : []),
     ]);
     // Don't commit the inner placeholder yet.
     expect(ReactNoop).toMatchRenderedOutput(
@@ -932,7 +989,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </Suspense>,
       );
     });
-    await waitForAll(['Suspend! [Async]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [Async]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Async]', 'Loading...']
+        : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Resolve the promise
@@ -964,7 +1028,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Schedule an update, and suspend for up to 5 seconds.
     React.startTransition(() => ReactNoop.render(<App text="A" />));
     // The update should suspend.
-    await waitForAll(['Suspend! [A]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A]', 'Loading...']
+        : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
 
     // Advance time until right before it expires.
@@ -976,7 +1047,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Schedule another low priority update.
     React.startTransition(() => ReactNoop.render(<App text="B" />));
     // This update should also suspend.
-    await waitForAll(['Suspend! [B]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [B]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [B]', 'Loading...']
+        : []),
+    ]);
     expect(ReactNoop).toMatchRenderedOutput(<span prop="S" />);
 
     // Schedule a regular update. Its expiration time will fall between
@@ -1747,6 +1825,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // B suspends
         'Suspend! [B]',
         'Loading more...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['A', 'Suspend! [B]', 'Loading more...']
+          : []),
       ]);
       // Because we've already been waiting for so long we can
       // wait a bit longer. Still nothing...
@@ -2238,7 +2320,16 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.render(<Foo showB={true} />);
     });
 
-    await waitForAll(['Foo', 'A', 'Suspend! [B]', 'Loading B...']);
+    await waitForAll([
+      'Foo',
+      'A',
+      'Suspend! [B]',
+      'Loading B...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Foo', 'A', 'Suspend! [B]', 'Loading B...']
+        : []),
+    ]);
 
     // Transitions never fall back.
     expect(ReactNoop).toMatchRenderedOutput(<span prop="A" />);
@@ -2314,7 +2405,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Start transition.
       React.startTransition(() => ReactNoop.render(<App page="B" />));
 
-      await waitForAll(['Suspend! [B]', 'Loading...']);
+      await waitForAll([
+        'Suspend! [B]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [B]', 'Loading...']
+          : []),
+      ]);
       Scheduler.unstable_advanceTime(100000);
       await advanceTimers(100000);
       // Even after lots of time has passed, we have still not yet flushed the
@@ -2365,7 +2463,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
-        await waitForAll(['Suspend! [B]', 'Loading...']);
+        await waitForAll([
+          'Suspend! [B]',
+          'Loading...',
+
+          ...(gate('enableSiblingPrerendering')
+            ? ['Suspend! [B]', 'Loading...']
+            : []),
+        ]);
         Scheduler.unstable_advanceTime(100000);
         await advanceTimers(100000);
         // Even after lots of time has passed, we have still not yet flushed the
@@ -2420,7 +2525,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
-        await waitForAll(['Suspend! [B]', 'Loading...']);
+        await waitForAll([
+          'Suspend! [B]',
+          'Loading...',
+
+          ...(gate('enableSiblingPrerendering')
+            ? ['Suspend! [B]', 'Loading...']
+            : []),
+        ]);
         Scheduler.unstable_advanceTime(100000);
         await advanceTimers(100000);
         // Even after lots of time has passed, we have still not yet flushed the
@@ -2462,7 +2574,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Start transition.
       React.startTransition(() => ReactNoop.render(<App page="B" />));
 
-      await waitForAll(['Suspend! [B]', 'Loading...']);
+      await waitForAll([
+        'Suspend! [B]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [B]', 'Loading...']
+          : []),
+      ]);
       Scheduler.unstable_advanceTime(2999);
       await advanceTimers(2999);
       // Since the timeout is infinite (or effectively infinite),
@@ -2476,7 +2595,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Start a long (infinite) transition.
       React.startTransition(() => ReactNoop.render(<App page="C" />));
-      await waitForAll(['Suspend! [C]', 'Loading...']);
+      await waitForAll([
+        'Suspend! [C]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [C]', 'Loading...']
+          : []),
+      ]);
 
       // Even after lots of time has passed, we have still not yet flushed the
       // loading state.
@@ -2524,7 +2650,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
-        await waitForAll(['Suspend! [B]', 'Loading...']);
+        await waitForAll([
+          'Suspend! [B]',
+          'Loading...',
+
+          ...(gate('enableSiblingPrerendering')
+            ? ['Suspend! [B]', 'Loading...']
+            : []),
+        ]);
 
         Scheduler.unstable_advanceTime(2999);
         await advanceTimers(2999);
@@ -2542,7 +2675,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await act(async () => {
         React.startTransition(() => transitionToPage('C'));
 
-        await waitForAll(['Suspend! [C]', 'Loading...']);
+        await waitForAll([
+          'Suspend! [C]',
+          'Loading...',
+
+          ...(gate('enableSiblingPrerendering')
+            ? ['Suspend! [C]', 'Loading...']
+            : []),
+        ]);
 
         // Even after lots of time has passed, we have still not yet flushed the
         // loading state.
@@ -2594,7 +2734,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
-        await waitForAll(['Suspend! [B]', 'Loading...']);
+        await waitForAll([
+          'Suspend! [B]',
+          'Loading...',
+
+          ...(gate('enableSiblingPrerendering')
+            ? ['Suspend! [B]', 'Loading...']
+            : []),
+        ]);
         Scheduler.unstable_advanceTime(2999);
         await advanceTimers(2999);
         // Since the timeout is infinite (or effectively infinite),
@@ -2611,7 +2758,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await act(async () => {
         React.startTransition(() => transitionToPage('C'));
 
-        await waitForAll(['Suspend! [C]', 'Loading...']);
+        await waitForAll([
+          'Suspend! [C]',
+          'Loading...',
+
+          ...(gate('enableSiblingPrerendering')
+            ? ['Suspend! [C]', 'Loading...']
+            : []),
+        ]);
 
         // Even after lots of time has passed, we have still not yet flushed the
         // loading state.
@@ -2652,7 +2806,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Start transition.
     React.startTransition(() => ReactNoop.render(<App page="B" />));
 
-    await waitForAll(['Hi!', 'Suspend! [B]', 'Loading B...']);
+    await waitForAll([
+      'Hi!',
+      'Suspend! [B]',
+      'Loading B...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Hi!', 'Suspend! [B]', 'Loading B...']
+        : []),
+    ]);
 
     // Suspended
     expect(ReactNoop).toMatchRenderedOutput(
@@ -2713,7 +2875,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Start transition.
     React.startTransition(() => ReactNoop.render(<App page="B" />));
 
-    await waitForAll(['Hi!', 'Suspend! [B]', 'Loading B...']);
+    await waitForAll([
+      'Hi!',
+      'Suspend! [B]',
+      'Loading B...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Hi!', 'Suspend! [B]', 'Loading B...']
+        : []),
+    ]);
 
     // Suspended
     expect(ReactNoop).toMatchRenderedOutput(
@@ -2827,7 +2997,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.render(<App showContent={true} />);
     });
 
-    await waitForAll(['Suspend! [A]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A]', 'Loading...']
+        : []),
+    ]);
     await resolveText('A');
     await waitFor(['A', 'Commit']);
     expect(ReactNoop).toMatchRenderedOutput(
@@ -2879,7 +3056,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.render(<App showContent={true} />);
     });
 
-    await waitForAll(['Suspend! [A]', 'Loading...']);
+    await waitForAll([
+      'Suspend! [A]',
+      'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [A]', 'Loading...']
+        : []),
+    ]);
     await resolveText('A');
     await waitFor(['A', 'Commit']);
     expect(ReactNoop).toMatchRenderedOutput(
@@ -3492,6 +3676,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // This regression test relies on subtle implementation details that happen to
+  // rely on sibling prerendering being disabled. Not going to bother to rewrite
+  // it for now; maybe once we land the experiment.
+  // @gate !enableSiblingPrerendering
   // @gate enableLegacyCache
   it('regression: ping at high priority causes update to be dropped', async () => {
     const {useState, useTransition} = React;
@@ -3654,7 +3842,16 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Update to "a". That will suspend.
     await act(async () => {
       setTextWithShortTransition('a');
-      await waitForAll(['Pending...', '', 'Suspend! [a]', 'Loading...']);
+      await waitForAll([
+        'Pending...',
+        '',
+        'Suspend! [a]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [a]', 'Loading...']
+          : []),
+      ]);
     });
     assertLog([]);
     expect(root).toMatchRenderedOutput(
@@ -3673,6 +3870,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         '',
         'Suspend! [b]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [b]', 'Loading...']
+          : []),
       ]);
     });
     assertLog([]);
@@ -3687,7 +3888,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await act(async () => {
       await resolveText('a');
 
-      await waitForAll(['Suspend! [b]', 'Loading...']);
+      await waitForAll([
+        'Suspend! [b]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [b]', 'Loading...']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput(
         <>
           <span prop="Pending..." />
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index 9dcb36c148..a0c4ea8db0 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -199,6 +199,10 @@ describe('ReactTransition', () => {
         '(empty)',
         'Suspend! [Async]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [Async]', 'Loading...']
+          : []),
       ]);
 
       expect(root).toMatchRenderedOutput('Pending...(empty)');
@@ -269,6 +273,10 @@ describe('ReactTransition', () => {
         'B label',
         'Suspend! [B content]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['B label', 'Suspend! [B content]', 'Loading...']
+          : []),
       ]);
       // This is a refresh transition so it shouldn't show a fallback
       expect(root).toMatchRenderedOutput(
@@ -290,6 +298,10 @@ describe('ReactTransition', () => {
         'C label',
         'Suspend! [C content]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['C label', 'Suspend! [C content]', 'Loading...']
+          : []),
       ]);
       expect(root).toMatchRenderedOutput(
         <>
@@ -307,6 +319,10 @@ describe('ReactTransition', () => {
         'C label',
         'Suspend! [C content]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['C label', 'Suspend! [C content]', 'Loading...']
+          : []),
       ]);
       expect(root).toMatchRenderedOutput(
         <>
@@ -394,6 +410,10 @@ describe('ReactTransition', () => {
         'B label',
         'Suspend! [B content]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['B label', 'Suspend! [B content]', 'Loading...']
+          : []),
       ]);
       // This is a refresh transition so it shouldn't show a fallback
       expect(root).toMatchRenderedOutput(
@@ -415,6 +435,10 @@ describe('ReactTransition', () => {
         'C label',
         'Suspend! [C content]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['C label', 'Suspend! [C content]', 'Loading...']
+          : []),
       ]);
       expect(root).toMatchRenderedOutput(
         <>
@@ -432,6 +456,10 @@ describe('ReactTransition', () => {
         'C label',
         'Suspend! [C content]',
         'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['C label', 'Suspend! [C content]', 'Loading...']
+          : []),
       ]);
       expect(root).toMatchRenderedOutput(
         <>
@@ -500,7 +528,14 @@ describe('ReactTransition', () => {
           setShowA(true);
         });
       });
-      assertLog(['Suspend! [A]', 'Loading...']);
+      assertLog([
+        'Suspend! [A]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [A]', 'Loading...']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput(null);
 
       // Before A loads, switch to B. This should entangle A with B.
@@ -510,7 +545,14 @@ describe('ReactTransition', () => {
           setShowB(true);
         });
       });
-      assertLog(['Suspend! [B]', 'Loading...']);
+      assertLog([
+        'Suspend! [B]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [B]', 'Loading...']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput(null);
 
       // Before A or B loads, switch to C. This should entangle C with B, and
@@ -521,7 +563,14 @@ describe('ReactTransition', () => {
           setShowC(true);
         });
       });
-      assertLog(['Suspend! [C]', 'Loading...']);
+      assertLog([
+        'Suspend! [C]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [C]', 'Loading...']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput(null);
 
       // Now the data starts resolving out of order.
@@ -533,7 +582,14 @@ describe('ReactTransition', () => {
           resolveText('B');
         });
       });
-      assertLog(['Suspend! [C]', 'Loading...']);
+      assertLog([
+        'Suspend! [C]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [C]', 'Loading...']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput(null);
 
       // Now resolve A. Again, this will attempt to render C, since everything
@@ -543,7 +599,14 @@ describe('ReactTransition', () => {
           resolveText('A');
         });
       });
-      assertLog(['Suspend! [C]', 'Loading...']);
+      assertLog([
+        'Suspend! [C]',
+        'Loading...',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend! [C]', 'Loading...']
+          : []),
+      ]);
       expect(root).toMatchRenderedOutput(null);
 
       // Finally, resolve C. This time we can finish.
@@ -861,6 +924,10 @@ describe('ReactTransition', () => {
       // Suspend.
       'Suspend! [Async]',
       'Loading...',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['Suspend! [Async]', 'Normal pri: 0', 'Loading...']
+        : []),
     ]);
     expect(root).toMatchRenderedOutput('(empty), Normal pri: 0');
 
diff --git a/packages/react-reconciler/src/__tests__/ReactUse-test.js b/packages/react-reconciler/src/__tests__/ReactUse-test.js
index 1dae8a56dd..c562d43dc3 100644
--- a/packages/react-reconciler/src/__tests__/ReactUse-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactUse-test.js
@@ -558,6 +558,7 @@ describe('ReactUse', () => {
     }
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('during a transition, can unwrap async operations even if nothing is cached', async () => {
     function App() {
       return <Text text={use(getAsyncText('Async'))} />;
@@ -593,6 +594,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('Async');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it("does not prevent a Suspense fallback from showing if it's a new boundary, even during a transition", async () => {
     function App() {
       return <Text text={use(getAsyncText('Async'))} />;
@@ -635,6 +637,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('Async');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('when waiting for data to resolve, a fresh update will trigger a restart', async () => {
     function App() {
       return <Text text={use(getAsyncText('Will never resolve'))} />;
@@ -666,6 +669,7 @@ describe('ReactUse', () => {
     assertLog(['Something different']);
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('when waiting for data to resolve, an update on a different root does not cause work to be dropped', async () => {
     const promise = getAsyncText('Hi');
 
@@ -708,6 +712,7 @@ describe('ReactUse', () => {
     expect(root1).toMatchRenderedOutput('Hi');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('while suspended, hooks cannot be called (i.e. current dispatcher is unset correctly)', async () => {
     function App() {
       return <Text text={use(getAsyncText('Will never resolve'))} />;
@@ -845,6 +850,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('(empty)');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('when replaying a suspended component, reuses the hooks computed during the previous attempt (Memo)', async () => {
     function ExcitingText({text}) {
       // This computes the uppercased version of some text. Pretend it's an
@@ -894,6 +900,7 @@ describe('ReactUse', () => {
     ]);
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('when replaying a suspended component, reuses the hooks computed during the previous attempt (State)', async () => {
     let _setFruit;
     let _setVegetable;
@@ -950,6 +957,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('banana dill');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('when replaying a suspended component, reuses the hooks computed during the previous attempt (DebugValue+State)', async () => {
     // Make sure we don't get a Hook mismatch warning on updates if there were non-stateful Hooks before the use().
     let _setLawyer;
@@ -991,6 +999,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('aguacate avocat');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it(
     'wrap an async function with useMemo to skip running the function ' +
       'twice when loading new data',
@@ -1057,13 +1066,25 @@ describe('ReactUse', () => {
     await act(() => {
       resolveTextRequests('A');
     });
-    assertLog(['A', '(Loading B...)']);
+    assertLog([
+      'A',
+      '(Loading B...)',
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A', '(Loading C...)', '(Loading B...)']
+        : []),
+    ]);
     expect(root).toMatchRenderedOutput('A(Loading B...)');
 
     await act(() => {
       resolveTextRequests('B');
     });
-    assertLog(['B', '(Loading C...)']);
+    assertLog([
+      'B',
+      '(Loading C...)',
+
+      ...(gate('enableSiblingPrerendering') ? ['B', '(Loading C...)'] : []),
+    ]);
     expect(root).toMatchRenderedOutput('AB(Loading C...)');
 
     await act(() => {
@@ -1073,6 +1094,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('ABC');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('load multiple nested Suspense boundaries (uncached requests)', async () => {
     // This the same as the previous test, except the requests are not cached.
     // The tree should still eventually resolve, despite the
@@ -1196,6 +1218,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('Hi');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('basic async component', async () => {
     async function App() {
       await getAsyncText('Hi');
@@ -1220,6 +1243,7 @@ describe('ReactUse', () => {
     expect(root).toMatchRenderedOutput('Hi');
   });
 
+  // @gate enableSuspendingDuringWorkLoop
   it('async child of a non-function component (e.g. a class)', async () => {
     class App extends React.Component {
       async render() {
@@ -1856,16 +1880,26 @@ describe('ReactUse', () => {
 
     await expect(async () => {
       await act(() => resolveTextRequests('Hi'));
-    }).toErrorDev(
+    }).toErrorDev([
       // We get this warning because the generator's promise themselves are not cached.
       'A component was suspended by an uncached promise. Creating ' +
         'promises inside a Client Component or hook is not yet ' +
         'supported, except via a Suspense-compatible library or framework.',
-    );
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A component was suspended by an uncached promise.']
+        : []),
+    ]);
 
     assertLog(['Async text requested [World]']);
 
-    await act(() => resolveTextRequests('World'));
+    if (gate('enableSiblingPrerendering')) {
+      await expect(async () => {
+        await act(() => resolveTextRequests('World'));
+      }).toErrorDev(['A component was suspended by an uncached promise.']);
+    } else {
+      await act(() => resolveTextRequests('World'));
+    }
 
     assertLog(['Hi', 'World']);
     expect(root).toMatchRenderedOutput('Hi World');
@@ -1901,16 +1935,26 @@ describe('ReactUse', () => {
 
     await expect(async () => {
       await act(() => resolveTextRequests('Hi'));
-    }).toErrorDev(
+    }).toErrorDev([
       // We get this warning because the generator's promise themselves are not cached.
       'A component was suspended by an uncached promise. Creating ' +
         'promises inside a Client Component or hook is not yet ' +
         'supported, except via a Suspense-compatible library or framework.',
-    );
+
+      ...(gate('enableSiblingPrerendering')
+        ? ['A component was suspended by an uncached promise.']
+        : []),
+    ]);
 
     assertLog(['Async text requested [World]']);
 
-    await act(() => resolveTextRequests('World'));
+    if (gate('enableSiblingPrerendering')) {
+      await expect(async () => {
+        await act(() => resolveTextRequests('World'));
+      }).toErrorDev(['A component was suspended by an uncached promise.']);
+    } else {
+      await act(() => resolveTextRequests('World'));
+    }
 
     assertLog(['Hi', 'World']);
     expect(root).toMatchRenderedOutput(<div>Hi World</div>);
diff --git a/packages/react-reconciler/src/__tests__/useMemoCache-test.js b/packages/react-reconciler/src/__tests__/useMemoCache-test.js
index a3dbeeb38c..8a9b0da68d 100644
--- a/packages/react-reconciler/src/__tests__/useMemoCache-test.js
+++ b/packages/react-reconciler/src/__tests__/useMemoCache-test.js
@@ -559,13 +559,26 @@ describe('useMemoCache()', () => {
         root.render(<App chunkA={updatedChunkA} chunkB={updatedChunkB} />);
       });
     });
-    assertLog(['Suspend! [chunkA]']);
+    assertLog([
+      'Suspend! [chunkA]',
+
+      ...(gate('enableSiblingPrerendering') ? ['Suspend! [chunkA]'] : []),
+    ]);
 
     // The data starts to stream in. Loading the data in the first chunk
     // triggers an expensive computation in the UI. Later, we'll test whether
     // this computation is reused.
     await act(() => updatedChunkA.resolve('A2'));
-    assertLog(['Some expensive processing... [A2]', 'Suspend! [chunkB]']);
+    assertLog([
+      'Some expensive processing... [A2]',
+      'Suspend! [chunkB]',
+
+      ...(gate('enableSiblingPrerendering')
+        ? gate('enableNoCloningMemoCache')
+          ? ['Suspend! [chunkB]']
+          : ['Some expensive processing... [A2]', 'Suspend! [chunkB]']
+        : []),
+    ]);
 
     // The second chunk hasn't loaded yet, so we're still showing the
     // initial UI.
@@ -586,11 +599,22 @@ describe('useMemoCache()', () => {
     if (gate(flags => flags.enableNoCloningMemoCache)) {
       // We did not have process the first chunk again. We reused the
       // computation from the earlier attempt.
-      assertLog(['Suspend! [chunkB]']);
+      assertLog([
+        'Suspend! [chunkB]',
+
+        ...(gate('enableSiblingPrerendering') ? ['Suspend! [chunkB]'] : []),
+      ]);
     } else {
       // Because we clone/reset the memo cache after every aborted attempt, we
       // must process the first chunk again.
-      assertLog(['Some expensive processing... [A2]', 'Suspend! [chunkB]']);
+      assertLog([
+        'Some expensive processing... [A2]',
+        'Suspend! [chunkB]',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Some expensive processing... [A2]', 'Suspend! [chunkB]']
+          : []),
+      ]);
     }
 
     expect(root).toMatchRenderedOutput(
diff --git a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
index 52dbc45e24..17e5fe26c0 100644
--- a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
+++ b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
@@ -274,6 +274,10 @@ describe('useSyncExternalStore', () => {
         // This should a synchronous re-render of A using the updated value. In
         // this test, this causes A to suspend.
         'Suspend A',
+
+        ...(gate('enableSiblingPrerendering')
+          ? ['Suspend A', 'B: Updated']
+          : []),
       ]);
       // Nothing has committed, because A suspended and no fallback
       // was provided.
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 6ced58a32b..b970955491 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -83,6 +83,10 @@ function getTestFlags() {
       enableActivity: releaseChannel === 'experimental' || www || xplat,
       enableSuspenseList: releaseChannel === 'experimental' || www || xplat,
       enableLegacyHidden: www,
+      // TODO: Suspending the work loop during the render phase is currently
+      // not compatible with sibling prerendering. We will add this optimization
+      // back in a later step.
+      enableSuspendingDuringWorkLoop: !featureFlags.enableSiblingPrerendering,
 
       // This flag is used to determine whether we should run Fizz tests using
       // the external runtime or the inline script runtime.