¿ 후크 useLayoutEffect를 사용하시겠습니까?

Y ¿Cuál es la diferencia con el hook useEffect ?

useLayoutEffect는 다른 용도로 사용할 수 있는 유사한 작업과 유사합니다.

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 dependencys.

React.useEffect(() => {
  // do something
}, [array, dependency])

React.useLayoutEffect(() => {
  // do something
}, [array, dependency])

Relacionado: Hablamos sobre la lista de dependencie este post

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.
Tu efecto se ejecutará así:

El componente se realiza por algún cambio de estado, props o el padre se re-renderiza

React renderiza el componente

La pantalla se realiza "visualmente"

Tu efecto es ejecutado!! 🎉

고려 사항 에스테 페케뇨 y restringido ejemplo

const Counter = () => {
    const [count, setCount] = React.useState(0)
    React.useEffect(() => {
      // Ejecuta el efecto
      sendToServer(count)
    }, [count])
    return (
      <>
        <h1> Valor actual {count} </h1>
        <button onClick={() => setCount(count => count + 1)}>
            Plus 1
        </button>
       </>
    )
 }
...
...
// render
<Counter />

Cuando el component es renderizado, podrás ver en pantalla el mensajeValor actual 0
Y con cada click en el botón, el estado del contador se realizará, y el DOM mutará para pintar el nuevo mensaje en la pantalla, y después el efecto será emitido.

Recuerda: El efecto se emitirá solo después que los cambios del DOM sean pintados en la pantalla

죄악 금수 조치, 사일로 퀘 투스 효과 무텐 DOM 캄비안도 라 아파리엔시아 데 에스테 엔트레 엘 렌더리자도 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 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.

useLayoutEffect에 대한 실행 명령:

El componente se realiza por algún cambio de estado, props o el padre se re-renderiza

React renderiza el componente

Tu efecto es ejecutado!!

La pantalla se realiza "visualmente"

React.useEffect(() => {
    console.log("Efecto desde useEffect");
});
React.useLayoutEffect(() => {
    console.log("Efecto desde useLayoutEffect");
});

¿Cuál será el orden en que esos console.log serán emitidos?
..
..
..
Exácto!!, sin importar que el efecto de useLayoutEffect sea declarado después de useEffect el efecto es emitido antes! ¿포르케?. Por que el efecto de useLayoutEffect es emitido de forma síncrona.

사용 효과에 대한 정의는 사용 효과가 99%에 달할 때까지 유효합니다.

Por lo general tu efecto busca sincronizar algún estado interno con un estado externo sin significar un cambio visual inmediato.

Recomendado: Hablamos sobre el modelo mental de useEffect y como este sincroniza el estado interno del componente con el externo en estos posts

• React useEffect hook comparado con los estados del ciclo de vida
• Algunos errores comunes al utilizar React Hooks

useLayoutEffect를 사용하시겠습니까?

Literalmente verás el momento de usarlo.

DOM, Otro, es cuando requieres obtener mediciones del DOM이 "깜박이는"구성 요소를 사용하여 구성 요소를 구성할 수 있습니다.

Mira el siguiente ejemplo:



Este es un simple ejemplo que renderiza un cuadrado verde que por defecto (revisa el archivo style.css) en la esquina superior derecha. El efecto definido lo mueve hacia la esquina lower derecha.

Deberías poder ver por un momento (si no loves, prueba realizar el sandbox), un cambio muy rápido. El cuadrado se "mueve"de posición, esto es por que el efecto se ejecuta después de que React termina de rederizar y mutar el DOM.

Ten en mente que manejar los elementos del DOM de esta manera es un anti-patrón pero que puede ser resuelto utilizando useRef

Ahora, veamos lo mismo pero utilizandouseLayoutEffect


Ejemplosimilar, el cuadrado rojo, está definido para que se renderice en la esquina superior derecha y el efecto lo mueve a la esquina lower izquierda, pero esta vez no hay "movimiento rápido"(깜박임). Incluso, aunque refresques el sandbox, el cuadrado estará siempre en el mismo lugar, esto por que useLayoutEffect ejecuta el efecto antes de que el DOM sea pintado.