The Virtual DOM

If you render the exact same thing twice in a row, the second render will not change. Mostly, JavaScript is slow because of the unnecessary update the DOM has to do.

For Example

If you have a shopping list of 10 items, and you ticked the first item off, most JavaScript frameworks would rebuild the entire list (more than 10 times than necessary instead of just updating the first item).

How Virtual DOM solves this?

In React, every DOM object has a corresponding virtual DOM object (lightweight copy). The virtual DOM has the same properties as DOM object but it just doesn’t have the power to directly change what’s on the screen, making the update faster.

Diffing

Once the virtual DOM gets updated, React compares the virtual DOM with a previous virtual DOM (a snapshot before the update took place) and React figures out which virtual DOM objects have changed. This is called “diffing”.