Skip to content

Commit

Permalink
Warn if renderSubtreeIntoContainer is called (#23355)
Browse files Browse the repository at this point in the history
We already warn for all the other legacy APIs. Forgot to enable
this one.
  • Loading branch information
acdlite authored Feb 24, 2022
1 parent 52c393b commit a5b2215
Show file tree
Hide file tree
Showing 12 changed files with 57 additions and 51 deletions.
69 changes: 47 additions & 22 deletions packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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',
);
}
}

Expand Down Expand Up @@ -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',
);
}
}

Expand Down Expand Up @@ -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',
);
}
}

Expand All @@ -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',
);
}
}

Expand Down Expand Up @@ -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',
);
}
}

Expand Down Expand Up @@ -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,
Expand All @@ -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',
);
}
}

Expand Down
20 changes: 1 addition & 19 deletions packages/react-dom/src/client/ReactDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -73,8 +70,6 @@ setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
setGetCurrentUpdatePriority(getCurrentUpdatePriority);
setAttemptHydrationAtPriority(runWithPriority);

let didWarnAboutUnstableRenderSubtreeIntoContainer = false;

if (__DEV__) {
if (
typeof Map !== 'function' ||
Expand Down Expand Up @@ -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,
Expand Down
9 changes: 9 additions & 0 deletions packages/react-dom/src/client/ReactDOMLegacy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.');
}
Expand Down
1 change: 0 additions & 1 deletion packages/shared/ReactFeatureFlags.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

// -----------------------------------------------------------------------------
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.native-fb.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.native-oss.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.test-renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.testing.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.testing.www.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions packages/shared/forks/ReactFeatureFlags.www.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit a5b2215

Please sign in to comment.