Understanding HOCs

In the functional programming section of Chapter 3, Cleaning Up Your Code, we introduced the concept of higher-order functions (HOFs). HOFs are functions that accept another function as an argument, enhance its behavior, and return a new function. Applying the idea of HOFs to components results in higher-order components (HOCs).

An HOC looks like this:

const HoC = Component => EnhancedComponent

HOCs are functions that take a component as input and return an enhanced component as output. Let’s start with a simple example to understand what an enhanced component looks like.

Suppose you need to attach the same className property to every component. You could manually add the className property to each render method, or you could write an HOC like this:

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

In the React community, it’s common to use the with prefix...