HTML DOM is Expensive
In other words
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
However, those DOM operations are extremely expensive.
Virtual DOM is a Solution
So React's team came up with the idea to abstract the HTML DOM and create its own Virtual DOM in order to compute the minimum number of operations we need to apply on the HTML DOM to replicate current state of our application.
The Virtual DOM saves time from unnecessary DOM modifications.
At each point of time, React has the application state represented as a
Virtual DOM. Whenever application state changes, these are the steps that React performs in order to optimise performance
Generate a new Virtual DOM that represents the new state of our application
Compare the old Virtual DOM (which represents the current HTML DOM) vs the new Virtual DOM
Based on 2. find the minimum number of operations to transform the old Virtual DOM (which represents the current HTML DOM) into the new Virtual DOM