So I’m finally using Reagent in anger to see how some of our existing UIs could look in this fantastic new world. I’m a huge fan of using clojure atoms for state management, and of course hiccup is awesome to easily manipulate HTML snippets.
Things however get muddier when you want to integrate a few key React components, esp. when those components need to do ref forwarding and so on.
In my particular case, I’m working with React-Bootstrap and in particular all the pop-up/overlay/tooltip components there. They’re all based on popper.js so they rely on having access to the underlying node so that the overlay/tooltip can be positioned correctly on-screen.
In this case, I have to remember to constantly wrap my nice hiccup components with
(reagent/as-element), which I don’t understand very well (does it return a new instance of an element overtime it’s called?), or sometimes I need to use a render function which also requires converting
#js props into reagent-friendly props and then back again with
While it’s not such a big deal, it does get a little annoying as you have to always remember the correct arcana for getting this right, otherwise you don’t get a nice error message at all.
The second thing is that a) Reagent does async rendering and b) if you use reagent atoms, the React lifecycle functions don’t get called, so any wrapper components that could rely on
componentDidUpdate in order to call back out to the DOM and reposition the popup, can’t. Which is a little-bit solvable but the workaround seems really brittle.
I’m not sure if this is something that Reagent could solve, or perhaps I just need to wrap all this mess into a set of “bridge” components that I could then use worry-free from Reagent land. Or perhaps other Reagent-like libraries exists that have less of an impedance mismatch with the React world? I’ve seen mentions of those but would be nice to know how they handle this kind of problem.