menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

Why component inheritance is not recommendable in React if some one can provide…

January 17, 2020 at 1:47pm

Why component inheritance is not recommendable in React if some one can provide example then it will be more helpful?

January 17, 2020 at 1:47pm (Edited 1 month ago)

January 17, 2020 at 2:32pm
React components are meant to be composable. Here is the officiel answer https://reactjs.org/docs/composition-vs-inheritance.html with code example :+1:
Edited
  • reply
  • like
Actually, some java addicts or Class-ical OO practitioners do that. They have awful named Base Component(Mother of all component) ->Field Component->TextField ->Autocomplete -> phone Field. And this makes sure that people like me soon leave the team to stay sane.
Edited
  • reply
  • like
React components are meant to be composable. Here is the officiel answer https://reactjs.org/docs/composition-vs-inheritance.html with code example :+1:
I want to know what if i use inheritance is there anything that you can't achieve with inheritance?
  • reply
  • like
It depends on what you are trying to do. You can do anything with inheritance that you can do with composition and vice versa, but there is a cost to everything. You can look up all the pros/cons of inheritance vs composition. That's not a react specific thing.
But if you use inheritance, you and your colleagues will be on your own. You won't find any documentation or tutorials using inheritance. Any libraries you want to use will not be expecting subclassing.
Edited
  • reply
  • like

February 4, 2020 at 10:00am
I'm currently inheriting an ES6 React base component in the following way:
model.js (base component):
class ModelComponent extends React.Component {
render() {
// Re-used rendering function (in our case, using react-three's ReactTHREE.Mesh)
...
}
}
ModelComponent.propTypes = { // Re-used propTypes ... };
export default ModelComponent; Then I have two extending components that both look basically like this:
import ModelComponent from './model';
class RobotRetroComponent extends ModelComponent {
constructor(props) {
super(props);
this.displayName = 'Retro Robot';
// Load model here and set geometry & material
...
}
}
export default RobotRetroComponent; (Full source code here: https://github.com/poshaughnessy/react-three-demo/)
This appears to work fine. Both models are showing up and working as I would expect.
However, I have read in multiple places that inheritance is not the correct approach with React - instead I should be using composition. But then again, Mixins are not supported in React v0.13?
So, is the approach I'm taking above OK? If not, what's the problem, and how should I do this instead? Found this react tutorial: https://www.goodworklabs.com/best-react-native-tutorials/
  • reply
  • like

February 4, 2020 at 4:09pm
I'm currently inheriting an ES6 React base component in the following way:
model.js (base component):
class ModelComponent extends React.Component {
render() {
// Re-used rendering function (in our case, using react-three's ReactTHREE.Mesh)
...
}
}
ModelComponent.propTypes = { // Re-used propTypes ... };
export default ModelComponent; Then I have two extending components that both look basically like this:
import ModelComponent from './model';
class RobotRetroComponent extends ModelComponent {
constructor(props) {
super(props);
this.displayName = 'Retro Robot';
// Load model here and set geometry & material
...
}
}
export default RobotRetroComponent; (Full source code here: https://github.com/poshaughnessy/react-three-demo/)
This appears to work fine. Both models are showing up and working as I would expect.
However, I have read in multiple places that inheritance is not the correct approach with React - instead I should be using composition. But then again, Mixins are not supported in React v0.13?
So, is the approach I'm taking above OK? If not, what's the problem, and how should I do this instead? Found this react tutorial: https://www.goodworklabs.com/best-react-native-tutorials/
  • reply
  • like
It will works but to call parent render you have to use super.render() and there is one more issue while making condition based on props. In composition if you will not pass props it will consider undefined like <ABC isValid> but if use inheritance you will get isValid property continue so you can't make condition.
  • reply
  • like