Complete Guide to React Higher-Order Components (HOCs)

Inspired by higher-order functions in JavaScript, higher-order components (HOCs) in React are wrappers around regular components that provide additional data or behavior. Top React development companies leverage HOCs to modify behavior or add functionality to existing components in a React application. HOCs are extremely valuable in React projects because they offer numerous benefits across a range of use cases. This article explores the advantages and applications of React HOCs and provides practical guidance on how to use them in your application. Finally, we compare HOCs with React Hooks to assess their relative usefulness for developers and projects.

1. What Are HOCs in React?

Higher-order components (HOCs) in React are an advanced design pattern in which a function takes a component as an argument and returns a new, enhanced component. HOCs wrap components, adding behavior and props to them. 

Although React encourages the “Don’t Repeat Yourself” principle, avoiding code repetition can be difficult when the same logic must be implemented in multiple components. Wrapping ‌shared logic in a higher-order component and reusing it across components ensures code reuse without duplicating code and improves the app’s maintainability.

2. What Are The Advantages of Using HOCs in React?

This section explains why React developers use higher-order components (HOCs) in their projects

• Reusability: Higher-order components ensure the reuse of shared logic across multiple components, avoiding repetition and saving time. 
• Flexibility: HOCs allow you to pass additional arguments to the components to change their behaviour. This makes it easy for you to add new functionality to React components. 
• Code Abstraction: Higher-order components extract shared logic from React components, making the components more concise and easier to understand. 
• Separation of Concerns: HOCs ensure that each component encapsulates a single responsibility, allowing components to focus on a specific task or functionality. 
• Composability: By combining different HOCs, React developers can create‌ complex functionality from small, reusable pieces of code.

3. When to Use React HOC?

Here are some instances where using React higher-order components (HOCs) improves operational efficiency and provides additional benefits. 

3.1 Management of State and Handling of Async Data

HOCs can encapsulate state management for components. They can fetch asynchronous data required for display, allowing developers to build loosely coupled components with distinct responsibilities. 

3.2 Authentication

Use an HOC to wrap routes or components that demand authentication before providing access. Multiple routes and components in a React app may require authentication; duplicating authentication logic across them increases the risk of errors and inconsistency. Instead, generate an HOC named withAuth to centralize the authentication process. It allows access to the requested route or component if the user is authenticated; otherwise, it redirects the user to the login page. This approach reduces duplication and ensures consistent authentication behavior across the React app. 

3.3 Conditional Rendering: Authorization and Feature Toggle

Another use case for HOCs is showing components or features only when they fulfill a specific condition. For instance, a set of components may be protected and visible only when the user provides authorized tokens or passkeys. Another example is when users buy a subscription plan and gain access to premium features.

In these use cases, the HOCs are responsible for abstracting the component logic that retrieves the data determining whether to show the component. This allows developers to reuse logic across multiple functions and components. 

3.4 Logging

Logging data every time a component mounts or updates can be overwhelming. HOCs can save you from that hassle. Instead of adding logging logic to every component, delegate logging to a higher-order component (HOC) named withLogger. It wraps the relevant components to provide consistent logging across the application. 

3.5 Translation and Language Switching

HOCs also provide the ability to switch languages and add translation and internationalization to a React app. Higher-order components include functions that let you translate text or data from one language to another or switch between languages.

3.6 Styling and Theming

When working with a design system of reusable themes and styles, create an HOC called withThemes to supply theme-related props to React components. As a result, the wrapped components can access and apply appropriate styles based on the active theme. 

3.7 Error Boundary

Higher-order components (HOCs) commonly use error boundaries to manage unhandled errors. However, to do this, the HOC itself must be a class component, because function components (including the wrapped component) cannot act as error boundaries.

4. How to Use HOC in React?

In this section, we provide an example of React code using a higher-order component (HOC) to add a loading behavior to a basic component. Here, we use the withLoading HOC to take an existing component and return a new one. The new component checks the isLoading prop. A loading message is displayed if the isLoading prop is true. If it is set to false, then the original component is displayed along with all its props. 

A function component named the Message component is used to show the text message. The withLoading HOC wraps this functional component to create messageWithLoading. This new component can now display a loading state as an added capability. React hooks, namely, useEffect and useState, are used in the app component to simulate the loading. The component starts in the loading state and then uses a timeout to switch off after two seconds. 

When the app runs, it first displays “Loading…” for 2 seconds, and then automatically shows text (Hello from TatvaSoft!) once the loading is done. This example shows how HOCs can add shared behavior (like loading) to components in a clean and reusable way.

import React, { useState, useEffect } from 'react';
 
 
// HOC implementation 
const withLoading = (WrappedComponent) => (props) => {
  const { isLoading, ...rest } = props;
  return isLoading ? <p>Loading...</p> : <WrappedComponent {...rest} />;
};
//  Base component
const Message = ({ text }) => <h2>{text}</h2>;
// Enhanced component
const MessageWithLoading = withLoading(Message);
const App = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
   const timer = setTimeout(() => setLoading(false), 2000);
   return () => clearTimeout(timer);
  }, []);
  return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<MessageWithLoading isLoading={loading} text="Hello from TatvaSoft!" />
</div>
  );
};
export default App;

5. React Hooks vs Higher-Order Components

Code organization and the component transformation are the two most crucial factors that help differentiate between the Hooks and HOCs. 

5.1 Code Organization

When it comes to code organization, HOCs have proved themselves to be excellent tools, offering consistent wrapping across multiple components. They also help developers handle complex component transformation. With React Hooks, developers can avoid using unnecessary layers in a component tree while writing stateful logic. 

5.2 Component Transformation

HOCs come ‌highly recommended for managing cross-cutting concerns like conditional rendering, error handling, logging and authentication. Since it is effective for conditional rendering, HOCs allow easy modification of the component behavior as well.

On the other hand, Hooks manage side effects like API calls, timers, and subscriptions required to update or mount a component. React developers prefer it for composing and sharing the stateful logic efficiently, like data fetching and form handling, without disrupting the component hierarchy of the system.

6. Conclusion

In the React ecosystem, higher-order components play a crucial role in enhancing the composability, flexibility, code reusability, and separation of concerns. They ensure effective implementation of a diverse range of features in your React app, such as performance tracking, logging, styling and theming, switching and translating language, error management, and authentication. If used properly, HOCs can help write readable, maintainable, and clean code, improving the app quality and developer productivity. In this blog, we explored the benefits, use cases, and practical working of higher-order components in React applications. Feel free to reach out to our experts in case you have any further queries.