What Is The Virtual DOM In React ?

If you are planning to build a modern website, use the React framework. Because it provides a Virtual DOM structure in our web app.

DOM stands for “Document Object Model”. It turns the HTML code into a tree of elements that JavaScript can see, read, and change the functions of the web app.

We have all used a regular website without React. Any time something changes on that site, like color, text, or size, the browser updates the actual DOM, which can be slow and affect overall performance.

React solves this problem using the Virtual DOM, which is a light-weight and faster version of the actual DOM.

How React Virtual DOM Work In React

1) State and Prop Changes:

• A webpage has buttons, text, and other components.
• Suppose you click a button and change some data using the state or props.
• React does not directly change the real webpage (DOM).

2) First Create a New Virtual DOM

• React quickly creates a new “Virtual DOM”, a copy of the webpage in memory.
• It is like a clone version of your updated webpage.

3) Find the Difference

• React compares the old Virtual DOM with the new DOM.
• It checks what exactly has changed, similar to finding differences between two pictures.
• React finds only the changed part.

4) Update The Content

• Now React goes to the real webpage (real DOM) and updates only the changing part.
• It doesn’t touch the other functions, so everything is working fast and smoothly.
• Imagine editing only one line in a big essay instead of rewriting the whole article.

Note: React uses a “diffing algorithm” to identify differences between elements

Example of Virtual DOM

In this code, it changes the name using a button without reloading the whole page.

import React, { useState } from 'react';

function NameChanger() {
  const [userName, setUserName] = useState("Riya");

  const changeName = () => {
    setUserName("Kavya");
  };

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h2>Hello, {userName}!</h2>
      <button onClick={changeName}>Change Name</button>
    </div>
  );
}

export default NameChanger;

The userName is “Riya”. React create virtual DOM that include <h2>Hello, Riya!</h2>. When user clicked a button React creates a new Virtual DOM and userName becomes a “Kavya”

Direct DOM Manipulation in React with Refs

Sometimes we need to manually control HTML elements like an input field, scrolling, or working with third-party libraries. For this problem, React gives us a Refs tool:

You can directly access and control HTML elements from your React component using Refs.

Example of Refs

import React, { useRef } from 'react';

function FocusBox() {
  const textInput = useRef(null);

  const focusInput = () => {
    textInput.current.focus();
  };

  return (
    <div>
      <input ref={textInput} type="text" placeholder="Enter something..." />
      <button onClick={focusInput}>Focus Now</button>
    </div>
  );
}

• First, useRef(null) creates a textInput reference.
• We attach that ref to the input field: <input ref={textInput} />
• When the user clicks the button, the focusInput function runs:
  • It calls to the textInput.current.focus() function – This function directly tells the browser to focus on that input box.

Building a Small Profile Card App using Virtual DOM

We are building a small profile card app for learning purposes. when the user clicks the card, it updates only the user name, not the entire card.

Code Structure:

import React, { useState } from 'react';

function ProfileCard() {
  const [userName, setUserName] = useState("Guest");

  const handleChangeName = () => {
    setUserName("Parthik Dahima"); // Only name will be updated in DOM
  };

  return (
    <div style={{ border: "1px solid #ccc", padding: "20px", width: "300px" }}>
      <h2>User Profile</h2>
      <p><strong>Name:</strong> {userName}</p>
      <p><strong>Status:</strong> Active User</p>
      <button onClick={handleChangeName}>Change Name</button>
    </div>
  );
}

export default ProfileCard;