React Elements

Virtual DOM

At the end of the day, React elements are nothing more than a never-changing (immutable) JavaScript object containing properties to tell React how and what exactly needs to be displayed. React uses this description of properties to construct a virtual blueprint of the component hierarchy. It resembles the way HTML trees are represented as a JavaScript object. This hierarchy tree is referred to as the VirtualDOM.

This tree is used by React to refresh only the parts of the tree that have actually changed, such as when a user interacts with an app and changes data or fires an event. To do this, React compares the previous tree to the current tree.

React does not refresh the entire application at once or write it to the DOM in its entirety once any state changes; it is a lot more performant than other frameworks or libraries. Other libraries or frameworks can often lead to an unnecessary amount of DOM mutations at the cost of performance. Using a special reconciliation algorithm that compares the previous state with the current state, React processes what has changed and can reduce the number of writes to a minimum.