React uses jsx which means these little html tags that we see in our components are not actually the html tags but are fake ones. React creates a virtual DOM using these fake tags while what is really happening is, we are telling React to manipulate something and in turn react is asking the actual DOM to do so.

Virtual DOM is basically JS object that is a virtual representation of real DOM, a copy.

As we can see above, react makes 2 copies of DOM and when we require any change, it affects the virtual DOM, compares it to the intact one, and updates the required change to the real DOM.

This gives react to update and render only the elements instead of HAVING TO REFRESS THE WHOLE DOM or the whole page in layman terms.