What is the virtual DOM and how does it work?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM.

How it works:

1. Render - React creates a virtual DOM tree (plain JS objects)
2. Diff - When state changes, React creates a new virtual tree and compares it with the old one
3. Patch - Only the differences are applied to the real DOM

// Virtual DOM node (simplified)
{
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: {}, children: ['Hello'] },
    { type: 'p', props: {}, children: ['World'] }
  ]
}

Why it's faster:

• DOM operations are expensive
• Batching multiple updates into one DOM write
• Minimal DOM mutations through smart diffing

Key point for interviews:

Virtual DOM isn't faster than direct DOM manipulation done optimally - it's faster than naive DOM manipulation and provides a better developer experience.