Is the virtual DOM faster than direct DOM manipulation?

What is the virtual DOM, and how does React actually update the real DOM?

DOM = tree of nodes Virtual DOM = lightweight JS representation Changes go to virtual DOM first.

The real DOM is a tree of nodes representing the page... The virtual DOM is a lightweight JavaScript copy of it. When state changes, React builds a new virtual DOM tree, then runs a diffing algorithm, and this is called reconciliation. Comparing the new tree against the previous one to find exactly what changed. It then batches those minimal changes and applies them to the real DOM in one pass, instead of re-rendering everything. Keys are what let that diff match elements efficiently across renders, that's why missing or index-based keys cause bugs and wasted re-renders.

On whether it's faster than direct DOM manipulation ?

It's actually not inherently faster. A hand-tuned direct DOM update can beat it. The value of the virtual DOM isn't raw speed; it's that it makes updates fast enough while letting us write declarative code I describe what the UI should be, and React computes the minimal set of mutations. That trade a little overhead for maintainability and predictable updates at scale... Is the actual win..