最終更新:2023-06-08 (木) 19:20:05 (320d)  

useLayoutEffect
Top / useLayoutEffect

画面が描写される前にuseLayoutEffectの中の処理が実行される

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

概要

  • この関数のシグネチャは useEffect と同一ですが、DOM の変更があった後で同期的に副作用が呼び出されます。
  • これは DOM からレイアウトを読み出して同期的に再描画を行う場合に使ってください。
  • useLayoutEffectの内部でスケジュールされた更新はブラウザによって描画される前のタイミングで同期的に処理されます。

可能な場合は画面の更新がブロックするのを避けるため、標準の useEffect を優先して使ってください。

関連