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