¿Y eso del Virtual DOM de React qué es?

Una introducción al Virtual DOM de React y la forma en que optimiza el pintado de las aplicaciones

Seguro que si has trabajado con React o has escuchado hablar algo de esta librería te suena el término “Virtual DOM”, ya que es uno de sus principales conceptos y la razón que le permite tener un rendimiento tan alto a la hora de actualizar el DOM. Por eso, he creído muy interesante preparar un artículo explicando qué es y la forma en que trabaja. ¡Vamos allá!

Real DOM

Pero antes de nada, si hay un Virtual DOM tendrá que haber algo real, ¿no? En efecto, el DOM (cuyas siglas son “Document Object Model) es la representación de la interfaz gráfica de nuestra aplicación. Por tanto, cada vez que el estado de la aplicación cambia, lo “esperable” es que también lo haga dicha interfaz para adaptarse a las modificaciones introducidas. Sin embargo, actualizar el DOM es una tarea costosa en cuanto a rendimiento se refiere, por lo que cuantos más cambios de estado sea necesario reflejar en él, más lento irá nuestra web.

¿Y por qué es tan lento realizar esos cambios?

EL DOM posee una estructura en forma de árbol:

Esto provoca que cada vez que modificamos un elemento dentro de él, todos sus hijos tengan que ser pintados de nuevo (hayan o no cambiado). Y justo este proceso es el que provoca los problemas de rendimiento, ya que de por sí renderear elementos en una interfaz gráfica es una tarea costosa. Por tanto, cuantos más elementos queden por debajo de nuestro elemento modificado en la estructura del DOM más elementos tendrán que ser vueltos a pintar en la interfaz gráfica. Y es aquí donde entra el concepto del Virtual DOM con el objetivo de conseguir optimizar esta tarea.

Virtual DOM

El Virtual DOM es una representación en memoria del DOM real que actúa de intermediario entre el estado de la aplicación y el DOM de la interfaz gráfica que está viendo el usuario.