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}, );