Use of Recompose in Universal React Apollo Example

It is a long time since we published something. Hence, in this post we would like to describe last changes pushed to our Universal React Apollo Example.

You can see a magic word `universal` in the title of this article. Acutally, we have never announced that our example is really universal. We had some problems with rendering production mode and it was the reason. In fact, this app was written to be universal from the very beginning, so if you are interested in server side rendering, it is a good example for you.

The list of lastly introduced changes:

In this article, we will focus on Recompose and the next article we will try to sacrifice for Snapshot testing. In the future, we will try also to upgrade Webpack to version 2 and share with you what we found.

What is Recompose?

Recompose is often called a React utility belt or lodash for React. It publishes API that facilitates creation of functional components thanks to the use of Higher Order Components. The list of functions in API looks really promising and we do hope that it will grow regularly.

Why we use compose?

Below you can see the version of Apollo and Redux Containers without Recompose:

You can notice that we had to create additional variables, like LangWithState, LangWithDataAndState, only to pass them later. Two additional variables are not disaster, but what if we would like to add 3 more Higher Order Components? Then, you can imagine that we would have to create 3 additional variables, only to pass them to other HOCs. Below is an example with Recompose with a lot of HOCs:

Despite of using a lot of Higher Order Components, we keep the code clean. We could achieve it thanks to compose function. Actually, compose function is exposed by a lot libraries, for instance:react-apolloor react-redux. We used Recompose’s version of it, because we use also its other functions like withHandlers or branch.

Why we use withHandlers?

withHandlers is especially useful when you need to provide event handlers to your component, as it caches the provided function (handler) and allows you to keep your component functional. Before, we were get used to create similar component like:

The problem with such approach is that every time our component is re-rendered, the new memory cell will be allocated for onClickHandler function. Using withHandlers we can avoid it, as our component will use cached version of the handler.

Why we use branch?

If you are familiar with Apollo, you know that every component that fetches data from GraphQL API, will receive an appropriate loading prop to indicate that data are not ready to display yet. In the past, in every single component we used to add the following structure:

It would be awesome to have a higher order function to automatically apply loading state in our components. Then, they would be focused only on the thing that they actually do: presenting available data. We could easily create such a HOC thanks to branch function from Recompose:

branch function as a first argument takes a test function. If the test function is true, then renders the component passed as a second argument. If it is false, then renders the component passed as a third argument. In our case, the third argument is not passed, so the next Higher Order Component will be rendered (in our case graphql container). Example:

Thanks to to branch function, we can get rid of adding the loading condition in every single component. We can just use already created withLoadingComponent Higher Order Function for this purpose. We encourage you to check examples in the repo.

If you have any other interesting ideas how we could use Recompose, do not hesitate to share them with us.

If you like this article, recommend it to others and star our repo on GitHub.