Originally written here -> https://easyontheweb.com/react-wrapper-components-hocs/
If you ask any developer what is the most important thing or concept behind React, you’ll most probably get the answer as “It’s components structure”. React is awesome in a way that it let’s you write components and structure your webpage to your liking. Most of the times components are very different from one another and may warrant their own separate component code but sometimes you may look at two components and think to yourself “Can I somehow merge them ?”. This is where react wrapper components come into play.
React wrapper components or Higher order components as they are often called are a pattern that developers have created for reusing component logic that emerges from React’s compositional nature.
In this article we will learn about what wrapper components are in React and how you can use them in your code to take advantage of React’s compositional powers.
Why Higher Order Components?
Most of you must have heard the term Don’t Repeat Yourself or DRY if you are into software development. What it basically means that it is for the better if you do not repeat a piece of code or logic at two places if they do similar jobs.
What you want to do or at least aim to do is create reusable logic that you can then use at more than one place. There are huge advantages of this! The most obvious one being you do not have to change code at more than once place for the exact same thing. You just change the code in the reusable piece and all the places get affected themselves. Cool, right?
This when combined with React and it’s fundamental nature of being compositional can be of great use to developers. You can create a single component and then use it at multiple places to render that thing. BUT what if there are two components which are let’s say … 90% alike ? What would you do then? One option would be to create two different components and use them at different places.
This would not be very DRY, would it? You have literally used 90% of the code at two places. So, we come to our second solution which is using Higher Order Components.
Higher Order Components wrap around other components and provide them certain functionalities. In our situation here, we would write the 90% same code in an HOC and then wrap two smaller components with 10-10% different code and then use it in the app. You solved your dilemma of using DRY code . Congratulations !
Concepts behind Higher Order Components
When it comes to Higher Order Components, there are some things you need to take care of.
We do not want to mutate the component -> We do not want to change the basic functionality and features of the base component that is being wrapped around. We just want to enhance any functionality that it already has, or provide with some functionalities that it does not.
Higher Order Components must be pure functions -> Pure functions are very important in Javascript. What they aim to do is have no side effects other than the argument they are passed. Therefore we must aim to write Higher order components such that there are no side-effects.
Creating a Higher Order Component
There can be many places where you can use higher order components and you can use them for many purposes like :-
- Share common code amongst components.
- Enhance functionalities of different components.
Let us see one example of both these things starting with sharing code amongst different components.
Sharing Code
In the first example we’ll be creating a ModalWrapper higher order component that will wrap our different kinds of components. You may have confirmation modals with just a YES/NO functionality, you may have message modals that just display some message like an alert. You might also have CRUD operation modals. There are endless uses of modals to be honest.
What if you want all these Modals to share certain common JSX and wrap the inner JSX (different for each kind of modal) with this outer JSX written for the ModalContainer ? Let us do that.
Okay, so this is my wrapper component in React. Let us see what it is actually doing.
For starters, there is this function called modalWrapper that is taking in an argument called WrappedComponent. Our function is doing nothing but returning a React Component which inside it’s render method is also rendering whatever the WrappedComponent was and then returning back the outer React Component declared in the file.
Then, we just export the function from the file.
How do we use this HOC then? Let us see that as well :-
This part is fairly simple as well. We just create our component , wrap it using the modalWrapper function we import at the top and then export that new variable (which actually contains a new component that has been created by wrapping the inner component with the HOC).
What does all this do for us? What this does for us is that we can share a large part of the JSX code (the container for Modals here) amongst various different kinds of modals in our application without having to re-write that JSX in each and every component. Neat eh?
Enhancing Functionalities
For this example I won’t be writing an example of my own (even though by now you must have gotten the concept of HOC and should be able to write them). We will take a look at an HOC that most of us have used with React, particularly Redux.
I’m pretty sure you must have used or seen such code if you have ever worked with Redux in your React app. This code has the HOC connect that we use to wrap around our custom component called ComponentABC.
The syntax for it is a bit different because it involves a concept called currying but that is not something you should be worried about right now. But if you are worried about it and want to know what currying is, check out this youtube video -> https://www.youtube.com/watch?v=oU3LzOO0OGA&t=639s
So, as I was saying, we use connect as a wrapper function that wraps around our custom written component and grants it new functionalities that I did not have on it’s own. What are these functionalities? Well, it grants it access to the redux store for starters ! Also, it grants it access to use actions and many other things that we won’t go into details of.
What is important to know is that any component that is wrapped with this connect will get functionalities like the ones I mentioned above.
In a similar way, you can write your own wrapper components and functions that can be used to give new functionalities to otherwise simple custom components.
Final words
The crux of this article was to be able to teach you how to keep following DRY coding practices in React using the HOC pattern. Hopefully you learned how to use them to share code or share additional functionalities with other components in React.
React is compositional and that is what makes it a great candidate for DRY coding and we should use it more often than not. Also, please do comment any queries you have on react wrapper components still left.
If you are interested in some great resources that can take your React skills to the next level, here is a post I have written on the same -> https://easyontheweb.com/reactjs-resources-for-beginners-from-scratch/
Top comments (0)