Como funciona o reconciliador do React por dentro

O React utiliza dois conceitos centrais para manter a interface sincronizada com o estado da aplicação: a Virtual DOM e o processo de reconciliation com o algoritmo de diffing. A seguir, exploramos ambos de forma técnica, mas com uma abordagem didática.

Virtual DOM: o que é e por que existe

A Virtual DOM é uma representação leve do DOM real, existente apenas em memória. Quando o React renderiza um componente, ele gera uma árvore de objetos JavaScript — a Virtual DOM — sem interagir diretamente com o DOM do navegador. Essa abstração permite evitar interações diretas com APIs do DOM, que são lentas, comparar duas versões da árvore — a current e a next — visando calcular apenas as diferenças necessárias, e reduzir o número de operações de layout e pintura, já que o DOM é alterado somente onde houve mudança real.

Reconciliation e diffing: como o React calcula as mudanças

Quando um estado ou prop muda, o React:

Executa novamente a função render() do componente afetado, gerando uma nova árvore Virtual DOM (a “work‑in‑progress”).
Compara essa nova árvore com a anterior, usando o algoritmo de diffing, que percorre ambas simultaneamente.
Aplica heurísticas: tipos diferentes causam desmontagem e montagem completa; tags ou componentes iguais atualizam apenas atributos e conteúdo alterado; em listas, a key identifica elementos estáveis, otimizando operações.
Paralelamente, cada nó da Virtual DOM está mapeado a um Fiber node, formando duas árvores – a atual e a de trabalho. Durante a “render phase”, o React pode pausar e priorizar tarefas, graças à arquitetura Fiber.
No commit phase, após calcular as mudanças, o React atualiza o DOM de forma síncrona: insere, atualiza ou remove nós conforme necessário.

Diferença entre diffing e reconciliador

O diffing refere-se à comparação entre duas versões da Virtual DOM para identificar mudanças; o reconciliador engloba todo o processo: construção da árvore de trabalho, aplicação do algoritmo de diffing, gerenciamento de fibers e o commit das atualizações.

Exemplificando na prática

Considere um componente simples:

Copiar
function Contador() {
  const [cont, setCont] = useState(0);
  return (
    <div>
      <h1>{cont}</h1>
      <button onClick={() => setCont(c => c + 1)}>+1</button>
    </div>
  );
}

Ao clicar no botão:

1. setCont aciona atualização de estado e marca o componente como sujo.
2. React executa render(), produz nova árvore Virtual DOM.
3. O diff detecta que apenas o nó <h1> mudou (o valor de cont).
4. O reconciliador marca esse nó para atualização.
5. No commit, o React atualiza somente o texto dentro do <h1>, sem tocar em <button> ou <div>, economizando recursos.

O papel das Fibers

Com o React 16+, o reconciliador foi reescrito usando Fiber, uma estrutura que permite:

Trabalhos fragmentáveis: pausáveis e retomáveis.
Priorização de tarefas: animações, por exemplo, têm prioridade maior.
Reutilização de nós não alterados, pois cada fiber aponta para sua versão anterior.
Workflow em duas fases: a “render” (cria árvore WIP, pode ser síncrono ou assíncrono) e o “commit” (síncrono e rápido, aplica mudanças ao DOM).

Por que tudo isso importa

Essa arquitetura traz performance escalável: mesmo em interfaces complexas, só o necessário é re-renderizado, evitando travamentos. Ela oferece desenvolvimento previsível: a lógica declarativa (render() descreve o que deve aparecer), separada de como isso é aplicado. Além disso, suporta recursos avançados como concurrent mode, atualizações em background e priorização de estado.

Em resumo

A Virtual DOM representa a interface em memória, permitindo cálculos eficientes sem tocar o DOM real. O diffing é um algoritmo heurístico O(n) que compara essas árvores e identifica mudanças. O reconciliador, com o suporte das Fibers, orquestra a renderização em duas fases (render + commit), com gerenciamento de prioridades e pausas. O resultado é uma UI responsiva, eficiente e previsível — a base do React moderno.