Gate legacy hidden (#24047)

* Gate legacy hidden

* Gate tests

* Remove export from experimental

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -3197,7 +3197,7 @@ describe('ReactDOMServerPartialHydration', () => {
  expect(span.innerHTML).toBe('Hidden child');
  });
 
- // @gate experimental || www
+ // @gate www
  it('renders a hidden LegacyHidden component inside a Suspense boundary', async () => {
  const ref = React.createRef();
 
@@ -3225,7 +3225,7 @@ describe('ReactDOMServerPartialHydration', () => {
  expect(span.innerHTML).toBe('Hidden child');
  });
 
- // @gate experimental || www
+ // @gate www
  it('renders a visible LegacyHidden component', async () => {
  const ref = React.createRef();
 

packages/react-dom/src/__tests__/ReactUpdates-test.js

@@ -1302,7 +1302,7 @@ describe('ReactUpdates', () => {
  expect(ops).toEqual(['Foo', 'Bar', 'Baz']);
  });
 
- // @gate experimental || www
+ // @gate www
  it('delays sync updates inside hidden subtrees in Concurrent Mode', () => {
  const container = document.createElement('div');
 

packages/react-reconciler/src/ReactFiber.new.js

@@ -23,6 +23,7 @@ import {
  enableStrictEffects,
  enableProfilerTimer,
  enableScopeAPI,
+ enableLegacyHidden,
  enableSyncDefaultUpdates,
  allowConcurrentByDefault,
  enableTransitionTracing,
@@ -510,7 +511,10 @@ export function createFiberFromTypeAndProps(
  case REACT_OFFSCREEN_TYPE:
  return createFiberFromOffscreen(pendingProps, mode, lanes, key);
  case REACT_LEGACY_HIDDEN_TYPE:
- return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+ if (enableLegacyHidden) {
+ return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+ }
+ // eslint-disable-next-line no-fallthrough
  case REACT_SCOPE_TYPE:
  if (enableScopeAPI) {
  return createFiberFromScope(type, pendingProps, mode, lanes, key);

packages/react-reconciler/src/ReactFiber.old.js

@@ -23,6 +23,7 @@ import {
  enableStrictEffects,
  enableProfilerTimer,
  enableScopeAPI,
+ enableLegacyHidden,
  enableSyncDefaultUpdates,
  allowConcurrentByDefault,
  enableTransitionTracing,
@@ -510,7 +511,10 @@ export function createFiberFromTypeAndProps(
  case REACT_OFFSCREEN_TYPE:
  return createFiberFromOffscreen(pendingProps, mode, lanes, key);
  case REACT_LEGACY_HIDDEN_TYPE:
- return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+ if (enableLegacyHidden) {
+ return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+ }
+ // eslint-disable-next-line no-fallthrough
  case REACT_SCOPE_TYPE:
  if (enableScopeAPI) {
  return createFiberFromScope(type, pendingProps, mode, lanes, key);

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -98,6 +98,7 @@ import {
  enableSchedulingProfiler,
  enablePersistentOffscreenHostContainer,
  enableTransitionTracing,
+ enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -640,7 +641,7 @@ function updateOffscreenComponent(
 
  if (
  nextProps.mode === 'hidden' ||
- nextProps.mode === 'unstable-defer-without-hiding'
+ (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')
  ) {
  // Rendering a hidden tree.
  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
@@ -774,7 +775,7 @@ function updateOffscreenComponent(
  // or some other infra that expects a HostComponent.
  const isHidden =
  nextProps.mode === 'hidden' &&
- workInProgress.tag !== LegacyHiddenComponent;
+ (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent);
  const offscreenContainer = reconcileOffscreenHostContainer(
  current,
  workInProgress,
@@ -3948,7 +3949,14 @@ function beginWork(
  return updateOffscreenComponent(current, workInProgress, renderLanes);
  }
  case LegacyHiddenComponent: {
- return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
+ if (enableLegacyHidden) {
+ return updateLegacyHiddenComponent(
+ current,
+ workInProgress,
+ renderLanes,
+ );
+ }
+ break;
  }
  case CacheComponent: {
  if (enableCache) {

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -98,6 +98,7 @@ import {
  enableSchedulingProfiler,
  enablePersistentOffscreenHostContainer,
  enableTransitionTracing,
+ enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -640,7 +641,7 @@ function updateOffscreenComponent(
 
  if (
  nextProps.mode === 'hidden' ||
- nextProps.mode === 'unstable-defer-without-hiding'
+ (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')
  ) {
  // Rendering a hidden tree.
  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
@@ -774,7 +775,7 @@ function updateOffscreenComponent(
  // or some other infra that expects a HostComponent.
  const isHidden =
  nextProps.mode === 'hidden' &&
- workInProgress.tag !== LegacyHiddenComponent;
+ (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent);
  const offscreenContainer = reconcileOffscreenHostContainer(
  current,
  workInProgress,
@@ -3948,7 +3949,14 @@ function beginWork(
  return updateOffscreenComponent(current, workInProgress, renderLanes);
  }
  case LegacyHiddenComponent: {
- return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
+ if (enableLegacyHidden) {
+ return updateLegacyHiddenComponent(
+ current,
+ workInProgress,
+ renderLanes,
+ );
+ }
+ break;
  }
  case CacheComponent: {
  if (enableCache) {

packages/react-reconciler/src/ReactFiberCompleteWork.new.js

@@ -32,6 +32,7 @@ import type {Cache} from './ReactFiberCacheComponent.new';
 import {
  enableClientRenderFallbackOnHydrationMismatch,
  enableSuspenseAvoidThisFallback,
+ enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
@@ -1499,9 +1500,8 @@ function completeWork(
  const prevIsHidden = prevState !== null;
  if (
  prevIsHidden !== nextIsHidden &&
- newProps.mode !== 'unstable-defer-without-hiding' &&
  // LegacyHidden doesn't do any hiding — it only pre-renders.
- workInProgress.tag !== LegacyHiddenComponent
+ (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent)
  ) {
  workInProgress.flags |= Visibility;
  }
@@ -1519,9 +1519,9 @@ function completeWork(
  // If so, we need to hide those nodes in the commit phase, so
  // schedule a visibility effect.
  if (
- workInProgress.tag !== LegacyHiddenComponent &&
- workInProgress.subtreeFlags & (Placement | Update) &&
- newProps.mode !== 'unstable-defer-without-hiding'
+ (!enableLegacyHidden ||
+  workInProgress.tag !== LegacyHiddenComponent) &&
+ workInProgress.subtreeFlags & (Placement | Update)
  ) {
  workInProgress.flags |= Visibility;
  }

packages/react-reconciler/src/ReactFiberCompleteWork.old.js

@@ -32,6 +32,7 @@ import type {Cache} from './ReactFiberCacheComponent.old';
 import {
  enableClientRenderFallbackOnHydrationMismatch,
  enableSuspenseAvoidThisFallback,
+ enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
@@ -1499,9 +1500,8 @@ function completeWork(
  const prevIsHidden = prevState !== null;
  if (
  prevIsHidden !== nextIsHidden &&
- newProps.mode !== 'unstable-defer-without-hiding' &&
  // LegacyHidden doesn't do any hiding — it only pre-renders.
- workInProgress.tag !== LegacyHiddenComponent
+ (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent)
  ) {
  workInProgress.flags |= Visibility;
  }
@@ -1519,9 +1519,9 @@ function completeWork(
  // If so, we need to hide those nodes in the commit phase, so
  // schedule a visibility effect.
  if (
- workInProgress.tag !== LegacyHiddenComponent &&
- workInProgress.subtreeFlags & (Placement | Update) &&
- newProps.mode !== 'unstable-defer-without-hiding'
+ (!enableLegacyHidden ||
+  workInProgress.tag !== LegacyHiddenComponent) &&
+ workInProgress.subtreeFlags & (Placement | Update)
  ) {
  workInProgress.flags |= Visibility;
  }

packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js

@@ -546,7 +546,7 @@ describe('ReactLazyContextPropagation', () => {
  expect(root).toMatchRenderedOutput('BB');
  });
 
- // @gate experimental || www
+ // @gate www
  test('context is propagated through offscreen trees', async () => {
  const LegacyHidden = React.unstable_LegacyHidden;
 
@@ -592,7 +592,7 @@ describe('ReactLazyContextPropagation', () => {
  expect(root).toMatchRenderedOutput('BB');
  });
 
- // @gate experimental || www
+ // @gate www
  test('multiple contexts are propagated across through offscreen trees', async () => {
  // Same as previous test, but with multiple context providers
  const LegacyHidden = React.unstable_LegacyHidden;
@@ -818,7 +818,7 @@ describe('ReactLazyContextPropagation', () => {
  expect(root).toMatchRenderedOutput('BB');
  });
 
- // @gate experimental || www
+ // @gate www
  test('nested bailouts through offscreen trees', async () => {
  // Lazy context propagation will stop propagating when it hits the first
  // match. If we bail out again inside that tree, we must resume propagating.

packages/react-reconciler/src/__tests__/ReactIncremental-test.js

@@ -270,7 +270,7 @@ describe('ReactIncremental', () => {
  expect(inst.state).toEqual({text: 'bar', text2: 'baz'});
  });
 
- // @gate experimental || www
+ // @gate www
  it('can deprioritize unfinished work and resume it later', () => {
  function Bar(props) {
  Scheduler.unstable_yieldValue('Bar');
@@ -316,7 +316,7 @@ describe('ReactIncremental', () => {
  expect(Scheduler).toFlushAndYield(['Middle', 'Middle']);
  });
 
- // @gate experimental || www
+ // @gate www
  it('can deprioritize a tree from without dropping work', () => {
  function Bar(props) {
  Scheduler.unstable_yieldValue('Bar');
@@ -1999,7 +1999,7 @@ describe('ReactIncremental', () => {
  });
  }
 
- // @gate experimental || www
+ // @gate www
  it('provides context when reusing work', () => {
  class Intl extends React.Component {
  static childContextTypes = {

packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js

@@ -310,7 +310,7 @@ describe('ReactIncrementalErrorHandling', () => {
  expect(ReactNoop.getChildren()).toEqual([span('Everything is fine.')]);
  });
 
- // @gate experimental || www
+ // @gate www
  it('does not include offscreen work when retrying after an error', () => {
  function App(props) {
  if (props.isBroken) {

packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js

@@ -424,7 +424,7 @@ describe('ReactIncrementalSideEffects', () => {
  ]);
  });
 
- // @gate experimental || www
+ // @gate www
  it('preserves a previously rendered node when deprioritized', () => {
  function Middle(props) {
  Scheduler.unstable_yieldValue('Middle');
@@ -475,7 +475,7 @@ describe('ReactIncrementalSideEffects', () => {
  );
  });
 
- // @gate experimental || www
+ // @gate www
  it('can reuse side-effects after being preempted', () => {
  function Bar(props) {
  Scheduler.unstable_yieldValue('Bar');
@@ -555,7 +555,7 @@ describe('ReactIncrementalSideEffects', () => {
  );
  });
 
- // @gate experimental || www
+ // @gate www
  it('can reuse side-effects after being preempted, if shouldComponentUpdate is false', () => {
  class Bar extends React.Component {
  shouldComponentUpdate(nextProps) {
@@ -690,7 +690,7 @@ describe('ReactIncrementalSideEffects', () => {
  expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={3} />);
  });
 
- // @gate experimental || www
+ // @gate www
  it('updates a child even though the old props is empty', () => {
  function Foo(props) {
  return (
@@ -930,7 +930,7 @@ describe('ReactIncrementalSideEffects', () => {
  expect(ops).toEqual(['Bar', 'Baz', 'Bar', 'Bar']);
  });
 
- // @gate experimental || www
+ // @gate www
  it('deprioritizes setStates that happens within a deprioritized tree', () => {
  const barInstances = [];
 

packages/react-reconciler/src/__tests__/ReactNewContext-test.js

@@ -667,7 +667,7 @@ describe('ReactNewContext', () => {
  expect(ReactNoop.getChildren()).toEqual([span(2), span(2)]);
  });
 
- // @gate experimental || www
+ // @gate www
  it("context consumer doesn't bail out inside hidden subtree", () => {
  const Context = React.createContext('dark');
  const Consumer = getConsumer(Context);

packages/react-reconciler/src/__tests__/ReactOffscreen-test.js

@@ -26,7 +26,7 @@ describe('ReactOffscreen', () => {
  return <span prop={props.text} />;
  }
 
- // @gate experimental || www
+ // @gate www
  it('unstable-defer-without-hiding should never toggle the visibility of its children', async () => {
  function App({mode}) {
  return (
@@ -85,7 +85,7 @@ describe('ReactOffscreen', () => {
  );
  });
 
- // @gate experimental || www
+ // @gate www
  it('does not defer in legacy mode', async () => {
  let setState;
  function Foo() {
@@ -130,7 +130,7 @@ describe('ReactOffscreen', () => {
  );
  });
 
- // @gate experimental || www
+ // @gate www
  it('does defer in concurrent mode', async () => {
  let setState;
  function Foo() {
@@ -310,7 +310,7 @@ describe('ReactOffscreen', () => {
  expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
  });
 
- // @gate experimental || www
+ // @gate www
  it('does not toggle effects for LegacyHidden component', async () => {
  // LegacyHidden is meant to be the same as offscreen except it doesn't
  // do anything to effects. Only used by www, as a temporary migration step.

packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js

@@ -122,7 +122,7 @@ describe('ReactSchedulerIntegration', () => {
  expect(Scheduler).toHaveYielded(['A', 'B', 'C']);
  });
 
- // @gate experimental || www
+ // @gate www
  it('idle updates are not blocked by offscreen work', async () => {
  function Text({text}) {
  Scheduler.unstable_yieldValue(text);

packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js

@@ -3073,7 +3073,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
  expect(root).toMatchRenderedOutput(<span prop="Foo" />);
  });
 
- // @gate enableCache
+ // @gate enableCache && enableLegacyHidden
  it('should not render hidden content while suspended on higher pri', async () => {
  function Offscreen() {
  Scheduler.unstable_yieldValue('Offscreen');
@@ -3123,7 +3123,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
  );
  });
 
- // @gate enableCache
+ // @gate enableCache && enableLegacyHidden
  it('should be able to unblock higher pri content before suspended hidden', async () => {
  function Offscreen() {
  Scheduler.unstable_yieldValue('Offscreen');