useLayoutEffect funciona igual que el hook useEffect, con la excepción de que este se dispara sincrónicamente después de leer todas las mutaciones del DOM.

Llama useLayoutEffect en el nivel superior del componente.

import { useLayoutEffect } from 'react';

useLayoutEffect(() => {
  return () => {
  }
}, []);

useLayoutEffect recibe dos argumentos:

• Una función callback que define el efecto.
• Una lista de dependencias.

Aunque el useEffect es el hook de renderizado más usado, si se necesita que los efectos del DOM muten cambiando la apariencia entre el efecto y el renderizado, entonces es conveniente que uses el useLayoutEffect.

Orden de ejecución del useLayoutEffect

El orden de ejecución del useLayoutEffect, ya que se ejecuta de forma síncrona, al momento en que React termina de ejecutar todas las mutaciones, pero antes de renderizarlo en pantalla, es el siguiente:

• El componente se actualiza por algún cambio de estado, props o el padre se re-renderiza
• React renderiza el componente
• Tu efecto es ejecutado
• La pantalla se actualiza “visualmente”