React Js 1 - Virtual DOM

Hi All, Welcome back, I am Chakrapani Upadhyaya a full stack engineer. I this article we will learn about Virtual DOM in React.

In simple words, React's virtual DOM is a lightweight copy of the actual DOM (Document Object Model) that represents your web page's structure. It acts as a buffer between your React components and the real browser DOM.

Here's a simple example to illustrate how it works:

Suppose you have a React component that renders a list of items:

import React from 'react';

class ItemList extends React.Component {
  render() {
    return (
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    );
  }
}

When you initially load this component, React will create a virtual DOM representation of the `<ul>` and its children. If you make any changes to the component's state or props, React will create a new virtual DOM to reflect those changes.

Before updating the real DOM, React will compare the new virtual DOM with the previous one(step is called as reconciliation). It efficiently identifies the minimal set of changes required to update the real DOM to match the new virtual DOM.

This process is much faster than directly manipulating the real DOM for every change, which leads to better performance and smoother user experiences.

In summary, React's virtual DOM is a technique that optimizes rendering and updates by using a lightweight copy of the actual DOM to efficiently manage changes.