Tweak da message

Author: gaearon

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -505,10 +505,13 @@ function constructClassInstance(
         didWarnAboutUninitializedState.add(componentName);
         warningWithoutStack(
           false,
-          '%s: Component state must be properly initialized when using getDerivedStateFromProps. ' +
-            '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__/ReactES6Class-test.js

@@ -190,8 +190,10 @@ describe('ReactES6Class', () => {
       }
     }
     expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toWarnDev(
-      'Foo: Component state must be properly initialized when using getDerivedStateFromProps. ' +
-        '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: Component state must be properly initialized when using getDerivedStateFromProps. ' +
-        '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

@@ -511,7 +511,10 @@ describe('create-react-class-integration', () => {
     expect(() =>
       ReactDOM.render(<Component />, document.createElement('div')),
     ).toWarnDev(
-      'Component state must be properly initialized when using getDerivedStateFromProps.',
+      '`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,
       },