Virtual DOM

DOM is a tree. It is made of objects. It renders directly to the browser. Events get emitted by some. You can call methods on them. They are javascript objects. No they are in memory. They are controlled by JavaScript. React works by rendering by having a virtual DOM. Changes to this DOM does nor result in instant change of the rendered view. Changing the real DOM does this. But changing the virtual DOM doesn’t trigger instant change. Instead, the virtual DOM and the real DOM are compared. And then only the changes that need to be done to the real DOM are done. Why do we need this virtual DOM? This DOM is updated fully a lot. For every change in state entire DOM is re rendered. Or is it just the part underneath the changed state. Not sure. But when some states change everything below it is computed. But not everything is rendered again. New elements are added. State is changed. A lot of things. Events also change the virtual DOM only. Then that triggers the real DOM change. What about stateful components? The previous state is kept but props may change. State changes when setstate is called or when state is mapped by props. The changes always happen top down.