useIsomorphicLayoutEffect

useIsomorphicLayoutEffect es un Hook de React que ejecuta useLayoutEffect en el navegador sin generar su advertencia durante el renderizado en el servidor (SSR). Durante el SSR, no hay un DOM que puedas medir o modificar de forma síncrona, por lo que, en React 18 y versiones anteriores, usar useLayoutEffect genera una advertencia. El efecto solo se ejecuta en el navegador. Este Hook solo evita la advertencia y no hace que la salida del servidor coincida con la del cliente. React 19 ya no muestra la advertencia, así que en React 19 puedes usar useLayoutEffect directamente.

En el navegador, se ejecuta de forma síncrona después de las actualizaciones del DOM, pero antes de que el navegador pinte la pantalla, lo que lo hace ideal para:

• Medir elementos del DOM después del renderizado
• Aplicar cambios al DOM antes de que el navegador pinte la pantalla
• Evitar parpadeos en la interfaz o cambios en la disposición de los elementos

Interfaz

function useIsomorphicLayoutEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void;

Parámetros

• effectrequired · React.EffectCallback
  

  La función del efecto.

• depsReact.DependencyList
  

  Un arreglo opcional de dependencias.

Valor de retorno

Esta función no devuelve ningún valor.

Ejemplo

useIsomorphicLayoutEffect(() => {
  // Código que se ejecuta durante la fase de disposición de los elementos en el cliente
}, [dep1, dep2, ...]);