Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Warn if renderSubtreeIntoContainer is called #23355

Merged
merged 1 commit into from
Feb 24, 2022
Merged

Warn if renderSubtreeIntoContainer is called #23355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 47 additions & 22 deletions packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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.native.js
View file
Open in desktop
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
1 change: 0 additions & 1 deletion packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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