If you like keeping things simple in React, by creating small components with functional component syntax and by using them as pieces to create bigger ones, Recompose can help you to do the same with Higher-Order Components (HOCs).
With Recompose it is easier to create small Higher-Order Components that can be composed into more complex ones. With the approach encouraged by Recompose, you won’t need more
Class syntax to create React components.
But before going into details, let’s start reviewing some concepts…
Higher Order Functions
A Higher-Order Function is a function that deal with other functions, either because it receives them as parameters (to execute them at some point of the function’s body) or because it returns a new function when it’s called or both.
In the example above,
getResultOperation receives a function and returns a new one. So it is a Higher-Order Function.
reduce. They all apply some function passed as a parameter over the elements of the array to get something as a result
In React, we have the equivalent of Higher-Order Functions but for components, the so-called Higher-Order Components.
A Higher-Order Component is a function that takes a component and returns a new component.
When are the Higher-Order Components useful? Well, mostly to reuse the logic involving behavior across components. Let’s explain this with the following scenario.
Let’s assume we already have a component
And we want to create another
ButtonWithTrack based on this
Button (same props on
Button should also work on
ButtonWithTrack and same styles applied) but with improved behavior (like keeping track of the times it has been clicked and displaying this value on the button itself).
To do this we can do…
We have reused the original
Button so everything ok for now.
Let’s take another component
And we want to add the exact same behavior we added to our
What to do then? Should we repeat 90% of the code in 2 files? Or is there a way we can take out the logic added to
ButtonWithTrack in a way it can be applied to both
Higher-Order Components to the rescue!!
To solve this problem, we can create a Higher-Order Component, this is, a function that takes one component and returns the enhanced version of that component with the behavior we want.
For example, we can do this:
So then, we can simplify the creation of the component
Button by using the
withClickTimesTrack HOC like this:
And also now, we can easily apply the same enhancement to other components like
Cool, isn’t it?
But we can think this HOC add too many behaviors at the same time (handler, state & new UI).
Wouldn’t be better if we split the logic behind the HOC into smaller parts?
Ok, its decided! We want to have these three behaviors of the HOC isolated so we can reuse them independently in other components:
- Add custom
- Display the
timesstate inside the element
To do this we can create 3 HOCs where each one will add a specific behavior…
With these 3 HOCs we can then apply them to our elements in this way…
What’s going on here? Well,
withDisplayTrack(Button) returns a component that is used in the call of
withHandlerClick that will also return a component that will be used in the call of
withStateTimes that will return our final component (
As you can see, the idea is good because we can reuse our code in this way, but creating these HOCs is a bit complicated and also applying them in this way is a bit hard to read.
Is there any improvement over this?
Recompose to the rescue!! 🙂
What is Recompose?
In their own words:
So, it’s a set of methods we can use to improve the organization, creation and application of our HOC’s encouraging the use of functional stateless components combined with the composition of HOC’s.
Let’s start with the most used method of Recompose called
compose we can compose multiple higher-order components into a single higher-order component.
In our scenario, with
compose we can now express the application of our HOC’s like this:
Much cleaner and easy to read, right?
Another useful method of Recompose for our scenario is
This method creates a HOC with almost the same behavior we implemented in
- it adds a state property
- it creates a handler to set the value of this state property
- it allow us to set a initial value
So, with Recompose, now we can express the same logic like this…
For real? Yes, for real 🙂
The utility of Recompose starts to make sense, right?
Let’s continue improving the code of our scenario. Let’s take the HOC
withHandlerClick. To improve the creation of this HOC we can use the method
withHandlers of Recompose.
withHandlers takes an object map of handler creators. Each one of the properties of this object passed to
withHandlers should be a Higher-Order Function that accepts a set of props and returns a function handler. In this way we can generate a handler that will have access to the
props of the component.
In our example, if we debug the code with the React Developer Tools the component returned by
withDisplayTrack is displayed as
To fix this, we can use the
setDisplayName of Recompose to
export a final HOC that will return a component with the name
With the method
lifecycle we can add lifecycle methods to our functional-syntax components.
In our scenario we could add a different version of Button that display the number of pending messages.
We can create a HOC that returns a different view of our button using a
And we can add a
componentDidMount lifecycle method to our component that will add:
loadingstate set to
truewhen our fake request starts and set to
falsewhen it finishes
messagesstate which value will be updated with the random number returned by our fake request
messages states managed here will add one new prop each to the returned component, that will be used to propagate the corresponding values:
With these new HOC’s we can now quickly create our new type of
With these HOCs we can transfer these new behaviors into a link with very few lines. And we can add the
defaultProps to change the default type of the link.
With these methods we can finish our demo by easily creating another version of
Button (just to show the flexibility of this pattern) that track the clicks from 3 to zero, and adds another
prop so we can change the
type when the countdown reach zero.
As you can see, with Recompose it is easier to delegate the logic into small Higher-Order Components and then compose them into a more complex HOC that we can use to create different versions of our components reusing most of our code.
Also, Recompose discourage the use of
Class syntax for creating components and encourage the use of Functional Stateless Components combined with Higher Components.
The most important advantages of using only Function components are:
- They encourage code that is more reusable and modular.
- They discourage giant, complicated components that do too many things.
Basically, once you get how Recompose methods work, it simplifies the development and organization of React components.
There are a lot more of methods that can be used to generate more Higher-Order Components in an easier way.
Also, here you have the code used in this post and a live demo of the result.
So, now that you know a bit more about Recompose… What is your first impression? Do you think is a good way to go when creating components?
My opinion is… that I like it!! I really like the patterns encouraged by Recompose oriented to the creation of small and simple pieces (components and HOC’s) that can be used to create more complex ones in an easy-to-read way and that are functional-programming oriented.
Well, that’s my opinion. What is yours?
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
Try it for free.