02 Virtual DOM - biswajitsundara/react GitHub Wiki

The virtual DOM (VDOM) is a programming concept where virtual representation of a UI is kept in memory and synced with the real DOM by a library such as ReactDOM.

DOM

  • DOM Stands for Document Object Model
  • Structural representation of all nodes in the HTML document.
  • DOM represents the UI of your application.
  • DOM manipulation is required to dynamically change the content of web page.
  • DOM can be manipulated by Java script
  • The dom manipulation is faster as it has a tree structure
  • However once the DOM is manipulated the entire dom tree needs to be re-rendered and that's really slow.
  • Frequent DOM manipulation is slower.

Virtual DOM

  • Virtual representation of the real DOM in memory.
  • React updates the state changes in virtual DOM first and then it syncs with real DOM
  • React never updates the real DOM, whenever there's a state change, it changes in the virtual DOM
  • Then the virtual DOM is compared against the real DOM to check which node is changed and then it renders that only
  • The process of checking the difference between the new VDOM tree and the old VDOM tree is called "diffing"
  • The diffing is accomplished by The diffing algorithm.
  • React updates only the changed node in DOM so its much faster.
  • Virtual DOM is synced with the real DOM using ReactDOM and the process is called Reconciliation
  • React maintains keys to keep track of the changes and avoids re-rendering of elements unnecessarily.

Let's see the difference

index.js

function setTimer() {
  const element1 = `
  <div>
     <h1> Java Script </h1> 
     <input type="text" />
     <p>${new Date().toLocaleTimeString()}</p>
  </div>
  `;

  document.getElementById("container1").innerHTML = element1;

  const element2 = React.createElement(
    "div",
    null,
    React.createElement("h1", null, "React"),
    React.createElement("input", { type: "text" }, null),
    React.createElement("p", null, new Date().toLocaleTimeString())
  );

  ReactDOM.render(element2, document.getElementById("container2"));
}

setInterval(setTimer, 1000);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <title>Document</title>
  </head>
  <body>
    <div id="container1"></div>
    <div id="container2"></div>
    <script src="./index.js"></script>
  </body>
</html>

Observation

  • Install Live Server vscode extension and open the index.html using the live server
  • Inspect the elements, and check in the developer tools
  • The container1 div will blink continuously, we are updating only the date field however its re-rendering all elements.
  • On the other side container2 will not blink, if we expand, we will see only the time field is getting updated.
  • Since we are using reactDOM, we have used the CDNs in the index.html file
  • The React.createElement requires 3 parameters = element, property, children
⚠️ **GitHub.com Fallback** ⚠️