Higher Order Component In React

Introduction

In the previous article, we learned about Portals and Error Boundary along with their usage in ReactJS. In this article, we will learn about Higher-Order Components (HOCs) and their usage in React.

What is HOC?

HOC is not a feature in React or any other programming language. It is just a concept that involves the compositional nature of React. Higher-Order Components are not part of React API either. A component transforms Props into UI while on the other hand, Higher-Order Component converts a component into another component

The concept of Higher-Order Components is mainly used for reusability and for the decomposition of components into simple and smaller functions that can be reused. This makes a function capable of doing a single task making the whole application easy to debug and maintenance.

In Haskell language, the inspired pseudo-code has the below signature.

hocFactory:: W: React.Component => E: React.Component

Where W represents WrappedComponent which is a React component being wrapped and E represents Enhanced Component which returns a new component.

Basically, HOC involves manipulating WrappedComponents which can be done in 2 ways.

Props Proxy
Inheritance Inversion

Props Proxy

In Props Proxy, as the name suggests, it passes properties received from Higher-Order Component.

Syntax

function ppHOC(WrappedComponent) {
returnclass PP extends React.Component {
render() {
return <WrappedComponent {...this.props}/>
}
}
}

As per the syntax above, the Props Proxy returns the React element which is of type WrappedComponent.

There are many ways to represent Props Proxy.

Manipulating Props
Abstracting State
Accessing the instance via Refs
Wrapping of WrappedComponent with other elements

Inheritance Inversion

This is quite different from Props Proxy. It allows HOC to access WrappedComponents instance using this keyword. This lets us access props, state, and render methods.

Syntax

function iiHOC(WrappedComponent) {
return class Enhancer extends WrappedComponent {
render() {
return super.render()
}
}
}

So, we can see that it has reversed the effect of Props Proxy; thus the name suggests Inheritance Inversion as it is extending the WrappedComponent. Inversion Inheritance can be used for -

Conditional Rendering
State Manipulation

Demo of Higher-Order Components in React

Let us create a small demo to display a list for companies and Employees in a table. In this demo, we will create a component as TableRowComponent to be used in CompanyComponent and EmployeeComponent to just pass data to TableRowComponent.

For the above implementation, you need to first create the TableRowComponent.js file in which, based on the input, a complete row is created.

import React, { Component } from 'react'
class TableRowComponent extends Component {
render() {
return (
<tr>
<td>
{this.props.obj.Id}
</td>
<td>
{this.props.obj.Name}
</td>
<td>
{this.props.obj.ContactNumber}
</td>
</tr>
)
}
}
export default TableRowComponent

Now, we will create the EmployeeList.Js file in which the above TableRowComponent is used.

import React, { Component } from 'react'
import TableRowComponent from './TableRowComponent'
export class EmployeeList extends Component {
constructor(props) {
super(props)
this.state = {
Employees:[
{
Id : 1,
Name : 'ABC',
ContactNumber: '1123456789'
},
{
Id : 2,
Name : 'XYZ',
ContactNumber: '09873643775'
},
{
Id : 3,
Name : 'MNO',
ContactNumber: '29354546675'
}
]
}
}
tableRow(){
if(this.state.Employees instanceof Array){
return this.state.Employees.map(function(object,i){
return <TableRowComponent obj={object} key={i}></TableRowComponent>
})
}
}
render() {
return (
<div className="container">
<table>
<thead>
<tr>
<td>Employee Id</td>
<td>Employee Name</td>
<td>Contact Number</td>
</tr>
</thead>
<tbody>
{this.tableRow()}
</tbody>
</table>
</div>
)
}
}
export default EmployeeList

Now, also create a CompanyList.js file.

import React, { Component } from 'react'
import TableRowComponent from './TableRowComponent'
export class CompanyList extends Component {
constructor(props) {
super(props)
this.state = {
Companies:[
{
Id :1,
Name : 'Wipro',
ContactNumber:'3567575'
},
{
Id :2,
Name : 'Google',
ContactNumber:'3983945'
},
{
Id :3,
Name : 'Facebook',
ContactNumber:'475686787'
}
]
}
}
tableRow(){
if(this.state.Companies instanceof Array){
return this.state.Companies.map(function(object,i){
return <TableRowComponent obj={object} key={i}></TableRowComponent>
})
}
}
render() {
return (
<div className="container">
<table>
<thead>
<tr>
<td>Company Id</td>
<td>Company Name</td>
<td>Contact Number</td>
</tr>
</thead>
<tbody>
{this.tableRow()}
</tbody>
</table>
</div>
)
}
}
export default CompanyList

Now, add both the newly added CompanyList and EmployeeList in the App.js file.

import React from 'react';
import './App.css';
import './css/custom.css';
import ErrorBoundary from './components/ErrorBoundary'
import CompanyList from './components/CompanyList'
import EmployeeList from './components/EmployeeList';
function App() {
return (
<div>
<h1>Company List</h1>
<CompanyList></CompanyList>
<h1> Employee List</h1>
<EmployeeList></EmployeeList>
</div>
);
}
export default App;

The output of the above program will be displayed as below.

In the above example, we have reviewed how Higher-Order Components work.

For Higher-Order Components, we need to remember 2 things as mentioned below.

These components take input as component and
Return a new component.

Higher-Order Components are commonly used in third-party libraries, like Redux or React Router.

In short, HOC helps you organize React code in a better way and to reduce the code redundancy. Even third-party libraries like Redux or React Router use this concept.

Advantages of Higher-Order Components

Used when there is a need to bundle up a repeating pattern.
Make debugging easier
Pass through props which are unrelated to HOC.

Disadvantages of Higher-Order Components

No need to overuse, other approaches can also be used
It Mutates the original component.
Never use Higher Order Component inside render() method.

Use Cases For Higher-Order Components

Loader to create a Higher-Order Component that can be used whenever required.
Whenever needed to manage common user interaction.
When a user needs to define some specific styles.
You can create your Dialog as a component and can be used in the entire application.

Summary

In this article, we have learned about the concepts and usage of Higher-Order Components. In the next article, we will go in detail about the concept of Render Props and Context in React.js.

Next >> Render Props and Context in React.js