Hook · Sincronización síncrona
useLayoutEffect
Antes de pintar
useLayoutEffect corre justo después del DOM commit pero antes de que el navegador pinte. Úsalo cuando necesites medir el DOM y aplicar un cambio antes de que el usuario vea el resultado intermedio.
El caso real
Tooltips que se reposicionan según su tamaño, animaciones que necesitan posición inicial calculada, ajustes de scroll después de insertar contenido. Si usas useEffect en estos casos, verás un parpadeo.
Coste
Bloquea la pintura. Si el trabajo es pesado, perjudica el frame rate. La regla: useEffect por defecto, useLayoutEffect solo cuando midas y mutes el DOM en el mismo turno.
Tropiezos comunes
- 01No funciona en SSR — corre solo en el cliente. React avisa con un warning.
- 02Si llamas setState dentro, fuerzas un render extra antes de pintar — úsalo con cabeza.
- 03Para la mayoría de casos, useEffect basta. No prematuramente uses esta variante.
¿Fue útil?
Inicia sesión para dar feedback