O que Todo Dev Deve Saber sobre Virtual DOM em Profundidade: Diffing, Keys e Reordenação de Listas Já leu

Virtual DOM em Profundidade: Diffing, Keys e Reordenação de Listas

O Virtual DOM é uma abstração fundamental em bibliotecas modernas como React e Vue. Em vez de manipular diretamente o DOM do navegador — operação cara em termos de performance — essas bibliotecas mantêm uma representação em memória da interface. Quando o estado muda, o Virtual DOM é recalculado, comparado com a versão anterior através de um algoritmo chamado diffing, e apenas as mudanças reais são aplicadas ao DOM real. Esta estratégia reduz drasticamente o número de operações custosas.

Muitos desenvolvedores tratam o Virtual DOM como uma "caixa preta" mágica, confiando cegamente que "tudo será otimizado". Na prática, compreender como ele funciona é essencial para evitar bugs sutis, especialmente ao lidar com listas dinâmicas. Nesta aula, você entenderá exatamente como o diffing funciona, por que as keys são críticas, e como evitar armadilhas comuns na reordenação de elementos.

Como Funciona o Diffing: O Coração do Virtual DOM

O Algoritmo Básico de Comparação

O diffing é o processo de comparar dois Virtual DOMs (o anterior e o novo) para identificar quais nós mudaram. React e Vue usam algoritmos similares, mas com implementações diferentes. A ideia central é: em vez de reconstruir toda a árvore, identificamos mudanças incrementais.

O algoritmo trabalha em duas fases. Primeiro, compara nós no mesmo nível da árvore (reconciliação por nível). Segundo, para nós do mesmo tipo, compara propriedades e conteúdo. Se um nó mudou completamente de tipo, descarta-o e cria um novo. Se apenas as props mudaram, atualiza apenas essas propriedades.

// Simulação simplificada de como o diffing funciona
function diffNodes(oldNode, newNode) {
  // Se um dos nós não existe
  if (!oldNode) return { type: 'CREATE', node: newNode };
  if (!newNode) return { type: 'REMOVE', node: oldNode };

  // Se os nós são de tipos diferentes
  if (oldNode.type !== newNode.type) {
    return { type: 'REPLACE', oldNode, newNode };
  }

  // Se são texto
  if (typeof oldNode === 'string') {
    if (oldNode !== newNode) {
      return { type: 'UPDATE_TEXT', text: newNode };
    }
    return { type: 'NO_CHANGE' };
  }

  // Se são elementos, compara props e filhos
  const propChanges = diffProps(oldNode.props, newNode.props);
  const childChanges = diffChildren(oldNode.children, newNode.children);

  if (propChanges.length === 0 && childChanges.length === 0) {
    return { type: 'NO_CHANGE' };
  }

  return {
    type: 'UPDATE',
    propChanges,
    childChanges
  };
}

function diffProps(oldProps = {}, newProps = {}) {
  const changes = [];

  // Verifica props removidas ou alteradas
  for (const key in oldProps) {
    if (oldProps[key] !== newProps[key]) {
      changes.push({ key, value: newProps[key] });
    }
  }

  // Verifica props novas
  for (const key in newProps) {
    if (!(key in oldProps)) {
      changes.push({ key, value: newProps[key] });
    }
  }

  return changes;
}

function diffChildren(oldChildren = [], newChildren = []) {
  const changes = [];
  const maxLength = Math.max(oldChildren.length, newChildren.length);

  for (let i = 0; i < maxLength; i++) {
    const oldChild = oldChildren[i];
    const newChild = newChildren[i];

    const change = diffNodes(oldChild, newChild);
    if (change.type !== 'NO_CHANGE') {
      changes.push({ index: i, change });
    }
  }

  return changes;
}

Este algoritmo é O(n) na complexidade de tempo, o que é excelente. Sem ele, comparar duas árvores de forma ótima seria O(n³). A compensação é que o algoritmo faz algumas suposições: nós do mesmo tipo no mesmo nível são relacionados, e a ordem importa.

A Heurística do Tipo de Elemento

