React Component Inheritance: What, Why, and When to Use It

Inheritance in object-oriented programming refers to accessing the properties of one object from another object.

Imagine the iPhone is an object with some properties defined such as model, color, size, etc.

AirPods, on the other hand, is another object. Now accessing properties of iPhone objects such as model, color, and size from AirPods objects is called inheritance.

In this case, the AirPods object will be called the inheritance of the iPhone object.

React component inheritance works the same way. That is, one of your components accesses the properties of another component. Inheritance generally plays an important role in creating reusable components in react.

An important point is that React does not officially suggest inheritance. Rather, they encourage the use of composition instead of inheritance.

But while working on React projects there are some rare cases where inheritance needs to be used. Inheritance is also very effective if you are working on a React project that uses older legacy class-based components.

Since React officially discourages the use of inheritance, there aren’t many good learning resources on the subject. So I will try to discuss React Component Inheritance in detail with examples in this blog article.

React Component Inheritance Basics

From the above brief overview, we already know what React Component Inheritance is. Let’s take a look at why and when we would use inheritance.

Why Use Inheritance?

One of the biggest benefits of inheritance is reusability. That is if a component or a component’s property needs to be used repeatedly in different places in your project. Then using inheritance is very effective.

Because with the help of this, you can easily call the properties of the parent component and hold them in the child component.

Also, suppose you are working on a project that is based on class components. In that case, inheritance will be more handy for you than composition. Because composition is commonly used for function-based components.

So it is better to use inheritance in class components-based projects. However, modern React projects no longer use class components. But knowing class components and inheritance is good for building your fundamental knowledge in React.

When Use Inheritance?

Let’s see some uses of inheritance in React components:

#1. When you need to create a component where the child component extends the properties of the parent component. For example: ChildComponent inherits all the properties from its ParentComponent and also extends its extra styles properties.

#2. Inheritance can be used for higher-order components. That is, a functionality of ParentComponent will be used by every ChildComponent. Each ChildComponent will use that core functionality, and behave independently between sibling components.

For example: Let’s say a core functionality of ParentComponent is event counting. Now a ChildComponent can count click events using this functionality. Another ChildComponent might count the hover events. This way each child component can perform different tasks using the same parent functionality.

#3. Many times we have to use third-party UI libraries or frameworks. in that case, if you need to extend some properties of the pre-defined component from the libraries. Then with the help of inheritance, you can easily extend the parent component’s property.

#4. When you want to create a reusable component. Which will be used in different parts of your project. And you don’t want to use hooks. For this purpose, you can leverage the inheritance.

#5. Suppose you want to create a component. Which will render differently according to different prop values. And you don’t want to use any conditional rendering or switch statements. Then you can use inheritance.

For example: You created a Content component. Which will inherit from ParentComponent and render Text, Audio, and Video differently depending on the content-type props value.

React Component Inheritance can be used in above mentioned situations. Although all these things you can achieve with composition also.

You should use composition instead of inheritance to follow the standard. But for the sake of fundamentals, let’s see a code example of React component inheritance.

Code Example and Explanation

Before creating the React Inheritance component, we need to create a React project using Vite. If you don’t know how to create a React App with Vite, here’s a simple and step-by-step tutorial link: Create React App with Vite.

Creating a Parent Component

If you have already created a React App, now it’s time to create a parent component.

As shown in the above screenshot, a folder named “components” has been created inside the “src” folder. After that, a component file called “PhoneComponent.jsx” is created in the “components” folder.

Here “.jsx” is the React component file extension. Which is written in Vanilla JavaScript language. If the component was written in TypeScript, the file extension would be “.tsx“.

Now in the “PhoneComponent.jsx” file, copy and paste the following code:

//Paste this code into PhoneComponent.jsx file

import React, {Component} from "react"; 

class Phone extends Component {
  constructor(props) {
      super(props);
      this.phonename = "iPhone";
      this.phonemodel = "15 Pro Max"
  }
  
  render() {
    return null
  }
}

export default Phone;

Explanation of The Code:

Step 1:

