React Design Patterns and Best Practices

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 ...