@@ -781,7 +782,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
{didTimeout ?
: null}
)}
-
+
);
}
@@ -811,9 +812,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
}
render() {
return (
-
}>
+
}>
-
+
);
}
}
@@ -852,13 +853,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
function Never() {
// Throws a promise that resolves after some arbitrarily large
// number of seconds. The idea is that this component will never
- // resolve. It's always wrapped by a Placeholder.
+ // resolve. It's always wrapped by a Suspense.
throw new Promise(resolve => setTimeout(() => resolve(), 10000));
}
function Delay({ms}) {
return (
-
+
{didTimeout => {
if (didTimeout) {
// Once ms has elapsed, render null. This allows the rest of the
@@ -867,7 +868,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
}
return ;
}}
-
+
);
}
@@ -901,9 +902,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
it('times out immediately', async () => {
function App() {
return (
-
}>
+
}>
-
+
);
}
@@ -924,7 +925,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('Result')]);
});
- it('times out immediately when Placeholder is in loose mode, even if the suspender is async', async () => {
+ it('times out immediately when Suspense is in loose mode, even if the suspender is async', async () => {
class UpdatingText extends React.Component {
state = {step: 1};
render() {
@@ -945,12 +946,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
const text = React.createRef(null);
function App() {
return (
-
}>
+
}>
-
+
);
}
@@ -1022,7 +1023,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
function App() {
return (
- }>
+ }>
{text => (
@@ -1034,7 +1037,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
)}
-
+
{text => (
@@ -1154,7 +1157,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
function App() {
return (
- }>
+ }>
{text => (
@@ -1166,7 +1171,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
)}
-
+
{text => (
@@ -1298,13 +1303,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
function App() {
return (
- }>
-
+
);
}
@@ -1371,9 +1376,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
}
ReactNoop.renderLegacySyncRoot(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
@@ -1397,9 +1402,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
class Demo extends React.Component {
render() {
return (
- }>
+ }>
-
+
);
}
}
@@ -1416,9 +1421,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
const LazyText = Promise.resolve(Text);
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Loading...']);
expect(ReactNoop.getChildren()).toEqual([]);
@@ -1430,9 +1435,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
// Should not suspend on update
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Hi again']);
expect(ReactNoop.getChildren()).toEqual([span('Hi again')]);
@@ -1442,9 +1447,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
const LazyText = Promise.reject(new Error('Bad network'));
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Loading...']);
@@ -1471,7 +1476,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
function Parent({swap}) {
return (
- }>
+ }>
{swap
? [
,
@@ -1481,7 +1486,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
,
,
]}
-
+
);
}
@@ -1515,9 +1520,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
const LazyText = Promise.resolve({default: Text});
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Loading...']);
expect(ReactNoop.getChildren()).toEqual([]);
@@ -1529,9 +1534,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
// Should not suspend on update
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Hi again']);
expect(ReactNoop.getChildren()).toEqual([span('Hi again')]);
@@ -1545,9 +1550,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
const LazyText = Promise.resolve(T);
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Loading...']);
expect(ReactNoop.getChildren()).toEqual([]);
@@ -1560,9 +1565,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
T.defaultProps = {text: 'Hi again'};
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Hi again']);
expect(ReactNoop.getChildren()).toEqual([span('Hi again')]);
@@ -1590,11 +1595,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
const stateful = React.createRef(null);
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Loading...']);
expect(ReactNoop.getChildren()).toEqual([]);
@@ -1615,11 +1620,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
// Render first two siblings. The lazy component should not have
// started loading yet.
@@ -1649,9 +1654,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Started loading', 'Loading...']);
expect(ReactNoop.getChildren()).toEqual([]);
@@ -1682,10 +1687,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
const ref = React.createRef();
ReactNoop.render(
- }>
+ }>
- ,
+ ,
);
expect(ReactNoop.flush()).toEqual(['Loading...']);
expect(ReactNoop.getChildren()).toEqual([]);
@@ -1745,13 +1750,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
function App() {
return (
- }>
-
+
);
}
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index c85cb29cc8170..c3d0eed509358 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -11,9 +11,8 @@ import {
REACT_FRAGMENT_TYPE,
REACT_PROFILER_TYPE,
REACT_STRICT_MODE_TYPE,
- REACT_PLACEHOLDER_TYPE,
+ REACT_SUSPENSE_TYPE,
} from 'shared/ReactSymbols';
-import {enableSuspense} from 'shared/ReactFeatureFlags';
import {Component, PureComponent} from './ReactBaseClasses';
import {createRef} from './ReactCreateRef';
@@ -50,11 +49,13 @@ const React = {
createContext,
forwardRef,
+ lazy,
pure,
Fragment: REACT_FRAGMENT_TYPE,
StrictMode: REACT_STRICT_MODE_TYPE,
unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,
+ unstable_Suspense: REACT_SUSPENSE_TYPE,
unstable_Profiler: REACT_PROFILER_TYPE,
createElement: __DEV__ ? createElementWithValidation : createElement,
@@ -67,9 +68,4 @@ const React = {
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
};
-if (enableSuspense) {
- React.Placeholder = REACT_PLACEHOLDER_TYPE;
- React.lazy = lazy;
-}
-
export default React;
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 5728b4ba33e24..f8aee09448f3a 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -21,7 +21,6 @@ let AdvanceTime;
function loadModules({
enableProfilerTimer = true,
- enableSuspense = false,
enableSchedulerTracing = true,
replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
useNoopRenderer = false,
@@ -37,7 +36,6 @@ function loadModules({
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
- ReactFeatureFlags.enableSuspense = enableSuspense;
ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = replayFailedUnitOfWorkWithInvokeGuardedCallback;
React = require('react');
@@ -1234,7 +1232,6 @@ describe('Profiler', () => {
jest.resetModules();
loadModules({
- enableSuspense: true,
enableSchedulerTracing: true,
...params,
});
@@ -2231,9 +2228,9 @@ describe('Profiler', () => {
SchedulerTracing.unstable_trace(interaction.name, mockNow(), () => {
ReactNoop.render(
- }>
+ }>
-
+
,
@@ -2325,11 +2322,11 @@ describe('Profiler', () => {
() => {
ReactTestRenderer.create(
- }>
-
+
,
);
},
@@ -2379,11 +2376,11 @@ describe('Profiler', () => {
() => {
ReactTestRenderer.create(
- }>
-
+
,
);
},
@@ -2419,11 +2416,11 @@ describe('Profiler', () => {
() => {
renderer = ReactTestRenderer.create(
- }>
-
+
,
{
unstable_isConcurrent: true,
@@ -2467,11 +2464,11 @@ describe('Profiler', () => {
() => {
renderer = ReactTestRenderer.create(
- }>
-
+
,
{unstable_isConcurrent: true},
);
@@ -2506,11 +2503,11 @@ describe('Profiler', () => {
() => {
renderer = ReactTestRenderer.create(
- }>
-
+
,
);
@@ -2540,11 +2537,11 @@ describe('Profiler', () => {
() => {
renderer.update(
- }>
-
+
,
);
@@ -2602,11 +2599,11 @@ describe('Profiler', () => {
() => {
renderer = ReactTestRenderer.create(
- }>
-
+
,
{unstable_isConcurrent: true},
@@ -2640,11 +2637,11 @@ describe('Profiler', () => {
() => {
renderer.update(
- }>
-
+
,
);
diff --git a/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js b/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
index 1f8037709e85b..998c0c2497107 100644
--- a/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
@@ -50,7 +50,6 @@ function loadModules() {
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactFeatureFlags.enableProfilerTimer = true;
ReactFeatureFlags.enableSchedulerTracing = true;
- ReactFeatureFlags.enableSuspense = true;
React = require('react');
SchedulerTracing = require('scheduler/tracing');
@@ -120,9 +119,11 @@ describe('ProfilerDOM', () => {
const root = ReactDOM.unstable_createRoot(element);
batch = root.createBatch();
batch.render(
- }>
+ }>
- ,
+ ,
);
batch.then(
SchedulerTracing.unstable_wrap(() => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 38fafa73a46dd..75b27ac32e644 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -7,11 +7,8 @@
* @flow strict
*/
-// Exports ReactDOM.createRoot
export const enableUserTimingAPI = __DEV__;
-// Suspense
-export const enableSuspense = false;
// Helps identify side effects in begin-phase lifecycle hooks and setState reducers:
export const debugRenderPhaseSideEffects = false;
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 68f7e10a52de5..774c1bbe20385 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -38,8 +38,8 @@ export const REACT_CONCURRENT_MODE_TYPE = hasSymbol
export const REACT_FORWARD_REF_TYPE = hasSymbol
? Symbol.for('react.forward_ref')
: 0xead0;
-export const REACT_PLACEHOLDER_TYPE = hasSymbol
- ? Symbol.for('react.placeholder')
+export const REACT_SUSPENSE_TYPE = hasSymbol
+ ? Symbol.for('react.suspense')
: 0xead1;
export const REACT_PURE_TYPE = hasSymbol ? Symbol.for('react.pure') : 0xead3;
diff --git a/packages/shared/ReactWorkTags.js b/packages/shared/ReactWorkTags.js
index b04f89e562c25..33e4673cfc3eb 100644
--- a/packages/shared/ReactWorkTags.js
+++ b/packages/shared/ReactWorkTags.js
@@ -44,6 +44,6 @@ export const ContextProvider = 12;
export const ForwardRef = 13;
export const ForwardRefLazy = 14;
export const Profiler = 15;
-export const PlaceholderComponent = 16;
+export const SuspenseComponent = 16;
export const PureComponent = 17;
export const PureComponentLazy = 18;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js
index 9a03b482d24fb..e71c6a46b636f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js
@@ -15,7 +15,6 @@ import typeof * as FabricFeatureFlagsType from './ReactFeatureFlags.native-fabri
export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableUserTimingAPI = __DEV__;
-export const enableSuspense = false;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
export const enableProfilerTimer = __PROFILE__;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js b/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js
index 9a2c8dfc7c235..7fb1144016287 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js
@@ -15,7 +15,6 @@ import typeof * as FabricFeatureFlagsType from './ReactFeatureFlags.native-fabri
export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableUserTimingAPI = __DEV__;
-export const enableSuspense = false;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
export const enableProfilerTimer = __PROFILE__;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 1ea9549a1a81e..932f643b0beab 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -14,7 +14,6 @@ import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.native-fb';
// Re-export dynamic flags from the fbsource version.
export const {
- enableSuspense,
debugRenderPhaseSideEffects,
debugRenderPhaseSideEffectsForStrictMode,
warnAboutDeprecatedLifecycles,
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 780563724d8b9..2a7f9776be400 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -14,7 +14,6 @@ import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.native-oss';
export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
-export const enableSuspense = false;
export const enableUserTimingAPI = __DEV__;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
export const warnAboutDeprecatedLifecycles = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index ebe62b122cfd1..6c45eb2ca7009 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/packages/shared/forks/ReactFeatureFlags.persistent.js
@@ -15,7 +15,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste
export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableUserTimingAPI = __DEV__;
-export const enableSuspense = false;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
export const enableProfilerTimer = __PROFILE__;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 922771420b57e..1697d85818f8f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -15,7 +15,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste
export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableUserTimingAPI = __DEV__;
-export const enableSuspense = false;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
export const enableProfilerTimer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index dcd4b70ae0fa2..5c51317f212da 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -15,7 +15,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste
export const debugRenderPhaseSideEffects = false;
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableUserTimingAPI = __DEV__;
-export const enableSuspense = true;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
export const enableProfilerTimer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a0c8931a5c21d..83ba20a659077 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -12,7 +12,6 @@ import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.www';
// Re-export dynamic flags from the www version.
export const {
- enableSuspense,
debugRenderPhaseSideEffects,
debugRenderPhaseSideEffectsForStrictMode,
enableSuspenseServerRenderer,
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
index 00625cf3304c5..1b91ee04ddf36 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentName.js
@@ -19,7 +19,7 @@ import {
REACT_PROFILER_TYPE,
REACT_PROVIDER_TYPE,
REACT_STRICT_MODE_TYPE,
- REACT_PLACEHOLDER_TYPE,
+ REACT_SUSPENSE_TYPE,
} from 'shared/ReactSymbols';
import {refineResolvedThenable} from 'shared/ReactLazyComponent';
@@ -54,8 +54,8 @@ function getComponentName(type: mixed): string | null {
return `Profiler`;
case REACT_STRICT_MODE_TYPE:
return 'StrictMode';
- case REACT_PLACEHOLDER_TYPE:
- return 'Placeholder';
+ case REACT_SUSPENSE_TYPE:
+ return 'Suspense';
}
if (typeof type === 'object') {
switch (type.$$typeof) {
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 6997c275f41f0..8682a3fb53932 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -15,7 +15,7 @@ import {
REACT_PROFILER_TYPE,
REACT_PROVIDER_TYPE,
REACT_STRICT_MODE_TYPE,
- REACT_PLACEHOLDER_TYPE,
+ REACT_SUSPENSE_TYPE,
REACT_PURE_TYPE,
} from 'shared/ReactSymbols';
@@ -28,7 +28,7 @@ export default function isValidElementType(type: mixed) {
type === REACT_CONCURRENT_MODE_TYPE ||
type === REACT_PROFILER_TYPE ||
type === REACT_STRICT_MODE_TYPE ||
- type === REACT_PLACEHOLDER_TYPE ||
+ type === REACT_SUSPENSE_TYPE ||
(typeof type === 'object' &&
type !== null &&
(typeof type.then === 'function' ||