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

ReactjsTypescriptDeprecated

Reactjs Problem Overview


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)

Reactjs Solutions


Solution 1 - Reactjs

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); //{}
  }
  // ...
}

Solution 2 - Reactjs

super(props); isn't deprecated yet. The deprecation message actually caused from a bug in React's type definition file and is already fixed as of @types/react 16.9.51. Just upgrade the package and you're good to go:

npm install @types/react

Solution 3 - Reactjs

It looks like the optional context parameter is deprecated because it refers to the legacy React context (pre v16.3). What version of React are you using?

https://reactjs.org/docs/legacy-context.html

I have not used React with TypeScript. Maybe React mappings are out of date.

Solution 4 - Reactjs

I think this is a bug in jslint. The code obviously isn't using the context parameter.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStevenView Question on Stackoverflow
Solution 1 - ReactjsKiril DobrevView Answer on Stackoverflow
Solution 2 - ReactjsweeixView Answer on Stackoverflow
Solution 3 - ReactjsDmitry S.View Answer on Stackoverflow
Solution 4 - ReactjsMcFrugalView Answer on Stackoverflow