What is Higher Order Component
a Higher Order Component is a function that takes a component and returns another component
Normally, a component transforms props into UI but a Higher Order Component transforms props into an enhanced component.
I will use HOC to abbreviate Higher Order Component in the following content.
When to use a HOC
Deciding when to apply HOC to components is the same as creating a component. I think we use HOC to wrap our component to reduce duplicate code, the react doc gives a perfect example.
Suppose you have a component which you need to execute a get request to fetch data from an external API, We might have the following code.
In the other day you might create another component doing similar things as follows.
- Creating a state variable to store the fetched data
- Performing a get Request to fetch data inside the useEffect Hook
This might be a suitable scenario to use a HOC to abstract the logic out of the component. We will create HOC to deal with the things stated above.
We first create a HOC that look like this, basically, we put the useState and useEffect hook here and pass the data as a prop to the component that is wrapped by this HOC
The component originally do the fetch request can now be simplified to be a stateless component which rendered the props it received
And here is how you use the HOC for the component.
Here are what HOCs can benefit us. I think is similar to components
- Separate the responsibility in a component
- Reduce duplicate code, reusable to wrap any component which needs them
Things be be aware of when using HOCs
Now you might know the basic usage of HOC, here are some points to be aware of when using it.
1. Using React features in a HOC
If you only want to generate props in the HOC and pass them into the enhanced component. it’s totally fine to use in the below way.
But If you want to use react hooks or access react life cycle methods, you cannot declare them inside the HOC’s function. You have to declare them in the returned component.
The react doc stated other things to be aware of. If you are interested you can check them out!
Practical Usage of HOCs
1. Use HOCs as a middleware for showing desirable contents
Except for passing additional props into the component wrapped by HOCs, we can do some checking in HOCs.
Suppose there is a scenario when your component receive a loading prop. You originally wrote a checking statement to decide if the loading state is true show a spinner otherwise show the component itself.
We could separate this logic into a HOC to reduce the code in our main component to do it’s own work.
Originally the component might look like this
We wrote the JSX to handle the UI when the loading state is true and false, Imagine if next time we need to handle this in a separate component, we can extract the logic out to let a HOC deal with it like below
Now, TodoList Component has become a stateless component.
Conclusion
I think there are already hundreds articles talking about HOC on the internet, hope this article helps, HOC also has some downside. The motivation of why Hooks were born talked about this.
