From a5b22155c8431c25df728f61869ff1616e51e133 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Thu, 24 Feb 2022 01:42:22 -0500 Subject: [PATCH] Warn if renderSubtreeIntoContainer is called (#23355) We already warn for all the other legacy APIs. Forgot to enable this one. --- .../renderSubtreeIntoContainer-test.js | 69 +++++++++++++------ packages/react-dom/src/client/ReactDOM.js | 20 +----- .../react-dom/src/client/ReactDOMLegacy.js | 9 +++ packages/shared/ReactFeatureFlags.js | 1 - .../forks/ReactFeatureFlags.native-fb.js | 1 - .../forks/ReactFeatureFlags.native-oss.js | 1 - .../forks/ReactFeatureFlags.test-renderer.js | 1 - .../ReactFeatureFlags.test-renderer.native.js | 1 - .../ReactFeatureFlags.test-renderer.www.js | 1 - .../shared/forks/ReactFeatureFlags.testing.js | 1 - .../forks/ReactFeatureFlags.testing.www.js | 1 - .../shared/forks/ReactFeatureFlags.www.js | 2 - 12 files changed, 57 insertions(+), 51 deletions(-) diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js index 99d1bd92e4a0..f18744a19969 100644 --- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js +++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js @@ -16,8 +16,6 @@ const ReactTestUtils = require('react-dom/test-utils'); const renderSubtreeIntoContainer = require('react-dom') .unstable_renderSubtreeIntoContainer; -const ReactFeatureFlags = require('shared/ReactFeatureFlags'); - describe('renderSubtreeIntoContainer', () => { it('should pass context when rendering subtree elsewhere', () => { const portal = document.createElement('div'); @@ -48,18 +46,13 @@ describe('renderSubtreeIntoContainer', () => { } componentDidMount() { - if (ReactFeatureFlags.warnUnstableRenderSubtreeIntoContainer) { - expect( - function() { - renderSubtreeIntoContainer(this, , portal); - }.bind(this), - ).toWarnDev( - 'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated and ' + - 'will be removed in a future major release. Consider using React Portals instead.', - ); - } else { - renderSubtreeIntoContainer(this, , portal); - } + expect( + function() { + renderSubtreeIntoContainer(this, , portal); + }.bind(this), + ).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } } @@ -144,11 +137,19 @@ describe('renderSubtreeIntoContainer', () => { } componentDidMount() { - renderSubtreeIntoContainer(this, , portal); + expect(() => { + renderSubtreeIntoContainer(this, , portal); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } componentDidUpdate() { - renderSubtreeIntoContainer(this, , portal); + expect(() => { + renderSubtreeIntoContainer(this, , portal); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } } @@ -192,11 +193,19 @@ describe('renderSubtreeIntoContainer', () => { } componentDidMount() { - renderSubtreeIntoContainer(this, , portal); + expect(() => { + renderSubtreeIntoContainer(this, , portal); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } componentDidUpdate() { - renderSubtreeIntoContainer(this, , portal); + expect(() => { + renderSubtreeIntoContainer(this, , portal); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } } @@ -217,7 +226,11 @@ describe('renderSubtreeIntoContainer', () => { } componentDidMount() { - renderSubtreeIntoContainer(this,
hello
, portal); + expect(() => { + renderSubtreeIntoContainer(this,
hello
, portal); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } } @@ -247,7 +260,11 @@ describe('renderSubtreeIntoContainer', () => { return null; } componentDidMount() { - renderSubtreeIntoContainer(this, , portal); + expect(() => { + renderSubtreeIntoContainer(this, , portal); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } } @@ -278,7 +295,11 @@ describe('renderSubtreeIntoContainer', () => { return {value: this.props.value}; } componentDidMount() { - renderSubtreeIntoContainer(this, , portal1); + expect(() => { + renderSubtreeIntoContainer(this, , portal1); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } static childContextTypes = { value: PropTypes.string.isRequired, @@ -290,7 +311,11 @@ describe('renderSubtreeIntoContainer', () => { return null; } componentDidMount() { - renderSubtreeIntoContainer(this, , portal2); + expect(() => { + renderSubtreeIntoContainer(this, , portal2); + }).toErrorDev( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported', + ); } } diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 87ba7bf36101..c3f9e3fcb47e 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -39,10 +39,7 @@ import { import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal'; import {canUseDOM} from 'shared/ExecutionEnvironment'; import ReactVersion from 'shared/ReactVersion'; -import { - warnUnstableRenderSubtreeIntoContainer, - enableNewReconciler, -} from 'shared/ReactFeatureFlags'; +import {enableNewReconciler} from 'shared/ReactFeatureFlags'; import { getInstanceFromNode, @@ -73,8 +70,6 @@ setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority); setGetCurrentUpdatePriority(getCurrentUpdatePriority); setAttemptHydrationAtPriority(runWithPriority); -let didWarnAboutUnstableRenderSubtreeIntoContainer = false; - if (__DEV__) { if ( typeof Map !== 'function' || @@ -121,19 +116,6 @@ function renderSubtreeIntoContainer( containerNode: Container, callback: ?Function, ) { - if (__DEV__) { - if ( - warnUnstableRenderSubtreeIntoContainer && - !didWarnAboutUnstableRenderSubtreeIntoContainer - ) { - didWarnAboutUnstableRenderSubtreeIntoContainer = true; - console.warn( - 'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated ' + - 'and will be removed in a future major release. Consider using ' + - 'React Portals instead.', - ); - } - } return unstable_renderSubtreeIntoContainer( parentComponent, element, diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js index 340e151bf893..1c53b5620b67 100644 --- a/packages/react-dom/src/client/ReactDOMLegacy.js +++ b/packages/react-dom/src/client/ReactDOMLegacy.js @@ -316,6 +316,15 @@ export function unstable_renderSubtreeIntoContainer( containerNode: Container, callback: ?Function, ) { + if (__DEV__) { + console.error( + 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported ' + + 'in React 18. Consider using a portal instead. Until you switch to ' + + "the createRoot API, your app will behave as if it's running React " + + '17. Learn more: https://reactjs.org/link/switch-to-createroot', + ); + } + if (!isValidContainerLegacy(containerNode)) { throw new Error('Target container is not a DOM element.'); } diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 540a9d03ccbc..ba8a3bd437cc 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -19,7 +19,6 @@ export const warnAboutDeprecatedLifecycles = true; export const enableLazyElements = true; export const enableComponentStackLocations = true; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; -export const warnUnstableRenderSubtreeIntoContainer = false; export const enablePersistentOffscreenHostContainer = false; // ----------------------------------------------------------------------------- diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 2e7ed5b2528a..5bf0f37db9eb 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -47,7 +47,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableTrustedTypesIntegration = false; export const disableTextareaChildren = false; export const disableModulePatternComponents = false; -export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 1a64e8c7aa07..5c97146a82b2 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableTrustedTypesIntegration = false; export const disableTextareaChildren = false; export const disableModulePatternComponents = false; -export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index e4f3393fe838..b44bc97206d0 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableTrustedTypesIntegration = false; export const disableTextareaChildren = false; export const disableModulePatternComponents = false; -export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 7169629762f1..4b8c1b774179 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableTrustedTypesIntegration = false; export const disableTextareaChildren = false; export const disableModulePatternComponents = false; -export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const enableComponentStackLocations = false; export const enableLegacyFBSupport = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index ec04b6be37a0..b6f620e2fb70 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableTrustedTypesIntegration = false; export const disableTextareaChildren = false; export const disableModulePatternComponents = true; -export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index dfe9625873e8..dbfc8fb70453 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableTrustedTypesIntegration = false; export const disableTextareaChildren = false; export const disableModulePatternComponents = false; -export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index a9ef92b69a44..95fa25cf592c 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; export const enableTrustedTypesIntegration = false; export const disableTextareaChildren = __EXPERIMENTAL__; export const disableModulePatternComponents = true; -export const warnUnstableRenderSubtreeIntoContainer = false; export const warnAboutSpreadingKeyToJSX = false; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 381fa5532eda..ac50fe4fd9f3 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -88,8 +88,6 @@ export const enableComponentStackLocations = true; export const disableTextareaChildren = __EXPERIMENTAL__; -export const warnUnstableRenderSubtreeIntoContainer = false; - // Enable forked reconciler. Piggy-backing on the "variant" global so that we // don't have to add another test dimension. The build system will compile this // to the correct value.