Virtual DOM & Reconciliação
Representação em memória do DOM real. React compara versões e aplica apenas as mudanças necessárias.
Definição
Virtual DOM é uma representação em JavaScript da árvore do DOM real. Quando o estado muda, React cria uma nova versão do Virtual DOM e compara (diffing) com a anterior. Apenas as diferenças são aplicadas no DOM real, otimizando performance.
Problema → Solução
Problema
Manipular o DOM diretamente é lento (cada operação dispara reflow/repaint). Atualizar grandes UIs sem otimização trava o browser.Solução
React mantém Virtual DOM em memória, calcula diff entre versões, e aplica apenas as mudanças mínimas no DOM real (batched).Dica de entrevista
Tip
Virtual DOM não é mágico — é uma camada de otimização. Em alguns casos (animações, canvas), manipulação direta com refs é mais rápida.Código
// Conceitualmente:
// Render 1: VDOM = <div><span>Felipe</span></div>
// Render 2: VDOM = <div><span>Annye</span></div>
// React calcula diff: apenas o texto do span mudou
// DOM real recebe: span.textContent = "Annye"
// (não recria div nem span)Perguntas de entrevista
Q.O que é Fiber e como difere do Virtual DOM antigo?▾
A.Fiber é a arquitetura do React 16+ que reescreveu o reconciliador. Permite renderização interrompível (Concurrent Mode), priorização de updates, e suspense. O Virtual DOM continua, mas o algoritmo de processamento mudou completamente.
Q.Por que React precisa de keys nas listas?▾
A.Para o algoritmo de diffing identificar qual item é qual entre renders. Sem keys, React reconcilia por posição (index), o que falha quando itens são reordenados.
Q.Virtual DOM é mais rápido que DOM direto?▾
A.Não necessariamente. Para mudanças simples e localizadas, DOM direto é mais rápido. O Virtual DOM ganha em UIs complexas com muitas atualizações em cascata, onde calcular o mínimo necessário é crucial.
Termos relacionados
20/122← →