What exactly the purpose of React Virtual DOM

Question

While going through react I came up with the following doubts:

DOM operations are very expensive

But eventually react also does the DOM manipulation. We cannot generate a view with Virtual DOM.
Collapsing the entire DOM and building it affects the user experience.

I never did that, Mostly what I do is changing the required child node(Instead of collapsing entire parent) or appending HTML code generated by JS.

Examples:

As a user scrolls down we append posts to parent element, even react also have to do it in same way. No one collapse entire dom for that.
When a user comment on a post we append a div(comment element(HTML code)) to that particular post comment list. I think no one collapse entire post(dom) for that

3) "diffing" algorithm to check changes:

Why we need a algorithm to check changes. Example: If I have a 100 posts, whenever a user clicks on edit button of a particular post, i do it as follows

   $(".postEdit").click(function(){
        var post_id = $(this).data("postid");
        //do some Ajax and DOM manipulation to that particular post.
   })

I am telling the DOM to change particular element, then how does diffing help?

Am I thinking in a wrong way? If so, please then correct me.

Have a read through of **[this answer](http://stackoverflow.com/a/37012883/2902660)** to: _[Why is React's concept of Virtual DOM said to be more performant than dirty model checking?](http://stackoverflow.com/q/21109361/2902660)_ — Pineda, Dec 31 '16 at 19:40

score 3 · Answer 1 · answered Dec 31 '16 at 16:21

You are correct that people don't tend to collapse and recreate the entire DOM when they need to update a single element. Instead, the best practice is to just rebuild the element you need. But what if a user takes an action that actually impacts lots of elements? Like it they star a post or something, you want to reflect that on the post and maybe in a stars count elsewhere on the page. As applications get complex enough changing all of the parts of a page that need to be changed becomes really complicated and error prone. Another developer might not be aware that there is a "stars count" elsewhere on the page and would forget to update it.

What if you could just rebuild the entire DOM? If you wrote your render methods and stored your state such that at any point, you could with certainty render the entire page from scratch? That removes a lot of these pain points, but obviously you lose all the performance gains you got from manually altering parts of the DOM by hand.

React and the virtual dom give you the best of both worlds. You get that optimized DOM updating, but as a developer you don't have to keep a mental model of the entire application and remember what you need to change for any given user or network input. The virtual dom will also potentially implement these changes more effectively than you by literally only rebuilding the elements you need. At some point you might be rebuilding more than you should "just in case".

Hope this sort of makes sense!

The best answer I read – Kaizaki Arata May 10 '23 at 20:59 — Kaizaki Arata, May 10 '23 at 20:59

score 1 · Answer 2 · edited May 23 '17 at 10:30

This discussion can be very helpful to understand Virtual DOM and it's implementation in different UI frameworks.

Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

There are couple of other links as well which explains it in better way.

What exactly the purpose of React Virtual DOM

2 Answers2

Linked