Virtual DOM is one of the most recognized concepts in frontend, but often understood too superficially. In this article, I explain what Virtual DOM really is, how it works in React, what the diffing and updating process is all about, and in which cases its use actually improves performance - and when it can actually worsen it. I debunk popular myths, show technical facts and suggest how to write components that work effectively with this mechanism. This is a solid dose of knowledge for anyone who wants to understand what happens "under the hood" of modern UI libraries.
Virtual DOM (VDOM) is a term that refers to a simplified, virtual representation of the DOM tree created and stored in memory. In the context of React and similar JavaScript libraries, the Virtual DOM is a data structure (usually JavaScript objects ) that maps the current state of the user interface.
Unlike the real DOM, which is part of the browser API and directly affects the rendered view, the Virtual DOM is used solely for computation. It allows a library such as React to monitor changes in the application’s state in a more controlled and optimized way, without having to immediately interact with the real DOM.
Direct manipulation of the actual DOM is costly in terms of performance. Each change can lead to recalculation of styles, layout and rendering, which in larger or dynamic applications significantly affects the smoothness of performance. Virtual DOM was developed as an answer to these limitations. The main goals of its introduction are:
– minimization of the number of operations on the actual DOM
– reduction of costs associated with rendering and updating the view
– provision of a more declarative and predictable model for updating the user interface.
Instead of directly modifying the DOM every time the application state changes, the library first updates the Virtual DOM structure. It then compares the previous and new versions of this tree (a process known as diffing) and determines exactly which elements of the actual DOM need to be changed. This approach significantly reduces redundant operations and improves performance.
Virtual DOM in React acts as an intermediary between the application logic and the actual DOM of the browser. Its main task is to enable efficient and selective updates of the user interface without the need for manual intervention in the page structure.
Step 1: Creating a component tree
When a React component renders for the first time, the library creates a Virtual DOM in memory — a tree of JavaScript objects representing the UI structure. Each React component corresponds to one or more Virtual DOM nodes.
Step 2: updating state or props
When a component receives new data (e.g., via setState, useState, or a change in props), React calls the render function again and generates a new version of the Virtual DOM.
Step 3: comparing the old and new Virtual DOM (diffing)
React compares the previous version of the tree with the new one. This process is called reconciliation. React uses heuristics (e.g., based on the keyattribute) to determine which elements have been changed, added, or removed.
4. Step: generating a “patch”
Based on the differences between the old and new Virtual DOM, React creates a set of minimal changes (called a patch) that should be applied to the real DOM.
5. Step: updating the real DOM
The patch goes to the real DOM and modifies only those elements that have actually changed. This allows React to avoid completely redrawing the interface.
Below is a simplified example of how the Virtual DOM mechanism works in React:
Before the state change:
<ul>
<li>A</li>
<li>B</li>
</ul>
After the state change:
<ul>
<li>B</li>
<li>A</li>
</ul>
React will detect that the elements are the same, but have changed order – if there is no key, it will abandon optimization and re-render everything. If keys are used(key="a", key="b"), React will correctly remap the elements and keep the changes to a minimum.
Although Virtual DOM is mainly associated with React, it is not a unique or proprietary solution. Other frontend libraries also use similar mechanisms – sometimes in a more optimized, sometimes in a simplified form. There are also solutions that deliberately abandon Virtual DOM.
Preact is a lightweight alternative to React, compatible with its API but with a much smaller package size. Preact implements a simplified version of Virtual DOM, optimized for performance and size. With less abstraction, Preact can run faster in simple scenarios, although it may require additional optimization in more complex cases.
Inferno is another React-compatible library focused on rendering performance. Its Virtual DOM implementation is even more specialized and includes many hand-optimized code paths to minimize diffing and update times.
Vue uses a Virtual DOM mechanism, but combines it with an extensive reactivity system based on data observation. In practice, this means that Vue can detect changes in data in advance and limit the scope of rendering even before comparing the VDOM tree. In many cases, this results in fewer operations and more predictable updates.
Because the dependencies between data and view are explicitly tracked, Vue can be more precise in its updates than React, which by default always renders components after a state or props change. VDOM in Vue therefore acts not only as an optimization mechanism, but also as a supporting element for its declarative reactivity model.
Svelte deliberately abandons the Virtual DOM. Instead, it uses a compiler that converts component code into pure JavaScript that operates directly on the actual DOM. This approach completely eliminates the need to create and compare virtual trees, which reduces the computational overhead and simplifies the rendering path.
The advantage of this solution is simplicity and performance for less dynamic interfaces. The disadvantage may be less flexibility in more complex cases, where manual control over updates is more difficult. For many projects, especially smaller ones, Svelte offers noticeably better performance without the need for advanced optimizations.
Virtual DOM is one of the most recognizable concepts associated with React, but many simplifications and misconceptions have arisen around it. Below are the most common myths, along with their corrections.
This is a simplification. Although Virtual DOM limits the number of operations on the real DOM, the process of comparing and generating a “patch” also has a computational cost. In very simple or specialized applications that manually manage the DOM (e.g., using pure JavaScript or Web Components), operations can be just as fast or even faster.
Fact: Virtual DOM improves performance mainly in applications with complex structures and many dynamic updates. It does not guarantee “speed” in every situation.
Virtual DOM is often equated with React because React popularized this model, but it is not its only user.
Fact: There are other libraries and frameworks that use their own implementations of Virtual DOM, such as Preact, Inferno, and Vue.js. Frameworks such as Svelte and SolidJS, on the other hand, do not use VDOM at all, generating direct code that operates on the real DOM.
This is partly true, but also an oversimplification. React tries to update only what has changed, but it is not always able to do so perfectly.
Fact: Without appropriate key in lists or when changing deeply nested component structures, React may redraw more than necessary. Optimization requires conscious component design and control over the VDOM tree structure.
This is a very common but incorrect belief. While Virtual DOM minimizes the cost of updating the UI, it does not eliminate performance issues resulting from, for example, excessive rendering, component complexity, lack of memoization, or inefficient state management.
Fact: Virtual DOM is a tool that aids optimization, but it does not replace good engineering practices.
Virtual DOM is an effective optimization tool in many cases, but it is not a universal solution to all performance problems. In some contexts, it does improve rendering efficiency, while in others it can introduce unnecessary overhead or hinder optimization.
Virtual DOM is particularly effective in applications with complex interfaces, where changes in state affect multiple components simultaneously. Thanks to its comparison (diffing) mechanism, React can reduce the number of operations on the actual DOM, which brings measurable benefits in cases such as:
-rerendering nested components in arrays, grids, trees, etc.
-interfaces that frequently respond to data from APIs or users but only change partially.
-applications with high state update frequencies, such as dashboard systems, administrative panels, and real-time applications.
In such situations, the Virtual DOM acts as an optimization buffer and allows developers to focus on logic without having to manually manage view updates.
In simple or highly optimized low-level applications, the Virtual DOM can be an unnecessary overhead. Examples of scenarios where its use does not bring benefits or even worsens performance include: Micro-optimizations – e.g., changing a single text value or a single style property can be done faster manually, without the entire diffing and re-rendering mechanism. Or dynamic lists without unique keys – the lack of a unique identifier for each list item prevents the Virtual DOM from correctly identifying which items have been moved and which have been modified. This can result in the list being completely redrawn, even if only the order has actually changed.
There are also situations where working directly on the real DOM is simply better:
Although Virtual DOM itself helps reduce the number of operations on the actual DOM, it does not relieve the developer of the responsibility of designing components consciously. React does not perform deep equality comparisons and does not “guess” which elements need to be updated — it works based on signals provided by the application developer.
Below are the most important rules and techniques that allow you to use Virtual DOM consciously and efficiently.
key in dynamic listsThe key attribute allows React to identify which list items have changed and which can be reused. Lack of key or the use of non-unique keys (e.g. array indexes) can result in unnecessary operations to delete and create DOM elements. Inefficient example:
{items.map((item, index) => <li key={index}>{item.name}</li>)}
The following is a recommended solution:
{items.map(item => <li key={item.id}>{item.name}</li>)}
React.memoBy default, React renders a component again every time its parent changes, even if its props haven’t changed. React.memo is a higher-level feature that prevents unnecessary renders if the input props remain the same.
const MyComponent = React.memo(function MyComponent({ value }) {
return <div>{value}</div>;
});
When passing callbacks to child components, it is a good idea to use useCallbackso that new references are not generated each time. Otherwise, the child component may render even though there is no real change in the data. Suboptimal:
<MyButton onClick={() => doSomething(id)} />
A better approach:
const handleClick = useCallback(() => doSomething(id), [id]);
<MyButton onClick={handleClick} />
The more components depend on the same state, the more renders may be triggered. Instead of passing data through multiple levels of components, consider:
React.createContext) only where necessary.React DevTools allows you to visually analyze which components are rendering and why. You can use tools such as Why Did You Render, a library that logs unnecessary renders, or React Profiler, a built-in tool for measuring render times and tracking component updates.
Virtual DOM is one of the key tools used by modern frontend libraries such as React, Preact, and Vue. It enables the creation of efficient, scalable user interfaces by separating application logic from costly operations on the actual DOM.
However, as shown in this article, Virtual DOM is not an automatic guarantee of performance. It requires conscious use:
key in lists,Some frameworks, such as Svelte, completely abandon the Virtual DOM, proving that it is not the only possible solution. Nevertheless, its presence in the React ecosystem remains a standard that is worth familiarizing yourself with.
The real DOM is a browser structure that maps the page and its elements. The Virtual DOM is a memory representation of this tree, used by frameworks (e.g., React) to optimize view updates. The Virtual DOM allows for faster comparison of changes and minimizes operations on the real DOM.
React creates a Virtual DOM every time a component is rendered. When the application state changes, React compares the new version of the Virtual DOM with the previous one (the diffing process) and then makes only the necessary changes to the actual DOM. This improves performance and reduces unnecessary repaints.
No. Angular does not use the classic Virtual DOM mechanism. Instead, it relies on its own change detection system, which checks for differences in data and updates the DOM directly. Angular’s mechanism differs in approach from what React offers.
Yes, Vue.js has its own implementation of Virtual DOM, but it works in conjunction with a reactivity system. This allows Vue to detect which components need to be updated in advance, further increasing rendering efficiency.
Shadow DOM is a browser standard that allows styles and HTML structure to be encapsulated within components (mainly in Web Components). Virtual DOM is a programming mechanism created in memory by frameworks to optimize UI updates. These are two different technologies with different purposes.
