DEV Community

loading...
Cover image for High-Order Component (HOC) in React

High-Order Component (HOC) in React

olenadrugalya profile image Olena Drugalya ・2 min read

This blogpost continues series of posts exploring React components. It describes High-Order Component, a popular advanced React pattern, to deploy reusable logic across React components.

Introduction and Overview

High-Order Component is NOT a part of React API, it means that there is NO such type as HighOrderComonent. This is a pattern that emerged from React’s compositional nature. Basically, HOCs are functions that return a component(s). They are used to share logic with other components.

HOCs are common in third-party React libraries, such as Redux’s connect and Relay’s createFragmentContainer.

Main Features of HOC

  • it receives a component as parameter
  • it returns a component with extended functionalities
  • it doesn't modify or mutate component but creates a new one
  • it creates re-usable logic which can be used multiple times (incorporate the don’t-repeat-yourself (DRY) principle of programming)
  • it is mostly used in class-based components

Example:

import React from 'react';
// Takes component as argument 
const higherOrderComponent = (OtherComponent) => {
// And returns another component
  class HOC extends React.Component {
    render() {
      return <OtherComponent />;
    }
  }
  return HOC;
};
Enter fullscreen mode Exit fullscreen mode

Use Cases

Below is just an overview of some use cases where we can use HOCs and once we get used to using them, it's possible to create more scalable and functional applications.

  1. Display a loader while a component waits for data - it is a good practice to use a loader component (which will show "Loading..." on the screen) in the application, when component is waiting for the data to be loaded through props, or pros are empty. HOC is good for this purpose, it will track the props and give a message accordingly:
function WithLoading(Component) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return <Component {...props} />;
    return <p>Hold on, fetching data might take some time.</p>;
  };
}
export default WithLoading;
Enter fullscreen mode Exit fullscreen mode

2.Conditional rendering - you can put conditional logic inside the HOC easily like this:

const withNullCheck = (Component) => (props) =>
  !props.data
    ? null
    : <Component { ...props } />
Enter fullscreen mode Exit fullscreen mode

3.Providing components with specific styling - we can use specific styles from specific UI states, which is provided by HOC. For example, if the need arises in multiple places for styles like backgroundColor, fontSize and so on, they can be provided via a HOC by wrapping the component with one that just injects props with the specific className:

const HelloComponent = ({ name, ...otherProps }) => (
 <div {...otherProps}>Hello {name}!/div>
);
Enter fullscreen mode Exit fullscreen mode

Higher order components are actively used in React applications, even though are often difficult to grasp. But practice makes wonders! :)

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Buy Me a Coffee at ko-fi.com

Discussion (0)

pic
Editor guide