Evitar el exceso de recálculos de layout y el parpadeo visual

El layout thrashing ocurre cuando JavaScript alterna entre leer propiedades del DOM y escribir en él dentro de un bucle. Cada lectura posterior a una escritura obliga al navegador a recalcular el layout de forma síncrona para devolver un valor preciso. Esto puede convertir lo que debería ser un único cálculo de layout en decenas de ellos y perjudicar gravemente el rendimiento.

React agrupa todas las llamadas a setState realizadas dentro de controladores de eventos y efectos en un único renderizado. Esta agrupación natural evita el patrón de lectura-escritura-lectura que provoca thrashing dentro de un mismo ciclo de renderizado. En React 18, la agrupación también se extiende a las callbacks asíncronas y a las Promises, lo que reduce el layout thrashing provocado por actualizaciones de estado concurrentes.

El parpadeo se produce cuando un useEffect lee el DOM, actualiza el estado, provoca un nuevo renderizado y el navegador pinta dos veces: una con el estado inicial y otra con el estado corregido. El primer pintado aparece brevemente antes de ser reemplazado. Esto resulta más visible en los efectos que ajustan propiedades del layout, como la altura, la anchura o la posición.

Abra Chrome DevTools, vaya a la pestaña Rendering (a través del menú de tres puntos, en More tools) y active «Paint flashing». Las áreas que se vuelven a pintar se resaltan en verde. Si ve que un componente parpadea en el primer renderizado y luego se vuelve a pintar inmediatamente con un layout diferente, esto confirma un pintado doble provocado por una actualización de estado impulsada por useEffect.

Traslade las lecturas del DOM y las actualizaciones de estado resultantes de useEffect a useLayoutEffect. La misma medición y actualización de estado ocurren ahora de forma síncrona antes del pintado; React vuelve a renderizar y hace el commit en el mismo bloque, y el navegador solo pinta el estado final correcto. El parpadeo verde de DevTools desaparece.

El patrón sin parpadeo es el siguiente: leer el DOM en useLayoutEffect, llamar a setState con la medición, React vuelve a renderizar de forma síncrona, confirma el DOM corregido y el navegador pinta una sola vez el resultado final. Este es el patrón estándar para posicionar tooltips, calcular desplazamientos de encabezados fijos y configurar animaciones.

La gran mayoría de los efectos deben ir en useEffect: obtener datos (el parpadeo de carga es aceptable y esperado), suscripciones a eventos o streams, registro y analítica, temporizadores y cualquier efecto que no afecte inmediatamente al layout visible. Usar useLayoutEffect en exceso cuando useEffect sería suficiente es un antipatrón que perjudica el rendimiento.

Reserve useLayoutEffect para las mediciones del DOM que repercuten en la salida visual: posiciones de tooltips, lógica basada en el tamaño de los elementos, restauración de la posición de desplazamiento y configuración de animaciones que lee las dimensiones iniciales. Un síntoma claro que indica que debe cambiar es ver un parpadeo visible de un fotograma con un layout incorrecto en el primer renderizado.

Los dos hooks tienen firmas idénticas: useLayoutEffect(callback, deps) frente a useEffect(callback, deps). La única diferencia es el momento en que se ejecuta la callback. Puede cambiar entre ellos modificando una sola palabra del código. Comience con useEffect y cambie a useLayoutEffect únicamente si confirma que hay parpadeo.

Es válido y habitual usar ambos hooks en el mismo componente para responsabilidades diferentes. Por ejemplo, un componente de gráficos podría usar useLayoutEffect para medir la anchura de su contenedor y establecer el viewBox del SVG de forma síncrona, y después usar useEffect para obtener los datos del gráfico de forma asíncrona. Cada hook se ocupa de la responsabilidad cuyo momento de ejecución es importante.

Además del parpadeo del pintado en DevTools, puede añadir un contador en la consola dentro del componente para contar los renderizados. Si un componente registra «render» dos veces durante el primer montaje —una vez con el estado inicial y otra con la medición corregida—, se encuentra ante un escenario de pintado doble. Trasladar la medición a useLayoutEffect debería reducirlo a un solo renderizado registrado después del montaje (sin contar el doble renderizado de Strict Mode).

La saturación del layout se produce al alternar lecturas y escrituras del DOM. El batching de React evita la mayor parte de este problema durante los renderizados. El parpadeo ocurre cuando useEffect mide el DOM y actualiza el estado, lo que provoca dos pintados. Corrija el parpadeo trasladando las mediciones del DOM a useLayoutEffect. Use useEffect de forma predeterminada para todo lo demás: obtención de datos, suscripciones, registro y temporizadores.