VIRTUAL DOM: QUÉ ES Y CÓMO FUNCIONA

Virtual DOM es un patrón que usan bibliotecas como React, Vue, Svelte (en modo runtime) y Preact para actualizar la interfaz de forma mucho más rápida y eficiente.

¿Qué es exactamente Virtual DOM?

El DOM real (Document Object Model) es la estructura de árbol que el navegador crea a partir del HTML. Cada vez que se cambia algo (se añade un elemento, se modifica un texto o se cambia una clase, etc.), el navegador tiene que:
  • Recalcular estilos (reflow).
  • Repintar la pantalla (repaint).
  • Actualizar el árbol, DOM.
El Virtual DOM es una copia ligera en memoria que representa exactamente la misma estructura que el DOM real, pero sin estar conectado al navegador. Ejemplo simplificado de cómo se ve un Virtual DOM:

{
  type: 'div',
  props: { className: 'contenedor' },
  children: [
    { type: 'h1', props: {}, children: ['Hola mundo'] },
    { type: 'p', props: {}, children: ['Este es un párrafo'] }
  ]
}

¿Cómo funciona?

  • Render inicial: Se crea el Virtual DOM y se transforma en el DOM real (primera vez).
  • Cambio de estado: Cuando se cambian datos (un contador, un formulario, etc.), React NO toca el DOM real inmediatamente.
  • Nuevo Virtual DOM: Se genera una nueva versión completa del árbol virtual con los cambios.
  • Diffing (comparación): React compara el Virtual DOM anterior con el nuevo (algoritmo de reconciliación) y calcula solo las diferencias mínimas.
  • Patch: Solo aplica esos cambios mínimos al DOM real.
Se actualizan 1 o 2 elementos en vez de rehacer toda la página.

Ventajas

  • Mucho más rápido que manipular el DOM directamente (document.getElementById, innerHTML, jQuery, etc.).
  • El desarrollador no tiene que pensar en "qué cambiar" → solo declaras cómo quieres que se vea el UI y React se encarga del resto.
  • Funciona muy bien con componentes reutilizables.

Desventajas

  • No es "mágico": sigue siendo más lento que manipular el DOM directamente si sabes exactamente qué cambiar (por eso Svelte y SolidJS optan por no usar Virtual DOM).
  • Consume un poco más de memoria (el árbol virtual).
  • El diffing no es perfecto en casos muy extremos (miles de elementos animados).