How React Virtual DOM works under the Hood

The React Virtual DOM is one of the most interesting concepts in React. Although you can build applications without fully understanding it, exploring its internal working reveals the powerful engineering behind React.

Before diving into the Virtual DOM, I had already built several React projects. But learning this concept completely changed the way I think about React.

It not only deepened my understanding but also boosted my confidence as a developer.

Now, let’s dive into the React Virtual DOM

What is Virtual DOM : React Virtual DOM is a lightweight in-memory representation of the real DOM which is why it is called "virtual". In modern complex websites, frequent updates can decrease performance.

Every time the UI changes, the browser reloads the entire DOM and renders the updated UI. Browsers follow the same process even for small UI changes. Frequent UI updates reduce performance because the full DOM is reloaded again, even for minor changes.

What problem does React Virtual DOM solve?

The React Virtual DOM primarily solves the problem of inefficient DOM manipulation. It prevents unnecessary re-rendering of the actual DOM.

How it works :

React create a copy of real DOM on first render (initial render).

when we use useState or props to update the UI, React creates a new Virtual DOM that represents the updated UI state.

Diffing Algorithm : The diffing algorithm compares the updated Virtual DOM with the previous Virtual DOM to find differences in the UI. This process is called reconciliation.

Batching & Patching : After diffing, React knows exactly what needs to be changed in the real DOM. Instead of re-rendering the entire DOM, React updates only the necessary parts.

This is why the browser does not reload the entire page in React; only specific parts of the UI are updated efficiently.

React also batches multiple state updates together to improve performance.

Declarative UI Development :

The Problem it Solves: In manual (imperative) DOM manipulation, developers must track every specific element and write code to change its individual attributes when data changes, which is highly error-prone.

The Solution: With the VDOM, you simply describe what the UI should look like at any given state, and React handles the complex task of synchronizing the real DOM to match that state.

Difference Between Real and Virtual DOM :

Comparison Table

Feature	Real DOM	Virtual DOM
Structure	Actual HTML elements	Lightweight JS Object representation
Updates	Slow (often full re-render)	Fast (patches changes)
Memory	Low memory usage	High memory usage (stores copies)
Updates	Direct browser interaction	In-memory updates before browser sync
Re-rendering	Renders everything when updated	Renders only changed components

Now that we have a solid understanding of the Virtual DOM, we’ve also explored the performance issues with the real DOM and how React solves them.

Let’s now dive deeper into how React actually renders and displays components initially.

The initial render : The initial render is the process of displaying the component tree on the screen for the first time. It consists of three main stages: Triggering, Rendering, and Commit.

Triggering : This process starts when you use createRoot with the targeting element <div id = "root"></div> and then call the render method at the top level component of your app.

Rendering : React builds a tree structure of all components, starting from the root component. It processes components from top to bottom in a recursive manner, continuing until all child components have been rendered.

All your components returns jsx(javaScript XML). React made the virtual using that jsx.

Commit : After figuring out the structure react apply change in real DOM.

DOM Manipulation: For the initial render, React uses the appendChild() DOM API to place all created nodes into the root element on the screen.

How state or props change triggers re-render :

State update and props acts as signals that indicates something is changed in UI and that require a re-render to keep UI sync with data.

state changes : When state change using a setter function (eg : setData) that triggers a render to that component .

props changes : When a parent component render it sends new props the child components. By default its children automatically re-render even if the props are technically same.

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count 1)}>Click</button>
      <Child name="john" />
    </>
  );
}

function Child({ name }) {
  console.log("Child rendered");
  return <h1>{name}</h1>;
}

when you click the button count changes and parent component re-render also it's child re-render.

Context Changes: When a value in a Context.Provider changes, all components that use useContext for that context will re-render.

Summary : We started by understanding the Virtual DOM and the problems it solves. Then, we explored how it works behind the scenes. Finally, we compared the real DOM and the Virtual DOM to understand their differences.