React Higher Order Component

HOC known as Higher Order Component in React is a pattern that developer uses in order to extract duplicated logic from repeated components. Sometimes you might have some components that re-use the same logic and creates a duplicate code.

This duplicated logic can be extracted using HOC. Following is a syntax for Higher Order Component: 

import React from 'react';

const HigherOrderComponent = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      return <WrappedComponent />;
    }
  };
};

Let's take on example to understand. Imagine you want to display a loading indicator when any api call is made or when site loads. You will follow the steps show below:

  • You will be adding if condition to check if loading is true
  • You will be adding this code to all components that needs this indicator

Now, let's take a pause and understand do we really need to duplicate this code in every single component where we need this? Or can we create a global component that does this logic before it gets to the component where we need this loader?

Answer is it would be better if we create a HOC and then use this function where we need it.

How to create HOC?

Let's create a HOC with logic we need. 

import React from "react";
import MyLoader from "./loader";

const withLoaderHOC = WrappedComponent => {
  return class extends React.PureComponent {
    render() {
      if (this.props.loading) return <MyLoader />
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withLoaderHOC;

So in above code we created a function that takes a component as an argument and returns a new react component. The returned component has some logic that checks to see if we received a props called loading if it is true it will load the loader otherwise will load the component.

How do we use HOC?

To use HOC whichever component needs a loading functionality we will wrap this component around this HOC we created. 

import React from "react";
import withLoaderHOC from "./withLoaderHOC";

class UseMeComponent extends React.PureComponent {
    render() {
      return <h1>This is a test component</h1>;
    }
}

export default withLoaderHOC(UseMeComponent);​

Note we have wrapped UseMeComponent with our withLoaderHOC​ function that we created.

Things to remember

  • In order to use above example you need to setup loading prop using redux or some other global store
  • Make sure you set this loading flag before and after api call to make sure to turn off and on loading indicator

What can you do with HOC?

  • You can extract duplicate logic
  • You can pass additional functions and props from HOC to other components
  • You can remove all duplicated functions and can move them to HOC only if it is common to other components
  • It can add an additional layer between components or libraries for better code-reuse.

If you have any questions and doubt regarding HOC don't hesitate to send me an email via contact form but make sure to leave your name and email so that I can respond.

↑