Higher-order Components

In the previous section, we saw how mixins are useful for sharing functionalities between components and the problems that they bring to our applications.

In the Functional Programming section of Chapter 2, Clean 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.

Let's see if we can apply the same concept to React components and achieve our goal to sharing functionalities between components while avoiding the downsides of mixins.

When we apply the idea of HoFs to components, we call it Higher-order Components (HoCs) for brevity.

First of all, let's see what a 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 you need to attach to every component...