Hook: UseLayoutEffect()

Hooks en ReactJS>

<UseLayoutEffect

EMPEZAR >

React utiliza este hook para realizar tareas que requieren acceso al DOM después de que se haya actualizado, y previo a que se muestren resultados en la pantalla. Existe un hook simila a la funcion de este llamado: useEffect(), pero se ejecuta de forma síncrona después de los cambios del DOM.

// Como funciona

>

>

<>Características

>

>

>

>

Se ejecuta de manera síncrona después de todas las actualizaciones del DOM y se ejecutará antes de que el navegador actualice la pantalla.

// Sincronicidad

// Acceso al DOM

Se usa para tareas que usan medidas o realizan operaciones en elementos del DOM, garantiza que se ejecute después de que React haya realizado cambios del DOM.

>

>

Es muy usado en casos que dependan de las dimensiones o posiciones de elementos del DOM después de que hayan sido renderizados y antes de mostrarlos en pantalla.

// usos comunes

Toma una función callback como su primer argumento y una matriz de dependencias opcional como su segundo argumento.

// Sintaxis

useLayoutEffect() puede generar bloqueos en la interfaz de usuario si la tarea que realiza es pesada, en casos así useEffect() es mejor opción.

// Rendimiento

>

>

Utilizamos useLayoutEffect() para mantener actualizado el estado del ancho de la ventana, verificando que se actualice de manera síncrona después de cada redimensionamiento de la ventana del navegador.

// Ejemplo

>

https://stackoverflow.com/questions/68946977/how-does-react-implement-useeffect-and-uselayouteffect

2

https://legacy.reactjs.org/docs/hooks-reference.html#uselayouteffect

1

<Bibliografía>

>

/

Gracias por su atención