27

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 !?

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

2

5 Answers 5

17

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.

1
  • 2
    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.
    – joedotnot
    Sep 17, 2020 at 13:42
13

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

1
  • 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.
    – Nikhil
    Mar 25, 2022 at 20:11
4

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
0

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

-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...',
            };
        }
    }
    
1
  • 1
    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.
    – Inkling
    Sep 29, 2020 at 5:29

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.