Published July 7, 2021, Modified July 7, 2021
In this tutorial we will talk about Higher-Order Components (HOC), a widely used react concept and a topic that is commonly discussed in front-end developer interviews. We will discuss what they are and how to write them.
You may have heard about the don’t-repeat-yourself (DRY) programming principle, where we look to reduce the amount of duplicate logic on our applications.
Let’s first understand what are higher-order functions, since I think you may have been using them a lot without knowing their higher-order nature.
A higher-order function is a function that takes a function as a parameter, returns another function, or both.
Let’s take the
map() array method as an example. This method takes a function as a parameter which means that it is a higher-order function, but how are we recycling logic with this method? well, the map() method does the following:
- iterates over every element of an array
- applies the passed function to every element
- the returned values will be added to a new array
- returns the resulting array
Look at this example:
1const arr = [1, 2, 3]23const mappedArr = arr.map(number => number * 2)45console.log(mappedArr)6//[2, 4, 6]7
So as you can see, we are recycling that logic over and over again, every time we call the
Let’s see another example, this time building a higher-order function that returns another function:
1const add = (num1) => (num2) => num1 + num223const addFive = add(5)4// addFive = (num2) => 5 + num256console.log(addFive(12)) // 5 + 12 = 177// 178
As you can see in the last example our ‘add’ function serves the purpose of building ‘adder’ functions. You pass a number as a parameter and it will return a function that adds that number to any other number.
Passing 5 as a parameter will return this function
(num2) => 5 + num2 so we basically used our higher-order function to build another function that adds 5 to any number.
Now that you better understand the concept, let define a higher-order component. A HOC is a component that takes one or more components as props and returns new components.
It’s important to mention that HOC’s don’t modify the components passed, they just return new components.
Let’s see a very basic implementation of a HOC:
1const withComponent = Component => () => <Component />23const someComponent = () => (4 <div>5 Hi6 </div>7)89const sameComponent = withComponent(someComponent)10
As you can see we are passing a component to our HOC and then returning it again. In reality, you would implement some logic, pass some props, style it, etc…
Let's see another example:
In this example you can see how I created a simple component that return some text. Then I created a HOC that accepts any component and then returns it inside a
span tag that has some style. Im sharing this with you through codesandbox so you can see the result. Try and experiment with it.
Hope this gave you at least a basic understanding of HOC’s and how to write them. It’s a widely used concept in React that you will encounter in a lot of libraries such as Redux, for example.
Hi, I'm Leo Cuéllar. I'm a Software Engineer, technical interviewer, and technical writer. I'm also the founder of Devcore. I enjoy writing about front-end and job interview topics.
🌌 Join the Devcore
Subscribe and receive a weekly email with the most popular articles about modern front-end web development, the latest interview questions and the most relevant job opportunities.
No spam. Unsubscribe anytime.