React Virtual DOM

In React, the Virtual DOM (Document Object Model) is a concept and technique used to efficiently update the user interface (UI) by minimizing direct manipulations to the actual browser DOM.

When we use React to build an application, we define the UI using React components, which are essentially JavaScript functions or classes that return a description of what the UI should look like. React uses this description to create a virtual representation of the UI, known as the Virtual DOM.

The Virtual DOM in React is implemented as a JavaScript object. It is basically a lightweight copy of the actual DOM represented as a tree of JavaScript objects.

Each element in the Virtual DOM tree corresponds to a UI component or HTML element in the actual DOM. The objects in the Virtual DOM tree contain information about the component’s type, properties (props), and children.

For example, consider the React component below.

function App() {
  return (
    <div>
      <h1>Namaste khiladiyo</h1>
      <p>This is Coding Akhada</p>
    </div>
  );
}

For the React component above, the Virtual DOM representation would be an object hierarchy resembling the following structure.

{
  type: 'div',
  props: {},
  children: [
    {
      type: 'h1',
      props: {},
      children: ['Namaste khiladiyo']
    },
    {
      type: 'p',
      props: {},
      children: ['This is Coding Akhada']
    }
  ]
}

Why is Virtual DOM more efficient?

The Virtual DOM in React provides several key advantages that make it more efficient than the Real DOM:

Minimizes DOM Updates by using Tree-Diffing Algorithm.

When changes occur in a React component’s state or props, React performs a process called tree-diffing or reconciliation between the previous Virtual DOM and the new Virtual DOM. During diffing, React analyzes the differences between the two representations to identify the specific updates required to bring the real DOM in line with the new Virtual DOM.

By comparing the previous and new Virtual DOM, React determines the minimal set of changes needed to synchronize the real DOM. Only the necessary changes are applied to the real DOM, avoiding unnecessary updates to unrelated elements. This selective updating significantly reduces the number of manipulations performed on the real DOM, leading to improved performance.

Virtual DOM is Memory-Resident.

The Virtual DOM resides in memory, which is faster to access and manipulate compared to the actual browser DOM. Accessing and modifying the real DOM involves traversing the DOM tree, interacting with the browser’s rendering engine, and potentially triggering costly layout recalculations.

By working with the Virtual DOM, React avoids these overheads and achieves faster updates.

Component Re-usability.

If a component remains the same type, React will update its props and state, rather than recreating it from scratch. This optimization reduces the overhead of creating and destroying component instances, resulting in improved efficiency.

Batched Updates.

Multiple state changes or prop updates that occur within the same event handler or life-cycle method are grouped and applied as a single update to the Virtual DOM. React then performs a single pass to calculate the necessary changes and applies them efficiently to the real DOM. This batching minimizes the number of operations performed on the DOM, resulting in improved efficiency.

Fiber Architecture

The Fiber architecture is an internal implementation of React, introduced in React 16, that provides a more flexible and efficient foundation for the reconciliation and rendering process. You can read more about Fiber Architecture here.

Fiber Reconciliation is a specific implementation of the reconciliation algorithm in React that leverages the benefits of fibers for improved performance.

How Virtual DOM works in React? (step-by-step) — should be a different article

  1. Initial Render. When we first render a React component, React creates a Virtual DOM representation of the component and its child components.
  2. Diffing. Whenever there is a change in the component’s state or props, React generates a new Virtual DOM representation of the component and its child components. React then performs a process called “diffing” or “reconciliation” by comparing the new Virtual DOM with the previous one.
  3. Tree Comparison. React traverses both the previous Virtual DOM tree and the new Virtual DOM tree in a depth-first manner. It compares the components and elements in both trees, looking for differences.
  4. Element Updation, Insertion, or Deletion. During the tree comparison, React identifies three types of changes:
    • Element Update. If an element exists in both the previous and new Virtual DOM trees but has different properties or children, React updates the element in the real DOM accordingly.
    • Element Insertion. If an element appears in the new Virtual DOM but not in the previous one, React creates the element in the real DOM and adds it at the appropriate position.
    • Element Deletion. If an element exists in the previous Virtual DOM but not in the new one, React removes the element from the real DOM.
  5. Reconciliation Optimization. React’s diffing algorithm aims to optimize the reconciliation process. It employs several strategies, such as using unique “keys” to efficiently update lists and attempting to reuse existing component instances when possible, to minimize the number of changes needed.
  6. Update Real DOM. Once the necessary changes are identified during the diffing process, React applies these changes to the real DOM. It selectively updates the affected elements in the real DOM, ensuring that only the necessary modifications are made.
  7. Re-render Child Components. If any child components of the updated component have also undergone changes, React recursively repeats the process for those child components. This step ensures that the entire component tree is reconciled and updated as needed.

It’s important to note that React performs these steps efficiently and in a batched manner, optimizing performance by minimizing the number of updates and leveraging memory-resident operations.