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.