Understanding why super() is deprecated in a React class component

Question

I'm new to React and I'm learning about the React component lifecycle with the latest version of React. My "super" call of the partial code below is flagged with the deprecated warning shown. I've had trouble understanding this one, as a lot of documentation out there still uses "super", and I'm not sure what the successor is, even from the full article linked in the feedback. Any ideas? Thanks.

class App extends Component {
  constructor(props) {
    super(props);
  }
}

Here is the warning:

constructor React.Component<any, any, any>(props: any, context?: any): React:Component<any, any, any> (+1 overload)
@deprecated
@see - https://reactjs.org/docs/legacy-context.html
'(props: any, context?: any): Component<any, any, any>' is deprecated ts(6385)

Answer 1

You need super(props); only if you gonna use this.props in the constructor. Otherwise you can use super(); If you use super(); in the constructor it is not a problem that outside of the constructor you will call this.props. You can read about it in the following link: https://overreacted.io/why-do-we-write-super-props/

class Button extends React.Component {
  constructor(props) {
    super(); //we forgot to pass props
    console.log(props); //{}
    console.log(this.props); //undefined
  }
  // ...
}

It can be even more challenging if this happens in some method that's called from the constructor. And that's why I recommend always passing down super(props), even through it isn't necessary.

class Button extends React.Component {
  constructor(props) {
    super(props); //we passed props
    console.log(props); //{}
    console.log(this.props); //{}
  }
  // ...
}