Building Components via Composition is like VOLTRON

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 is with the graphql HOC from react-apollo .

You will notice the compose HOC above. This allows us to combine different HOCs together into one big Component. It’s like VOLTRON.

We combine the withRouter HOC from react-router , this passes the route context via props to the BaseComponent. We then use the graphql container from react-apollo to make a GraphQL query to our backend and return the results to the component via props.

We then use mapProps to make a new set of props. In this case we grab the job data, and total count to return new props to the component using this container.

3. withState + withHandlers

I use this combo when I need to add some state to my presentational components. withState enhances the BaseComponent with local React state.

Here we set a new value in state counter and name the stateUpdater setCounter

withHandlers is a great way to add event handlers to your BaseComponent. It takes a map of higher-order-functions that accept props from the BaseComponent and returns a handler.

This is where it gets cooler.

From Recompose Docs:

Handlers are passed to the base component as immutable props, whose identities are preserved across renders. This avoids a common pitfall where functional components create handlers inside the body of the function, which results in a new handler on every render and breaks downstream shouldComponentUpdate() optimizations that rely on prop equality. This is the main reason to use withHandlers to create handlers instead of using mapProps or withProps , which will create new handlers every time when it get updated.

Here in our example, we take the state updater function from props and create different event handlers, increment, decrement and reset.

4. lifecycle

I love using lifecycle when I just need lifecycle methods on my Component.

Here’s a render-less component that attaches lifecycle methods via the lifecycle HOC.

5. nest

nest is great when you want to nest components into each other. This is useful if you’re composing a hierarchy of UI elements.

Conclusion

I love the utility belt nature of Recompose. I combine it with libraries like react-router, redux, react-apollo etc. to separate my presentational UI from my client-side business logic. Let me know how you like Recompose!

Cheers.