No React, renderizar é o processo pelo qual os componentes aparecem na interface do usuário (UI), geralmente no navegador. React pega todo o seu código JavaScript, JSX e CSS, determina como ele deve aparecer e então o exibe na interface do usuário. O processo de renderização consiste em três etapas: trigger, render e commit. Vamos dar uma olhada nestes com mais detalhes. A fase de trigger ocorre quando o React detecta que algo mudou e que a interface do usuário pode precisar ser atualizada. Essa mudança geralmente ocorre devido a uma atualização no estado ou nas props. Por exemplo, perceber que é hora do jantar pode fazer você ir para a cozinha para começar a cozinhar. No exemplo Counter abaixo, clicar no botão de incremento ou decremento faz o React mostrar o novo valor de count:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Uma vez que o gatilho acontece, o React entra na fase de renderização. Aqui, o React reavalia seus componentes e determina o que exibir. Para fazer isso, o React usa uma cópia leve do DOM "real". Isto é chamado de virtual DOM. Com o virtual DOM, o React pode verificar rapidamente o que precisa mudar no componente. Pense nesta etapa como o momento em que você está na cozinha, reuniu seus ingredientes e cozinha seu jantar. Para o componente Counter, o estágio de renderização é o momento em que o React executa as funções novamente com o novo valor de count. O React recalcula como a parte <h1>{count}</h1> do componente deve ser exibida com base no valor atualizado de count, mas você não verá nenhuma alteração na tela até a próxima etapa – commit. A etapa de commit é onde o React pega as mudanças preparadas do virtual DOM e as aplica no DOM real. Em outras palavras, esta é a etapa onde você vê o resultado final na tela. Para que isso aconteça, o React compara o virtual DOM com o actual DOM, identifica apenas as partes que precisam de atualizações e aplica essas mudanças ao real DOM para atualizar a interface do usuário. Você pode pensar nesta etapa como o momento em que você serve a comida que cozinhou, tornando-a visível exatamente como o React faz quando ele confirma atualizações no DOM real. Quanto ao componente Counter, a fase de commit é o momento em que o novo valor de count é aplicado ao elemento h1 e você pode ver a alteração na página. Esses três processos são extremamente rápidos porque o React minimiza a manipulação direta do DOM calculando as mudanças primeiro no DOM virtual, depois atualiza apenas as partes que precisam mudar no DOM real.