Composition Vs Inheritance: Why to Use Composition Over Inheritance in React.js

Reusable components are the most powerful feature in React.js. It saves developers time as they don’t have to write multiple codes for the same functionality in the web applications. However, many developers still struggle to maintain a clean code structure while creating reusable components. 

In this article, we will learn about Inheritance and Compositions that are used for creating reusable components in React.js. Also, find out why to use composition over inheritance to make the project file structure easier to read and maintain. 

So let’s get started!

The Inheritance and Compositions in React.js

Both Inheritance and Compositions are means of transmitting attributes shared by multiple objects in the application, we will look into each of them in detail.

‍

Inheritance: 

Inheritance is a technique in object-oriented programming, it is referred to when one class inherits the class properties to duplicate the behavior while allowing to add the extra features.  This ability is used while building React components to achieve code reusability.

For example: 

Let’s assume that you have a React Component called SubmitButton which is created by extending the Button component with the properties- background: pink and color: black. Then the instance of the SubmitButton will inherit the behavior of a Button instance.

‍

Composition

The functionality is quite similar to inheritance, however rather than inheriting the properties of the parent class it represents a  class that references one or more objects of the other class as an instance.  This way it provides the new behavior to the class or object rather than extending it in the hierarchy.  

For example:

If we implement the SubmitButton using Composition as a component that uses Button. Only the behavior of the Button is passed, while the properties are not inherited. 

‍

Composition Vs. Inheritance- What to use?

So if you are new to React.js, it will be hard to choose between Inheritance and Composition, and this is because Inheritance and Composition are quite similar in how the objects are related. 

Now, let’s understand what makes them different.

1. In Inheritance, the components are tightly coupled, and therefore any change in the parent component can bring unexpected consequences to its descendant child components. Moreover, it causes the complete restructuring of the component tree.  
2. On the other hand, Compositions integrate components and keep them loosely coupled. That helps to manage future requirements in the application. 

Just consider this example from the React docs, the Dialog component is a special case of components WelcomeDialog. Here the “specific” component can render a “generic” one and configure it with a prop with Composition, which is the better way to use the behavior of one component in the other.

Props and Composition give you more flexibility for component customization in all ways. And it also works better for the components defined as classes. 

So, if you are building react components, you can make it reusable by extracting the functionality into the separate JavaScript module. Later another component can easily import and use the functionality, object, or class without extending it. 

‍

Conclusion:

For any application, the project requirements may keep on changing over time. Therefore, it's always a good idea to choose composition over inheritance. 

However, if you are looking for the best ways to build a React.js web application, try using the React.js web app builder by DhiWise. The programming platform empowers developers for building scalable web applications faster.

It offers full flexibility to the user to change the UI code conveniently and build the custom web app in a minimum time without affecting the quality.

     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="blue" message="Thank you for visiting our spacecraft!"/>
     );
    }