Virtual Dom|Browser DOM What are these in React Js?

What is DOM?

The Document Object Model (DOM) plays a crucial role in interactive web development. But what is DOM in React JS, and why is it so essential? When you're working with React, the DOM in React is your interactive connection between the JavaScript code and the rendered website content. React utilizes the Virtual DOM to improve the efficiency of this connection.

Fundamentally, the DOM is a platform- and language-neutral interface that allows scripts and programs to dynamically access and update the content, structure, and style of a document. It represents the structure of HTML documents, like a tree, where each branch ends in a node, and each node contains objects. This structure is essential when you're working with JavaScript and frameworks like React, where the DOM React connection is key to functionality.

The concept of the Virtual DOM in React JS comes into play as a lightweight copy of the actual DOM. This 'virtual' version provides several advantages, as React Virtual DOM enhances the efficiency of rendering changes to the user interface, making React a standout choice for developers focusing on user experience.

What is DOM in React?

Document Object Model (DOM) is Javascript Client-Side API to represent and manipulate Document (HTML/XML).

How does Javascript generate a Document Object model out of it? Every tag is a node. so HTML, head, body, title, a, pare nodes, Except link and script tags are not considered as a node. HTML will be the parent node and everything else will be children of the HTML.

So, the tree is generated as,

This is not how the Data Structure is stored in Javascript. Html is not a root node. JavaScript has its prototype chain so Html is one node that is inherited from Object. Prototype so that it gets the methods to calculate styles, properties, Manipulating the individual nodes.

Please go through the below picture you will get a better idea.

Now, If you can see the highlighted part is from where our HTML node starts forming a tree. And we consider it as a DOM object. If you can see CSS style declaration is a sibling of node/Html and that is why it is not present in the subtree of HTML as a parent.

As we know HTML/node is inherited from Object. Prototype and Dom will get many methods to retrieve and manipulate the document object model. This is the reason we say JavaScript is an untyped language that is used to make HTML dynamic.

What makes DOM manipulation slow?

Understanding what makes DOM manipulation slow is vital in identifying why solutions like the Virtual DOM React uses are beneficial. Traditional DOM manipulation is known to be resource-intensive. The problem stems from the fact that every small modification in the DOM can cause the browser to recalculate CSS styles, layout, and render the page. These recalculations can result in a significant performance hit, especially when complex interactions or large data manipulations are taking place.

However, this is where the concept of the Virtual DOM in React steps in. React's Virtual DOM allows for a more efficient update process. Instead of making direct changes to the browser DOM, changes are initially made to the Virtual DOM in React. React then uses efficient diffing algorithms to determine the minimum number of changes necessary to update the actual DOM. By batching multiple changes together, React avoids the costly overhead of multiple direct manipulations of the Browser DOM.

This approach, adopted by the Virtual DOM React JS uses, helps optimize performance and leads to smoother, faster updates in the user interface. So when it comes to understanding what is DOM in React JS, it's equally important to appreciate the ingenious solution that the React Virtual DOM provides to slow DOM manipulation.