¿Cuál es la diferencia entre los hooks useEffect y useLayoutEffect?
¿Cuándo usar useLayoutEffect?
Lo descubriremos en un nuevo hilo sobre #React #hooks 🧵
¿Cuándo usar useLayoutEffect?
Lo descubriremos en un nuevo hilo sobre #React #hooks 🧵
useLayoutEffect es similar en casi TODO a useEffect, solo tiene pequeñas diferencias.
TLDR: useEffect es lo que quieres usar el 99% del tiempo.
Ambos reciben dos argumentos, un callback que define el efecto y una lista de dependencias.
matiashernandez.dev/react-useeffec…
TLDR: useEffect es lo que quieres usar el 99% del tiempo.
Ambos reciben dos argumentos, un callback que define el efecto y una lista de dependencias.
matiashernandez.dev/react-useeffec…
La diferencia entre ambos radica en el momento en que el efecto definido en el callback es ejecutado.
useEffectes ASINCRONO. y ejecuta el efecto después que tu componente se renderiza asegurando así que tu efecto no bloquerá el proceso principal.
useEffectes ASINCRONO. y ejecuta el efecto después que tu componente se renderiza asegurando así que tu efecto no bloquerá el proceso principal.
Tu efecto se ejecutará así:
1. El componente se actualiza por algún cambio de estado, props o el padre se re-renderiza
2. React renderiza el componente
3. La pantalla se actualiza "visualmente"
4. Tu efecto es ejecutado!!
1. El componente se actualiza por algún cambio de estado, props o el padre se re-renderiza
2. React renderiza el componente
3. La pantalla se actualiza "visualmente"
4. Tu efecto es ejecutado!!
Sin embargo, si lo que buscas es que tus efectos muten el DOM cambiando la apariencia de este entre el renderizado y tu efecto entonces necesitas usar useLayoutEffect.
useLayoutEffect se ejecuta de forma asícrona, justo después de que #React ejecutó todas las mutaciones pero antes de "pintar" en pantalla.
Esto es útil para por ejemplo obtener las medidas del DOM y después ejecutar alguna mutación en base a esos datos.
Esto es útil para por ejemplo obtener las medidas del DOM y después ejecutar alguna mutación en base a esos datos.
El orden de ejecución para useLayoutEffect es:
1. El componente se actualiza por algún cambio de estado, props o el padre se re-renderiza
2. React renderiza el componente
3. Tu efecto es ejecutado!!
4. La pantalla se actualiza "visualmente"
1. El componente se actualiza por algún cambio de estado, props o el padre se re-renderiza
2. React renderiza el componente
3. Tu efecto es ejecutado!!
4. La pantalla se actualiza "visualmente"
En definitiva usa useLayoutEffect si tu efecto busca mutar el DOM y obtener datos de este y useEffect el 99% de las veces.
Por lo general tu efecto busca sincronizar algún estado interno con un estado externo sin significar un cambio visual inmediato.
matiashernandez.dev/react-useeffec…
Por lo general tu efecto busca sincronizar algún estado interno con un estado externo sin significar un cambio visual inmediato.
matiashernandez.dev/react-useeffec…
Ejemplos ya clásicos de uso de useEffect es el obtener datos desde una api: No un cambio inmediato,
manejar un event handler o resetear el estado.
manejar un event handler o resetear el estado.
Cuando use useLayoutEffect.
Literalment verás el momento de usarlo.
Un caso común es que tu componente tenga un comportamiento de renderizado con "flickering" dado que el estado cambia rápidamente modificando el DOM.
Literalment verás el momento de usarlo.
Un caso común es que tu componente tenga un comportamiento de renderizado con "flickering" dado que el estado cambia rápidamente modificando el DOM.
Te gustan estos hilos? Todo este contenido está disponible en matiashernandez.dev
Y Puedes unirte a mi newsletter para recibir lo mejor de esto y más en tu correo
matiashernandez.ck.page
Y Puedes unirte a mi newsletter para recibir lo mejor de esto y más en tu correo
matiashernandez.ck.page
gracias @ivanlhz por sugerir este hilo 💪
@threadreaderapp unroll
• • •
Missing some Tweet in this thread? You can try to
force a refresh
