useLayoutEffect para medições antes da animação

Às vezes, um elemento salta ou pisca visivelmente na primeira renderização antes de se acomodar no lugar. Isso geralmente acontece quando você mede ou reposiciona um elemento depois que o navegador já o desenhou.

O usuário vê a posição incorreta por um quadro e, em seguida, uma correção repentina, o que faz tudo parecer errado.

useEffect é executado depois que o navegador desenha a tela. Portanto, se você ler uma medida e atualizar o DOM dentro de useEffect, o usuário já terá visto o quadro sem correção antes que sua alteração seja aplicada.

Para um posicionamento visual que precisa ser invisível ao usuário, executar o código depois da renderização é tarde demais.

useLayoutEffect é executado de forma síncrona depois que o React modifica o DOM, mas antes que o navegador desenhe a tela. Qualquer leitura ou escrita do DOM feita ali é aplicada antes que o usuário veja um único quadro.

Isso faz dele a ferramenta adequada para medições e posicionamentos que precisam aparecer corretos instantaneamente.

Dentro de useLayoutEffect, você pode ler a posição e as dimensões de um elemento com ref.current.getBoundingClientRect() para registrar sua posição e seu tamanho antes de animá-lo.

Como isso é executado antes da renderização, você pode medir o elemento e aplicar uma transformação inicial sem nenhum piscar visível.

FLIP significa Primeiro, Último, Inverter e Reproduzir. Você registra a posição inicial do elemento, deixa que ele se mova para a posição final, depois o inverte aplicando uma transformação que o coloca visualmente de volta na posição inicial e, por fim, reproduz a animação removendo a transformação para que ele se mova até a posição final.

Isso permite animar alterações de disposição usando apenas uma transform de baixo custo, mesmo que a disposição real tenha mudado instantaneamente.

As leituras principais ocorrem em useLayoutEffect: registre o retângulo inicial antes da alteração e o retângulo final depois dela, depois calcule a variação. Fazer isso antes da renderização garante que a transformação inversa esteja aplicada antes que qualquer coisa seja exibida.

A diferença entre os dois retângulos fornece a translação e a escala exatas para fazer a inversão.

Você define a transformação inversora de forma síncrona dentro de useLayoutEffect e, no quadro seguinte, remove-a para que o elemento seja animado até sua posição natural. Muitas vezes, você aciona a etapa de reprodução com requestAnimationFrame.

Como a inversão foi aplicada antes da renderização, o usuário nunca vê o elemento em sua posição final bruta.

No servidor não existe DOM, então o React registra um aviso informando que useLayoutEffect não faz nada durante a renderização no servidor. Os efeitos relacionados à disposição visual só fazem sentido no navegador.

Esse aviso indica que o efeito não pode ser executado onde não há nada para medir.

Se um componente precisar ser executado no servidor, use useEffect combinado com requestAnimationFrame para fazer a medição antes da próxima renderização, ou use useLayoutEffect condicionalmente apenas no navegador.

Isso evita o aviso e ainda proporciona um momento próximo da renderização para animações não críticas.

Uma animação de altura é um caso clássico: meça as alturas nos estados recolhido e expandido em useLayoutEffect e, em seguida, anime entre valores explícitos em pixels para que a transição seja suave.

Como a altura auto não pode ser animada, medir a altura real primeiro permite fazer a transição até um valor concreto.

Prefira useEffect na maior parte dos casos. Use useLayoutEffect apenas quando ler a disposição visual e modificar o DOM antes da renderização for necessário para evitar um piscar visível.

Usá-lo em excesso pode prejudicar o desempenho, pois bloqueia a renderização até terminar.

Teste sua compreensão sobre o momento de execução dos efeitos.

Você aprendeu que o problema do piscar ocorre por medir depois da renderização, que useLayoutEffect é executado antes dela e como a técnica FLIP anima alterações de disposição usando transformações de baixo custo.

Você também viu o aviso de SSR e uma alternativa com useEffect e requestAnimationFrame.