Warn if renderSubtreeIntoContainer is called (#23355)
We already warn for all the other legacy APIs. Forgot to enable this one.
Andrew Clark committed
Feb 24, 2022 at 01:42 UTC
a5b22155c8431c25df728f61869ff1616e51e133
12 files changed
+57
-51
packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
+47
-22
@@ -16,8 +16,6 @@ const ReactTestUtils = require('react-dom/test-utils');
16
const renderSubtreeIntoContainer = require('react-dom')
17
.unstable_renderSubtreeIntoContainer;
18
19
-const ReactFeatureFlags = require('shared/ReactFeatureFlags');
20
-
19
describe('renderSubtreeIntoContainer', () => {
20
it('should pass context when rendering subtree elsewhere', () => {
21
const portal = document.createElement('div');
@@ -48,18 +46,13 @@ describe('renderSubtreeIntoContainer', () => {
46
}
47
48
componentDidMount() {
51
- if (ReactFeatureFlags.warnUnstableRenderSubtreeIntoContainer) {
52
- expect(
53
- function() {
54
- renderSubtreeIntoContainer(this, <Component />, portal);
55
- }.bind(this),
56
- ).toWarnDev(
57
- 'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated and ' +
58
- 'will be removed in a future major release. Consider using React Portals instead.',
59
- );
60
- } else {
61
- renderSubtreeIntoContainer(this, <Component />, portal);
62
- }
49
+ expect(
50
+ function() {
51
+ renderSubtreeIntoContainer(this, <Component />, portal);
52
+ }.bind(this),
53
+ ).toErrorDev(
54
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
55
+ );
56
}
57
}
58
@@ -144,11 +137,19 @@ describe('renderSubtreeIntoContainer', () => {
137
}
138
139
componentDidMount() {
147
- renderSubtreeIntoContainer(this, <Component />, portal);
140
+ expect(() => {
141
+ renderSubtreeIntoContainer(this, <Component />, portal);
142
+ }).toErrorDev(
143
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
144
+ );
145
}
146
147
componentDidUpdate() {
151
- renderSubtreeIntoContainer(this, <Component />, portal);
148
+ expect(() => {
149
+ renderSubtreeIntoContainer(this, <Component />, portal);
150
+ }).toErrorDev(
151
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
152
+ );
153
}
154
}
155
@@ -192,11 +193,19 @@ describe('renderSubtreeIntoContainer', () => {
193
}
194
195
componentDidMount() {
195
- renderSubtreeIntoContainer(this, <Component />, portal);
196
+ expect(() => {
197
+ renderSubtreeIntoContainer(this, <Component />, portal);
198
+ }).toErrorDev(
199
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
200
+ );
201
}
202
203
componentDidUpdate() {
199
- renderSubtreeIntoContainer(this, <Component />, portal);
204
+ expect(() => {
205
+ renderSubtreeIntoContainer(this, <Component />, portal);
206
+ }).toErrorDev(
207
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
208
+ );
209
}
210
}
211
@@ -217,7 +226,11 @@ describe('renderSubtreeIntoContainer', () => {
226
}
227
228
componentDidMount() {
220
- renderSubtreeIntoContainer(this, <div>hello</div>, portal);
229
+ expect(() => {
230
+ renderSubtreeIntoContainer(this, <div>hello</div>, portal);
231
+ }).toErrorDev(
232
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
233
+ );
234
}
235
}
236
@@ -247,7 +260,11 @@ describe('renderSubtreeIntoContainer', () => {
260
return null;
261
}
262
componentDidMount() {
250
- renderSubtreeIntoContainer(this, <Child />, portal);
263
+ expect(() => {
264
+ renderSubtreeIntoContainer(this, <Child />, portal);
265
+ }).toErrorDev(
266
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
267
+ );
268
}
269
}
270
@@ -278,7 +295,11 @@ describe('renderSubtreeIntoContainer', () => {
295
return {value: this.props.value};
296
}
297
componentDidMount() {
281
- renderSubtreeIntoContainer(this, <Middle />, portal1);
298
+ expect(() => {
299
+ renderSubtreeIntoContainer(this, <Middle />, portal1);
300
+ }).toErrorDev(
301
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
302
+ );
303
}
304
static childContextTypes = {
305
value: PropTypes.string.isRequired,
@@ -290,7 +311,11 @@ describe('renderSubtreeIntoContainer', () => {
311
return null;
312
}
313
componentDidMount() {
293
- renderSubtreeIntoContainer(this, <Child />, portal2);
314
+ expect(() => {
315
+ renderSubtreeIntoContainer(this, <Child />, portal2);
316
+ }).toErrorDev(
317
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
318
+ );
319
}
320
}
321
packages/react-dom/src/client/ReactDOM.js
+1
-19
@@ -39,10 +39,7 @@ import {
39
import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
40
import {canUseDOM} from 'shared/ExecutionEnvironment';
41
import ReactVersion from 'shared/ReactVersion';
42
-import {
43
- warnUnstableRenderSubtreeIntoContainer,
44
- enableNewReconciler,
45
-} from 'shared/ReactFeatureFlags';
42
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
43
44
import {
45
getInstanceFromNode,
@@ -73,8 +70,6 @@ setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
70
setGetCurrentUpdatePriority(getCurrentUpdatePriority);
71
setAttemptHydrationAtPriority(runWithPriority);
72
76
-let didWarnAboutUnstableRenderSubtreeIntoContainer = false;
77
-
73
if (__DEV__) {
74
if (
75
typeof Map !== 'function' ||
@@ -121,19 +116,6 @@ function renderSubtreeIntoContainer(
116
containerNode: Container,
117
callback: ?Function,
118
) {
124
- if (__DEV__) {
125
- if (
126
- warnUnstableRenderSubtreeIntoContainer &&
127
- !didWarnAboutUnstableRenderSubtreeIntoContainer
128
- ) {
129
- didWarnAboutUnstableRenderSubtreeIntoContainer = true;
130
- console.warn(
131
- 'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated ' +
132
- 'and will be removed in a future major release. Consider using ' +
133
- 'React Portals instead.',
134
- );
135
- }
136
- }
119
return unstable_renderSubtreeIntoContainer(
120
parentComponent,
121
element,
packages/react-dom/src/client/ReactDOMLegacy.js
+9
@@ -316,6 +316,15 @@ export function unstable_renderSubtreeIntoContainer(
316
containerNode: Container,
317
callback: ?Function,
318
) {
319
+ if (__DEV__) {
320
+ console.error(
321
+ 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported ' +
322
+ 'in React 18. Consider using a portal instead. Until you switch to ' +
323
+ "the createRoot API, your app will behave as if it's running React " +
324
+ '17. Learn more: https://reactjs.org/link/switch-to-createroot',
325
+ );
326
+ }
327
+
328
if (!isValidContainerLegacy(containerNode)) {
329
throw new Error('Target container is not a DOM element.');
330
}
packages/shared/ReactFeatureFlags.js
-1
@@ -19,7 +19,6 @@ export const warnAboutDeprecatedLifecycles = true;
19
export const enableLazyElements = true;
20
export const enableComponentStackLocations = true;
21
export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
22
-export const warnUnstableRenderSubtreeIntoContainer = false;
22
export const enablePersistentOffscreenHostContainer = false;
23
24
// -----------------------------------------------------------------------------
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
@@ -47,7 +47,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
47
export const enableTrustedTypesIntegration = false;
48
export const disableTextareaChildren = false;
49
export const disableModulePatternComponents = false;
50
-export const warnUnstableRenderSubtreeIntoContainer = false;
50
export const warnAboutSpreadingKeyToJSX = false;
51
export const enableSuspenseAvoidThisFallback = false;
52
export const enableSuspenseAvoidThisFallbackFizz = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
38
export const enableTrustedTypesIntegration = false;
39
export const disableTextareaChildren = false;
40
export const disableModulePatternComponents = false;
41
-export const warnUnstableRenderSubtreeIntoContainer = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = false;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
38
export const enableTrustedTypesIntegration = false;
39
export const disableTextareaChildren = false;
40
export const disableModulePatternComponents = false;
41
-export const warnUnstableRenderSubtreeIntoContainer = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = false;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
-1
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
38
export const enableTrustedTypesIntegration = false;
39
export const disableTextareaChildren = false;
40
export const disableModulePatternComponents = false;
41
-export const warnUnstableRenderSubtreeIntoContainer = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableComponentStackLocations = false;
43
export const enableLegacyFBSupport = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
38
export const enableTrustedTypesIntegration = false;
39
export const disableTextareaChildren = false;
40
export const disableModulePatternComponents = true;
41
-export const warnUnstableRenderSubtreeIntoContainer = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = true;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
packages/shared/forks/ReactFeatureFlags.testing.js
-1
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
38
export const enableTrustedTypesIntegration = false;
39
export const disableTextareaChildren = false;
40
export const disableModulePatternComponents = false;
41
-export const warnUnstableRenderSubtreeIntoContainer = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = false;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
packages/shared/forks/ReactFeatureFlags.testing.www.js
-1
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
38
export const enableTrustedTypesIntegration = false;
39
export const disableTextareaChildren = __EXPERIMENTAL__;
40
export const disableModulePatternComponents = true;
41
-export const warnUnstableRenderSubtreeIntoContainer = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = true;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
packages/shared/forks/ReactFeatureFlags.www.js
-2
@@ -88,8 +88,6 @@ export const enableComponentStackLocations = true;
88
89
export const disableTextareaChildren = __EXPERIMENTAL__;
90
91
-export const warnUnstableRenderSubtreeIntoContainer = false;
92
-
91
// Enable forked reconciler. Piggy-backing on the "variant" global so that we
92
// don't have to add another test dimension. The build system will compile this
93
// to the correct value.