Medir elementos del DOM con useLayoutEffect

element.getBoundingClientRect() devuelve un objeto DOMRect con el tamaño y la posición del elemento con respecto a la ventana gráfica: top, right, bottom, left, width y height. Obliga al navegador a realizar un cálculo de layout para devolver valores precisos, por lo que debe llamarlo con moderación.

Si lee getBoundingClientRect() en un useEffect, el navegador ya habrá pintado. Si después actualiza el estado basándose en la medición, React vuelve a renderizar y el navegador pinta de nuevo. Es posible que los usuarios vean brevemente el elemento en una posición o con un tamaño incorrectos antes de que aparezca la corrección en el segundo pintado.

Leer las mediciones en useLayoutEffect ocurre después de las mutaciones del DOM, pero antes del pintado. Cualquier actualización de estado provocada por la medición hace que React vuelva a renderizar de forma síncrona y aplique el DOM corregido, todo ello antes de que el navegador haya pintado nada. El usuario solo ve el resultado final y correcto en un único ciclo de pintado.

Una información sobre herramientas debe aparecer cerca del elemento que la activa. Mida la posición del elemento activador en useLayoutEffect mediante getBoundingClientRect(), calcule la posición absoluta de la información sobre herramientas y guarde esa posición en el estado. La información sobre herramientas se renderiza en la ubicación correcta desde el primer pintado, sin ningún salto visible desde una posición inicial incorrecta.

Para animar un elemento desde su tamaño natural (sin restricciones) hasta un tamaño fijo, necesita conocer el tamaño natural antes de aplicar la restricción. Lea la altura del elemento en useLayoutEffect antes de aplicar cualquier estilo de animación, guárdela en el estado y úsela después como valor del fotograma clave inicial de la transición CSS.

Cuando una página tiene un encabezado fijo, el contenido del cuerpo necesita un relleno superior igual a la altura del encabezado para evitar quedar oculto detrás de él. Mida la altura del encabezado en useLayoutEffect mediante una ref: headerRef.current.getBoundingClientRect().height. Establezca este valor como paddingTop en el contenedor del contenido. El diseño será correcto desde el primer renderizado.

Cuando llama a setState dentro de useLayoutEffect, React ejecuta inmediatamente otro ciclo de renderizado y commit en el mismo bloque síncrono. Este nuevo renderizado también ejecuta su useLayoutEffect. Tenga cuidado de no crear un bucle infinito: actualice el estado únicamente si la nueva medición difiere del valor actual del estado.

En el servidor no existen elementos del DOM, por lo que getBoundingClientRect() produciría un error o devolvería ceros. Proteja su useLayoutEffect con una comprobación: if (typeof window === 'undefined') return;. En aplicaciones con SSR, puede que necesite hidratar con un tamaño provisional y realizar la medición después de la hidratación en el cliente.

Una medición única con useLayoutEffect le proporciona el tamaño en el momento del montaje. Para realizar un seguimiento de los cambios de tamaño a medida que el elemento cambia de tamaño (por un cambio en el tamaño de la ventana, contenido dinámico o cambios de CSS), use ResizeObserver. Este ejecuta una función de callback cada vez que cambia el tamaño del elemento, por lo que resulta más adecuado para componentes adaptables.

Si varios efectos necesitan la misma medición, calcúlela una vez y compártala mediante el contexto o pásela como prop. Calcular el mismo valor de getBoundingClientRect() en varias llamadas a useLayoutEffect provoca varias lecturas de layout síncronas, cada una de las cuales resulta relativamente costosa. Siempre que sea posible, consolide las mediciones.

Las refs se rellenan antes de que se ejecuten los efectos. Cuando se ejecuta useLayoutEffect, se garantiza que ref.current apunta al elemento del DOM. Por eso funciona este patrón: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). La ref nunca es null dentro de un efecto de layout en un componente montado.

Use getBoundingClientRect() en useLayoutEffect para leer las mediciones del DOM después de las mutaciones, pero antes del pintado. Las actualizaciones de estado derivadas de estas mediciones provocan un nuevo renderizado síncrono que se incluye en el mismo pintado y evita el parpadeo. Protéjase frente al SSR con una comprobación de typeof window. Para realizar un seguimiento continuo del tamaño, prefiera ResizeObserver.