Building a render prop with Recompose

Yesterday I tweeted this:

Today I just want to show you how to do this:

First we’re going to take the example from Michael Jackson:

Before I go any further I just want to put a disclaimer out there: this is just for fun. If I’m going to use the render prop approach then I want to go all in to the patterns there. Since I love using HOCs and especially recompose, I just wanted to do a little experiment merging the two worlds together.

What we’re going to do is use a HOC called withHandlers. This HOC takes an object map of factory functions which accept props and returns a handler. With the use of a factory function here, we can access props without needing to change our handlers signature. The handlers are then passed to the Base Component as immutable props so we can preserve the identity across renders and we can avoid the issues with shouldComponentUpdate() optimizations that rely on prop equality.

Let’s use witHandlers to write the same component above:

As you can see, we really didn’t gain anything by moving this to withHandlers unless you are truly concerned with functions across renders.