First of all, we imported React’s Component library. Because by default, to declare a class-based component in React, the Component library has to be imported.

import React, {Component} from "react";

The Component library from ‘react‘ is imported by the code above.

Step 2:

In the second step, we declared a class-based component called Phone.

class Phone extends Component {
  render() {
    return null
  }
}

Note the “class Phone extends Component” in the code. This means component “Phone” is declared. Which extends React’s official component library named “Component“.

That is, the “Phone” component is by default a child component of the React “Component” library. Because, to create a class-based component in React, by default the “Component” library has to be declared as the parent.

Then the “render()” function is written inside the code block of the “Phone” component. It is mandatory to write the “render()” function in a class component.

The output of the elements within the component is written into this function. Since we don’t want anything as the output of the “Phone” component, for now, we wrote, “return null“.

Step 3:

Now we will define some properties (props) in the “Phone” component.

constructor(props) {
   super(props);
   this.phonename = "iPhone";
   this.phonemodel = "15 Pro Max"
}

“super(props)” in the above code means “Phone” will inherit (hold) the properties of its parent “Component“. In step 2 we said how “Phone” is a child of React “Component”.

Next, we declared two new string properties of the “Phone” component. Which are “this.phonename” and “this.phonemodel” respectively.

Although string property (props) is added here. But you can use other data types if you want. according to your needs.

Step 4:

We exported the “Phone” component. So that it can be accessed from other files or components. If you don’t export it, you won’t be able to access it from any other file. To export a component write the following code:

export default Phone;

Finally, a parent component was created in “PhoneComponent.jsx” file. Now we will create a child component. And access the properties of the parent component from the “App.jsx” file.

Creating a Child Component

Open your React project’s “App.jsx” file. Then paste the following code:

import Phone from "./components/PhoneComponent";

class AirPods extends Phone {

  constructor(props) {
    super(props);
    this.airpodsmodel = "3rd Generation AirPods"
  }

  render() {
    return <h1>This is a {this.airpodsmodel}. Connected with {this.phonename} {this.phonemodel}.</h1>
  }

}

export default AirPods

Explanation of The Code:

Step 1:

At first, we import the “Phone” component from the “PhoneComponent.jsx” file.

import Phone from "./components/PhoneComponent";

Step 2:

A new class-based component named “AirPods” is declared. where “AirPods” extends the “Phone” component. This means that “AirPods” is a child of the “Phone” component.

class AirPods extends Phone {
   //Some code will be added here
}

Step 3:

class AirPods extends Phone {
   constructor(props) {
      super(props);
      this.airpodsmodel = "3rd Generation AirPods"
   }
}

In the above code, the properties of the parent component “Phone” are inherited in the child component “AirPods” via “super(props)“.

Then a new property called “this.airpodsmodel” is added.

Step 4:

Now we will call the properties on the “AirPods” from the “Phone” component. The properties are respectively: “this.phonename” and “this.phonemodel“.

render() {
    return <h1>This is a {this.airpodsmodel}. Connected with {this.phonename} {this.phonemodel}.</h1>
}

If you notice above, you will see that we have called the properties of the parent component under the “render()” function. That is, the value of the parent component’s properties will be rendered in the browser.

Step 5:

Lastly, we export the “AirPods” component so that it can be accessed from the browser.

export default AirPods

Viewing The Output in a Browser

After saving the above codes start your dev local server. And visit your React App.

In the above photo, you can see the output of the Inherited component. Here the “iPhone” and “15 Pro Max” values are called from the “Phone” component. Which is the parent component of the “AirPods” component.

In this example, I have shown working with string data type. You can do component inheritance in the same technique with other data types or functionality. Practice a few times then you will understand better.

The Bottom Line

In this blog post, we learned the fundamentals of React component inheritance. It is a great technique. Through inheritance, we can create reusable components. Which saves us lots of development time. But you will use it only for legacy class-based projects.

Since the React team has clearly said to use composition instead of inheritance. It’s better to use composition to avoid any future complications. For more details on this, you can read React’s docs.

FAQ

Anything in the mind? Just comment below. And Happy Coding!