Higher-Order Components and React

For those that are curious

The Problem

Let’s say you have some view that looks like

We see a common pattern of wrapping our components in a <div> with some positioning classes (they apply top & bottom margins).

One way to solve it

One solution would be to pass spacing values through props and add the value to the className on IconLabelValueRow.

Then SomeView would look like this:

Another problem

But this doesn’t solve the problem for EditValueRow. We would have to copy and paste the spaceTop and spaceBottom props preamble over to the other component like so:

So now SomeView looks like this:

But copy + paste makes us sad so how do you decorate your component in a composable way?

A better solution

Enter higher-order functions. A higher-order function takes a component and in this example returns a state-less function.

And now we can use this in IconLabelValueRow.

and in EditLabelRow:

And now we live in a happy world.