How much React virtual DOM delays content rendering

What does it improve?

In my benchmarking I make a browser render a table made up of 2000 divs each containing 20 divs with its coordinates as the text content and title.

During each rendering of the table I take two measurements— the time spent on changing the DOM and total time spent on displaying the table. To make sure that my measurements are accurate, I visualize them in the Console section of Performance tab of Chrome DevTools (yellow and orange bars in the screenshot below). The total time nicely overlaps with the striped bar representing a task in the browser task queue. And the code changing the DOM overlaps with the brownish Animation frame fired bar in the beginning of the task.

Note that the changes to the DOM take much less time than displaying them. However you modify the DOM, the time needed to paint the changed will be ~15 times greater. Therefore, optimizing DOM manipulations makes little sense until the rendering is optimized (for example by adding content-visibility CSS property).

Each measurement is chained as a promise and repeated 10 times so that more reliable average values can be compared. The complete code for this post can be downloaded from https://github.com/marianc000/appendChildVsReactDOM. I detailed the code in my previous post innerHTML vs appendChild. Here I explain the new code that I added for assessing the React framework performance.

The test table is generated by JSX that merely maps a two-dimensional array of cell coordinate strings to React elements that are afterwards rendered by ReactDOM.render():

function Row({ row }) {
    return <div className="row">
        {row.map(text => <div key={text} title={text} >{text}</div>)}
    </div>
}
function Table({ rows }) {
    return rows.map(row => <Row key={row.toString()} row={row} />);
}
function reactTable(data) {…