How React Higher Order Components Improve Code Reusability

If you're like me, you've probably heard of HOCs, but maybe you've been hesitant to use them. They can seem intimidating, especially when you first encounter them. But fear not! By the end of this post, I'm confident you'll understand what a higher-order component is and see the immense value it can bring to your React applications.

In essence, a higher order component is a function that takes a component and returns a new component with additional properties or behavior. It's an advanced technique for reusing component logic, fundamental to React's compositional nature.

Think of it like this: you have a function that does something useful and want to use that same functionality in multiple components. Instead of duplicating the code (which we all know is a big no-no), you can use a higher order component to wrap your components, providing them with the necessary functionality.

But before we dive into the nitty-gritty, let's set the stage with a bit of context. As developers, we're always looking for ways to write cleaner, more efficient code. And one tool that's been gaining traction lately is WiseGPT, a promptless Generative AI for React developers. It writes code in your style, integrates with APIs via Postman collections in VSCode. It's like having a pair of extra hands that code just the way you do. But enough about that, let's get back to HOCs.

‍

Understanding the Concept of HOCs in React

Now that we've set the stage, let's dive into the concept of higher order components. If you're familiar with functional programming principles, you might already know what a higher order component is. In functional programming, a higher order function is a function that takes one or more functions as arguments, returns a function as its result, or both.

In React, a higher order component (HOC) is quite similar. It's a function that takes a component and returns a new component with additional properties or behavior.

Let's break it down:

1     import React from 'react';
2    
3    // This is a higher order component
4    function withExtraProp(WrappedComponent) {
5      return function(props) {
6        return <WrappedComponent {...props} extraProp="I'm an extra prop!" />;
7      };
8    }
9    
10    export default withExtraProp;
11     

In the above code, withExtraProp is a higher order component. It's a function that takes a WrappedComponent as its argument and returns a new component that renders the WrappedComponent with an extra prop.