React utiliza a heurística de "tipo de elemento" para determinar se dois nós são relacionados. Dois elementos são considerados o mesmo nó se tiverem o mesmo tipo (tag) e, em casos de componentes customizados, a mesma classe ou função. Se essa heurística falhar, o elemento é destruído e recriado.

// Exemplo prático: quando o diffing falha sem compreensão

// ❌ PROBLEMA: O tipo muda, então é recriado
function BadExample() {
  const [showMessage, setShowMessage] = React.useState(true);

  return (
    <div>
      <button onClick={() => setShowMessage(!showMessage)}>Toggle</button>
      {showMessage ? (
        <input type="text" placeholder="Tipo: input" />
      ) : (
        <textarea placeholder="Tipo: textarea"></textarea>
      )}
    </div>
  );
}

// ✅ SOLUÇÃO: Manter o mesmo tipo, variar apenas props
function GoodExample() {
  const [isTextarea, setIsTextarea] = React.useState(false);

  return (
    <div>
      <button onClick={() => setIsTextarea(!isTextarea)}>Toggle</button>
      {isTextarea ? (
        <textarea placeholder="Eu sou um textarea" />
      ) : (
        <input type="text" placeholder="Eu sou um input" />
      )}
      {/* Ou melhor ainda: */}
      {/* <textarea 
        disabled={!isTextarea}
        style={{ display: isTextarea ? 'block' : 'none' }}
      /> */}
    </div>
  );
}

O Papel Crítico das Keys na Reconciliação de Listas

Por Que Keys São Necessárias

Quando você tem uma lista de elementos, o diffing padrão compara item por posição: primeiro com primeiro, segundo com segundo, e assim por diante. Isso funciona se a lista nunca muda de ordem. Mas quando elementos são inseridos, removidos ou reordenados, essa abordagem causa problemas graves.

Sem keys, quando você remove o primeiro item de uma lista de 10 itens, React muda o conteúdo dos 10 elementos (porque agora a posição 0 tem o que era posição 1, etc.). Componentes com estado interno são mantidos nas mesmas posições, levando a comportamentos inesperados. Keys resolvem isso fornecendo uma identidade estável para cada elemento.

// ❌ SEM KEYS: Comportamento inesperado
function TodoListBad() {
  const [todos, setTodos] = React.useState([
    { id: 1, text: 'Aprender React' },
    { id: 2, text: 'Dominar Virtual DOM' },
    { id: 3, text: 'Ensinar outros' }
  ]);

  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div>
      {todos.map((todo, index) => (
        // ❌ Usando index como key
        <TodoItem 
          key={index} 
          text={todo.text} 
          onRemove={() => removeTodo(index)} 
        />
      ))}
    </div>
  );
}

// ✅ COM KEYS: Comportamento correto
function TodoListGood() {
  const [todos, setTodos] = React.useState([
    { id: 1, text: 'Aprender React' },
    { id: 2, text: 'Dominar Virtual DOM' },
    { id: 3, text: 'Ensinar outros' }
  ]);

  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const addTodo = (text) => {
    setTodos([
      ...todos,
      { id: Math.max(...todos.map(t => t.id)) + 1, text }
    ]);
  };

  return (
    <div>
      {todos.map((todo) => (
        // ✅ Usando ID único como key
        <TodoItem 
          key={todo.id}
          id={todo.id}
          text={todo.text} 
          onRemove={() => removeTodo(todo.id)} 
        />
      ))}
      <button onClick={() => addTodo('Nova tarefa')}>
        Adicionar
      </button>
    </div>
  );
}

// Componente com estado interno
function TodoItem({ key, id, text, onRemove }) {
  const [isEditing, setIsEditing] = React.useState(false);
  const [value, setValue] = React.useState(text);

  return (
    <div>
      {isEditing ? (
        <input 
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onBlur={() => setIsEditing(false)}
          autoFocus
        />
      ) : (
        <span onDoubleClick={() => setIsEditing(true)}>{value}</span>
      )}
      <button onClick={onRemove}>Remover</button>
    </div>
  );
}

O Que NÃO Usar Como Key

