A fase de renderização e o commit no DOM

O ciclo de trabalho do React tem duas fases principais: a fase de renderização e a fase de confirmação. Durante a fase de renderização, o React chama as funções dos seus componentes e cria uma representação virtual da interface (a árvore de fibras). Durante a fase de confirmação, o React aplica as alterações da árvore de fibras ao DOM real.

No Modo concorrente do React 18, a fase de renderização pode ser pausada, interrompida ou reiniciada. O React pode chamar sua função de componente várias vezes antes de confirmar qualquer alteração. Por isso, as funções de componentes devem ser puras: elas não podem ter efeitos colaterais, pois a função pode ser executada mais de uma vez para uma única atualização visível.

Ao contrário da fase de renderização, a fase de confirmação é sempre síncrona e é executada até o fim. O React não pode ser interrompido enquanto confirma alterações no DOM. Isso garante que o DOM nunca fique em um estado parcialmente atualizado. Os usuários sempre veem uma interface totalmente consistente após cada confirmação.

A fase de confirmação tem três subfases: antes da mutação (o componente de classe getSnapshotBeforeUpdate é executado aqui para ler valores do DOM antes das alterações), mutação (o React insere, atualiza e remove nós do DOM) e disposição (os efeitos síncronos são executados aqui, especificamente useLayoutEffect e componentDidMount/componentDidUpdate do componente de classe).

useEffect é um efeito passivo, isto é, não é executado durante a fase de confirmação. Depois que a fase de confirmação termina e o navegador desenha a tela, o React agenda os efeitos passivos de forma assíncrona. Eles são executados depois que o navegador tem a oportunidade de renderizar o DOM atualizado na tela.

O navegador desenha a tela entre a fase de disposição (na qual useLayoutEffect é executado) e a fase de efeitos passivos (na qual useEffect é executado). Esta é a diferença crucial de momento: useLayoutEffect é executado antes da pintura, e useEffect é executado depois dela. Para efeitos que alteram a saída visual, essa distinção é muito importante.

Se um useEffect lê o DOM e atualiza o estado (por exemplo, medindo um elemento e definindo um estado de tamanho), o React renderiza novamente e confirma as alterações. O navegador desenha a tela duas vezes: uma vez com o tamanho inicial e outra com o tamanho corrigido. Os usuários podem ver uma breve exibição do tamanho incorreto antes que a correção apareça.

React constrói internamente uma árvore de nós de "fibra", um para cada instância de componente. Cada fibra armazena o estado, os efeitos e a saída do componente. Durante a fase de renderização, React cria uma nova árvore de fibras de trabalho em andamento. Durante a fase de confirmação, a árvore de trabalho em andamento se torna a árvore atual, e a árvore antiga é reutilizada.

No modo estrito do React, as funções dos componentes e os efeitos são intencionalmente executados duas vezes durante o desenvolvimento para ajudar a detectar efeitos colaterais. Tanto useLayoutEffect quanto useEffect são montados, desmontados e montados novamente. Essa dupla invocação não ocorre em produção. Ela foi projetada para revelar erros em que os efeitos não são devidamente limpos.

Como a fase de renderização pode ser interrompida e executada novamente, as funções dos componentes precisam produzir a mesma saída para as mesmas entradas, sem efeitos colaterais. Mutações, assinaturas e chamadas de API no corpo da função, e não nos efeitos, serão executadas mais vezes do que o esperado no modo concorrente, causando erros.

Nunca leia propriedades do DOM diretamente dentro do corpo da função do componente. O DOM pode ainda não existir durante a renderização no servidor ou pode estar desatualizado durante novas renderizações. Leia sempre o DOM dentro de useLayoutEffect, para leituras antes da pintura, ou de useEffect, para leituras depois da pintura, quando há garantia de que o DOM está atualizado.

Em qual subfase da fase de confirmação do React useLayoutEffect é executado?

A fase de renderização do React constrói a árvore de fibras e pode ser interrompida; a fase de confirmação aplica as alterações ao DOM e é sempre síncrona. A confirmação tem três subfases: antes da mutação, mutação e disposição. useLayoutEffect é executado na fase de disposição, antes da pintura. useEffect é executado como um efeito passivo depois da pintura.