Top 5 Recompose HOCs

Recompose by Andrew Clark has really changed the way my team and I develop React components. If you haven’t used this library, it provides an assortment of higher order components giving the engineer a very “lodash” like developer-experience.

For more details on Composition in React, I’d take a look at Nik Graf‘s React Europe talk: https://www.youtube.com/watch?v=qJgff2spvzM

Today we’ll be going through my 5 (in no particular order) favorite Recompose Higher Order Components:

1. branch

Ever have a decision tree which based on a condition, your component behaves differently? Branch is a great way to do that logic split and decorate your BaseComponent with a higher order component.

The great thing here is your test function receives props from the owner. If our test function returns true, the Headline HOC is applied to the Example component; otherwise, the Paragraph HOC is applied.

2. mapProps

mapProps is great for situations when in conjunction with another HOC you want to return some “derived” props. mapProps allows you to write a function that maps the current props and returns a NEW collection of props to the BaseComponent. My favorite use case…