https://www.youtube.com/watch?v=3LRZRSIh_KE
# virtual dom and real dom

Real dom tree like structure hota hai. jab hum real dom main koi ek element ko change karte hai to pura tree re-render hota hai
but in virtual dom jab hum kisi ek element ( like button ke click per h1 ko change karte hai to sirf wo h1 tag change hoga pure tree
nahi.

real dom html dom ko kehte hai real dom wo hota hai jo browser per dikhai de. jaise ek design

virtual dom memory main hota hai. wo browser per dikhai nahi deta jab tak usse paint na kar diya jaye.

React uses Virtual DOM, When any changes are made to React elements, the Virtual DOM is updated. The Virtual DOM finds the differences between it and the DOM and re-renders only the elements in the DOM that changed. This makes the Virtual DOM faster and more efficient than updating the entire DOM.

# React.createElement() Creates Virtual DOM Elements

// The following JSX...
const h1 = <h1 className="header">Hello world</h1>;

// ...will be compiled to the following:
const h1 = React.createElement(
'h1',
{
className: 'header',
},
'Hello world'
);
The React.createElement() function is used by React to actually create virtual DOM elements from JSX. When the JSX is compiled, it is replaced by calls to React.createElement().

You usually won’t write this function yourself, but it’s useful to know about.