A Brief Explanation of React’s Virtual DOM

I’ll briefly explain the difference between the DOM (Document Object Model) and the Virtual DOM used by React JS.

The DOM is usually updated as a whole when a change is made even to a single node which can be time consuming (even though you might not even notice it).

With the Virtual DOM, think of it as a snapshot has been taken of the entire DOM and the nodes that have not changed are frozen in time and only the nodes that have changed are updated. This creates a faster experience and is what helps make React JS so “Reactive”.