【React】useEffectとuseLayoutEffectの違い

2023年1月3日React

ReactのuseEffectとuseLayoutEffectの違いを紹介します。

ReactのuseEffectとuseLayoutEffectの違い

まず、前提として、useEffectとuseLayoutEffectの書き方はまったく同じです。 違いは、useEffectを上に書いたとしても、useLayoutEffectの方が先に実行されるという点にあります。

useEffectとuseLayoutEffectの共通した使い所

useLayoutEffectは基本的には、useEffectと同じ場面で使用します。 たとえば、 コンソールへのログ出力 DOM操作 サーバーとの通信 タイマー処理 ランダムな値の生成 ローカルストレージへの操作 などです。 DOM操作というのは、document.bodyなどdocumentやwindowオブジェクトにアクセスする処理のことです。 これは、useEffect内で書かなくても機能しますが、SSRでNode.js上でも使う場合があり、そのときNode.jsではdocumentやwindowオブジェクトはないためエラーになります。useEffect内に記述することでNode.js上では実行されなくなります。SSRといったマルチプラットフォームのケースがあるため、useEffect内部で使用します。

useLayoutEffectの使い所その1

たとえば、ローカルストレージになにかを保存する処理など、useEffectが呼ばれて初期化されたら困るようなものがあります。 そのような、先に実行しておきたい処理内容は、useLayoutEffectに記述するのがいいです。

useLayoutEffectの使い所その2

useEffectを使ったときに画面のチラツキや、stateの初期値が一時的にちらっと表示されてしまう場合、useLayoutEffectに変更します。 その理由は以下です。

useLayoutEffectの実行タイミング

useEffectは、コンポーネントがレンダリングされて、新しい要素が画面に表示されたあとに実行されます。 それに対し、useLayoutEffectは、コンポーネントがレンダリングされて、新しい要素が画面に表示される前に、実行されます。そのため、初期値のチラツキなどは起こらないようになります。