87

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)
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Steven
  • 893
  • 1
  • 5
  • 8
  • 8
    Probably a duplicate of [React native context and deprecated super usage](https://stackoverflow.com/q/63883401/1048572)? There is no `context` here, the code is fine actually, the warning is wrong. – Bergi Sep 16 '20 at 21:41

4 Answers4

43

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); //{}
  }
  // ...
}
Anuj Raghuvanshi
  • 664
  • 1
  • 7
  • 24
Kiril Dobrev
  • 839
  • 1
  • 8
  • 12
  • Explains super() but doesn't answers OP. the question was why it is marked deprecated. – Aus Oct 11 '22 at 09:57
  • I believe this was a kind of a bug which was not resolved at the time this answer was written. I've found this solution and explanation and share it if it could help someone to work out the problem. We could find more details in the others answers. – Kiril Dobrev Oct 13 '22 at 22:52
36

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
weeix
  • 1,359
  • 1
  • 14
  • 17
14

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.

Dmitry S.
  • 8,373
  • 2
  • 39
  • 49
  • 1
    I'm using React 16.13.1. The thing that confuses me, is that I'm not even using that optional parameter. – Steven Sep 12 '20 at 05:11
  • 1
    What would the successor to constructor(props, context) be? – Steven Sep 12 '20 at 05:12
  • 3
    Looks like I can just call super() instead of super(props). I got the idea from here: https://stackoverflow.com/questions/30571875/whats-the-difference-between-super-and-superprops-in-react-when-using-e – Steven Sep 12 '20 at 05:42
  • That should be fine unless you need to use `this.props` inside the constructor. The successor is defined outside the component. https://reactjs.org/docs/context.html – Dmitry S. Sep 14 '20 at 12:53
  • 8
    @Steven [React' docs](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) recommended using `super(props)` so I think you could leave it as is. The deprecation message is actually a bug and someone already submitted a [patch](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/47784) to fix it. – weeix Sep 27 '20 at 13:45
13

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

McFrugal
  • 193
  • 8