Steps to Reproduce:
import React from 'react'; // does not matter if this line is here or not
class Test {
constructor(props) {
super(props);
}
}
Add extends React.Component to class Test, like so:
class Test extends React.Component {
The word 'super' then gets striked through and hovering over seems to say it is deprecated for typescript, but this is not a typescript file. It does not affect the code but is confusing many people. Working around it by disabling the "Editor: Show Deprecated" setting, but would prefer to be able to enable that setting. This has only been happening since the VS Code update on August 10, 2020 (yesterday).
Does this issue occur when all extensions are disabled?: Yes
Should the example be?
import React from 'react';
class Test extends React.Component {
constructor(props) {
super(props);
}
}
I confirmed that the React.component
constructor is marked as deprecated in the react typings. The deprecated message links to: https://reactjs.org/docs/legacy-context.html
So I suspect this is either: a problem with the react typings or the expected behavior as it points out usage of a deprecated api
Should the example be?
import React from 'react'; class Test extends React.Component { constructor(props) { super(props); } }
That is in my Step 2, to demonstrate that the issue occurs exactly when you add "extends React.Component" and not just when you use "super" otherwise.
I confirmed that the
React.component
constructor is marked as deprecated in the react typings. The deprecated message links to: https://reactjs.org/docs/legacy-context.htmlSo I suspect this is either: a problem with the react typings or the expected behavior as it points out usage of a deprecated api
The legacy-context.html page is referring to a specific React API called Context and is not related to using the extends React.Component
syntax. That syntax is required for class components in React and AFAIK is not deprecated, aside from the general move away from class components. The React team themselves have announced that they will _not_ remove class components from React (see: https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy).
See: https://reactjs.org/docs/components-and-props.html. Using extends React.Component
is the canonical way to create a React class component. It should not cause the super keyword to be marked as deprecated. Its use along with super(props) is present throughout the React documentation.
Thank you for looking into it!
Thanks. This sounds like it may be an issue with the react typings then. Let's wait for someone on the TS team to confirm this though
Duplicate of #39509 - I filled that one starting with this exact deprecation warning.
Most likely workaround is to split second constructor declaration into two: not deprecated without context
argument at all and deprecated with both props
and context
required.
I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.
import React from 'react';
class Test extends React.Component {
constructor(props) {
super();
}
}
PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257
This is controlled by the definition file on DefinitelyTyped.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L480
Someone should add a third overload here that accepts props: P
and isn't marked deprecated
@RyanCavanaugh while fix for declaration is quick workaround here, there is still difference in overloads pick between JS and TS (this exact issue is not observed in TS files) as shown examples for #39509
I found this today after experiencing the same issue. However now I came across the same issue in a regular JavaScript file (no JSX or React) with a valid standard DOM event window.location.reload(true);
.
Here is the file where this showed up for window.location.reload
:
https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/clickUrlAction.js#L75
@ConradSollitt I think location.reload
is separate issue, because reload
doesn't support forceReload
flag in latest specs:
https://html.spec.whatwg.org/multipage/history.html#dom-location-reload
https://www.w3.org/TR/html52/browsers.html#dom-location-reload
Related: https://github.com/w3c/ServiceWorker/issues/597#issuecomment-70087324
window.location.reload()
works fine
@IllusionMH Thanks for the info! I just did some testing in different browsers and confirmed that for modern browsers the forceReload
flag has no effect however when using IE 11 reload(true)
results in the browser sending the request header Cache-Control: no-cache
. In this past (at least 2 years ago) I had to use reload(true)
to make sure app behavior (login pages, etc) worked properly so now I've updated related code comments that the feature is being kept for IE.
I facing the same issue. And it's really confusing, please some team either from react.js or from ts or eslint need to fix this.
This is an issue.
I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.
import React from 'react'; class Test extends React.Component { constructor(props) { super(); } }
PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257
Worked like a charm! Thanks
I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.
import React from 'react'; class Test extends React.Component { constructor(props) { super(); } }
PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257Worked like a charm! Thanks
hey could you please help me out..i didnt get it
I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.
import React from 'react'; class Test extends React.Component { constructor(props) { super(); } }
PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257Worked like a charm! Thanks
hey could you please help me out..i didnt get it
This is when u don't need to use this.props inside the constructor, if u wont use, u should be fine removing super(props) and putting only super()
Thanks a lot Minaelee. This truly is a life saver. This issue has been bugging me for a while now
This issue has been marked as 'External' and has seen no recent activity. It has been automatically closed for house-keeping purposes.
Instead of removing argument from super
it's possible to add comment
class Example extends React.Component {
/** @param {Record<string, any>} props */
constructor(props) {
super(props);
console.log(props.message);
console.log(this.props.message);
}
// ...
}
Most helpful comment
I had faced the same issue....I just removed the props from super(). By doing this, the strike-through went away.
PS. I was still able to use this.props in my React class except in the constructor where we don't use this.props but just props.
I think the stackoverflow answer would explain something https://stackoverflow.com/a/34995257