in React JS by
Q:
What is the virtual DOM? How does react use the virtual DOM to render the UI?

1 Answer

0 votes
by

As stated by the react team, virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library such as ReactDOM.

Why was virtual DOM introduced? DOM manipulation is an integral part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript.

The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks update the entire DOM even when a small part of the DOM changes.

For example, consider a list that is being rendered inside the DOM. If one of the items in the list changes, the entire list gets rendered again instead of just rendering the item that was changed/updated. This is called inefficient updating.

To address the problem of inefficient updating, the react team introduced the concept of virtual DOM.

How does it work?

For every DOM object, there is a corresponding virtual DOM object(copy), which has the same properties.

The main difference between the real DOM object and the virtual DOM object is that any changes in the virtual DOM object will not reflect on the screen directly. Consider a virtual DOM object as a blueprint of the real DOM object.

Whenever a JSX element gets rendered, every virtual DOM object gets updated.

**Note- One may think updating every virtual DOM object might be inefficient, but that’s not the case. Updating the virtual DOM is much faster than updating the real DOM since we are just updating the blueprint of the real DOM.

React uses two virtual DOMs to render the user interface. One of them is used to store the current state of the objects and the other to store the previous state of the objects.

Whenever the virtual DOM gets updated, react compares the two virtual DOMs and gets to know about which virtual DOM objects were updated.

After knowing which objects were updated, react renders only those objects inside the real DOM instead of rendering the complete real DOM.

This way, with the use of virtual DOM, react solves the problem of inefficient updating.

Click here to read more about React JS
Click here to read more about Insurance

Related questions

0 votes
asked Dec 14, 2019 in React JS by AdilsonLima
0 votes
asked Mar 30, 2020 in JAVA by amita rallin
0 votes
asked May 20, 2020 by GeorgeBell
0 votes
+1 vote
asked May 29, 2020 in React JS by anonymous
0 votes
asked Dec 14, 2019 in React JS by AdilsonLima
0 votes
0 votes
asked Dec 14, 2019 in React JS by AdilsonLima
0 votes
asked Mar 1, 2020 in React JS by RShastri
0 votes
0 votes
asked Mar 3, 2020 in React JS by miceperry
0 votes
0 votes
...