Higher-Order Components In React

React's Higher Order Components(HOCs) is a powerful feature that allows developers to reuse code, improve performance, and enhance the functionality of their React applications. If you are new to React or have only worked with the basics, understanding HOCs can be a bit intimidating at first. However, once you get the hang of them. HOCs can be an invaluable tool for creating more efficient, robust and maintainable code at the same time. By the end of this blog, you will learn what is HOCs and why we should use them in the application and I'd be happy to help you learn about Higher Order components in ReactJS.

What are HOCs?

In React, HOCs are functions that take a component and return a new component with added functionality. They are a way to reuse component logic and share functionality between components. Found it is difficult to understand it with the above definition then let me clear it line by line for you.

Higher Order Components(HOCs) are a way to add functionality to a React component by wrapping it in another component. The HOC is a function that takes a component as its argument and returns a new component with additional features.

That's about the jargon now let me show you some good examples so that you understand it better.

Here is an example of a HOC that adds a isLoading prop to a component:

function withLoading(Component){
    return function WithLoading(props){
        if (props.isLoading){
    return <div>Loading....</div>;
    }
        else {
        return <Component {...props} />;
        }
      }
    }

In this example, the withLoading function takes a Component as an argument and returns a new function component called WithLoading . The component checks if the isLoading prop is true. If it is, it renders a loading message. If not, it renders the original component with props to it.

Now to use the HOC, you would pass your component to the withLoading function, like this:

const MyComponentWithLoading = withLoading(MyComponent);

This creates a new component called MyComponentWithLoading includes the loading functionality from the withLoading HOC.

Yeah, but we are not going to stop here , let's break down the code line by line:

function withLoading(Component) defines the HOC function that takes a Component argument .
return function WithLoading(props) defines a new function component called WithLoading that takes props as its argument and returns JSX.
if (props.isLoading) checks if the isLoading prop is true.
return <div>Loading...</div>; renders a loading message if isLoading is true.
return <Component {...props} />; renders the original component with the props are passed to it if isLoading is false.

I hope this simplifies the concept of HOCs for you !

This is about an example, but there is a saying "Until you have hands-on coding you can not learn it", So for that let's see some real-world example of HOCs.

Authentication HOC :

function withAuthentication(Component) {
  function WithAuthentication(props) {
    const isAuthenticated = checkIfUserIsAuthenticated(); // custom function to check if user is authenticated
    if (isAuthenticated) {
      return <Component {...props} />;
    } else {
      return <Redirect to="/login" />;
    }
  }

  return WithAuthentication;
}

In this example, the withAuthentication hoc checks if the user is authenticated before rendering the component. If the user is authenticated, it renders the component. If not, it redirects the user to the login page using the Redirect component from React Router.

Extras
Here is the list of useful resources which you can refer to learn more about Higher Order Components :

HOCs in React Simplified

What are HOCs?