Implementing Higher Order Components (HOC) for Functional Components in ReactJS
Tags: react, javascript, webdev
Published: 2024-04-15 12:00:45

In ReactJS, Higher Order Components (HOC) is a powerful pattern that allows us to reuse component logic across multiple components. While HOCs are commonly used with class components, they can also be implemented with functional components. In this article, we will explore how to create and use Higher Order Components with functional components.

**What is a Higher Order Component (HOC)?**
A Higher Order Component is a function that takes a component as an argument and returns a new component with enhanced functionality. It allows us to add additional props, modify the component's behavior, or encapsulate common logic that can be shared across multiple components.

Creating a Higher Order Component for a Functional Component:
To create a Higher Order Component for a functional component, we can follow these steps:

**_Step 1: Define the Higher Order Component function:_**
```javascript
const withEnhancements = (WrappedComponent) => {
  const EnhancedComponent = (props) => {
    // Add your enhanced logic here
    // You can modify props or add additional functionality

    return <WrappedComponent {...props} />;
  };

  return EnhancedComponent;
};
```

**_Step 2: Use the Higher Order Component:_**
To use the Higher Order Component, wrap your functional component with the HOC function:

```javascript
const MyFunctionalComponent = (props) => {
  // Your component's code here
};

const EnhancedFunctionalComponent = withEnhancements(MyFunctionalComponent);
```

**_Step 3: Render the Enhanced Functional Component:_**
Finally, render the enhanced functional component in your application:

```javascript
ReactDOM.render(
  <EnhancedFunctionalComponent />,
  document.getElementById('root')
);
```

Example: Adding a Loading Indicator to a Functional Component
Let's consider an example where we want to add a loading indicator to a functional component. We can create a Higher Order Component that handles the loading state and displays the indicator accordingly:

```javascript
const withLoadingIndicator = (WrappedComponent) => {
  const EnhancedComponent = (props) => {
    const [isLoading, setLoading] = useState(true);

    useEffect(() => {
      // Simulating an asynchronous operation
      setTimeout(() => {
        setLoading(false);
      }, 2000);
    }, []);

    return isLoading ? <div>Loading...</div> : <WrappedComponent {...props} />;
  };

  return EnhancedComponent;
};

const MyComponent = () => {
  // Your component's code here
};

const EnhancedComponentWithLoading = withLoadingIndicator(MyComponent);

ReactDOM.render(
  <EnhancedComponentWithLoading />,
  document.getElementById('root')
);
```

In the above example, the `withLoadingIndicator` HOC takes a functional component `MyComponent` as an argument and returns a new component `EnhancedComponent`. The `EnhancedComponent` handles the loading state, displays a loading indicator for 2 seconds, and then renders the original `MyComponent`.

**Conclusion:**
Higher Order Components are a powerful pattern in ReactJS that allows for component reusability and logic sharing. By implementing HOCs for functional components, we can enhance their functionality, modify behavior, or encapsulate common logic. Use this pattern wisely to create more flexible and maintainable ReactJS applications.

Follow me on [X/Twitter](https://twitter.com/ashsajal1)