The beauty of this approach is that it allows us to inject additional props into a component or modify the props that the component receives without changing the component itself. This is incredibly powerful, allowing us to reuse component logic across our application, keeping our code DRY (Don't Repeat Yourself) and our components clean and focused.

But that's just the tip of the iceberg. Higher order components can do much more than just manipulate props. They can also be used to abstract state management, handle rendering logic, and even interact with the lifecycle methods of the wrapped component.

‍

How to Write a Higher Order Component in React

Now that we've got a basic understanding of what a higher order component is, let's get our hands dirty and write one ourselves.

First, let's start with a simple functional component. We'll call it App, and it'll just render a message to the screen:

1     import React from 'react';
2    
3    function App() {
4      return <h1>Hello, world!</h1>;
5    }
6    
7    export default App;
8     

Now, let's create a higher order component. We'll call it withGreeting, and it will inject a greeting prop into the App component:

1     import React from 'react';
2    
3    function withGreeting(WrappedComponent) {
4      return function EnhancedComponent(props) {
5        return <WrappedComponent {...props} greeting="Hello, world!" />;
6      };
7    }
8    
9    export default withGreeting;
10     

In the above code, withGreeting is our higher order component. It's a function that takes a WrappedComponent as its argument and returns a new EnhancedComponent that renders the WrappedComponent with an extra greeting prop.

Now, let's use our withGreeting HOC to enhance our App component:

1     import React from 'react';
2    import withGreeting from './withGreeting';
3    
4    function App(props) {
5      return <h1>{props.greeting}</h1>;
6    }
7    
8    export default withGreeting(App);
9     

In the above code, we're using our withGreeting HOC to enhance the App component. The App component now receives a greeting prop from the withGreeting HOC, and uses it to render its message.

‍

An Example of a Higher Order Component in React

Now that we've seen how to write a higher order component, let's look at a more practical example. Let's say we have an application that fetches data from an API. We have multiple components that need to fetch data, and we want to avoid duplicating the fetch logic in each component. This is a perfect use case for a higher order component!

First, let's create a withData HOC that fetches data and passes it as a prop to the wrapped component:

1     import React, { useEffect, useState } from 'react';
2    
3    function withData(WrappedComponent, fetchData) {
4      return function EnhancedComponent(props) {
5        const [data, setData] = useState(null);
6    
7        useEffect(() => {
8          fetchData().then(setData);
9        }, [fetchData]);
10    
11        return <WrappedComponent {...props} data={data} />;
12      };
13    }
14    
15    export default withData;
16     

In the above code, withData is a higher order component that fetches data and passes it as a data prop to the WrappedComponent. It uses the fetchData function, which is passed as an argument, to fetch the data.

Now, let's use our withData HOC to enhance a UserList component:

1     import React from 'react';
2    import withData from './withData';
3    
4    function UserList(props) {
5      if (!props.data) {
6        return <div>Loading...</div>;
7      }
8    
9      return (
10        <ul>
11          {props.data.map(user => (
12            <li key={user.id}>{user.name}</li>
13          ))}
14        </ul>
15      );
16    }
17    
18    export default withData(UserList, () => fetch('/api/users').then(res => res.json()));
19     

In the above code, we're using our withData HOC to enhance the UserList component. The UserList component now receives a data prop from the withData HOC, which it uses to render a list of users.

‍

Higher Order Components vs Pure Components

Now that we've got a handle on higher order components, let's compare them with another concept in React: Pure Components.

Pure Components in React are a simpler concept than higher order components. A Pure Component is simply a component that implements the shouldComponentUpdate lifecycle method in a way that it only re-renders if its state or props have changed. This can improve performance, as the component won't re-render unnecessarily.

1     import React, { PureComponent } from 'react';
2    
3    class App extends PureComponent {
4      render() {
5        return <h1>{this.props.greeting}</h1>;
6      }
7    }
8    
9    export default App;
10     

In the above code, App is a pure component. It only re-renders if its props change, which can sometimes lead to performance improvements.

So, how do pure components compare to higher order components? Well, they serve different purposes. Pure components are about optimizing performance by reducing unnecessary re-renders. Higher order components, on the other hand, are about reusing component logic and enhancing components with additional behavior or properties.

In other words, pure components and higher order components are tools in your React toolbox, each with their own use cases. You might use a pure component when optimizing a component that re-renders frequently. You might use a higher order component when you reuse component logic or enhance a component with additional behavior or properties.

‍

Higher Order Components vs Container Components

We've compared higher order components with pure components, now let's see how they stack up against another React concept: container components.

Container components, sometimes called smart components, are primarily concerned with how things work. They fetch data, manage state, and contain the app's logic. They're usually class components, but with the advent of hooks, they can also be function components.

1     import React, { Component } from 'react';
2    
3    class App extends Component {
4      state = {
5        greeting: 'Hello, world!'
6      };
7    
8      render() {
9        return <h1>{this.state.greeting}</h1>;
10      }
11    }
12    
13    export default App;
14     

In the above code, App is a container component. It manages state and contains the logic for how the app works.

So, how do container components compare to higher order components? Well, they serve different purposes. Container components are about managing state and containing the logic for how the app works. Higher order components, on the other hand, are about reusing component logic and enhancing components with additional behavior or properties.

In other words, container components and higher order components are tools in your React toolbox, each with their own use cases. You might use a container component when you need to manage state or contain the logic for how the app works. You might use a higher order component when you need to reuse component logic or enhance a component with additional behavior or properties.

‍

The Role of HOCs in Reusing Component Logic

One of the most powerful aspects of higher order components is their ability to facilitate reusing component logic. This is a core principle in software development, often referred to as DRY (Don't Repeat Yourself). The idea is to extract common logic that can be used across multiple components, preventing unnecessary duplication and making the code easier to maintain.

Let's consider an example where we have multiple components that need to track whether they've been clicked. Instead of duplicating the click tracking logic in each component, we can extract it into a higher order component.

1     import React, { useState } from 'react';
2    
3    function withClickTracking(WrappedComponent) {
4      return function EnhancedComponent(props) {
5        const [clicks, setClicks] = useState(0);
6    
7        const handleClick = () => {
8          setClicks(clicks + 1);
9        };
10    
11        return (
12          <div onClick={handleClick}>
13            <WrappedComponent {...props} clicks={clicks} />
14          </div>
15        );
16      };
17    }
18    
19    export default withClickTracking;
20     

In the above code, withClickTracking is a higher order component that tracks clicks and passes the click count as a prop to the wrapped component. Any component that needs to track clicks can now be wrapped with this HOC, reusing the click tracking logic.

This is just one example of how higher order components can facilitate reusing component logic. They provide a powerful way to abstract and encapsulate component behavior, making your React code more modular, maintainable, and DRY.

‍

The Use of HOCs in Handling Cross-Cutting Concerns

Cross-cutting concerns are aspects of a program that affect other concerns. These concerns often cannot be cleanly decomposed from the rest of the system in both the design and implementation, and can result in either scattering (code duplication), tangling (significant dependencies between systems), or both.

So, where do higher order components fit into this? HOCs provide an excellent way to handle these cross-cutting concerns by abstracting shared behavior into a single place and applying them where necessary.

For instance, let's consider an application that needs to handle user authentication. Many components in this application might need to know whether a user is authenticated or not. Instead of duplicating this logic in every component, we can use a higher order component to handle it.

1     import React from 'react';
2    import { connect } from 'react-redux';
3    
4    function withAuthentication(WrappedComponent) {
5      function EnhancedComponent(props) {
6        if (!props.isAuthenticated) {
7          return <div>Please log in.</div>;
8        }
9    
10        return <WrappedComponent {...props} />;
11      }
12    
13      const mapStateToProps = (state) => ({
14        isAuthenticated: state.auth.isAuthenticated,
15      });
16    
17      return connect(mapStateToProps)(EnhancedComponent);
18    }
19    
20    export default withAuthentication;
21     

In the above code, withAuthentication is a higher order component that checks whether a user is authenticated. If the user is not authenticated, it renders a message asking the user to log in. If the user is authenticated, it renders the WrappedComponent.

By using a higher order component, we've abstracted the authentication logic into a single place. Any component that needs to know whether a user is authenticated can now be wrapped with this HOC.

This is just one example of how higher order components can handle cross-cutting concerns. They provide a powerful way to abstract shared behavior into a single place, making your code cleaner and easier to understand.

‍

Do React Hooks Replace HOCs?

With the introduction of hooks in React 16.8, there's been a lot of discussion about whether they replace higher order components. Hooks are a new addition to React that let you use state and other React features without writing a class. They're a way to reuse stateful logic between components, which sounds a lot like what we use higher order components for, right?

Well, yes and no. Hooks and higher order components can both be used to share stateful logic between components, but they do it in different ways and have different trade-offs.

Higher order components wrap a component and can modify its behavior, which is great for some use cases. But this can also lead to "wrapper hell" if you have many HOCs wrapping a component, and it can be harder to follow the flow of data and props through the component tree.

Hooks, on the other hand, extract stateful logic into functions, not components. This means you can use the same stateful logic in multiple components without changing your component hierarchy. Hooks also make it easier to split your code along the lines of what it's doing rather than the lifecycle methods of a component.

So, do hooks replace higher order components? Not entirely. They're another tool in your React toolbox, and they can often be used to achieve the same goals as higher order components. But they're not a drop-in replacement. There are still use cases where higher order components might be the better choice, especially when you need to modify a component's behavior in a way that can't be done with hooks.

‍

Drawbacks of Higher Order Components in React

While higher order components are a powerful tool, they're not without their drawbacks. Understanding these drawbacks can help you make better decisions about when to use HOCs and when to consider other patterns or techniques.

1. Prop Collisions: Since a HOC injects props into a component, there's a potential for collisions between the injected props and the existing props of the component. This can lead to bugs that are hard to track down.
2. Wrapper Hell: If you're not careful, you can end up with a deeply nested structure of components wrapped in HOCs. This can make the code harder to understand and maintain.
3. Ref Forwarding: HOCs don't automatically forward refs to the wrapped component. This means that if you need to access a ref to a component that's been wrapped in a HOC, you'll need to do some extra work to pass the ref through the HOC to the wrapped component.
4. Static Methods Must Be Copied Over: If the wrapped component has static methods, they will be lost when the component is wrapped in a HOC. To preserve the static methods, they must be copied over to the returned component.

Despite these drawbacks, higher order components remain a valuable tool for abstracting and reusing component logic. They're a key part of React's flexibility and compositional nature, and understanding them can make you a more effective React developer.

‍

Real Life Examples of Using HOCs in React

Now that we've covered the theory, let's look at some real-life examples of higher order components in action. These examples will help illustrate how HOCs can be used to solve common problems in React development.

1. Redux's connect function: If you've used Redux with React, you've likely used the connect function, which is a higher order component. connect takes a component and returns a new component that's connected to the Redux store. This allows the component to access the Redux state and dispatch actions.

1     import React from 'react';
2    import { connect } from 'react-redux';
3    
4    function App(props) {
5      return <h1>{props.greeting}</h1>;
6    }
7    
8    const mapStateToProps = (state) => ({
9      greeting: state.greeting,
10    });
11    
12    export default connect(mapStateToProps)(App);
13     

2. React Router's withRouter function: withRouter is a higher order component that injects the router props (match, location, and history) into a component. This can be useful when you need access to the router props in a component that's not directly rendered by a Route.

1     import React from 'react';
2    import { withRouter } from 'react-router-dom';
3    
4    function App(props) {
5      const handleClick = () => {
6        props.history.push('/home');
7      };
8    
9      return <button onClick={handleClick}>Go to home</button>;
10    }
11    
12    export default withRouter(App);
13     

3. Material-UI's withStyles function: withStyles is a higher order component that injects a classes prop into a component. This classes prop is an object that maps the CSS classes defined in the styles object to unique class names that can be used in the component.

1     import React from 'react';
2    import { withRouter } from 'react-router-dom';
3    
4    function App(props) {
5      const handleClick = () => {
6        props.history.push('/home');
7      };
8    
9      return <button onClick={handleClick}>Go to home</button>;
10    }
11    
12    export default withRouter(App);
13     

These examples illustrate the power and flexibility of higher order components. They can be used to inject props, manipulate props, manage state, and much more. They're a key part of React's compositional nature, and they're a powerful tool in any React developer's toolbox.

‍

Are Higher Order Components Still Used in React?

With the advent of hooks in React, you might be wondering: are higher order components still relevant? The answer is a resounding yes.

While hooks have introduced new ways to share stateful logic between components, higher order components still have their place. They're particularly useful when you need to modify a component's behavior in a way that can't be done with hooks. For instance, you might use a higher order component to abstract away complex subscription logic, or to inject additional props into a component.

Moreover, higher order components are still widely used in many popular React libraries. For instance, Redux's connect function and React Router's withRouter function are both examples of higher order components.

It's also worth noting that hooks and higher order components can coexist in the same codebase. You might use hooks for some parts of your application, and higher order components for others. The key is to understand the strengths and weaknesses of each tool, and to choose the right tool for the job.

‍

The Future of HOCs in React Development

We've come a long way in exploring higher order components in React. From understanding the basic concept, writing our own HOC, comparing it with other React concepts like pure components and container components, to discussing its role in reusing component logic and handling cross-cutting concerns, we've covered a lot of ground. It reduces repetition of same logic and all the props are passed as it is so you can pass props.

So, what does the future hold for higher order components in React? While it's hard to predict with certainty, it's safe to say that HOCs will continue to be valuable in the React developer's toolbox. They offer a powerful way to abstract and reuse component logic and are integral to many popular React libraries.

That being said, introducing hooks in React has certainly changed the landscape. Hooks offer a new way to share stateful logic between components, and they can often be used to achieve the same goals as higher order components. But they're not a drop-in replacement. There are still use cases where higher order components might be the better choice.

In the end, whether you choose to use higher order components, hooks, or a combination of both, will depend on your specific use case and personal preference. The key is to understand the strengths and weaknesses of each tool, and to choose the right tool for the job.

And remember, whether you're using higher order components, hooks, or even a tool like WiseGPT to write your React code, the goal is always the same: to write clean, efficient, and maintainable code that solves your users' problems. Happy coding!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.