【React】useEffectとuseLayoutEffectの違い

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

React

Posted by devsakaso