Render Props composition for ReasonML is here

Gabriel Rubens Abreu
Astrocoders
Published in
3 min readOct 12, 2018

After so long, you can finally compose your Render Props in ReasonML without getting a giant nested callback hell.

y we do this to ourselves

“What’s that weird syntax?”

That’s added via OCaml Syntax Extensions, in this case the extension we are using is the `let%Epitath`. We are leveraging Jared’s let-anything library that allows us to extend the `let` binding behavior. If you want to know more about it, check out the Reason Town episode about it.

“Ok, but how’s this even related to React?”

This syntax of let-anything comes with a concept that many JS developers are already used to though many don’t know the name of the concept that preconceived it: await/async and Continuation-Passing-Style (CPS).

Once you need to stack a lot of reusable components, React Render props recalls a lot callback hells. And that’s when it clicked for us that we could also leverage CPS-like sugar for React as well. I recommend you to read our JS counterpart library (Epitath) that inspired this one here.

How to get it running in any project

If you are eager to get it running, look this working demo. If you want to setup in your own project now:

First run

$ npm install --save-dev jaredly/let-anything

Install bs-epitath

$ npm install bs-epitath

Then add the ppx flag to your and list bs-epitath to deps bsconfig.json

"bs-dependencies": [
...
"bs-epitath"
],"ppx-flags": ["let-anything/lib/bs/native/let_anything.native"],

Thanks to bsb-native and Ben’s work on it we are able to get the binary compiled in no time.

“But should I use this?”

We have been using it here at Astrocoders’s ReasonML projects for a couple of weeks for now and so far it’s feeling like heaven. We love living in the edge. And it also has already a way better performance than the JS counterpart as it doesn’t require using immutable generators. **AND THE TYPE INFERENCE JUST WORKS!**.

But we also feel that the idea stills need to mature a bit more and we’ll be leaving this as a PoC of what is possible to do for with ReasonML and React together as the community is discussing about including CPS sugar support built-in ReasonML itself.

And leave this as a PoC of what is possible to do for with ReasonML and React together.

Also we want to give a really long thank you for Jared for doing so much awesome stuff for the ReasonML community. Thank you!

Gabriel Rubens Abreu, Head of Research & Development of at Astrocoders.com

--

--