What is a Higher Order Component?

Quick summary

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.

Well, this principle has evolved as a pattern that you can see on higher-order functions on JavaScript, or as Higher-Order Components in React.

Higher-Order Functions

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:

1. iterates over every element of an array
2. applies the passed function to every element
3. the returned values will be added to a new array
4. returns the resulting array

Look at this example:

const arr = [1, 2, 3]

const mappedArr = arr.map(number => number * 2)

console.log(mappedArr)
//[2, 4, 6]

So as you can see, we are recycling that logic over and over again, every time we call the map() method.

Let’s see another example, this time building a higher-order function that returns another function:

const add = (num1) => (num2) => num1 + num2

const addFive = add(5)
// addFive = (num2) => 5 + num2

console.log(addFive(12)) // 5 + 12 = 17
// 17

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.

Higher-order components

Now that you better understand the concept, let's 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:

const withComponent = Component => () => <Component />

const someComponent = () => (
    <div>
        Hi
    </div>
)

const sameComponent = withComponent(someComponent)

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.

Wrapping Up

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.

---

This article was first published on devcore.io. go check it out!

Comments

[Will T.]

I'd also love to see what the advantages and disadvantages of using HoCs are (in other words, when and when not to use it). As far as I can see, with the invention of hooks, HoCs are not the preferrable choice anymore. For example, in the newer version of Redux, they now use the new hook APIs instead of HoCs.

[Leo Cuéllar]

You're right! That is somethign I will definetly talk about in the future. Thanks a lot for the suggestion