Adopt HOC Pattern to Improve Code Reusability in React
This article will give you a better understanding of how higher-order components work and how you can use them to achieve code reusability in React. Well, this article requires a basic to intermediate level of knowledge about React. Read my two recent articles on component communication and virtual-dom on medium to understand React fundamentals.
Code Reusability is a very old book tactic to achieve maximum by writing a minimalistic line of code. In other words, you can use an existing piece of code to develop new functionality. But in order to reuse code, you have to write high-quality code.
In React, components are the building blocks of the application. In other words, They are the primary unit of code reuse in React. The application logic is elegantly coupled with components in React. To achieve a greater degree of reusability in React application, you have to find a way to disassemble the fine-grained logic (state logic, event-based logic, etc.) as a reusable block of code.
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
A Higher-Order Component (HOC) is a function that takes a component as input and returns a new component as output with some additional logic.
The concept of HOC is similar to the concept of higher-order functions in JavaScript. A higher-order function is a function that takes one or more functions as arguments or returns a function. Example of higher-order functions are various array methods introduced in ES6 like .map() and .filter() etc. These methods take a function as an input to iterate over the array.
Let’s write step-by-step code to implement a HOC and understand how it improves the code reusability in React.
To understand the use of HOC, first, we will implement a scenario where we will fetch various resources from one of the free online REST APIs. Here I am using JSONPlaceholder free REST API to demonstrate the HOC concept.
We are going to fetch posts and comments resources using GetPosts.js and GetComments.js respectively without using HOC.
The above two files are fetching different resources from JSONPlaceholder free REST API. Both files are very identical in structure. Here we are fetching arrays of posts and comments and updating the state of the component which is passed as props to render in UI Components.
We can implement one higher-order component fetchWrapper.js here which will be reused to fetch any resource from the above-used API. This higher-order component will take a Wrapped Component as input and one more argument as a name of the resource to fetch. According to the resource name given in the argument, we will fetch the requested resource. Once the resource is successfully fetched from API, we will pass it as props to Wrapped Component as we have discussed above.
Refer fetchWrapper.js file, fetchWrapper is the higher-order component in the above code snippet. It takes WrappedCompoent as input and it will be returned with the fetched resources as props. Here the first parameter of fetchWrapper is the wrapped component. The second parameter is the resource that we want to retrieve.
In the above code snippet, GetPostsWithHOC.js and GetCommentsWithHOC.js are modified to use HOC fetchWrapper. When GetPosts and GetComments components get rendered, fetchWrapper HOC will call the respective APIs and they will get posts or comments array as data props retrieved from JSONPlaceholder API. To get these data props, we need to wrap the component in fetchWrapper HOC.
As you have noticed here, the HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. The HOC fetchWrapper is the regular javascript function where you can add as many arguments as you like. In other words, if you want to add more functionality to the existing components, you can add more functionality without modifying the actual component. Many popular JavaScript libraries use HOC to enhance code reusability i.e. Redux.
Summary
HOCs can add additional features to a component without modifying it. It’s expected that the component returned from a HOC has a similar interface to the wrapped component. HOC pattern is the most efficient way to have code reusability in React. If you see the repetition of your code in a project, there might be a chance to move it to a HOC. So adopt HOC to improve reusability in React.
