useLayoutEffect para mediciones previas a la animación

A veces un elemento salta o parpadea visiblemente en su primer renderizado antes de colocarse correctamente. Esto suele ocurrir cuando mide o reposiciona un elemento después de que el navegador ya lo haya pintado.

La persona usuaria ve la posición incorrecta durante un fotograma y después una corrección repentina, lo que da la impresión de que algo está roto.

useEffect se ejecuta después de que el navegador pinta. Por eso, si lee una medición y actualiza el DOM dentro de useEffect, la persona usuaria ya ha visto el fotograma sin corregir antes de que se aplique el cambio.

Para un posicionamiento visual que debe resultar invisible para la persona usuaria, la ejecución posterior al pintado llega demasiado tarde.

useLayoutEffect se ejecuta de forma síncrona después de que React modifique el DOM, pero antes de que el navegador pinte. Cualquier lectura o escritura del DOM que realice allí se aplica antes de que la persona usuaria vea un solo fotograma.

Esto lo convierte en la herramienta adecuada para mediciones y posicionamiento que deben aparecer correctamente de inmediato.

Dentro de useLayoutEffect puede leer la geometría de un elemento con ref.current.getBoundingClientRect() para capturar su posición y tamaño antes de animarlo.

Como se ejecuta antes del pintado, puede medir y aplicar una transformación inicial sin ningún destello visible.

FLIP son las siglas de First, Last, Invert y Play. Registra la posición First del elemento, deja que pase a su posición Last, luego aplica Invert mediante una transformación que lo devuelve visualmente a First y, por último, realiza Play eliminando la transformación para que se anime hasta Last.

Esto permite animar cambios de diseño usando únicamente el económico transform, aunque el diseño real haya cambiado instantáneamente.

Las lecturas clave se realizan en useLayoutEffect: capture el rect First antes del cambio y el rect Last después, y calcule la diferencia. Hacerlo antes del pintado garantiza que la transformación invertida esté aplicada antes de mostrar cualquier elemento.

La diferencia entre ambos rectángulos le proporciona la traslación y la escala exactas para invertir el cambio.

Establezca la transformación inversora de forma síncrona dentro de useLayoutEffect y, en el fotograma siguiente, elimínela para que el elemento se anime hasta su posición natural. A menudo puede activar el paso de reproducción con requestAnimationFrame.

Como la inversión se aplicó antes del pintado, la persona usuaria nunca ve el elemento en su posición Last sin transformar.

En el servidor no existe el DOM, por lo que React registra una advertencia indicando que useLayoutEffect no hace nada durante el renderizado en el servidor. Los efectos de diseño solo tienen sentido en el navegador.

Esta advertencia indica que el efecto no puede ejecutarse donde no hay nada que medir.

Si un componente debe ejecutarse en el servidor, use useEffect junto con requestAnimationFrame para realizar la medición antes del siguiente pintado, o use useLayoutEffect condicionalmente solo en el navegador.

Esto evita la advertencia y, aun así, consigue una temporización cercana a la previa al pintado para animaciones no críticas.

Una animación de altura es un caso clásico: mida las alturas contraída y expandida en useLayoutEffect y, después, anime entre valores explícitos en píxeles para que la transición sea fluida.

Como la altura auto no se puede animar, medir primero la altura real permite hacer la transición hasta un número concreto.

Use useEffect de forma predeterminada para la mayoría de las tareas. Use useLayoutEffect únicamente cuando lea el diseño y deba modificar el DOM antes del pintado para evitar un destello visible.

Usarlo en exceso puede perjudicar el rendimiento, porque bloquea el pintado hasta que termina.

Compruebe su comprensión de la temporización de los efectos.

Aprendió que el problema del destello se debe a medir después del pintado, que useLayoutEffect se ejecuta antes del pintado y cómo la técnica FLIP anima cambios de diseño mediante transformaciones económicas.

También vio la advertencia de SSR y una alternativa con useEffect más requestAnimationFrame.