hook LayoutEffetsとは何ですか?

hook-flowというプロジェクトが保存されています.

useLayoutEffect

useLayoutEffect(() => {
  effect
  return () => {
    cleanup
  };
}, [input])

useEffect

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

userlayoutEffectとuserEffectは同じ形式を有する.

userlayoutEffectとuserEffectの違い

userEffect hookを使用すると、DOMのレイアウト配置とフェードアウトが完了した後にこの効果関数が呼び出されます.
したがって,状態値が効果に依存すると,少し不便なユーザ体験を招く可能性がある.
useLayoutEffect Hookは、これらの問題を解決するために現れたHookです.

LayoutEffect Hookは上の画像のようにブラウザが画面を塗装する前に実行し、画面にDOMを描画する前に実行し、コードの実行順序も変化します.
TL;DR

userEffectの効果は、DOMが画面に描画された後に呼び出されます.

userLayoutEffectの効果は、DOMが画面に表示される前に呼び出されます.

したがって、レンダリングする状態を効果領域で初期化する必要がある場合は、useLayoutEffectを使用してユーザーエクスペリエンスを取得します.

[注]https://merrily-code.tistory.com/46