Variações do Hook useEffect no React

O hook useEffect tem outras variações, que são específicas e muito raramente usadas, por isso vamos abordá-las brevemente.

A primeira variação é o hook useLayoutEffect, que é acionado antes que o navegador redesenhe a tela. Você pode usar essa funcionalidade para calcular o tamanho e a posição de um componente dependendo de outros elementos, para que então, durante a renderização, o navegador o exiba imediatamente da forma e no local corretos. Graças a isso, por exemplo, o usuário não verá saltos intermediários do componente durante a mudança de posição ou tamanho, mas apenas suas versões finais.

A segunda variação é o hook useInsertionEffect, que é acionado antes de quaisquer alterações na árvore DOM, ou seja, no momento em que as refs ainda não estão anexadas e o DOM não foi atualizado. É aplicado principalmente onde é necessário inserir estilos dinâmicos de bibliotecas CSS-in-JS antes da mutação do DOM.