Understanding HOCs

In the Functional programming section of Chapter 2, Cleaning Up Your Code, we mentioned the concept of higher-order functions (HOFs), which are functions that, given a function, enhance it with some extra behaviors, returning a new one. When we apply the idea of HOFs to components, we call these higher-order components (or HOCs for brevity).

First of all, let's see what HoC looks like:

const HoC = Component => EnhancedComponent

HOCs are functions that take a component as input and return an enhanced one as the output.

Let's start with a very simple example to understand what an enhanced component looks like.

Suppose, for whatever reason, you need to attach the same className property to every component. You could go and change all the render methods by adding the className property to each of them, or you could write an HOC such as the following:

const withClassName = Component => props => ( 
  <Component {...props} className="my-class&quot...