Qual é a diferença entre useLayoutEffect e useEffect?

O useEffect é executado de forma assíncrona depois do render e da atualização do DOM. É ideal para efeitos secundários que não afetam a visualização, como pedidos de dados.

O useLayoutEffect é executado de forma síncrona depois do render, mas antes de o navegador "desenhar" as alterações no ecrã. É usado para ler informações do DOM, alterar o DOM de forma síncrona ou medir as suas dimensões antes de o utilizador ver o resultado.

	useEffect	useLayoutEffect
Execução	Assíncrona	Síncrona
Tempo	Após o render e a pintura do DOM	Após o render, mas antes da pintura do DOM
Propósito	Efeitos secundários que não afetam a renderização	Leitura/alteração do DOM, medições antes da renderização
Desempenho	Geralmente melhor	Pode bloquear a pintura

Ao usar useLayoutEffect, deve-se ter cuidado, pois pode potencialmente bloquear a repintura do navegador e causar problemas de desempenho, especialmente em dispositivos lentos. Na maioria dos casos, é preferível usar useEffect.