Enhance get derived state from props state warning - #12670 (#13317)

* Enhance warning message for missing state with getDerivedStateFromProps

* Adapt tests

* style fix

* Tweak da message

* Fix test

Author: Felix Wu

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js

@@ -1003,8 +1003,10 @@ describe('ReactComponentLifeCycle', () => {
 
     const div = document.createElement('div');
     expect(() => ReactDOM.render(<MyComponent />, div)).toWarnDev(
-      'MyComponent: Did not properly initialize state during construction. ' +
-        'Expected state to be an object, but it was undefined.',
+      '`MyComponent` uses `getDerivedStateFromProps` but its initial state is ' +
+        'undefined. This is not recommended. Instead, define the initial state by ' +
+        'assigning an object to `this.state` in the constructor of `MyComponent`. ' +
+        'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
       {withoutStack: true},
     );
 

packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js

@@ -201,8 +201,10 @@ describe('ReactDOMServerLifecycles', () => {
     }
 
     expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
-      'Component: Did not properly initialize state during construction. ' +
-        'Expected state to be an object, but it was undefined.',
+      '`Component` uses `getDerivedStateFromProps` but its initial state is ' +
+        'undefined. This is not recommended. Instead, define the initial state by ' +
+        'assigning an object to `this.state` in the constructor of `Component`. ' +
+        'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
       {withoutStack: true},
     );
 

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -476,10 +476,13 @@ function resolve(
             if (!didWarnAboutUninitializedState[componentName]) {
               warningWithoutStack(
                 false,
-                '%s: Did not properly initialize state during construction. ' +
-                  'Expected state to be an object, but it was %s.',
+                '`%s` uses `getDerivedStateFromProps` but its initial state is ' +
+                  '%s. This is not recommended. Instead, define the initial state by ' +
+                  'assigning an object to `this.state` in the constructor of `%s`. ' +
+                  'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
                 componentName,
                 inst.state === null ? 'null' : 'undefined',
+                componentName,
               );
               didWarnAboutUninitializedState[componentName] = true;
             }

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -505,10 +505,13 @@ function constructClassInstance(
         didWarnAboutUninitializedState.add(componentName);
         warningWithoutStack(
           false,
-          '%s: Did not properly initialize state during construction. ' +
-            'Expected state to be an object, but it was %s.',
+          '`%s` uses `getDerivedStateFromProps` but its initial state is ' +
+            '%s. This is not recommended. Instead, define the initial state by ' +
+            'assigning an object to `this.state` in the constructor of `%s`. ' +
+            'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
           componentName,
           instance.state === null ? 'null' : 'undefined',
+          componentName,
         );
       }
     }

packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee

@@ -163,7 +163,12 @@ describe 'ReactCoffeeScriptClass', ->
       }
     expect(->
       ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
-    ).toWarnDev 'Foo: Did not properly initialize state during construction. Expected state to be an object, but it was undefined.', {withoutStack: true}
+    ).toWarnDev (
+      '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
+      'undefined. This is not recommended. Instead, define the initial state by ' +
+      'assigning an object to `this.state` in the constructor of `Foo`. ' +
+      'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.'
+    ), {withoutStack: true}
     undefined
 
   it 'updates initial state with values returned by static getDerivedStateFromProps', ->

packages/react/src/__tests__/ReactES6Class-test.js

@@ -190,8 +190,10 @@ describe('ReactES6Class', () => {
       }
     }
     expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
-      'Foo: Did not properly initialize state during construction. ' +
-        'Expected state to be an object, but it was undefined.',
+      '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
+        'undefined. This is not recommended. Instead, define the initial state by ' +
+        'assigning an object to `this.state` in the constructor of `Foo`. ' +
+        'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
       {withoutStack: true},
     );
   });

packages/react/src/__tests__/ReactTypeScriptClass-test.ts

@@ -448,8 +448,10 @@ describe('ReactTypeScriptClass', function() {
     expect(function() {
       ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
     }).toWarnDev(
-      'Foo: Did not properly initialize state during construction. ' +
-        'Expected state to be an object, but it was undefined.',
+      '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
+      'undefined. This is not recommended. Instead, define the initial state by ' +
+      'assigning an object to `this.state` in the constructor of `Foo`. ' +
+      'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
         {withoutStack: true}
     );
   });

packages/react/src/__tests__/createReactClassIntegration-test.js

@@ -510,9 +510,15 @@ describe('create-react-class-integration', () => {
     });
     expect(() =>
       ReactDOM.render(<Component />, document.createElement('div')),
-    ).toWarnDev('Did not properly initialize state during construction.', {
-      withoutStack: true,
-    });
+    ).toWarnDev(
+      '`Component` uses `getDerivedStateFromProps` but its initial state is ' +
+        'null. This is not recommended. Instead, define the initial state by ' +
+        'assigning an object to `this.state` in the constructor of `Component`. ' +
+        'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
+      {
+        withoutStack: true,
+      },
+    );
   });
 
   it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new static gDSFP is present', () => {