Warn if renderSubtreeIntoContainer is called

We already warn for all the other legacy APIs. Forgot to enable this one.
facebook · Feb 24, 2022 · 827e233 · 827e233
1 parent 52c393b
commit 827e233
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 49 deletions.
diff --git 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, <Component />, 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, <Component />, portal);
-        }
+        expect(
+          function() {
+            renderSubtreeIntoContainer(this, <Component />, portal);
+          }.bind(this),
+        ).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -144,11 +137,19 @@ describe('renderSubtreeIntoContainer', () => {
       }
 
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
 
       componentDidUpdate() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -192,11 +193,19 @@ describe('renderSubtreeIntoContainer', () => {
       }
 
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
 
       componentDidUpdate() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -217,7 +226,11 @@ describe('renderSubtreeIntoContainer', () => {
       }
 
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <div>hello</div>, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <div>hello</div>, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -247,7 +260,11 @@ describe('renderSubtreeIntoContainer', () => {
         return null;
       }
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Child />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Child />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -278,7 +295,11 @@ describe('renderSubtreeIntoContainer', () => {
         return {value: this.props.value};
       }
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Middle />, portal1);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Middle />, 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, <Child />, portal2);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Child />, 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
@@ -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,
@@ -121,19 +118,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
@@ -316,6 +316,16 @@ 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 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.