wtf are Higher Order Components?

The Higher Order Component (HOC) pattern is used frequently in React libraries, so it's worth knowing. Below I'm going to show you what a HOC is, how to use one, and how to create your own.

The Higher Order Component pattern reduces the amount of repetitive code you write as your app grows. A Higher Order Component provides common functionality that other components reuse.

The Higher Order Component (HOC) pattern is used frequently in React libraries, so they're worth learning.

Higher Order Functions#

When we talk about a “higher order” function, what does “order” even mean? Let’s look at a simple function first:

Function increment() is a regular function that takes a number and returns the sum of this number and 1. It is a normal, first-order function because it takes “normal” values as arguments and returns a normal value.

higher order function, is a function that either:

  1. accepts a function as an argument or

  2. returns a function as a result

(or both).

Consider the following:

Function twice() is a function that takes another function as an argument and returns a function as a result—that makes it a higher order function.

We’d use it like this:

So the idea with a higher-order function is that we generate a new function that has new abilities based on the original function.

Higher Order Components carry the same idea, but in the realm of React components.

Definition of a Higher Order Component#

A Higher Order Component is a function that takes a component as an argument and returns another component as a result of some processing.

Let’s see what a higher order component looks like in practice.

Pseudocode Of A Higher Order Component#

First, look at this pseudocode of a higher order component. The higher order component takes a component, transforms it, and returns a new component.

In code, that means we structure it like this:

The result of applying higherOrderComponent to SomeComponent is the new component, NewComponent.

If you are struggling to wrap your head around how this works, remember our definition:

A higher order component is a component/function that takes any component and returns another component - with modified functionality.

A Simple Higher Order Component#

For our next example, say we want to build a component to syntax highlight code in multiple languages - and support a dark mode.

This is what our components look like:

and

These components print out code snippets (codeSample). Say, that we want to support a “night mode”, so that it’s easier to read at night.

To keep it simple, all our “night mode” is going to do is add a backgroundColor of wheat.

This is what the component will look like:

Our higher order component, withNightMode, adds new styling with a slightly darker background by adding a div around WrappedComponent.

What is WrappedComponentAny component we want!

Well, that’s not exactly true: we only want to pass components that “conform” to the type of props that our HOC can work with. Thankfully, we can do that with TypeScript. There’s not room to show it here, but we do show it in detail in Fullstack React with TypeScript

We pass WrappedComponent in as an argument and return a new component as the result. Hence the term, “Higher Order Component”.

Using The Returned Component#

Below, we use the component that is returned by our High Order Component function:

You can try it out in this Code Sandbox 👆

In the code above, we use the higher order component withNightMode to transform our input components into versions that display with a “Night Mode” style.

What’s cool is that we did not have to code this behavior in the components themselves. Rather, we made a higher order component that applies this behavior to any component we pass it.

Of course, Higher Order Components can get more complicated. You definitely want to use types to ensure that your HOC and the components themselves are compatible. And we show some detailed examples of how to do that in Fullstack React with TypeScript.