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)

This is the second SO post I've seen today for this exact issue. Google search: https://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 https://code.visualstudio.com/updates/v1_49#_typescript-40. It has the smell of all being related. — Drew Reese, Sep 17 '20 at 04:26
What did the React docs say about this when you looked there? — TylerH, Oct 12 '20 at 14:16

score 17 · Answer 1 · answered Sep 17 '20 at 06:12

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.

answered Sep 17 '20 at 06:12

Scotty Jamison

10,498
2
24
30

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 '20 at 13:42

score 13 · Accepted Answer · edited Oct 31 '22 at 17:20

13

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

edited Oct 31 '22 at 17:20

Scotty Jamison

10,498
2
24
30

answered Nov 04 '20 at 21:15

bladerunner2020

321
2
7

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 '22 at 20:11

score 4 · Answer 3 · answered Jan 13 '21 at 13:02

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

answered Jan 13 '21 at 13:02

Frank

111
1
3

score 0 · Answer 4 · answered Jul 24 '21 at 12:25

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

score -5 · Answer 5 · answered Sep 25 '20 at 10:29

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...',
        };
    }
}

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 '20 at 05:29

Is React super(props) deprecated?

5 Answers5

Use just super() instead of super(props)

Linked