What is Virtual DOM?

The Virtual DOM (VDOM) is a lightweight, in-memory representation of Real DOM used by libraries like React to optimize UI rendering. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

Practical Code Example

// Virtual DOM: Lightweight JavaScript representation of real DOM
const virtualElement = {
  type: 'button',
  props: {
    className: 'btn-primary',
    onClick: () => console.log('clicked'),
    children: 'Click Me'
  }
};
// React diffs this JS object in-memory before committing changes to real DOM.