Why Composition is Better than Inheritance in ReactJS

In this article, we will show a few problems where developers new to React often reach for inheritance and show how we can solve them with composition.

Here, we can try to define ReactJS: Why composition is better than inheritance in ReactJS? What is inheritance in React? What is the composition in React example? Should I use inheritance or composition? What is the difference between composition and inheritance in React?

Composition vs Inheritance

So, ReactJS is a powerful composition model. Also, we recommend using composition instead of inheritance to reuse code between components.

Containment

In this containment, some components do not know their children ahead of time.

You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.

So, this is especially common for components like the Sidebar or Dialog that represent generic “boxes”.

Now, we recommend that such components use the special children prop to pass children elements directly into their output:

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

This allows, other components to pass arbitrary children to them by nesting the JSX like the below code:

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

After that, anything inside the <FancyBorder> JSX tag gets passed into the FancyBorder component as a children’s prop.

Since the FancyBorder renders {props.children} inside a <div>, also passed the elements that appear in the final output.

While this is less common and sometimes you might need multiple “holes” in a component.

In such cases you may come up with your own convention instead of using children like the below code:

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}
function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

Specialization

We say that a WelcomeDialog is a special case of Dialog.

So, in ReactJS, this is also achieved by composition and where a more “specific” component renders a more “generic” one and configures it with props like the below code:

IF you want then buy a good, reliable, secure web hosting service  from here: click here

function Dialog(props) {
  return (
    <FancyBorder color="blue">
     <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p><
    </FancyBorder>
  );
}
function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting Cloudsurph!" />
  );
}

So, the Composition works equally well for components defined as classes like the below code:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}
class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }
  render() {
    return (
      <Dialog title="Hosting Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }
  handleChange(e) {
    this.setState({login: e.target.value});
  }
  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

That’s it. If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.