Remove unstable_ prefix from Suspense (#13922)

We are using it with lazy and the combination Suspense + lazy seems pretty stable. maxDuration is not but that's only enabled when you're in ConcurrentMode which is still unstable.
2025-12-07 12:20:38 +01:00 · 2018-10-22 22:40:05 -07:00 · 2018-10-22 22:40:05 -07:00 · d75c69e0cf
commit d75c69e0cf
parent c8ef2feda9
16 changed files with 42 additions and 45 deletions
--- a/fixtures/dom/src/components/fixtures/suspense/index.js
+++ b/fixtures/dom/src/components/fixtures/suspense/index.js
@ -5,7 +5,7 @@ import TestCase from '../../TestCase';
 const React = window.React;
 const ReactDOM = window.ReactDOM;

-const Suspense = React.unstable_Suspense;
+const Suspense = React.Suspense;

 let cache = new Set();

--- a/fixtures/unstable-async/suspense/src/components/App.js
+++ b/fixtures/unstable-async/suspense/src/components/App.js
@ -1,4 +1,4 @@
-import React, {lazy, unstable_Suspense as Suspense, PureComponent} from 'react';
+import React, {lazy, Suspense, PureComponent} from 'react';
 import {unstable_scheduleCallback} from 'scheduler';
 import {
  unstable_trace as trace,
--- a/fixtures/unstable-async/suspense/src/components/UserPage.js
+++ b/fixtures/unstable-async/suspense/src/components/UserPage.js
@ -1,4 +1,4 @@
-import React, {unstable_Suspense as Suspense} from 'react';
+import React, {Suspense} from 'react';
 import {createResource} from 'react-cache';
 import Spinner from './Spinner';
 import {cache} from '../cache';
--- a/packages/react-dom/src/tests/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/tests/ReactDOMServerSuspense-test.internal.js
@ -48,9 +48,9 @@ describe('ReactDOMServerSuspense', () => {
      throw new Promise(() => {});
    };
    const e = await serverRender(
-      <React.unstable_Suspense fallback={<div />}>
+      <React.Suspense fallback={<div />}>
        <Suspended />
-      </React.unstable_Suspense>,
+      </React.Suspense>,
    );

    expect(e.tagName).toBe('DIV');
--- a/packages/react-dom/src/tests/ReactDOMSuspensePlaceholder-test.internal.js
+++ b/packages/react-dom/src/tests/ReactDOMSuspensePlaceholder-test.internal.js
@ -23,11 +23,10 @@ describe('ReactDOMSuspensePlaceholder', () => {
  beforeEach(() => {
    jest.resetModules();
    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableSuspense = true;
    React = require('react');
    ReactDOM = require('react-dom');
    ReactCache = require('react-cache');
-    Suspense = React.unstable_Suspense;
+    Suspense = React.Suspense;
    container = document.createElement('div');

    function invalidateCache() {
--- a/packages/react-dom/src/tests/ReactServerRendering-test.js
+++ b/packages/react-dom/src/tests/ReactServerRendering-test.js
@ -610,7 +610,7 @@ describe('ReactDOMServer', () => {

  it('throws for unsupported types on the server', () => {
    expect(() => {
-      ReactDOMServer.renderToString(<React.unstable_Suspense />);
+      ReactDOMServer.renderToString(<React.Suspense />);
    }).toThrow('ReactDOMServer does not yet support Suspense.');

    async function fakeImport(result) {
--- a/packages/react-dom/src/tests/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/tests/ReactServerRenderingHydration-test.js
@ -470,9 +470,9 @@ describe('ReactDOMServerHydration', () => {
          <div>
            Hello{' '}
            {this.state.isClient && (
-              <React.unstable_Suspense fallback="loading">
+              <React.Suspense fallback="loading">
                <Lazy />
-              </React.unstable_Suspense>
+              </React.Suspense>
            )}
          </div>
        );
--- a/packages/react-reconciler/src/tests/ReactIncrementalPerf-test.internal.js
+++ b/packages/react-reconciler/src/tests/ReactIncrementalPerf-test.internal.js
@ -587,9 +587,9 @@ describe('ReactDebugFiberPerf', () => {

    ReactNoop.render(
      <Parent>
-        <React.unstable_Suspense fallback={<Spinner />}>
+        <React.Suspense fallback={<Spinner />}>
          <LazyFoo />
-        </React.unstable_Suspense>
+        </React.Suspense>
      </Parent>,
    );
    ReactNoop.flush();
@ -605,9 +605,9 @@ describe('ReactDebugFiberPerf', () => {

    ReactNoop.render(
      <Parent>
-        <React.unstable_Suspense>
+        <React.Suspense>
          <LazyFoo />
-        </React.unstable_Suspense>
+        </React.Suspense>
      </Parent>,
    );
    ReactNoop.flush();
--- a/packages/react-reconciler/src/tests/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/tests/ReactLazy-test.internal.js
@ -11,7 +11,7 @@ describe('ReactLazy', () => {
    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
    React = require('react');
-    Suspense = React.unstable_Suspense;
+    Suspense = React.Suspense;
    lazy = React.lazy;
    ReactTestRenderer = require('react-test-renderer');
  });
--- a/packages/react-reconciler/src/tests/ReactMemo-test.internal.js
+++ b/packages/react-reconciler/src/tests/ReactMemo-test.internal.js
@ -56,7 +56,7 @@ describe('memo', () => {
  function sharedTests(label, memo) {
    describe(`${label}`, () => {
      it('bails out on props equality', async () => {
-        const {unstable_Suspense: Suspense} = React;
+        const {Suspense} = React;

        function Counter({count}) {
          return <Text text={count} />;
@ -93,7 +93,7 @@ describe('memo', () => {
      });

      it("does not bail out if there's a context change", async () => {
-        const {unstable_Suspense: Suspense} = React;
+        const {Suspense} = React;

        const CountContext = React.createContext(0);

@ -142,7 +142,7 @@ describe('memo', () => {
      });

      it('accepts custom comparison function', async () => {
-        const {unstable_Suspense: Suspense} = React;
+        const {Suspense} = React;

        function Counter({count}) {
          return <Text text={count} />;
@ -184,7 +184,7 @@ describe('memo', () => {
      });

      it('supports non-pure class components', async () => {
-        const {unstable_Suspense: Suspense} = React;
+        const {Suspense} = React;

        class CounterInner extends React.Component {
          static defaultProps = {suffix: '!'};
--- a/packages/react-reconciler/src/tests/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/tests/ReactSuspense-test.internal.js
@ -23,7 +23,7 @@ describe('ReactSuspense', () => {
    // JestReact = require('jest-react');
    ReactCache = require('react-cache');

-    Suspense = React.unstable_Suspense;
+    Suspense = React.Suspense;

    function invalidateCache() {
      cache = ReactCache.createCache(invalidateCache);
--- a/packages/react-reconciler/src/tests/ReactSuspensePlaceholder-test.internal.js
+++ b/packages/react-reconciler/src/tests/ReactSuspensePlaceholder-test.internal.js
@ -37,7 +37,7 @@ function runPlaceholderTests(suiteLabel, loadReactNoop) {
      // JestReact = require('jest-react');
      ReactCache = require('react-cache');

-      Suspense = React.unstable_Suspense;
+      Suspense = React.Suspense;

      function invalidateCache() {
        cache = ReactCache.createCache(invalidateCache);
--- a/packages/react-reconciler/src/tests/ReactSuspenseWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/tests/ReactSuspenseWithNoopRenderer-test.internal.js
@ -24,7 +24,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
    Fragment = React.Fragment;
    ReactNoop = require('react-noop-renderer');
    ReactCache = require('react-cache');
-    Suspense = React.unstable_Suspense;
+    Suspense = React.Suspense;
    StrictMode = React.StrictMode;
    ConcurrentMode = React.unstable_ConcurrentMode;

--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@ -55,7 +55,7 @@ const React = {
  Fragment: REACT_FRAGMENT_TYPE,
  StrictMode: REACT_STRICT_MODE_TYPE,
  unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,
-  unstable_Suspense: REACT_SUSPENSE_TYPE,
+  Suspense: REACT_SUSPENSE_TYPE,
  unstable_Profiler: REACT_PROFILER_TYPE,

  createElement: __DEV__ ? createElementWithValidation : createElement,
--- a/packages/react/src/tests/ReactProfiler-test.internal.js
+++ b/packages/react/src/tests/ReactProfiler-test.internal.js
@ -2228,9 +2228,9 @@ describe('Profiler', () => {
        SchedulerTracing.unstable_trace(interaction.name, mockNow(), () => {
          ReactNoop.render(
            <React.unstable_Profiler id="test-profiler" onRender={onRender}>
-              <React.unstable_Suspense fallback={<Text text="Loading..." />}>
+              <React.Suspense fallback={<Text text="Loading..." />}>
                <AsyncText text="Async" ms={20000} />
-              </React.unstable_Suspense>
+              </React.Suspense>
              <Text text="Sync" />
              <Monkey ref={monkey} />
            </React.unstable_Profiler>,
@ -2316,11 +2316,11 @@ describe('Profiler', () => {
          () => {
            ReactTestRenderer.create(
              <React.unstable_Profiler id="app" onRender={onRender}>
-                <React.unstable_Suspense
+                <React.Suspense
                  maxDuration={1000}
                  fallback={<Text text="loading" />}>
                  <AsyncText text="loaded" ms={2000} />
-                </React.unstable_Suspense>
+                </React.Suspense>
              </React.unstable_Profiler>,
            );
          },
@ -2370,11 +2370,11 @@ describe('Profiler', () => {
          () => {
            ReactTestRenderer.create(
              <React.unstable_Profiler id="app" onRender={onRender}>
-                <React.unstable_Suspense
+                <React.Suspense
                  maxDuration={1000}
                  fallback={<Text text="loading" />}>
                  <AsyncComponentWithCascadingWork text="loaded" ms={2000} />
-                </React.unstable_Suspense>
+                </React.Suspense>
              </React.unstable_Profiler>,
            );
          },
@ -2410,11 +2410,11 @@ describe('Profiler', () => {
          () => {
            renderer = ReactTestRenderer.create(
              <React.unstable_Profiler id="app" onRender={onRender}>
-                <React.unstable_Suspense
+                <React.Suspense
                  maxDuration={1000}
                  fallback={<Text text="loading" />}>
                  <AsyncText text="loaded" ms={2000} />
-                </React.unstable_Suspense>
+                </React.Suspense>
              </React.unstable_Profiler>,
              {
                unstable_isConcurrent: true,
@ -2458,11 +2458,11 @@ describe('Profiler', () => {
          () => {
            renderer = ReactTestRenderer.create(
              <React.unstable_Profiler id="app" onRender={onRender}>
-                <React.unstable_Suspense
+                <React.Suspense
                  maxDuration={2000}
                  fallback={<Text text="loading" />}>
                  <AsyncText text="loaded" ms={1000} />
-                </React.unstable_Suspense>
+                </React.Suspense>
              </React.unstable_Profiler>,
              {unstable_isConcurrent: true},
            );
@ -2497,11 +2497,11 @@ describe('Profiler', () => {
          () => {
            renderer = ReactTestRenderer.create(
              <React.unstable_Profiler id="app" onRender={onRender}>
-                <React.unstable_Suspense
+                <React.Suspense
                  maxDuration={2000}
                  fallback={<Text text="loading" />}>
                  <AsyncText text="loaded" ms={1000} />
-                </React.unstable_Suspense>
+                </React.Suspense>
                <Text text="initial" />
              </React.unstable_Profiler>,
            );
@ -2531,11 +2531,11 @@ describe('Profiler', () => {
            () => {
              renderer.update(
                <React.unstable_Profiler id="app" onRender={onRender}>
-                  <React.unstable_Suspense
+                  <React.Suspense
                    maxDuration={2000}
                    fallback={<Text text="loading" />}>
                    <AsyncText text="loaded" ms={1000} />
-                  </React.unstable_Suspense>
+                  </React.Suspense>
                  <Text text="updated" />
                </React.unstable_Profiler>,
              );
@ -2593,11 +2593,11 @@ describe('Profiler', () => {
          () => {
            renderer = ReactTestRenderer.create(
              <React.unstable_Profiler id="app" onRender={onRender}>
-                <React.unstable_Suspense
+                <React.Suspense
                  maxDuration={2000}
                  fallback={<Text text="loading" />}>
                  <AsyncText text="loaded" ms={1000} />
-                </React.unstable_Suspense>
+                </React.Suspense>
                <Text text="initial" />
              </React.unstable_Profiler>,
              {unstable_isConcurrent: true},
@ -2631,11 +2631,11 @@ describe('Profiler', () => {
            () => {
              renderer.update(
                <React.unstable_Profiler id="app" onRender={onRender}>
-                  <React.unstable_Suspense
+                  <React.Suspense
                    maxDuration={2000}
                    fallback={<Text text="loading" />}>
                    <AsyncText text="loaded" ms={1000} />
-                  </React.unstable_Suspense>
+                  </React.Suspense>
                  <Text text="updated" />
                </React.unstable_Profiler>,
              );
--- a/packages/react/src/tests/ReactProfilerDOM-test.internal.js
+++ b/packages/react/src/tests/ReactProfilerDOM-test.internal.js
@ -119,11 +119,9 @@ describe('ProfilerDOM', () => {
      const root = ReactDOM.unstable_createRoot(element);
      batch = root.createBatch();
      batch.render(
-        <React.unstable_Suspense
-          maxDuration={100}
-          fallback={<Text text="Loading..." />}>
+        <React.Suspense maxDuration={100} fallback={<Text text="Loading..." />}>
          <AsyncText text="Text" ms={200} />
-        </React.unstable_Suspense>,
+        </React.Suspense>,
      );
      batch.then(
        SchedulerTracing.unstable_wrap(() => {