diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
index fd286f1e68c8..4a0d9f5f4149 100644
--- a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
+++ b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
@@ -709,9 +709,9 @@ describe('ReactComponentLifeCycle', () => {
);
}).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated',
- 'componentWillReceiveProps is deprecated',
- 'componentWillUpdate is deprecated',
+ 'componentWillMount has been renamed',
+ 'componentWillReceiveProps has been renamed',
+ 'componentWillUpdate has been renamed',
],
{withoutStack: true},
);
@@ -748,9 +748,9 @@ describe('ReactComponentLifeCycle', () => {
);
}).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated',
- 'componentWillReceiveProps is deprecated',
- 'componentWillUpdate is deprecated',
+ 'componentWillMount has been renamed',
+ 'componentWillReceiveProps has been renamed',
+ 'componentWillUpdate has been renamed',
],
{withoutStack: true},
);
@@ -815,7 +815,10 @@ describe('ReactComponentLifeCycle', () => {
{withoutStack: true},
);
}).toLowPriorityWarnDev(
- ['componentWillMount is deprecated', 'componentWillUpdate is deprecated'],
+ [
+ 'componentWillMount has been renamed',
+ 'componentWillUpdate has been renamed',
+ ],
{withoutStack: true},
);
@@ -863,7 +866,7 @@ describe('ReactComponentLifeCycle', () => {
'https://fb.me/react-async-component-lifecycle-hooks',
{withoutStack: true},
);
- }).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
+ }).toLowPriorityWarnDev(['componentWillMount has been renamed'], {
withoutStack: true,
});
@@ -887,7 +890,7 @@ describe('ReactComponentLifeCycle', () => {
'https://fb.me/react-async-component-lifecycle-hooks',
{withoutStack: true},
);
- }).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
+ }).toLowPriorityWarnDev(['componentWillReceiveProps has been renamed'], {
withoutStack: true,
});
});
@@ -921,7 +924,10 @@ describe('ReactComponentLifeCycle', () => {
{withoutStack: true},
);
}).toLowPriorityWarnDev(
- ['componentWillMount is deprecated', 'componentWillUpdate is deprecated'],
+ [
+ 'componentWillMount has been renamed',
+ 'componentWillUpdate has been renamed',
+ ],
{withoutStack: true},
);
@@ -967,7 +973,7 @@ describe('ReactComponentLifeCycle', () => {
'https://fb.me/react-async-component-lifecycle-hooks',
{withoutStack: true},
);
- }).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
+ }).toLowPriorityWarnDev(['componentWillMount has been renamed'], {
withoutStack: true,
});
@@ -990,7 +996,7 @@ describe('ReactComponentLifeCycle', () => {
'https://fb.me/react-async-component-lifecycle-hooks',
{withoutStack: true},
);
- }).toLowPriorityWarnDev(['componentWillReceiveProps is deprecated'], {
+ }).toLowPriorityWarnDev(['componentWillReceiveProps has been renamed'], {
withoutStack: true,
});
});
@@ -1130,9 +1136,9 @@ describe('ReactComponentLifeCycle', () => {
ReactDOM.render(, div),
).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated',
- 'componentWillReceiveProps is deprecated',
- 'componentWillUpdate is deprecated',
+ 'componentWillMount has been renamed',
+ 'componentWillReceiveProps has been renamed',
+ 'componentWillUpdate has been renamed',
],
{withoutStack: true},
);
@@ -1403,17 +1409,42 @@ describe('ReactComponentLifeCycle', () => {
ReactDOM.render(, container),
).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated and will be removed in the next major version. ' +
- 'Use componentDidMount instead. As a temporary workaround, ' +
- 'you can rename to UNSAFE_componentWillMount.' +
- '\n\nPlease update the following components: MyComponent',
- 'componentWillReceiveProps is deprecated and will be removed in the next major version. ' +
- 'Use static getDerivedStateFromProps instead.' +
- '\n\nPlease update the following components: MyComponent',
- 'componentWillUpdate is deprecated and will be removed in the next major version. ' +
- 'Use componentDidUpdate instead. As a temporary workaround, ' +
- 'you can rename to UNSAFE_componentWillUpdate.' +
- '\n\nPlease update the following components: MyComponent',
+ 'componentWillMount has been renamed to UNSAFE_componentWillMount, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ '- If you initialize state in componentWillMount, move this logic into the constructor.\n' +
+ '- If you fetch data or perform other side effects in componentWillMount, ' +
+ 'move this logic into componentDidMount.\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: MyComponent\n',
+
+ 'componentWillReceiveProps has been renamed to UNSAFE_componentWillReceiveProps, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ "- If you're updating state whenever props change, " +
+ 'move this logic into static getDerivedStateFromProps.\n' +
+ '- If you fetch data or perform other side effects in componentWillReceiveProps, ' +
+ 'move this logic into componentDidUpdate.\n' +
+ '- Refactor your code to use memoization techniques instead of derived state. ' +
+ 'Learn more at: https://fb.me/react-derived-state\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: MyComponent\n',
+
+ 'componentWillUpdate has been renamed to UNSAFE_componentWillUpdate, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ '- If you fetch data or perform other side effects in componentWillUpdate, ' +
+ 'move this logic into componentDidUpdate.\n' +
+ "- If you're reading DOM properties before an update, " +
+ 'move this logic into getSnapshotBeforeUpdate.\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: MyComponent\n',
],
{withoutStack: true},
);
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
index 76230a323035..4aed0e0246a6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
@@ -229,7 +229,7 @@ describe('ReactDOMServerLifecycles', () => {
expect(() =>
ReactDOMServer.renderToString(),
- ).toLowPriorityWarnDev('componentWillMount() is deprecated', {
+ ).toLowPriorityWarnDev('componentWillMount has been renamed', {
withoutStack: true,
});
expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);
@@ -286,10 +286,9 @@ describe('ReactDOMServerLifecycles', () => {
expect(() =>
ReactDOMServer.renderToString(),
- ).toLowPriorityWarnDev(
- 'Component: componentWillMount() is deprecated and will be removed in the next major version.',
- {withoutStack: true},
- );
+ ).toLowPriorityWarnDev('componentWillMount has been renamed', {
+ withoutStack: true,
+ });
});
it('should warn about deprecated lifecycle hooks', () => {
@@ -302,11 +301,9 @@ describe('ReactDOMServerLifecycles', () => {
expect(() =>
ReactDOMServer.renderToString(),
- ).toLowPriorityWarnDev(
- 'Warning: Component: componentWillMount() is deprecated and will be removed ' +
- 'in the next major version.',
- {withoutStack: true},
- );
+ ).toLowPriorityWarnDev('componentWillMount has been renamed', {
+ withoutStack: true,
+ });
// De-duped
ReactDOMServer.renderToString();
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 4d046af383ce..f107446c5a86 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -363,7 +363,7 @@ describe('ReactDOMServerHydration', () => {
expect(() => {
element.innerHTML = ReactDOMServer.renderToString(markup);
}).toLowPriorityWarnDev(
- ['componentWillMount() is deprecated and will be removed'],
+ ['componentWillMount has been renamed to UNSAFE_componentWillMount'],
{withoutStack: true},
);
expect(element.textContent).toBe('Hi');
@@ -373,7 +373,7 @@ describe('ReactDOMServerHydration', () => {
'Please update the following components to use componentDidMount instead: ComponentWithWarning',
);
}).toLowPriorityWarnDev(
- ['componentWillMount is deprecated and will be removed'],
+ ['componentWillMount has been renamed to UNSAFE_componentWillMount'],
{withoutStack: true},
);
expect(element.textContent).toBe('Hi');
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index ce078dcb7177..cc4354424b4a 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -573,13 +573,18 @@ function resolve(
if (!didWarnAboutDeprecatedWillMount[componentName]) {
lowPriorityWarning(
false,
- '%s: componentWillMount() is deprecated and will be ' +
- 'removed in the next major version. Read about the motivations ' +
- 'behind this change: ' +
- 'https://fb.me/react-async-component-lifecycle-hooks' +
- '\n\n' +
- 'As a temporary workaround, you can rename to ' +
- 'UNSAFE_componentWillMount instead.',
+ 'componentWillMount has been renamed to UNSAFE_componentWillMount, ' +
+ "and the old name won't work in the next major version of React.\n" +
+ 'We suggest doing one of the following:\n' +
+ '- If you initialize state in componentWillMount, move this logic into the constructor.\n' +
+ '- If you fetch data or perform other side effects in componentWillMount, ' +
+ 'move this logic into componentDidMount.\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: %s\n' +
+ '\nLearn about this warning, with more examples and suggestions here:\n' +
+ 'https://fb.me/react-async-component-lifecycle-hooks',
componentName,
);
didWarnAboutDeprecatedWillMount[componentName] = true;
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js
index 143e7ebd4a7b..acd6b438899a 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.js
@@ -141,12 +141,18 @@ if (__DEV__) {
lowPriorityWarning(
false,
- 'componentWillMount is deprecated and will be removed in the next major version. ' +
- 'Use componentDidMount instead. As a temporary workaround, ' +
- 'you can rename to UNSAFE_componentWillMount.' +
- '\n\nPlease update the following components: %s' +
- '\n\nLearn more about this warning here:' +
- '\nhttps://fb.me/react-async-component-lifecycle-hooks',
+ 'componentWillMount has been renamed to UNSAFE_componentWillMount, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ '- If you initialize state in componentWillMount, move this logic into the constructor.\n' +
+ '- If you fetch data or perform other side effects in componentWillMount, ' +
+ 'move this logic into componentDidMount.\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: %s\n' +
+ '\nLearn more about this warning here:\n' +
+ 'https://fb.me/react-async-component-lifecycle-hooks',
sortedNames,
);
@@ -164,11 +170,21 @@ if (__DEV__) {
lowPriorityWarning(
false,
- 'componentWillReceiveProps is deprecated and will be removed in the next major version. ' +
- 'Use static getDerivedStateFromProps instead.' +
- '\n\nPlease update the following components: %s' +
- '\n\nLearn more about this warning here:' +
- '\nhttps://fb.me/react-async-component-lifecycle-hooks',
+ 'componentWillReceiveProps has been renamed to UNSAFE_componentWillReceiveProps, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ "- If you're updating state whenever props change, " +
+ 'move this logic into static getDerivedStateFromProps.\n' +
+ '- If you fetch data or perform other side effects in componentWillReceiveProps, ' +
+ 'move this logic into componentDidUpdate.\n' +
+ '- Refactor your code to use memoization techniques instead of derived state. ' +
+ 'Learn more at: https://fb.me/react-derived-state\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: %s\n' +
+ '\nLearn more about this warning here:\n' +
+ 'https://fb.me/react-async-component-lifecycle-hooks',
sortedNames,
);
@@ -186,12 +202,19 @@ if (__DEV__) {
lowPriorityWarning(
false,
- 'componentWillUpdate is deprecated and will be removed in the next major version. ' +
- 'Use componentDidUpdate instead. As a temporary workaround, ' +
- 'you can rename to UNSAFE_componentWillUpdate.' +
- '\n\nPlease update the following components: %s' +
- '\n\nLearn more about this warning here:' +
- '\nhttps://fb.me/react-async-component-lifecycle-hooks',
+ 'componentWillUpdate has been renamed to UNSAFE_componentWillUpdate, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ '- If you fetch data or perform other side effects in componentWillUpdate, ' +
+ 'move this logic into componentDidUpdate.\n' +
+ "- If you're reading DOM properties before an update, " +
+ 'move this logic into getSnapshotBeforeUpdate.\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: %s\n' +
+ '\nLearn more about this warning here:\n' +
+ 'https://fb.me/react-async-component-lifecycle-hooks',
sortedNames,
);
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 14b33ce99180..d7939d1327ec 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -429,9 +429,9 @@ describe('ReactStrictMode', () => {
);
}).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated',
- 'componentWillReceiveProps is deprecated',
- 'componentWillUpdate is deprecated',
+ 'componentWillMount has been renamed',
+ 'componentWillReceiveProps has been renamed',
+ 'componentWillUpdate has been renamed',
],
{withoutStack: true},
);
@@ -517,7 +517,7 @@ describe('ReactStrictMode', () => {
'\n\ncomponentWillMount: Please update the following components ' +
'to use componentDidMount instead: Baz',
]);
- }).toLowPriorityWarnDev(['componentWillMount is deprecated'], {
+ }).toLowPriorityWarnDev(['componentWillMount has been renamed'], {
withoutStack: true,
});
diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.internal.js b/packages/react/src/__tests__/createReactClassIntegration-test.internal.js
index b1bd7c9b1c91..d22e7ee50abc 100644
--- a/packages/react/src/__tests__/createReactClassIntegration-test.internal.js
+++ b/packages/react/src/__tests__/createReactClassIntegration-test.internal.js
@@ -51,10 +51,16 @@ describe('create-react-class-integration', () => {
});
expect(() => ReactNative.render(, 1)).toLowPriorityWarnDev(
- 'componentWillMount is deprecated and will be removed in the next major version. ' +
- 'Use componentDidMount instead. As a temporary workaround, ' +
- 'you can rename to UNSAFE_componentWillMount.' +
- '\n\nPlease update the following components: MyNativeComponent',
+ 'componentWillMount has been renamed to UNSAFE_componentWillMount, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ '- If you initialize state in componentWillMount, move this logic into the constructor.\n' +
+ '- If you fetch data or perform other side effects in componentWillMount, ' +
+ 'move this logic into componentDidMount.\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: MyNativeComponent\n',
{withoutStack: true},
);
});
@@ -68,9 +74,19 @@ describe('create-react-class-integration', () => {
});
expect(() => ReactNative.render(, 1)).toLowPriorityWarnDev(
- 'componentWillReceiveProps is deprecated and will be removed in the next major version. ' +
- 'Use static getDerivedStateFromProps instead.' +
- '\n\nPlease update the following components: MyNativeComponent',
+ 'componentWillReceiveProps has been renamed to UNSAFE_componentWillReceiveProps, ' +
+ "and the old name won't work in the next major version of React.\n\n" +
+ 'We suggest doing one of the following:\n' +
+ "- If you're updating state whenever props change, " +
+ 'move this logic into static getDerivedStateFromProps.\n' +
+ '- If you fetch data or perform other side effects in componentWillReceiveProps, ' +
+ 'move this logic into componentDidUpdate.\n' +
+ '- Refactor your code to use memoization techniques instead of derived state. ' +
+ 'Learn more at: https://fb.me/react-derived-state\n' +
+ '- To rename all deprecated lifecycles to their new names, you can run ' +
+ '`npx react-codemod rename-unsafe-lifecycles ` in your project folder. ' +
+ '(Note that the warning will still be logged in strict mode.)\n' +
+ '\nPlease update the following components: MyNativeComponent\n',
{withoutStack: true},
);
});
diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.js b/packages/react/src/__tests__/createReactClassIntegration-test.js
index 36b6bb047732..542a35087033 100644
--- a/packages/react/src/__tests__/createReactClassIntegration-test.js
+++ b/packages/react/src/__tests__/createReactClassIntegration-test.js
@@ -560,9 +560,9 @@ describe('create-react-class-integration', () => {
);
}).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated',
- 'componentWillReceiveProps is deprecated',
- 'componentWillUpdate is deprecated',
+ 'componentWillMount has been renamed',
+ 'componentWillReceiveProps has been renamed',
+ 'componentWillUpdate has been renamed',
],
{withoutStack: true},
);
@@ -604,9 +604,9 @@ describe('create-react-class-integration', () => {
);
}).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated',
- 'componentWillReceiveProps is deprecated',
- 'componentWillUpdate is deprecated',
+ 'componentWillMount has been renamed',
+ 'componentWillReceiveProps has been renamed',
+ 'componentWillUpdate has been renamed',
],
{withoutStack: true},
);
@@ -649,9 +649,9 @@ describe('create-react-class-integration', () => {
ReactDOM.render(, div),
).toLowPriorityWarnDev(
[
- 'componentWillMount is deprecated',
- 'componentWillReceiveProps is deprecated',
- 'componentWillUpdate is deprecated',
+ 'componentWillMount has been renamed',
+ 'componentWillReceiveProps has been renamed',
+ 'componentWillUpdate has been renamed',
],
{withoutStack: true},
);