Guias

Qualquer pessoa que esteja aprendendo React ou Vue esbarra muito cedo na expressão «DOM virtual», e ela costuma soar como mágica. Não é: é uma ideia simples e prática que explica como os frameworks de front-end modernos mantêm uma página em sincronia com seus dados sem que você tenha de mexer na página manualmente.

O problema que resolve

Para entender o problema que ele resolve, lembre-se do que é o DOM real: a árvore viva de elementos que o navegador renderiza. Atualizá-lo diretamente — criar nós, definir atributos, reordenar filhos — é ao mesmo tempo lento quando feito muitas vezes e propenso a erros quando feito à mão. Manter correta uma interface complexa à medida que os dados mudam, com edições manuais do DOM por toda parte, é justamente onde os bugs proliferam.

O que é o virtual DOM

O DOM virtual é a resposta do framework. É uma cópia leve da interface mantida em memória como simples objetos JavaScript — uma árvore que descreve como a página deveria estar neste exato momento. É barato de criar e descartar, porque nada nele toca o navegador até que o framework decida.

• Uma cópia leve da interface em memória, como simples objetos
• A cada mudança de estado, uma nova árvore é construída e comparada (reconciliação)
• Apenas as mudanças mínimas no DOM real são aplicadas
• Permite o modelo declarativo «a interface = uma função do estado»
• React e Vue o usam; Svelte e Solid o dispensam deliberadamente

Como funciona o diffing

Eis o ciclo. Quando o seu estado muda, o framework constrói uma árvore de DOM virtual totalmente nova que representa a interface desejada. Em seguida, compara essa nova árvore com a anterior — um passo chamado diffing ou reconciliação — e calcula o menor conjunto de mudanças no DOM real necessárias para ir da imagem antiga para a nova.

Essa última parte é o ponto-chave. Em vez de você descobrir «quais nós eu adiciono, removo ou atualizo?», o framework calcula o patch mínimo e aplica apenas isso ao DOM real. As operações caras do navegador são agrupadas e mantidas no mínimo, de modo que a página se atualiza de forma eficiente mesmo quando muito estado mudou de uma só vez.

O verdadeiro benefício: um modelo declarativo

Mas a velocidade é apenas metade do benefício, e possivelmente não o principal. A verdadeira vantagem é o modelo de programação que o DOM virtual torna viável: você escreve a sua interface como uma função do estado — descreve como a página deve estar para os dados atuais — e deixa o framework reconciliar a diferença. Esse estilo declarativo substitui a frágil abordagem imperativa de «mutar o DOM passo a passo».

React e Vue

Tanto o React quanto o Vue se baseiam nessa ideia, cada um com suas próprias implementações e otimizações. Quando você escreve um componente que retorna marcação a partir dos seus dados, na verdade está descrevendo uma árvore de DOM virtual; o framework cuida do diffing e das atualizações reais do DOM nos bastidores. É por isso que você raramente chama métodos do DOM você mesmo em qualquer um dos dois.

Os limites honestos

Vale a pena ser honesto sobre os limites. Um DOM virtual não é automaticamente a abordagem mais rápida possível — o próprio diffing tem um custo. Frameworks mais recentes como Svelte e Solid dispensam o DOM virtual e compilam os componentes em atualizações de granularidade fina que tocam o DOM diretamente. Portanto, o DOM virtual é uma boa estratégia, não a única — mas para o React e o Vue é central no seu funcionamento.

A conclusão

Em resumo, o DOM virtual é um modelo em memória da sua interface que o framework compara com a versão anterior para atualizar o DOM real com o menor trabalho possível. Seu valor duradouro não está apenas no desempenho, mas no modelo declarativo que ele permite: você descreve o resultado e o framework descobre os passos.