📖
Core

Virtual DOM

Representação em JS da árvore do DOM real. React compara versões e aplica só as diferenças.

📚 O que é

Cada render cria uma nova representação Virtual DOM. O diffing algorithm (reconciler) compara com a versão anterior e calcula o conjunto mínimo de operações para atualizar o DOM real.

✅ Quando usar

É usado automaticamente pelo React em todo render. Não é algo que você 'usa' diretamente.

🚫 Quando NÃO usar

Para manipulações pontuais de DOM onde refs diretos são mais performáticos (animações, canvas, D3).

👍 Prós
Otimiza atualizações de DOM
Abstrai diferenças entre browsers
Permite SSR (renderiza em string)
Base para Concurrent Mode
👎 Contras
Overhead de memória (manter 2 árvores)
Não é sempre mais rápido que DOM direto
Camada extra de abstração
🔗 Termos relacionados
JSX
Core

Sintaxe que parece HTML mas compila para React.createElement().

Reconciliation
Core

Algoritmo que compara dois Virtual DOMs e calcula o mínimo de mudanças para o DOM real.

Fiber
Core

Arquitetura interna do React 16+ que permite renderização interrompível e priorização.

Suspense
Core

Componente que mostra fallback enquanto filhos 'suspendem' (lançam Promise não resolvida).

Error Boundary
Core

Componente class que captura erros em filhos. Mostra UI de fallback em vez de quebrar o app.

Hydration
Core

Processo de attachar event listeners do React ao HTML pré-gerado pelo servidor.