Usando index como key funciona apenas se a lista é estática. Qualquer inserção, remoção ou reordenação quebra o contrato. UUIDs aleatórios gerados no render também são problemáticos, pois uma nova key é criada a cada render, causando remontagem desnecessária.

// ❌ NÃO FAZER: Index como key com lista dinâmica
todos.map((todo, index) => (
  <TodoItem key={index} {...todo} />
))

// ❌ NÃO FAZER: Key aleatória
todos.map((todo) => (
  <TodoItem key={Math.random()} {...todo} />
))

// ❌ NÃO FAZER: Key gerada no render sem memoização
todos.map((todo) => (
  <TodoItem key={generateUniqueId()} {...todo} />
))

// ✅ FAZER: ID único e estável do servidor ou gerado uma vez
todos.map((todo) => (
  <TodoItem key={todo.id} {...todo} />
))

// ✅ FAZER: Se não há ID, gerar uma vez no estado
const [todos, setTodos] = React.useState([
  { id: crypto.randomUUID(), text: 'Tarefa 1' }
]);

Padrões Avançados: Reordenação, Inserção e Remoção

Entendendo o Diffing em Detalhes com Reordenação

Quando você reordena itens em uma lista com keys corretas, o algoritmo detecta que o mesmo elemento (identificado pela key) está em uma posição diferente. Dependendo da implementação, pode optar por:

1. Atualizar a posição no DOM (mais eficiente)
2. Remover e reinserir (menos eficiente, mas válido)

React usa uma estratégia sofisticada: mantém um mapa de elementos por key e realiza o mínimo de operações necessárias.

// Demonstração prática: como o diffing funciona com reordenação

function ReorderDemo() {
  const [items, setItems] = React.useState([
    { id: 'a', label: 'Item A' },
    { id: 'b', label: 'Item B' },
    { id: 'c', label: 'Item C' }
  ]);

  const moveUp = (id) => {
    const index = items.findIndex(item => item.id === id);
    if (index > 0) {
      const newItems = [...items];
      [newItems[index], newItems[index - 1]] = [newItems[index - 1], newItems[index]];
      setItems(newItems);
    }
  };

  const moveDown = (id) => {
    const index = items.findIndex(item => item.id === id);
    if (index < items.length - 1) {
      const newItems = [...items];
      [newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]];
      setItems(newItems);
    }
  };

  return (
    <div>
      {items.map((item) => (
        <div key={item.id} style={{ padding: '10px', border: '1px solid #ccc', marginBottom: '5px' }}>
          <span>{item.label}</span>
          <button onClick={() => moveUp(item.id)}>↑</button>
          <button onClick={() => moveDown(item.id)}>↓</button>
        </div>
      ))}
    </div>
  );
}

Com keys corretas, ao mover "Item A" para a posição 2, React detecta que a key 'a' mudou de posição. O elemento DOM é mantido, mas sua posição é atualizada via CSS ou reordenação no DOM. Sem keys, o elemento em posição 0 seria atualizado para mostrar "Item B", o elemento em posição 1 seria "Item A", criando confusão visual e perdendo estado.

Padrão: Batch Updates com Reconciliação

Em aplicações complexas, você frequentemente precisa fazer múltiplas mudanças em uma lista. Compreender como o diffing funciona nesses cenários evita surpresas.

// Padrão robusto: Batch updates com reconciliação

function AdvancedListExample() {
  const [items, setItems] = React.useState([
    { id: 1, text: 'Item 1', completed: false },
    { id: 2, text: 'Item 2', completed: false },
    { id: 3, text: 'Item 3', completed: false }
  ]);

  // ❌ Evitar: múltiplas chamadas setState
  const badAddAndMark = (newText) => {
    const newItem = { id: Date.now(), text: newText, completed: false };
    setItems([...items, newItem]); // Render 1
    setItems(prev => [...prev]); // Render 2 (desnecessário)
  };

  // ✅ Melhor: batch update em uma única chamada
  const goodAddAndMark = (newText) => {
    setItems(prev => {
      const newItem = { id: Date.now(), text: newText, completed: false };
      return [...prev, newItem];
    });
  };

  // ✅ Padrão: múltiplas operações em uma única transição
  const bulkUpdate = (updatedIds) => {
    setItems(prev => 
      prev.map(item => 
        updatedIds.includes(item.id) 
          ? { ...item, completed: true }
          : item
      )
    );
  };

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          <input 
            type="checkbox" 
            checked={item.completed}
            onChange={() => bulkUpdate([item.id])}
          />
          <span style={{ textDecoration: item.completed ? 'line-through' : 'none' }}>
            {item.text}
          </span>
        </div>
      ))}
      <button onClick={() => goodAddAndMark('Novo item')}>Adicionar</button>
    </div>
  );
}

