Improved wording for deprecation lifecycle warnings

facebook · Jan 18, 2018 · 3772ee2 · 3772ee2
1 parent 53770c3
commit 3772ee2
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 31 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.internal.js
@@ -39,17 +39,14 @@ describe('ReactComponentLifeCycle', () => {
     const container = document.createElement('div');
     expect(() => ReactDOM.render(<MyComponent x={1} />, container)).toWarnDev([
       'Warning: MyComponent: componentWillMount() is deprecated and will be ' +
-        'removed in the next major version. ' +
-        'Please use UNSAFE_componentWillMount() instead.',
+        'removed in the next major version.',
     ]);
 
     expect(() => ReactDOM.render(<MyComponent x={2} />, container)).toWarnDev([
       'Warning: MyComponent: componentWillReceiveProps() is deprecated and ' +
-        'will be removed in the next major version. ' +
-        'Please use UNSAFE_componentWillReceiveProps() instead.',
+        'will be removed in the next major version.',
       'Warning: MyComponent: componentWillUpdate() is deprecated and will be ' +
-        'removed in the next major version. ' +
-        'Please use UNSAFE_componentWillUpdate() instead.',
+        'removed in the next major version.',
     ]);
 
     // Dedupe check (instantiate and update)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.internal.js
@@ -34,7 +34,7 @@ describe('ReactDOMServerLifecycles', () => {
 
     expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
       'Warning: Component: componentWillMount() is deprecated and will be removed ' +
-        'in the next major version. Please use UNSAFE_componentWillMount() instead.',
+        'in the next major version.',
     );
 
     // De-duped

diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -513,8 +513,13 @@ function resolve(
             if (!didWarnAboutDeprecatedWillMount[componentName]) {
               warning(
                 false,
-                '%s: componentWillMount() is deprecated and will be removed in the ' +
-                  'next major version. Please use UNSAFE_componentWillMount() instead.',
+                '%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.',
                 componentName,
               );
               didWarnAboutDeprecatedWillMount[componentName] = true;

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js
@@ -466,8 +466,13 @@ export default function(
           if (!didWarnAboutLegacyWillMount[componentName]) {
             warning(
               false,
-              '%s: componentWillMount() is deprecated and will be removed in the ' +
-                'next major version. Please use UNSAFE_componentWillMount() instead.',
+              '%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.',
               componentName,
             );
             didWarnAboutLegacyWillMount[componentName] = true;
@@ -509,8 +514,14 @@ export default function(
           if (!didWarnAboutLegacyWillReceiveProps[componentName]) {
             warning(
               false,
-              '%s: componentWillReceiveProps() is deprecated and will be removed in the ' +
-                'next major version. Please use UNSAFE_componentWillReceiveProps() instead.',
+              '%s: componentWillReceiveProps() is deprecated and ' +
+                'will be removed in the next major version. Use ' +
+                'static getDerivedStateFromProps() instead. 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_componentWillReceiveProps instead.',
               componentName,
             );
             didWarnAboutLegacyWillReceiveProps[componentName] = true;
@@ -868,8 +879,13 @@ export default function(
               if (!didWarnAboutLegacyWillUpdate[componentName]) {
                 warning(
                   false,
-                  '%s: componentWillUpdate() is deprecated and will be removed in the ' +
-                    'next major version. Please use UNSAFE_componentWillUpdate() instead.',
+                  '%s: componentWillUpdate() 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_componentWillUpdate instead.',
                   componentName,
                 );
                 didWarnAboutLegacyWillUpdate[componentName] = true;

diff --git a/packages/react-test-renderer/src/ReactShallowRenderer.js b/packages/react-test-renderer/src/ReactShallowRenderer.js
@@ -185,8 +185,13 @@ class ReactShallowRenderer {
             if (!didWarnAboutLegacyWillMount[componentName]) {
               warning(
                 false,
-                '%s: componentWillMount() is deprecated and will be removed in the ' +
-                  'next major version. Please use UNSAFE_componentWillMount() instead.',
+                '%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.',
                 componentName,
               );
               didWarnAboutLegacyWillMount[componentName] = true;
@@ -223,8 +228,14 @@ class ReactShallowRenderer {
             if (!didWarnAboutLegacyWillReceiveProps[componentName]) {
               warning(
                 false,
-                '%s: componentWillReceiveProps() is deprecated and will be removed in the ' +
-                  'next major version. Please use UNSAFE_componentWillReceiveProps() instead.',
+                '%s: componentWillReceiveProps() is deprecated and ' +
+                  'will be removed in the next major version. Use ' +
+                  'static getDerivedStateFromProps() instead. 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_componentWillReceiveProps instead.',
                 componentName,
               );
               didWarnAboutLegacyWillReceiveProps[componentName] = true;
@@ -267,8 +278,13 @@ class ReactShallowRenderer {
             if (!didWarnAboutLegacyWillUpdate[componentName]) {
               warning(
                 false,
-                '%s: componentWillUpdate() is deprecated and will be removed in the ' +
-                  'next major version. Please use UNSAFE_componentWillUpdate() instead.',
+                '%s: componentWillUpdate() 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_componentWillUpdate instead.',
                 componentName,
               );
               didWarnAboutLegacyWillUpdate[componentName] = true;

diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.internal.js
@@ -38,16 +38,13 @@ describe('ReactShallowRenderer', () => {
     const shallowRenderer = createRenderer();
     expect(() => shallowRenderer.render(<ComponentWithWarnings />)).toWarnDev(
       'Warning: ComponentWithWarnings: componentWillMount() is deprecated and will ' +
-        'be removed in the next major version. ' +
-        'Please use UNSAFE_componentWillMount() instead.',
+        'be removed in the next major version.',
     );
     expect(() => shallowRenderer.render(<ComponentWithWarnings />)).toWarnDev([
       'Warning: ComponentWithWarnings: componentWillReceiveProps() is deprecated ' +
-        'and will be removed in the next major version. ' +
-        'Please use UNSAFE_componentWillReceiveProps() instead.',
+        'and will be removed in the next major version.',
       'Warning: ComponentWithWarnings: componentWillUpdate() is deprecated and will ' +
-        'be removed in the next major version. ' +
-        'Please use UNSAFE_componentWillUpdate() instead.',
+        'be removed in the next major version.',
     ]);
 
     // Verify no duplicate warnings

diff --git a/packages/react/src/__tests__/createReactClassIntegration-test.internal.js b/packages/react/src/__tests__/createReactClassIntegration-test.internal.js
@@ -96,14 +96,12 @@ describe('create-react-class-integration', () => {
         'clean up subscriptions and pending requests in componentWillUnmount ' +
         'to prevent memory leaks.',
       'Warning: MyComponent: componentWillMount() is deprecated and will be ' +
-        'removed in the next major version. Please use ' +
-        'UNSAFE_componentWillMount() instead.',
+        'removed in the next major version.',
     ]);
 
     expect(() => ReactDOM.render(<Component />, container)).toWarnDev(
       'Warning: MyComponent: componentWillUpdate() is deprecated and will be ' +
-        'removed in the next major version. Please use ' +
-        'UNSAFE_componentWillUpdate() instead.',
+        'removed in the next major version.',
     );
 
     ReactDOM.unmountComponentAtNode(container);