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.
Sebastian Markbåge committed
Oct 22, 2018 at 22:40 UTC
d75c69e0cf2a842adc47edab87ca5103411e6949
16 files changed
+42
-45
fixtures/dom/src/components/fixtures/suspense/index.js
+1
-1
@@ -5,7 +5,7 @@ import TestCase from '../../TestCase';
5
const React = window.React;
6
const ReactDOM = window.ReactDOM;
7
8
-const Suspense = React.unstable_Suspense;
8
+const Suspense = React.Suspense;
9
10
let cache = new Set();
11
fixtures/unstable-async/suspense/src/components/App.js
+1
-1
@@ -1,4 +1,4 @@
1
-import React, {lazy, unstable_Suspense as Suspense, PureComponent} from 'react';
1
+import React, {lazy, Suspense, PureComponent} from 'react';
2
import {unstable_scheduleCallback} from 'scheduler';
3
import {
4
unstable_trace as trace,
fixtures/unstable-async/suspense/src/components/UserPage.js
+1
-1
@@ -1,4 +1,4 @@
1
-import React, {unstable_Suspense as Suspense} from 'react';
1
+import React, {Suspense} from 'react';
2
import {createResource} from 'react-cache';
3
import Spinner from './Spinner';
4
import {cache} from '../cache';
packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+2
-2
@@ -48,9 +48,9 @@ describe('ReactDOMServerSuspense', () => {
48
throw new Promise(() => {});
49
};
50
const e = await serverRender(
51
- <React.unstable_Suspense fallback={<div />}>
51
+ <React.Suspense fallback={<div />}>
52
<Suspended />
53
- </React.unstable_Suspense>,
53
+ </React.Suspense>,
54
);
55
56
expect(e.tagName).toBe('DIV');
packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.internal.js
+1
-2
@@ -23,11 +23,10 @@ describe('ReactDOMSuspensePlaceholder', () => {
23
beforeEach(() => {
24
jest.resetModules();
25
ReactFeatureFlags = require('shared/ReactFeatureFlags');
26
- ReactFeatureFlags.enableSuspense = true;
26
React = require('react');
27
ReactDOM = require('react-dom');
28
ReactCache = require('react-cache');
30
- Suspense = React.unstable_Suspense;
29
+ Suspense = React.Suspense;
30
container = document.createElement('div');
31
32
function invalidateCache() {
packages/react-dom/src/__tests__/ReactServerRendering-test.js
+1
-1
@@ -610,7 +610,7 @@ describe('ReactDOMServer', () => {
610
611
it('throws for unsupported types on the server', () => {
612
expect(() => {
613
- ReactDOMServer.renderToString(<React.unstable_Suspense />);
613
+ ReactDOMServer.renderToString(<React.Suspense />);
614
}).toThrow('ReactDOMServer does not yet support Suspense.');
615
616
async function fakeImport(result) {
packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+2
-2
@@ -470,9 +470,9 @@ describe('ReactDOMServerHydration', () => {
470
<div>
471
Hello{' '}
472
{this.state.isClient && (
473
- <React.unstable_Suspense fallback="loading">
473
+ <React.Suspense fallback="loading">
474
<Lazy />
475
- </React.unstable_Suspense>
475
+ </React.Suspense>
476
)}
477
</div>
478
);
packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js
+4
-4
@@ -587,9 +587,9 @@ describe('ReactDebugFiberPerf', () => {
587
588
ReactNoop.render(
589
<Parent>
590
- <React.unstable_Suspense fallback={<Spinner />}>
590
+ <React.Suspense fallback={<Spinner />}>
591
<LazyFoo />
592
- </React.unstable_Suspense>
592
+ </React.Suspense>
593
</Parent>,
594
);
595
ReactNoop.flush();
@@ -605,9 +605,9 @@ describe('ReactDebugFiberPerf', () => {
605
606
ReactNoop.render(
607
<Parent>
608
- <React.unstable_Suspense>
608
+ <React.Suspense>
609
<LazyFoo />
610
- </React.unstable_Suspense>
610
+ </React.Suspense>
611
</Parent>,
612
);
613
ReactNoop.flush();
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+1
-1
@@ -11,7 +11,7 @@ describe('ReactLazy', () => {
11
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
12
ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
13
React = require('react');
14
- Suspense = React.unstable_Suspense;
14
+ Suspense = React.Suspense;
15
lazy = React.lazy;
16
ReactTestRenderer = require('react-test-renderer');
17
});
packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js
+4
-4
@@ -56,7 +56,7 @@ describe('memo', () => {
56
function sharedTests(label, memo) {
57
describe(`${label}`, () => {
58
it('bails out on props equality', async () => {
59
- const {unstable_Suspense: Suspense} = React;
59
+ const {Suspense} = React;
60
61
function Counter({count}) {
62
return <Text text={count} />;
@@ -93,7 +93,7 @@ describe('memo', () => {
93
});
94
95
it("does not bail out if there's a context change", async () => {
96
- const {unstable_Suspense: Suspense} = React;
96
+ const {Suspense} = React;
97
98
const CountContext = React.createContext(0);
99
@@ -142,7 +142,7 @@ describe('memo', () => {
142
});
143
144
it('accepts custom comparison function', async () => {
145
- const {unstable_Suspense: Suspense} = React;
145
+ const {Suspense} = React;
146
147
function Counter({count}) {
148
return <Text text={count} />;
@@ -184,7 +184,7 @@ describe('memo', () => {
184
});
185
186
it('supports non-pure class components', async () => {
187
- const {unstable_Suspense: Suspense} = React;
187
+ const {Suspense} = React;
188
189
class CounterInner extends React.Component {
190
static defaultProps = {suffix: '!'};
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+1
-1
@@ -23,7 +23,7 @@ describe('ReactSuspense', () => {
23
// JestReact = require('jest-react');
24
ReactCache = require('react-cache');
25
26
- Suspense = React.unstable_Suspense;
26
+ Suspense = React.Suspense;
27
28
function invalidateCache() {
29
cache = ReactCache.createCache(invalidateCache);
packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
+1
-1
@@ -37,7 +37,7 @@ function runPlaceholderTests(suiteLabel, loadReactNoop) {
37
// JestReact = require('jest-react');
38
ReactCache = require('react-cache');
39
40
- Suspense = React.unstable_Suspense;
40
+ Suspense = React.Suspense;
41
42
function invalidateCache() {
43
cache = ReactCache.createCache(invalidateCache);
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+1
-1
@@ -24,7 +24,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
24
Fragment = React.Fragment;
25
ReactNoop = require('react-noop-renderer');
26
ReactCache = require('react-cache');
27
- Suspense = React.unstable_Suspense;
27
+ Suspense = React.Suspense;
28
StrictMode = React.StrictMode;
29
ConcurrentMode = React.unstable_ConcurrentMode;
30
packages/react/src/React.js
+1
-1
@@ -55,7 +55,7 @@ const React = {
55
Fragment: REACT_FRAGMENT_TYPE,
56
StrictMode: REACT_STRICT_MODE_TYPE,
57
unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,
58
- unstable_Suspense: REACT_SUSPENSE_TYPE,
58
+ Suspense: REACT_SUSPENSE_TYPE,
59
unstable_Profiler: REACT_PROFILER_TYPE,
60
61
createElement: __DEV__ ? createElementWithValidation : createElement,
packages/react/src/__tests__/ReactProfiler-test.internal.js
+18
-18
@@ -2228,9 +2228,9 @@ describe('Profiler', () => {
2228
SchedulerTracing.unstable_trace(interaction.name, mockNow(), () => {
2229
ReactNoop.render(
2230
<React.unstable_Profiler id="test-profiler" onRender={onRender}>
2231
- <React.unstable_Suspense fallback={<Text text="Loading..." />}>
2231
+ <React.Suspense fallback={<Text text="Loading..." />}>
2232
<AsyncText text="Async" ms={20000} />
2233
- </React.unstable_Suspense>
2233
+ </React.Suspense>
2234
<Text text="Sync" />
2235
<Monkey ref={monkey} />
2236
</React.unstable_Profiler>,
@@ -2316,11 +2316,11 @@ describe('Profiler', () => {
2316
() => {
2317
ReactTestRenderer.create(
2318
<React.unstable_Profiler id="app" onRender={onRender}>
2319
- <React.unstable_Suspense
2319
+ <React.Suspense
2320
maxDuration={1000}
2321
fallback={<Text text="loading" />}>
2322
<AsyncText text="loaded" ms={2000} />
2323
- </React.unstable_Suspense>
2323
+ </React.Suspense>
2324
</React.unstable_Profiler>,
2325
);
2326
},
@@ -2370,11 +2370,11 @@ describe('Profiler', () => {
2370
() => {
2371
ReactTestRenderer.create(
2372
<React.unstable_Profiler id="app" onRender={onRender}>
2373
- <React.unstable_Suspense
2373
+ <React.Suspense
2374
maxDuration={1000}
2375
fallback={<Text text="loading" />}>
2376
<AsyncComponentWithCascadingWork text="loaded" ms={2000} />
2377
- </React.unstable_Suspense>
2377
+ </React.Suspense>
2378
</React.unstable_Profiler>,
2379
);
2380
},
@@ -2410,11 +2410,11 @@ describe('Profiler', () => {
2410
() => {
2411
renderer = ReactTestRenderer.create(
2412
<React.unstable_Profiler id="app" onRender={onRender}>
2413
- <React.unstable_Suspense
2413
+ <React.Suspense
2414
maxDuration={1000}
2415
fallback={<Text text="loading" />}>
2416
<AsyncText text="loaded" ms={2000} />
2417
- </React.unstable_Suspense>
2417
+ </React.Suspense>
2418
</React.unstable_Profiler>,
2419
{
2420
unstable_isConcurrent: true,
@@ -2458,11 +2458,11 @@ describe('Profiler', () => {
2458
() => {
2459
renderer = ReactTestRenderer.create(
2460
<React.unstable_Profiler id="app" onRender={onRender}>
2461
- <React.unstable_Suspense
2461
+ <React.Suspense
2462
maxDuration={2000}
2463
fallback={<Text text="loading" />}>
2464
<AsyncText text="loaded" ms={1000} />
2465
- </React.unstable_Suspense>
2465
+ </React.Suspense>
2466
</React.unstable_Profiler>,
2467
{unstable_isConcurrent: true},
2468
);
@@ -2497,11 +2497,11 @@ describe('Profiler', () => {
2497
() => {
2498
renderer = ReactTestRenderer.create(
2499
<React.unstable_Profiler id="app" onRender={onRender}>
2500
- <React.unstable_Suspense
2500
+ <React.Suspense
2501
maxDuration={2000}
2502
fallback={<Text text="loading" />}>
2503
<AsyncText text="loaded" ms={1000} />
2504
- </React.unstable_Suspense>
2504
+ </React.Suspense>
2505
<Text text="initial" />
2506
</React.unstable_Profiler>,
2507
);
@@ -2531,11 +2531,11 @@ describe('Profiler', () => {
2531
() => {
2532
renderer.update(
2533
<React.unstable_Profiler id="app" onRender={onRender}>
2534
- <React.unstable_Suspense
2534
+ <React.Suspense
2535
maxDuration={2000}
2536
fallback={<Text text="loading" />}>
2537
<AsyncText text="loaded" ms={1000} />
2538
- </React.unstable_Suspense>
2538
+ </React.Suspense>
2539
<Text text="updated" />
2540
</React.unstable_Profiler>,
2541
);
@@ -2593,11 +2593,11 @@ describe('Profiler', () => {
2593
() => {
2594
renderer = ReactTestRenderer.create(
2595
<React.unstable_Profiler id="app" onRender={onRender}>
2596
- <React.unstable_Suspense
2596
+ <React.Suspense
2597
maxDuration={2000}
2598
fallback={<Text text="loading" />}>
2599
<AsyncText text="loaded" ms={1000} />
2600
- </React.unstable_Suspense>
2600
+ </React.Suspense>
2601
<Text text="initial" />
2602
</React.unstable_Profiler>,
2603
{unstable_isConcurrent: true},
@@ -2631,11 +2631,11 @@ describe('Profiler', () => {
2631
() => {
2632
renderer.update(
2633
<React.unstable_Profiler id="app" onRender={onRender}>
2634
- <React.unstable_Suspense
2634
+ <React.Suspense
2635
maxDuration={2000}
2636
fallback={<Text text="loading" />}>
2637
<AsyncText text="loaded" ms={1000} />
2638
- </React.unstable_Suspense>
2638
+ </React.Suspense>
2639
<Text text="updated" />
2640
</React.unstable_Profiler>,
2641
);
packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
+2
-4
@@ -119,11 +119,9 @@ describe('ProfilerDOM', () => {
119
const root = ReactDOM.unstable_createRoot(element);
120
batch = root.createBatch();
121
batch.render(
122
- <React.unstable_Suspense
123
- maxDuration={100}
124
- fallback={<Text text="Loading..." />}>
122
+ <React.Suspense maxDuration={100} fallback={<Text text="Loading..." />}>
123
<AsyncText text="Text" ms={200} />
126
- </React.unstable_Suspense>,
124
+ </React.Suspense>,
125
);
126
batch.then(
127
SchedulerTracing.unstable_wrap(() => {