Explain what is virtual DOM?

It is a lightweight in-memory representation of the actual DOM to track changes in the UI and efficiently update the real DOM when necessary.

1
When there are changes in a React component, instead of directly manipulating the real DOM, React creates a virtual representation of the changes in memory and then calculates the most efficient way to update the real DOM. This approach minimizes direct manipulation of the DOM, leading to improved performance.
2
React's Virtual DOM is a key to its performance optimization. It's an abstraction of the actual HTML DOM.
3
React's Virtual DOM acts as an intermediary layer between your React components and the actual browser DOM.

Difficulty: 5/10

Topics: reconciliation, diffing algorithm, performance

0-2 years experience

1
If you need to update a list of items in a React component, how does the virtual DOM help you avoid unnecessary DOM operations?
2
What happens under the hood when you call setState in a functional component with respect to the virtual DOM?

2-5 years experience

1
We noticed a performance regression after adding a new component that renders a large table. Walk me through how you would use the virtual DOM diffing process to identify why many rows are being re‑rendered.
2
During a bug where a child component doesn't receive updated props, how could a misunderstanding of the virtual DOM reconciliation cause that issue?

5-8 years experience

1
Design a custom shouldComponentUpdate / React.memo strategy for a complex dashboard that renders thousands of widgets. How does the virtual DOM influence your decisions, and what trade‑offs do you consider?
2
If you were to integrate a third‑party library that directly manipulates the real DOM inside a React app, how would you mitigate conflicts with the virtual DOM's diffing and ensure consistency?

8+ years experience

1
Our organization is planning to migrate a legacy codebase that uses manual DOM updates to React. What architectural considerations around the virtual DOM should guide the migration strategy, especially regarding bundle size, server‑side rendering, and long‑term maintainability?
2
When evaluating a new UI framework that claims a 'virtual DOM‑free' approach, how would you compare its performance and developer ergonomics to React's virtual DOM at a system‑wide level?