React: is it true that react completes all updates within one cycle of reflow

user_7506100 0
Viewed 553

Through all presentations I'm hearing that React may update DOM within one cycle of reflow, but I cannot understand how it may complete using DOM API. What do I mean. For example, I need to update 3 attributes for p tag. I would complete it via DOM API:

let element = document.getElementById('el');
element.width = '10px';
element.height = '20px';
element.style.margin = '1px';

This code invokes reflow 3 times. And if I understand correct, React cannot gather these updates within one reflow as well. Am I right?

reactjs dom
1 Answers

Firstly, the following code

let element = document.getElementById('el');
element.width = '10px';
element.height = '20px';
element.style.margin = '1px';

invokes only one reflow. The explanation is quite lengthy, luckily 2mn of this Jake Archibald's talk perfectly explain this.

Basically, the four lines of code only trigger actions in memory, ie variables are changed, and it's only at the end of the task (after the fourth line) that css is actually re-calculated, and the element re-rendered, and the window re-painted. So, only one reflow.

React, well, does the same thing, so only one reflow as well.

user_81868980
Related