Elmish with React: Initialize component once rendered

[whitetigle]

(Note: I am using React.)

Yesterday I stumbled on a rather simple problem that arose when I wanted to initialize a newly added component to my view.

For starters here is the presentation of the component: http://materializecss.com/collapsible.html
It's a simple accordion whose elements can be expanded on a click.

When I create my view, I then need to call a script to register my freshly created components:

   $('.collapsible').collapsible();     

Now apart from using a setTimeout (which works but seems dirty), how and when do I actually know that my components has been rendered and is ready to be used?

Looking on the official doc, it seems that React has some ComponentDidMount callback triggered whne the component is ready.

Do you think this is something we could use from Elmish? (for info: react bindings).

Thanks for your help!

[et1975]

I think what you want is Ref, we use that with D3, which also needs a rendered element to do its majik. ComponentDidMount is called before it's rendered.

[et1975]

Oh, and two things to keep in mind:

• React VDOM doesn't know about actual DOM modifications you've done after you render it. Meaning next time React reconciles VDOM with DOM things could get weird.
• Ref event is going to be called a lot unless you wrap your component with lazyView, for us the performance difference was between "unusable" and "awesome".

[whitetigle]

Thanks for your help @et1975. I'll try this!

[whitetigle]

Ok it works with Ref!