HOC known as Higher Order Component in React is a pattern that developer uses in order to extract duplicated logic from repeated components. Sometimes you might have some components that re-use the same logic and creates a duplicate code.
This duplicated logic can be extracted using HOC. Following is a syntax for Higher Order Component:
import React from 'react'; const HigherOrderComponent = (WrappedComponent) => { return class extends React.Component { render() { return <WrappedComponent />; } }; };
Let's take on example to understand. Imagine you want to display a loading indicator when any api call is made or when site loads. You will follow the steps show below:
- You will be adding if condition to check if loading is true
- You will be adding this code to all components that needs this indicator
Now, let's take a pause and understand do we really need to duplicate this code in every single component where we need this? Or can we create a global component that does this logic before it gets to the component where we need this loader?
Answer is it would be better if we create a HOC and then use this function where we need it.
How to create HOC?
Let's create a HOC with logic we need.
import React from "react"; import MyLoader from "./loader"; const withLoaderHOC = WrappedComponent => { return class extends React.PureComponent { render() { if (this.props.loading) return <MyLoader /> return <WrappedComponent {...this.props} />; } }; }; export default withLoaderHOC;
So in above code we created a function that takes a component as an argument and returns a new react component. The returned component has some logic that checks to see if we received a props called loading if it is true it will load the loader otherwise will load the component.
How do we use HOC?
To use HOC whichever component needs a loading functionality we will wrap this component around this HOC we created.
import React from "react"; import withLoaderHOC from "./withLoaderHOC"; class UseMeComponent extends React.PureComponent { render() { return <h1>This is a test component</h1>; } } export default withLoaderHOC(UseMeComponent);
Note we have wrapped UseMeComponent with our withLoaderHOC function that we created.
Things to remember
- In order to use above example you need to setup loading prop using redux or some other global store
- Make sure you set this loading flag before and after api call to make sure to turn off and on loading indicator
What can you do with HOC?
- You can extract duplicate logic
- You can pass additional functions and props from HOC to other components
- You can remove all duplicated functions and can move them to HOC only if it is common to other components
- It can add an additional layer between components or libraries for better code-reuse.
If you have any questions and doubt regarding HOC don't hesitate to send me an email via contact form but make sure to leave your name and email so that I can respond.