From 914b57be27a8697d8ed83266466b30378af379f0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Apr 2020 19:37:27 -0700
Subject: [PATCH] Move legacy hidden API to new internal Fiber type (#18782)

* Unhide Suspense trees without entanglement

When a Suspense boundary is in its fallback state, you cannot switch
back to the main content without also finishing any updates inside the
tree that might have been skipped. That would be a form of tearing.

Before we fixed this in #18411, the way this bug manifested was that a
boundary was suspended by an update that originated from a child
component (as opposed to props from a parent). While the fallback was
showing, it received another update, this time at high priority. React
would render the high priority update without also including the
original update. That would cause the fallback to switch back to the
main content, since the update that caused the tree to suspend was no
longer part of the render. But then, React would immediately try to
render the original update, which would again suspend and show the
fallback, leading to a momentary flicker in the UI.

The approach added in #18411 is, when receiving a high priority update
to a Suspense tree that's in its fallback state is to bail out, keep
showing the fallback and finish the update in the rest of the tree.
After that commits, render again at the original priority. Because low
priority expiration times are inclusive of higher priority expiration
times, this ensures that all the updates are committed together.

The new approach in this commit is to turn `renderExpirationTime` into a
context-like value that lives on the stack. Then, when unhiding the
Suspense boundary, we can push a new `renderExpirationTime` that is
inclusive of both the high pri update and the original update that
suspended. Then the boundary can be unblocked in a single render pass.

An advantage of the old approach is that by deferring the work of
unhiding, there's less work to do in the high priority update.

The key advantage of the new approach is that it solves the consistency
problem without having to entangle the entire root.

* Create internal LegacyHidden type

This only exists so we can clean up the internal implementation of
`<div hidden={isHidden} />`, which is not a stable feature. The goal
is to move everything to the new Offscreen type instead. However,
Offscreen has different semantics, so before we can remove the legacy
API, we have to migrate our internal usage at Facebook. So we'll need
to maintain both temporarily.

In this initial commit, I've only added the type. It's not used
anywhere. The next step is to use it to implement `hidden`.

* Use LegacyHidden to implement old hidden API

If a host component receives a `hidden` prop, we wrap its children in
an Offscreen fiber. This is similar to what we do for Suspense children.

The LegacyHidden type happens to share the same implementation as the
new Offscreen type, for now, but using separate types allows us to fork
the behavior later when we implement our planned changes to the
Offscreen API.

There are two subtle semantic changes here. One is that the children of
the host component will have their visibility toggled using the same
mechanism we use for Offscreen and Suspense: find the nearest host node
children and give them a style of `display: none`. We didn't used to do
this in the old API, because the `hidden` DOM attribute on the parent
already hides them. So with this change, we're actually "overhiding" the
children. I considered addressing this, but I figure I'll leave it as-is
in case we want to expose the LegacyHidden component type temporarily
to ease migration of Facebook's internal callers to the Offscreen type.

The other subtle semantic change is that, because of the extra fiber
that wraps around the children, this pattern will cause the children
to lose state:

```js
return isHidden ? <div hidden={true} /> : <div />;
```

The reason is that I didn't want to wrap every single host component
in an extra fiber. So I only wrap them if a `hidden` prop exists. In
the above example, that means the children are conditionally wrapped
in an extra fiber, so they don't line up during reconciliation, so
they get remounted every time `isHidden` changes.

The fix is to rewrite to:

```js
return <div hidden={isHidden} />;
```

I don't anticipate this will be a problem at Facebook, especially since
we're only supposed to use `hidden` via a userspace wrapper component.
(And since the bad pattern isn't very React-y, anyway.)

Again, the eventual goal is to delete this completely and replace it
with Offscreen.
---
 .../react-reconciler/src/ReactFiber.new.js    |  27 ++
 .../src/ReactFiberBeginWork.new.js            | 266 +++++++++++-------
 .../src/ReactFiberCommitWork.new.js           |  11 +-
 .../src/ReactFiberCompleteWork.new.js         |   6 +-
 .../src/ReactFiberHydrationContext.new.js     |   3 +-
 .../src/ReactFiberSuspenseComponent.new.js    |   4 -
 .../src/ReactFiberUnwindWork.new.js           |  11 +
 .../src/ReactFiberWorkLoop.new.js             |  25 ++
 .../react-reconciler/src/ReactWorkTags.js     |   4 +-
 .../ReactSuspenseWithNoopRenderer-test.js     | 114 ++++++--
 packages/shared/ReactSymbols.js               |   2 +
 11 files changed, 328 insertions(+), 145 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 2fcd1830c0049..741083a8650cc 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -56,6 +56,7 @@ import {
   ScopeComponent,
   Block,
   OffscreenComponent,
+  LegacyHiddenComponent,
 } from './ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -90,6 +91,7 @@ import {
   REACT_SCOPE_TYPE,
   REACT_BLOCK_TYPE,
   REACT_OFFSCREEN_TYPE,
+  REACT_LEGACY_HIDDEN_TYPE,
 } from 'shared/ReactSymbols';
 
 export type {Fiber};
@@ -521,6 +523,13 @@ export function createFiberFromTypeAndProps(
           expirationTime,
           key,
         );
+      case REACT_LEGACY_HIDDEN_TYPE:
+        return createFiberFromLegacyHidden(
+          pendingProps,
+          mode,
+          expirationTime,
+          key,
+        );
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
@@ -756,6 +765,24 @@ export function createFiberFromOffscreen(
   return fiber;
 }
 
+export function createFiberFromLegacyHidden(
+  pendingProps: OffscreenProps,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTimeOpaque,
+  key: null | string,
+) {
+  const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
+  // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.
+  // This needs to be fixed in getComponentName so that it relies on the tag
+  // instead.
+  if (__DEV__) {
+    fiber.type = REACT_LEGACY_HIDDEN_TYPE;
+  }
+  fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
+  fiber.expirationTime_opaque = expirationTime;
+  return fiber;
+}
+
 export function createFiberFromText(
   content: string,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 398275087968e..576016d2f6945 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -50,6 +50,7 @@ import {
   ScopeComponent,
   Block,
   OffscreenComponent,
+  LegacyHiddenComponent,
 } from './ReactWorkTags';
 import {
   NoEffect,
@@ -79,7 +80,12 @@ import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
-import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
+import {
+  REACT_ELEMENT_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_LEGACY_HIDDEN_TYPE,
+  getIteratorFn,
+} from 'shared/ReactSymbols';
 import {
   getCurrentFiberOwnerNameInDevOrNull,
   setIsRendering,
@@ -187,6 +193,7 @@ import {
   renderDidSuspendDelayIfPossible,
   markUnprocessedUpdateTime,
   getWorkInProgressRoot,
+  pushRenderExpirationTime,
 } from './ReactFiberWorkLoop.new';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
@@ -569,15 +576,67 @@ function updateOffscreenComponent(
   const nextProps: OffscreenProps = workInProgress.pendingProps;
   const nextChildren = nextProps.children;
 
-  if (current !== null) {
-    if (nextProps.mode === 'hidden') {
-      // TODO: Should currently be unreachable because Offscreen is only used as
-      // an implementation detail of Suspense. Once this is a public API, it
-      // will need to create an OffscreenState.
+  const prevState: OffscreenState | null =
+    current !== null ? current.memoizedState : null;
+
+  if (nextProps.mode === 'hidden') {
+    if (
+      !isSameExpirationTime(renderExpirationTime, (Never: ExpirationTimeOpaque))
+    ) {
+      let nextBaseTime;
+      if (prevState !== null) {
+        const prevBaseTime = prevState.baseTime;
+        nextBaseTime = !isSameOrHigherPriority(
+          prevBaseTime,
+          renderExpirationTime,
+        )
+          ? prevBaseTime
+          : renderExpirationTime;
+      } else {
+        nextBaseTime = renderExpirationTime;
+      }
+
+      // Schedule this fiber to re-render at offscreen priority. Then bailout.
+      if (enableSchedulerTracing) {
+        markSpawnedWork((Never: ExpirationTimeOpaque));
+      }
+      workInProgress.expirationTime_opaque = workInProgress.childExpirationTime_opaque = Never;
+      const nextState: OffscreenState = {
+        baseTime: nextBaseTime,
+      };
+      workInProgress.memoizedState = nextState;
+      // We're about to bail out, but we need to push this to the stack anyway
+      // to avoid a push/pop misalignment.
+      pushRenderExpirationTime(workInProgress, nextBaseTime);
+      return null;
     } else {
-      // Clear the offscreen state.
+      // Rendering at offscreen, so we can clear the base time.
+      const nextState: OffscreenState = {
+        baseTime: NoWork,
+      };
+      workInProgress.memoizedState = nextState;
+      pushRenderExpirationTime(workInProgress, renderExpirationTime);
+    }
+  } else {
+    let subtreeRenderTime;
+    if (prevState !== null) {
+      const baseTime = prevState.baseTime;
+      subtreeRenderTime = !isSameOrHigherPriority(
+        baseTime,
+        renderExpirationTime,
+      )
+        ? baseTime
+        : renderExpirationTime;
+
+      // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
+    } else {
+      // We weren't previously hidden, and we still aren't, so there's nothing
+      // special to do. Need to push to the stack regardless, though, to avoid
+      // a push/pop misalignment.
+      subtreeRenderTime = renderExpirationTime;
     }
+    pushRenderExpirationTime(workInProgress, subtreeRenderTime);
   }
 
   reconcileChildren(
@@ -589,6 +648,11 @@ function updateOffscreenComponent(
   return workInProgress.child;
 }
 
+// Note: These happen to have identical begin phases, for now. We shouldn't hold
+// ourselves to this constraint, though. If the behavior diverges, we should
+// fork the function.
+const updateLegacyHiddenComponent = updateOffscreenComponent;
+
 function updateFragment(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -1138,21 +1202,23 @@ function updateHostComponent(
 
   markRef(current, workInProgress);
 
-  // Check the host config to see if the children are offscreen/hidden.
   if (
-    workInProgress.mode & ConcurrentMode &&
-    !isSameExpirationTime(
-      renderExpirationTime,
-      (Never: ExpirationTimeOpaque),
-    ) &&
-    shouldDeprioritizeSubtree(type, nextProps)
+    (workInProgress.mode & ConcurrentMode) !== NoMode &&
+    nextProps.hasOwnProperty('hidden')
   ) {
-    if (enableSchedulerTracing) {
-      markSpawnedWork((Never: ExpirationTimeOpaque));
-    }
-    // Schedule this fiber to re-render at offscreen priority. Then bailout.
-    workInProgress.expirationTime_opaque = workInProgress.childExpirationTime_opaque = Never;
-    return null;
+    const wrappedChildren = {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type: REACT_LEGACY_HIDDEN_TYPE,
+      key: null,
+      ref: null,
+      props: {
+        children: nextChildren,
+        // Check the host config to see if the children are offscreen/hidden.
+        mode: shouldDeprioritizeSubtree(type, nextProps) ? 'hidden' : 'visible',
+      },
+      _owner: __DEV__ ? {} : null,
+    };
+    nextChildren = wrappedChildren;
   }
 
   reconcileChildren(
@@ -1651,33 +1717,32 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
   }
 }
 
-function mountSuspenseState(
+const SUSPENDED_MARKER: SuspenseState = {
+  dehydrated: null,
+  retryTime: NoWork,
+};
+
+function mountSuspenseOffscreenState(
   renderExpirationTime: ExpirationTimeOpaque,
-): SuspenseState {
+): OffscreenState {
   return {
-    dehydrated: null,
     baseTime: renderExpirationTime,
-    retryTime: NoWork,
   };
 }
 
-function updateSuspenseState(
-  prevSuspenseState: SuspenseState,
+function updateSuspenseOffscreenState(
+  prevOffscreenState: OffscreenState,
   renderExpirationTime: ExpirationTimeOpaque,
-): SuspenseState {
-  const prevSuspendedTime = prevSuspenseState.baseTime;
+): OffscreenState {
+  const prevBaseTime = prevOffscreenState.baseTime;
   return {
-    dehydrated: null,
+    // Choose whichever time is inclusive of the other one. This represents
+    // the union of all the levels that suspended.
     baseTime:
-      // Choose whichever time is inclusive of the other one. This represents
-      // the union of all the levels that suspended.
-      !isSameExpirationTime(
-        prevSuspendedTime,
-        (NoWork: ExpirationTimeOpaque),
-      ) && !isSameOrHigherPriority(prevSuspendedTime, renderExpirationTime)
-        ? prevSuspendedTime
+      !isSameExpirationTime(prevBaseTime, (NoWork: ExpirationTimeOpaque)) &&
+      !isSameOrHigherPriority(prevBaseTime, renderExpirationTime)
+        ? prevBaseTime
         : renderExpirationTime,
-    retryTime: NoWork,
   };
 }
 
@@ -1692,19 +1757,7 @@ function shouldRemainOnFallback(
   // For example, SuspenseList coordinates when nested content appears.
   if (current !== null) {
     const suspenseState: SuspenseState = current.memoizedState;
-    if (suspenseState !== null) {
-      // Currently showing a fallback. If the current render includes
-      // the level that triggered the fallback, we must continue showing it,
-      // regardless of what the Suspense context says.
-      const baseTime = suspenseState.baseTime;
-      if (
-        !isSameExpirationTime(baseTime, (NoWork: ExpirationTimeOpaque)) &&
-        !isSameOrHigherPriority(baseTime, renderExpirationTime)
-      ) {
-        return true;
-      }
-      // Otherwise, fall through to check the Suspense context.
-    } else {
+    if (suspenseState === null) {
       // Currently showing content. Don't hide it, even if ForceSuspenseFallack
       // is true. More precise name might be "ForceRemainSuspenseFallback".
       // Note: This is a factoring smell. Can't remain on a fallback if there's
@@ -1712,6 +1765,7 @@ function shouldRemainOnFallback(
       return false;
     }
   }
+
   // Not currently showing content. Consult the Suspense context.
   return hasSuspenseContext(
     suspenseContext,
@@ -1725,20 +1779,6 @@ function getRemainingWorkInPrimaryTree(
   renderExpirationTime,
 ) {
   const currentChildExpirationTime = current.childExpirationTime_opaque;
-  const currentSuspenseState: SuspenseState = current.memoizedState;
-  if (currentSuspenseState !== null) {
-    // This boundary already timed out. Check if this render includes the level
-    // that previously suspended.
-    const baseTime = currentSuspenseState.baseTime;
-    if (
-      !isSameExpirationTime(baseTime, (NoWork: ExpirationTimeOpaque)) &&
-      !isSameOrHigherPriority(baseTime, renderExpirationTime)
-    ) {
-      // There's pending work at a lower level that might now be unblocked.
-      return baseTime;
-    }
-  }
-
   if (
     !isSameOrHigherPriority(currentChildExpirationTime, renderExpirationTime)
   ) {
@@ -1880,8 +1920,10 @@ function updateSuspenseComponent(
         renderExpirationTime,
       );
       const primaryChildFragment: Fiber = (workInProgress.child: any);
-      primaryChildFragment.memoizedState = ({baseTime: NoWork}: OffscreenState);
-      workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);
+      primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
+        renderExpirationTime,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackFragment;
     } else {
       const nextPrimaryChildren = nextProps.children;
@@ -1935,14 +1977,10 @@ function updateSuspenseComponent(
               renderExpirationTime,
             );
             const primaryChildFragment: Fiber = (workInProgress.child: any);
-            primaryChildFragment.memoizedState = ({
-              baseTime: NoWork,
-            }: OffscreenState);
-            workInProgress.memoizedState = updateSuspenseState(
-              current.memoizedState,
+            primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
               renderExpirationTime,
             );
-
+            workInProgress.memoizedState = SUSPENDED_MARKER;
             return fallbackChildFragment;
           }
         }
@@ -1959,18 +1997,21 @@ function updateSuspenseComponent(
           renderExpirationTime,
         );
         const primaryChildFragment: Fiber = (workInProgress.child: any);
-        primaryChildFragment.memoizedState = ({
-          baseTime: NoWork,
-        }: OffscreenState);
+        const prevOffscreenState: OffscreenState | null = (current.child: any)
+          .memoizedState;
+        primaryChildFragment.memoizedState =
+          prevOffscreenState === null
+            ? mountSuspenseOffscreenState(renderExpirationTime)
+            : updateSuspenseOffscreenState(
+                prevOffscreenState,
+                renderExpirationTime,
+              );
         primaryChildFragment.childExpirationTime_opaque = getRemainingWorkInPrimaryTree(
           current,
           workInProgress,
           renderExpirationTime,
         );
-        workInProgress.memoizedState = updateSuspenseState(
-          current.memoizedState,
-          renderExpirationTime,
-        );
+        workInProgress.memoizedState = SUSPENDED_MARKER;
         return fallbackChildFragment;
       } else {
         const nextPrimaryChildren = nextProps.children;
@@ -1997,9 +2038,15 @@ function updateSuspenseComponent(
           renderExpirationTime,
         );
         const primaryChildFragment: Fiber = (workInProgress.child: any);
-        primaryChildFragment.memoizedState = ({
-          baseTime: NoWork,
-        }: OffscreenState);
+        const prevOffscreenState: OffscreenState | null = (current.child: any)
+          .memoizedState;
+        primaryChildFragment.memoizedState =
+          prevOffscreenState === null
+            ? mountSuspenseOffscreenState(renderExpirationTime)
+            : updateSuspenseOffscreenState(
+                prevOffscreenState,
+                renderExpirationTime,
+              );
         primaryChildFragment.childExpirationTime_opaque = getRemainingWorkInPrimaryTree(
           current,
           workInProgress,
@@ -2007,7 +2054,7 @@ function updateSuspenseComponent(
         );
         // Skip the primary children, and continue working on the
         // fallback children.
-        workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);
+        workInProgress.memoizedState = SUSPENDED_MARKER;
         return fallbackChildFragment;
       } else {
         // Still haven't timed out. Continue rendering the children, like we
@@ -3215,21 +3262,6 @@ function beginWork(
           break;
         case HostComponent:
           pushHostContext(workInProgress);
-          if (
-            workInProgress.mode & ConcurrentMode &&
-            !isSameExpirationTime(
-              renderExpirationTime,
-              (Never: ExpirationTimeOpaque),
-            ) &&
-            shouldDeprioritizeSubtree(workInProgress.type, newProps)
-          ) {
-            if (enableSchedulerTracing) {
-              markSpawnedWork((Never: ExpirationTimeOpaque));
-            }
-            // Schedule this fiber to re-render at offscreen priority. Then bailout.
-            workInProgress.expirationTime_opaque = workInProgress.childExpirationTime_opaque = Never;
-            return null;
-          }
           break;
         case ClassComponent: {
           const Component = workInProgress.type;
@@ -3384,6 +3416,23 @@ function beginWork(
             return null;
           }
         }
+        case OffscreenComponent:
+        case LegacyHiddenComponent: {
+          // Need to check if the tree still needs to be deferred. This is
+          // almost identical to the logic used in the normal update path,
+          // so we'll just enter that. The only difference is we'll bail out
+          // at the next level instead of this one, because the child props
+          // have not changed. Which is fine.
+          // TODO: Probably should refactor `beginWork` to split the bailout
+          // path from the normal path. I'm tempted to do a labeled break here
+          // but I won't :)
+          workInProgress.expirationTime_opaque = NoWork;
+          return updateOffscreenComponent(
+            current,
+            workInProgress,
+            renderExpirationTime,
+          );
+        }
       }
       return bailoutOnAlreadyFinishedWork(
         current,
@@ -3536,13 +3585,6 @@ function beginWork(
         renderExpirationTime,
       );
     }
-    case OffscreenComponent: {
-      return updateOffscreenComponent(
-        current,
-        workInProgress,
-        renderExpirationTime,
-      );
-    }
     case SimpleMemoComponent: {
       return updateSimpleMemoComponent(
         current,
@@ -3609,6 +3651,20 @@ function beginWork(
       }
       break;
     }
+    case OffscreenComponent: {
+      return updateOffscreenComponent(
+        current,
+        workInProgress,
+        renderExpirationTime,
+      );
+    }
+    case LegacyHiddenComponent: {
+      return updateLegacyHiddenComponent(
+        current,
+        workInProgress,
+        renderExpirationTime,
+      );
+    }
   }
   invariant(
     false,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 2e430f94b9a1c..1defb7340bf35 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -57,6 +57,7 @@ import {
   ScopeComponent,
   Block,
   OffscreenComponent,
+  LegacyHiddenComponent,
 } from './ReactWorkTags';
 import {
   invokeGuardedCallback,
@@ -817,6 +818,7 @@ function commitLifeCycles(
     case FundamentalComponent:
     case ScopeComponent:
     case OffscreenComponent:
+    case LegacyHiddenComponent:
       return;
   }
   invariant(
@@ -847,7 +849,8 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
           unhideTextInstance(instance, node.memoizedProps);
         }
       } else if (
-        node.tag === OffscreenComponent &&
+        (node.tag === OffscreenComponent ||
+          node.tag === LegacyHiddenComponent) &&
         (node.memoizedState: OffscreenState) !== null &&
         node !== finishedWork
       ) {
@@ -1592,7 +1595,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
         }
         break;
       }
-      case OffscreenComponent: {
+      case OffscreenComponent:
+      case LegacyHiddenComponent: {
         return;
       }
     }
@@ -1731,7 +1735,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       break;
     }
-    case OffscreenComponent: {
+    case OffscreenComponent:
+    case LegacyHiddenComponent: {
       const newState: OffscreenState | null = finishedWork.memoizedState;
       const isHidden = newState !== null;
       hideOrUnhideAllChildren(finishedWork, isHidden);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 620279aced2e8..e801c0e91c829 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -56,6 +56,7 @@ import {
   ScopeComponent,
   Block,
   OffscreenComponent,
+  LegacyHiddenComponent,
 } from './ReactWorkTags';
 import {NoMode, BlockingMode} from './ReactTypeOfMode';
 import {
@@ -131,6 +132,7 @@ import {
   renderDidSuspend,
   renderDidSuspendDelayIfPossible,
   renderHasNotSuspendedYet,
+  popRenderExpirationTime,
 } from './ReactFiberWorkLoop.new';
 import {createFundamentalStateInstance} from './ReactFiberFundamental.new';
 import {Never, isSameOrHigherPriority} from './ReactFiberExpirationTime.new';
@@ -1311,7 +1313,9 @@ function completeWork(
         return null;
       }
       break;
-    case OffscreenComponent: {
+    case OffscreenComponent:
+    case LegacyHiddenComponent: {
+      popRenderExpirationTime(workInProgress);
       if (current !== null) {
         const nextState: OffscreenState | null = workInProgress.memoizedState;
         const prevState: OffscreenState | null = current.memoizedState;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 88d7511cef196..f1ed2e73cccdb 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -55,7 +55,7 @@ import {
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
-import {Never, NoWork} from './ReactFiberExpirationTime.new';
+import {Never} from './ReactFiberExpirationTime.new';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -231,7 +231,6 @@ function tryHydrate(fiber, nextInstance) {
         if (suspenseInstance !== null) {
           const suspenseState: SuspenseState = {
             dehydrated: suspenseInstance,
-            baseTime: NoWork,
             retryTime: Never,
           };
           fiber.memoizedState = suspenseState;
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 26912af8f11a1..a45f1710138fb 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -29,10 +29,6 @@ export type SuspenseState = {|
   // here to indicate that it is dehydrated (flag) and for quick access
   // to check things like isSuspenseInstancePending.
   dehydrated: null | SuspenseInstance,
-  // Represents the work that was deprioritized when we committed the fallback.
-  // The work outside the boundary already committed at this level, so we cannot
-  // unhide the content without including it.
-  baseTime: ExpirationTimeOpaque,
   // Represents the earliest expiration time we should attempt to hydrate
   // a dehydrated boundary at.
   // Never is the default for dehydrated boundaries.
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index d7d5585b5cc41..64bed32254618 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -20,6 +20,8 @@ import {
   ContextProvider,
   SuspenseComponent,
   SuspenseListComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
 } from './ReactWorkTags';
 import {DidCapture, NoEffect, ShouldCapture} from './ReactSideEffectTags';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
@@ -33,6 +35,7 @@ import {
   popTopLevelContextObject as popTopLevelLegacyContextObject,
 } from './ReactFiberContext.new';
 import {popProvider} from './ReactFiberNewContext.new';
+import {popRenderExpirationTime} from './ReactFiberWorkLoop.new';
 
 import invariant from 'shared/invariant';
 
@@ -105,6 +108,10 @@ function unwindWork(
     case ContextProvider:
       popProvider(workInProgress);
       return null;
+    case OffscreenComponent:
+    case LegacyHiddenComponent:
+      popRenderExpirationTime(workInProgress);
+      return null;
     default:
       return null;
   }
@@ -141,6 +148,10 @@ function unwindInterruptedWork(interruptedWork: Fiber) {
     case ContextProvider:
       popProvider(interruptedWork);
       break;
+    case OffscreenComponent:
+    case LegacyHiddenComponent:
+      popRenderExpirationTime(interruptedWork);
+      break;
     default:
       break;
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a6c71a1560cdf..3ad0221b226b1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -15,6 +15,7 @@ import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Effect as HookEffect} from './ReactFiberHooks.new';
+import type {StackCursor} from './ReactFiberStack.new';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -168,6 +169,11 @@ import {
   getIsUpdatingOpaqueValueInRenderPhaseInDEV,
 } from './ReactFiberHooks.new';
 import {createCapturedValue} from './ReactCapturedValue';
+import {
+  push as pushToStack,
+  pop as popFromStack,
+  createCursor,
+} from './ReactFiberStack.new';
 
 import {
   recordCommitTime,
@@ -231,6 +237,12 @@ let workInProgressRoot: FiberRoot | null = null;
 let workInProgress: Fiber | null = null;
 // The expiration time we're rendering
 let renderExpirationTime: ExpirationTimeOpaque = NoWork;
+
+// Stack that allows components to channge renderExpirationTime for its subtree
+const renderExpirationTimeCursor: StackCursor<ExpirationTimeOpaque> = createCursor(
+  NoWork,
+);
+
 // Whether to root completed, errored, suspended, etc.
 let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
 // A fatal error, if one is thrown
@@ -1265,6 +1277,19 @@ export function flushControlled(fn: () => mixed): void {
   }
 }
 
+export function pushRenderExpirationTime(
+  fiber: Fiber,
+  subtreeRenderTime: ExpirationTimeOpaque,
+) {
+  pushToStack(renderExpirationTimeCursor, renderExpirationTime, fiber);
+  renderExpirationTime = subtreeRenderTime;
+}
+
+export function popRenderExpirationTime(fiber: Fiber) {
+  renderExpirationTime = renderExpirationTimeCursor.current;
+  popFromStack(renderExpirationTimeCursor, fiber);
+}
+
 function prepareFreshStack(root, expirationTime) {
   root.finishedWork = null;
   root.finishedExpirationTime_opaque = NoWork;
diff --git a/packages/react-reconciler/src/ReactWorkTags.js b/packages/react-reconciler/src/ReactWorkTags.js
index 56389ed31fb4b..44717fd372e53 100644
--- a/packages/react-reconciler/src/ReactWorkTags.js
+++ b/packages/react-reconciler/src/ReactWorkTags.js
@@ -31,7 +31,8 @@ export type WorkTag =
   | 20
   | 21
   | 22
-  | 23;
+  | 23
+  | 24;
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
@@ -57,3 +58,4 @@ export const FundamentalComponent = 20;
 export const ScopeComponent = 21;
 export const Block = 22;
 export const OffscreenComponent = 23;
+export const LegacyHiddenComponent = 24;
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index f6e7d69382858..bf1f1a696ea2f 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -3180,18 +3180,49 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         });
         setFallbackText('Still loading...');
 
-        expect(Scheduler).toFlushAndYield([
-          // First try to render the high pri update. We won't try to re-render
-          // the suspended tree during this pass, because it still has unfinished
-          // updates at a lower priority.
-          'Loading...',
-
-          // Now try the suspended update again. It's still suspended.
-          'Suspend! [C]',
-
-          // Then complete the update to the fallback.
-          'Still loading...',
-        ]);
+        expect(Scheduler).toFlushAndYield(
+          gate(flags =>
+            flags.new
+              ? [
+                  // First try to render the high pri update. Still suspended.
+                  'Suspend! [C]',
+                  'Loading...',
+
+                  // In the expiration times model, once the high pri update
+                  // suspends, we can't be sure if there's additional work at a
+                  // lower priority that might unblock the tree. We do know that
+                  // there's a lower priority update *somehwere* in the entire
+                  // root, though (the update to the fallback). So we try
+                  // rendering one more time, just in case.
+                  // TODO: We shouldn't need to do this with lanes, because we
+                  // always know exactly which lanes have pending work in
+                  // each tree.
+                  'Suspend! [C]',
+
+                  // Then complete the update to the fallback.
+                  'Still loading...',
+                ]
+              : [
+                  // In the old reconciler, we don't attempt to unhdie the
+                  // Suspense boundary at high priority. Instead, we bailout,
+                  // then try again at the original priority that the component
+                  // suspended. This is mostly an implementation compromise,
+                  // though there are some advantages to this behavior, because
+                  // attempt to unhide could slow down the rest of the update.
+                  //
+                  // Render that only includes the fallback, since we bailed
+                  // out on the primary tree.
+                  'Loading...',
+
+                  // Now try the suspended update again at the original
+                  // priority. It's still suspended.
+                  'Suspend! [C]',
+
+                  // Then complete the update to the fallback.
+                  'Still loading...',
+                ],
+          ),
+        );
         expect(root).toMatchRenderedOutput(
           <>
             <span hidden={true} prop="A" />
@@ -3466,17 +3497,34 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           root.render(<Parent step={1} />);
         });
       });
+
       // Only the outer part can update. The inner part should still show a
       // fallback because we haven't finished loading B yet. Otherwise, the
       // inner text would be inconsistent with the outer text.
-      expect(Scheduler).toHaveYielded([
-        'Outer text: B',
-        'Outer step: 1',
-        'Loading...',
-
-        'Suspend! [Inner text: B]',
-        'Inner step: 1',
-      ]);
+      expect(Scheduler).toHaveYielded(
+        gate(flags =>
+          flags.new
+            ? [
+                'Outer text: B',
+                'Outer step: 1',
+                'Suspend! [Inner text: B]',
+                'Inner step: 1',
+                'Loading...',
+              ]
+            : [
+                // In the old reconciler, we first complete the outside of the
+                // Suspense boundary, then attempt to unhide it in a separate
+                // render at the original priority at which it suspended.
+                // First render:
+                'Outer text: B',
+                'Outer step: 1',
+                'Loading...',
+                // Second render:
+                'Suspend! [Inner text: B]',
+                'Inner step: 1',
+              ],
+        ),
+      );
       expect(root).toMatchRenderedOutput(
         <>
           <span prop="Outer text: B" />
@@ -3595,15 +3643,23 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       });
     });
 
-    expect(Scheduler).toHaveYielded([
-      // First the outer part of the tree updates, at high pri.
-      'Outer: B1',
-      'Loading...',
-
-      // Then we retry the boundary.
-      'Inner: B1',
-      'Commit Child',
-    ]);
+    expect(Scheduler).toHaveYielded(
+      gate(flags =>
+        flags.new
+          ? ['Outer: B1', 'Inner: B1', 'Commit Child']
+          : [
+              // In the old reconciler, we first complete the outside of the
+              // Suspense boundary, then attempt to unhide it in a separate
+              // render at the original priority at which it suspended.
+              // First render:
+              'Outer: B1',
+              'Loading...',
+              // Second render:
+              'Inner: B1',
+              'Commit Child',
+            ],
+      ),
+    );
     expect(root).toMatchRenderedOutput(
       <>
         <span prop="Outer: B1" />
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index bc8122980a740..aef1ec5fbdaf3 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -33,6 +33,7 @@ export let REACT_SCOPE_TYPE = 0xead7;
 export let REACT_OPAQUE_ID_TYPE = 0xeae0;
 export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
 export let REACT_OFFSCREEN_TYPE = 0xeae2;
+export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
 
 if (typeof Symbol === 'function' && Symbol.for) {
   const symbolFor = Symbol.for;
@@ -56,6 +57,7 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
   REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
   REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
 }
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;