Is React super(props) deprecated?

Question

I've always used something similar to

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
        
        this.state = {
            var1 : undefined,
            var2 : 'etc...',
        }
    }
}

But today I noticed while working in VS Code there is a strike-thru line on super(props), which was never there before !?

What has changed? (the link to the docs in the popup is not very helpful)

Elite

This is the second SO post I've seen today for this exact issue. Google search: github.com/microsoft/TypeScript/issues/40511 Looks to be issue with the typescript vscode uses for linting. Vscode in their August 2020 update (from just a few days ago) updated to typescript 4.0 code.visualstudio.com/updates/v1_49#_typescript-40. It has the smell of all being related. – Perigon

What did the React docs say about this when you looked there? – Hovis

Answer 1

It looks like a bug. Please see - here for explanation and there is a link to a source.

Cessation

Link only answers aren't much helpful. Next time, along with the link, include a snippet from that linked page. Also, that link now redirects to a spam ad site. – Mordant

Answer 2

My guess is that your editor is showing you the description for the super(props, context) signature which is deprecated. That link it's pointing to is all about how the old context API is going away, and that particular call signature is part of what is leaving.

However, I haven't heard of a plain super(props) going away, you should be safe to continue using that.

Hesta

I didn't even know there was a super(props,context) signature, therefore I've never used it. But VS Code (or whatever linter they are using) is causing just a normal super(props) to be flagged. I'll probably ignore it for now, until someone fixes it on their side. – Elite

Answer 3

Seems to be a bug. If you update your "@types/react" it will solve the problem.

npm install --dev @types/react

when you your code on the @latest

npm install --also=dev @types/react

Puffin

Answer 4

super(props) is not been deprecated. See the official doc - https://reactjs.org/docs/react-component.html#constructor

This is not an error actually. This is a bug related to the code editor, Typescript and React. You can read here - https://github.com/microsoft/TypeScript/issues/40511

The good news is this is resolved. You can find the solution here - https://github.com/DefinitelyTyped/DefinitelyTyped/pull/47784

Recondition

Answer 5

Use just super() instead of super(props)

super(props) :

• By using this, we can access and use this.props object in the constructor.

super() :

• If you are not using this.props in the constructor there is no need to pass props to the super().

• Instead of this.props, you can always use props.

• It’s okay to not pass props to super as irrespective of passing it to super, this.props is still available inside render function.

  class MyComponent extends React.Component {
      constructor(props) {
          super();
  
          this.state = {
               var1 : undefined,
               var2 : 'etc...',
          };
      }
  }
  

Stretto

This just creates an error instead for those with type-checking turned on, as there currently isn't a zero-param overload for the constructor in the React types. – Tansey