CODEWITHSUNDEEP
reactjstypescriptdeprecated
Steven
Steven

Reputation: 903

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

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)

Upvotes: 87

Views: 27466

Answers (4)

weeix
weeix

Reputation: 1589

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

Upvotes: 35

Kiril Dobrev
Kiril Dobrev

Reputation: 861

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

Upvotes: 44

McFrugal
McFrugal

Reputation: 193

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

Upvotes: 13

Dmitry S.
Dmitry S.

Reputation: 8513

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.

Upvotes: 14

Related Questions