Caso Real: Filtrar, Ordenar e Manter Estado

Um caso comum é filtrar ou ordenar uma lista sem perder o estado dos componentes filhos. Aqui está como fazer isso corretamente:

// Caso real: Lista com filtro e ordenação preservando estado interno

function SmartListComponent() {
  const [items, setItems] = React.useState([
    { id: 1, name: 'Alice', score: 95 },
    { id: 2, name: 'Bob', score: 87 },
    { id: 3, name: 'Charlie', score: 92 }
  ]);

  const [filterText, setFilterText] = React.useState('');
  const [sortBy, setSortBy] = React.useState('name'); // 'name' ou 'score'

  // Filtra e ordena
  const filteredAndSorted = React.useMemo(() => {
    let result = items.filter(item => 
      item.name.toLowerCase().includes(filterText.toLowerCase())
    );

    if (sortBy === 'name') {
      result.sort((a, b) => a.name.localeCompare(b.name));
    } else {
      result.sort((a, b) => b.score - a.score);
    }

    return result;
  }, [items, filterText, sortBy]);

  return (
    <div>
      <input 
        placeholder="Filtrar por nome"
        value={filterText}
        onChange={(e) => setFilterText(e.target.value)}
      />
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
        <option value="name">Ordenar por Nome</option>
        <option value="score">Ordenar por Score</option>
      </select>

      {filteredAndSorted.map(item => (
        // Key por ID garante que o estado interno se mantém
        // mesmo quando filtramos ou reordenamos
        <ListItem key={item.id} item={item} />
      ))}
    </div>
  );
}

function ListItem({ item }) {
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <div style={{ padding: '10px', border: '1px solid #ddd' }}>
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? '▼' : '▶'} {item.name} - Score: {item.score}
      </button>
      {isExpanded && (
        <div style={{ marginTop: '10px', paddingLeft: '20px' }}>
          <p>Detalhes adicionais sobre {item.name}</p>
          <p>Score atual: {item.score}</p>
        </div>
      )}
    </div>
  );
}

Neste exemplo, quando você filtra ou ordena, os elementos são reordenados no DOM, mas suas keys permanecem as mesmas (baseadas no id). React detecta isso e mantém cada componente ListItem vivo e com seu estado interno (isExpanded) intacto. Sem keys, o estado seria perdido ou mixado entre os itens.

Conclusão

Você aprendeu que o Virtual DOM não é mágico: é uma estratégia de otimização baseada em três pilares. Primeiro, o diffing é um algoritmo O(n) que compara duas árvores de forma incremental, não completa. Compreender que ele trabalha por tipo de elemento no mesmo nível evita bugs ao renderizar condicional. Segundo, as keys são o mecanismo essencial para manter a identidade estável de elementos em listas dinâmicas; sem elas, inserções, remoções e reordenações causam remontagens e perda de estado desnecessárias. Terceiro, dominar esses conceitos permite otimizações conscientes: batch updates, uso correto de memoização e padrões que preservam o estado durante filtros e ordenações. A próxima vez que uma lista parecer comportar-se estranhamente, você saberá procurar por keys ausentes ou incorretas.

Referências

• React Reconciliation - Documentação Oficial
• Lists and Keys - React Docs
• Vue.js List Rendering and Key Attribute
• The Virtual DOM in React and Vue - Alligator.io
• Understanding React Fiber Architecture - DEV Community