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.
Today we’ll be going through my 5 (in no particular order) favorite Recompose Higher Order Components:
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.
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
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
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
withHandlersto create handlers instead of using
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.
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
nest is great when you want to nest components into each other. This is useful if you’re composing a hierarchy of UI elements.
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!