Improve warning message for failure to initialize state when using getDerivedStateFromProps

[yourcelf]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

The warning for a failure to initialize state when using getDerivedStateFromProps is not as clear as it could be.

This component produces the warning:

MyComponent: Did not properly initialize state during construction. Expected state to be an object, but it was undefined.`

class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    return null;
  }
  render() {
    return <span>Foo</span>
  }
}

The warning can be resolved by adding state = {} either in the class definition or the constructor, or by not using getDerivedStateFromProps.

See reactjs/react.dev#796 for more detail on why this warning message can be counter-intuitive.

Since the warning is specific to the use of getDerivedStateFromProps and not triggered by any other state or lifecycle methods, and state initialization isn't required for other state methods like this.setState, it would make sense to me to mention getDerivedStateFromProps explicitly in the warning.

Here's a proposal for a new warning message:

MyComponent: Component state must be initialized when using getDerivedStateFromProps. Expected state to be an object, but it was undefined.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React >= 16.3.0

[blainekasten]

I'm also wondering why this is necessary? I'm experiencing a case where this would break down in the type system because my code expects an array to have certain values based on props, and actually throws an error in getDerivedStateFromProps if that prop isn't supplied.

example:

const State = {foo: Array<'key1' | 'key2'>}
const Props = {key1: string, key2: string}
component<Props, State> {
  state = {
    foo: [], // later throws an error when I am expecting this to be populated
  }
 
  static getDrivedStateFromProps(nextProps) {
    const foo = Object.keys(bar);
    if (foo.length === 0) throw new Error(); // gurantee foo is populated

    return {
      foo
    }
  }
}

[ColCh]

related: #12523

[flxwu]

I am opening a PR for that if nobody minds 😄

[nhunzaker]

Not at all, please go ahead!