I have recently started learning the React framework and read that React creates a virtual DOM that keeps track of changes. When React updates the original DOM, it only updates the objects that have changed on the virtual DOM. Does this mean that when I program with just plain javascript and I append a new object, for example a new list item, the entire DOM is updated even though I had only added one new item?

I have recently started learning the React framework and read that React creates a virtual DOM that keeps track of changes. When React updates the original DOM, it only updates the objects that have changed on the virtual DOM. Does this mean that when I program with just plain javascript and I append a new object, for example a new list item, the entire DOM is updated even though I had only added one new item?

• javascript
• reactjs

2 Answers 2

In short, it depends. There are a few types of changes you can make to the DOM. From this article on rendering performance by Google:

If you change a “layout” property, so that’s one that changes an element’s geometry, like its width, height, or its position with left or top, the browser will have to check all the other elements and “reflow” the page.

These changes will require the entire DOM to repaint. However:

If you changed a “paint only” property, like a background image, text color, or shadows, in other words one that does not affect the layout of the page, then the browser skips layout, but it will still do paint.

So, adjusting say, the color property of some text would just require that element to repaint without needing to repaint other parts of the DOM. There are also changes you can make that go straight to positing and do not require any kind of repaint.

The browser does its best to do as little work as necessary.

When you update the DOM, the reflow and repaint happen.
Every time the DOM changes, the browser needs to recalculate the CSS, do a layout and repaint the web page.

React doesn’t really do anything new. It’s just a strategic move.

What it does is It stores a replica of real DOM in memory. When you modify the DOM, it first applies these changes to the in-memory DOM. Then, using it’s diffing algorithm, figures out what has really changed. Finally, it batches the changes and call applies them on real-dom in one go.
Thus, minimizing the re-flow and re-paint.