Display a warning if Component is called without props

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

This is a feature (enhancement).

What is the current behavior?

props parameter isn’t validated in Component and PureComponent. Omitted props is a common mistake that results in undefined this.props in constructor. This may result in a problem:

class MyComponent extends Component {
  constructor() {
    super();
    this.state = { a: 1, b: this.props.b }; // cannot read b property of undefined
  }
}

A problem may be harder to determine if previously working code stops working when refactored:

class MyComponent extends Component {
  constructor() {
    super(); // no error
  }

  componentWillMount() {
    // rewriting this to constructor code will result in situation above
    this.setState({ a: 1, b: this.props.b });
  }
}

What is the expected behavior?

Component and PureComponent validate props parameter to be an object, or arguments > 0 at least and display a warning in development mode in case props isn’t passed from child constructor.

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

React 16.7.0-alpha.0

[sophiebits]

This is a good idea, but since we made super(); work if you don’t access this.props in the constructor, and using this.props in the constructor is relatively rare, I don’t think it is worth it to add this at super(); time.

However we could perhaps have a warning when accessing this.props if we make it a getter?

[sagar-gavhane]

Hi @bisubus, I agree with you but how can it helps to developers. You can also try static state or methods for the same.

Check out this article for more reference. https://michalzalecki.com/react-components-and-class-properties/

import React, { Component } from "react";

class App extends Component {
  state = {
    appName: this.props.appName
  };

  render() {
    return (
      <React.Fragment>
        <div className="container my-5">
          <h2>{this.state.appName}</h2>
        </div>
      </React.Fragment>
    );
  }
}

export default App;