Reflow Minimization in React: How it works?

[Marc Fawzi]

Given that React works hard to make sure the DOM remains as snappy as possible, I'm assuming that it batches DOM reads and writes separately so as not to trigger reflow (as shown in the article below)

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

My question is if I'm doing a DOM read operation like getBoundingClientRect followed by a DOM write operation that would change the size of the bounding box by say 10% and I'm doing that in say the mousemove event handler (as in dragging some handle to increase size of some relatively-sized DOM structure) then what happens in this case?

I'm assuming the DOM reading operation mentioned above must happen against the browser's DOM since React components don't have that method (getBoundingClientReact) on them. The value from that read operation is then written to app state. The write operation I mentioned is done by simply modifying the style on the props based on the said app state and passing the modified style value to the component as props and calling render (which is done automatically when using something like Reagent)

 

I could call getBoundingClientRect only once then keep adding 10% to size as long as the mouse is down and has moved another X pixels in the expanding direction. So this way I don't cause reflows with my interleaved read/write operations. 

But what if for some reason (forgetting or not knowing) I do not take reflow into consideration and I cause consecutive reads from actual DOM and writes to virtual DOM in rapid fire sequence? So I'm reading the DOM and React is writing to it and each time React writes to it it means my next read will cause a reflow, and if that happens in an event handler like mousemove then it could lead to a ton of reflows.

Does any of this make any sense or, if it doesn't, what am I missing about the way React works?

Thank you.

Marc

p.s. I posted a similar question to the React mailing list many weeks ago and have not received any replies. I thought some of you here may have a clear idea of how React works.

 

[Marc Fawzi]

Btw the example is entirely contrived and may not make complete sense. I'm attempting to convey a DOM read/write scenario that may (or may not) cause repeated reflows. Id like to educate myself on how React works as far as minimizing potential reflows... if it does at all.

Sent from my iPhone

[Mike Thompson]

Both Reagent and OM do async rendering. Any DOM changes you might make are scheduled via requestAnimationFrame. So DOM writes are done in batches.


--
Mike

[Marc Fawzi]

Ah! Cool. That is comforting to hear! Thank u for explaining. Not sure why i assumed otherwise.

Sent from my iPhone

> --
> Note that posts from new members are moderated - please be patient with your first post.
> ---
> You received this message because you are subscribed to the Google Groups "ClojureScript" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to clojurescrip...@googlegroups.com.
> To post to this group, send email to clojur...@googlegroups.com.
> Visit this group at http://groups.google.com/group/clojurescript.