Vinit Parekh
VINIT PAREKH's Blog

VINIT PAREKH's Blog

What is Virtual DOM in ReactJS?

Vinit Parekh's photo
Vinit Parekh
·May 3, 2022·

2 min read

What is Virtual DOM in ReactJS?

Photo by Lautaro Andreani on Unsplash

DOM is the shortener form of Document Object Model. Which is responsible for interaction of web page but unfortunately it is slower then most JavaScript operators so here React library's role comes up.

in ReactJS every DOM ( Document Object Model ) is corresponding to Virtual DOM. If we want to explain Virtual DOM in simple words then we can say that it is just a lightweight version of normal DOM.

Manipulating the DOM is slow. Manipulating Virtual DOM is much faster because nothing gets actively displaying over the screen. Just assume that manipulating Virtual DOM is like a editing a blueprint , as opposed to moving a households in an actual house.

How does it helps?

When you render a JSX elements, everything is being updated.

It sounds incredibly incapable, but the cost is minor because the virtual DOM can update so quickly.

Once the virtual DOM has updated, then React compares the current Virtual DOM with a virtual DOM snapshot that was taken right before the update means pre updated Virtual DOM.

React only updates the Virtual DOM which has been changed as compare to pre updated Virtual DOM, React is smart enough to leave the same Virtual DOM as it is.

The big difference is React updates only necessary parts of Virtual DOM that's why it becomes faster then normal DOM.

 
Share this