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:
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:
// 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:
<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:
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