Hook: UseLayoutEffect()
"GERARDO DAVID" "RAMIREZ CANCHOLA"
Created on February 9, 2024
Over 30 million people build interactive content in Genially.
Check out what others have designed:
ANCIENT EGYPT
Learning unit
MONSTERS COMIC "SHARING IS CARING"
Learning unit
PARTS OF THE ANIMAL CELL
Learning unit
PARTS OF A PROKARYOTIC CELL
Learning unit
PARTS OF THE PLANT CELL
Learning unit
Transcript
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