In this answer Dan Abramov mentions that "Inheritance is an anti-pattern in React".
This was in relation to this code, which comes from a framework that I am starting to use:
class Home extends BasePage {
render() {
const { projects } = this.props;
return (
<div className="home-page container-fluid">
{super.render()}
<HomeLeftBar/>
<HomePageHeader/>
<ProjectsSummary/>
</div>
)
}
}
The reason that this component, which describes the content of a whole page, is inherited from BasePage is because there is common functionality - such as login idle timeout - that is implemented on BasePage.
What would be the correct way to deal with this, to avoid the "antipattern"?
