Hook: UseLayoutEffect()

EMPEZAR >

<UseLayoutEffect

Hooks en ReactJS>

>

>

// Como funciona

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.

>

>

<> Características

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.

// Acceso al DOM

// Sincronicidad

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.

>

>

// Rendimiento

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

// Sintaxis

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

// usos comunes

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.

>

>

// Ejemplo

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.

>

>

>

<Bibliografía>

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

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

>

Gracias por su atención