Composition Vs. Inheritance

Inheritance

For those familiar with Object Oriented Programming are well aware of Inheritance and use it on a regular basis. When a child class derives properties from it’s parent class, we call it inheritance. There are variety of use-cases where inheritance can be useful.

Example: A car is a vehicle can be modeled with inheritance.

Let’s look at a simple example of inheritance in JavaScript showing a Car is a Vehicle.

class Vehicle {

  constructor (name, type) {
    this.name = name;
    this.type = type;
  }

  getName () {
    return this.name;
  }

  getType () {
    return this.type;
  }
}
class Car extends Vehicle {

  constructor (name) {
    super(name, 'car');
  }

  getName () {
    return 'The car's name is: ' + super.getName();
  }
}

Composition

Composition is also a familiar concept in Object Oriented Programming. Instead of inheriting properties from a base class, it describes a class that can reference one or more objects of another class as instances.

Example: A car has an engine can be modeled with composition.

Now that we have recapped the differences between Inheritance and Composition, let’s dive into what’s the right fit for React.

React prefers Composition over Inheritance

Both Inheritance and Composition, aim towards code reuse and cleaner code structure. But what does the React team recommend?

React recommends use of Composition over Inheritance, here is why. Everything in React is a component, and it follows a strong component based model. This is one of the primary reasons that composition is a better approach than inheritance for code reuse.

Take a look at the simple code snippet below to understand how composition works in React.

export default class Heading extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
}
Heading.propTypes = {
  message: PropTypes.string,
};
Heading.defaultProps = {
  message: 'Heading One',
};

The component Heading is used to display a text message. Notice that for the Heading component the message needs to be passed in as a prop. If we fail to pass a prop, it uses the default props. The idea is that we can reuse the Heading component all across our code, and pass it a different heading message, depending on the screen that invokes it.

The code snippet below shows how Heading can be used.

// Container Component Screen One
export default class ScreenOne extends React.Component {
  render() {
    return (
      <div>
        <Heading message={'Custom Heading for Screen One'} />
      </div>
    );
  }
}

Notice here that ScreenOne is a container component. It uses the Heading component to display it’s heading. It passes a custom message as a prop to the Heading component as shown above.

Let’s add another container component to our code and call it ScreenTwo.

// Container Component Screen Two
export default class ScreenTwo extends React.Component {
  render() {
    return (
      <div>
        <Heading message={'Custom Heading for Screen Two'} />
      </div>
    );
  }
}

Notice here that ScreenTwo uses the same Heading component, but it passes a different message as prop to the component.