Virtual DOM

1. What is Virtual DOM?

• Virtual DOM, a concept like a copy of the actual DOM

• Instead of accessing and manipulating actual DOM objects, React accesses virtual DOM objects and compares before and after changes to apply only the changed parts

• In other words, it's a technology that uses virtual DOM trees made of JavaScript objects to minimize actual DOM manipulation and optimize performance

2. Form of Virtual DOM

• Like actual DOM, virtual DOM is also based on HTML document objects

• Just abstracted, ordinary JavaScript objects

• Therefore, can freely manipulate as needed without touching the actual DOM

• Created newly whenever component state or props change in React

• React compares previous virtual DOM with new virtual DOM and reflects only changed parts to actual DOM

3. Virtual DOM Operation Process

• During comparison process, React uses Diffing algorithm to detect changed parts

• In Diffing algorithm, to detect this, uses methods like setState instead of direct assignment to change state

• Compares virtual DOM with changed new virtual DOM and reflects only parts that need changes to actual DOM for update → Reconciliation

• When there are multiple state changes, updates them all at once (Batch Update)

• Through this, optimizes performance and minimizes unnecessary re-rendering

4. Is Virtual DOM Fast?

• Virtual DOM is generally faster than directly manipulating actual DOM, but not in all cases

• Sometimes directly manipulating DOM can be faster