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 of sharing functionalities between components while avoiding the downsides of mixins.

When we apply the idea of HoFs to components, we call this higher order components (HoCs) for brevity.

First of all, let's see what an 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...