Skip to main content

Renderização | React

  • Renderização | React

alt text

🧩 Como o React atualiza a interface: Fases do ciclo de renderização​

🔁 1. Render is Triggered​

Quando algo muda — como um useState, useReducer ou props — o React dispara o processo de renderização:

setCount(count + 1);

🧠 2. Render Phase (Virtual DOM entra em ação aqui)​

Nessa fase:

  • React chama os componentes afetados (executa suas funções).
  • Um novo Virtual DOM é gerado com base nos dados atuais.
  • O React compara o novo Virtual DOM com o anterior usando o algoritmo de "diff".
  • Nenhuma mudança real acontece no DOM do navegador ainda.

🧠 Virtual DOM é uma árvore de objetos JS que representa a estrutura do DOM, usada para calcular as mudanças com eficiência, sem afetar diretamente o DOM real.

✅ 3. Commit Phase​

Aqui o React:

  • Aplica as mudanças calculadas no DOM real.
  • Executa efeitos (useEffect, ref, componentDidMount, etc).
  • Atualiza o layout e estrutura visual com base no que mudou no VDOM.

Essa é a única fase que de fato altera a interface visível.

🎨 4. Browser Paint​

Após o commit:

  • O navegador realiza o repaint — ou seja, exibe as mudanças visuais ao usuário.

📝 Resumo geral:​

FaseO que acontece
Render TriggeredAlguma mudança de estado/props ativa nova renderização
Render PhaseGeração e comparação do novo Virtual DOM com o antigo
Commit PhaseReact escreve no DOM real com base nas diferenças do VDOM
Browser PaintO navegador exibe as mudanças visuais ao usuário

⚠️ Observação importante​

Em React, "renderizar" não significa atualizar o DOM visível.
O processo de renderização acontece internamente, no Virtual DOM.
Só na fase de commit que mudanças visuais reais ocorrem.