Search code examples
reactjsdomrepaintvirtual-domreflow

vdom is finally updating the dom (after diffing) any dom change should actually trigger repaint & reflow of entire tree, then what is the use of vdom?

This question was asked manier times whenever we change a dom , like

Method 1 :

document.getElementByID('root')="hello"; even for changing one dom element , the browser rerenders the whole dom and state of the other elements like input text boxes will be lost, and recomputes styling and layouts (.ie reflows and repaints ) It is fine till now.

Method 2:

What react does is it keeps a virtual dom which is a copy of real dom, whenever a state changes, it rerenders entire new vdom in memory and does diffing and identifies which nodes to be updated in real-dom and react updates only that part in real-dom ,thus saving time not re-rendering entire dom.

My Question is at the end of the day either we update the realdom using method 1 or by using a vdom , finally dom is getting updated which in turn should make the browser compute the whole layout and styles again, why people say it helps to update only some part of the UI?

** Please kindly refrain from answering the same diffing concept, vdom concept, updating the required parts concept,or repaint and reflow process i.e dom tree css tree and rendering engine etc...**

# My question is how vdom can stop browser repainting and reflowing when ultimately dom is getting updated which in turn makes reflow and repaint whole tree?

picture about what I am trying to ask:

enter image description here

Ignore my grammar, and correct me where ever I am wrong at concepts of dom, vdom, repaint and reflow.

Solution

  • VDom will generally not save you any repaints/reflows compared to well-written DOM manipulation.

    The main benefit of it is that it that it allows for a declarative component API. You describe what the component is, and React figures out how to render it efficiently without re-generating extraneous DOM elements. The html changes will generally be smaller using this approach.

    Performance benefits here are somewhat of a red-herring. Yes, Reacts vdom has optimizations such as batching renders, but these are optimizations for the vdom, not for the browser. Browser DOM operations are already very fast.