question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warn if using ES6 class but not directly extending React.Component

See original GitHub issue

Now that React 16.x is taking out createClass, is there currently a way to warn if not directly extending React.(Pure)?Component. That was always my issue with ES6 classes (Button inherits Tooltip, Tooltip inherits onHoverComponent, etc.) and have been holding off on them. I’m seeing isExplicitComponent in the utils module which I believe would do this, if surfaced.

Maybe it would be an additional feature to prefer-es6-class rule:

'react/prefer-es6-class': [1, 'explicit'],

Anyone else think this is a good idea in order to promote use of higher order components for composition over classical inheritance? This would be in line with @gaearon 's How to Use Classes and Sleep at Night

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
ljharbcommented, Feb 3, 2022

In react, inheriting from something that’s not React.Component or React.PureComponent is a long-ago-decided antipattern.

If you do it anyways, you can stick /** @extends React.Component */ before the class, and this plugin will pretend it’s a react component.

0reactions
ljharbcommented, Feb 28, 2017

I believe it’s undocumented atm, and uses jsdoc syntax.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Warn if using ES6 class but not directly extending React ...
A new generic rule that prohibited all forms of extends that aren't extending React.{Pure,}Component might be useful, though.
Read more >
React Without ES6
In ES6 classes, you can define the initial state by assigning this.state in the constructor: class Counter extends React.Component { constructor ...
Read more >
How to write an ES6 class React Component that extends a ...
React supports both ES6 class components, via extend ing React.Component , and functional components. I'm getting the following error when attempting to extend...
Read more >
typescript-cheatsheet - GitHub Pages
A set of TypeScript related notes used for quick reference. The cheatsheet contains references to types, classes, decorators, and many other TypeScript ...
Read more >
Understanding Functional Components vs. Class ... - Twilio
A class component is a JavaScript class that extends React. ... If you are not familiar with arrow functions introduced in ES6, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found