【React】useLayoutEffectってなに？

悩んでいる人

useEffectと何が違うの...？

useEffect は、開発で目にする事が多くあり、僕自身よく使っていましたが、最近useLayoutEffect を初めて目にして、内容を調べてみましたので、記事に残します。

本記事の内容

• useEffectとuseLayoutEffectの違い
• コード例
  • useEffect
  • useLayoutEffect
• 最後に

useEffectとuseLayoutEffectの違い

関数としての機能は、ほぼ一緒で唯一の違いとして、「実行タイミング」が違います。

useEffectはレンダリング後に実行される関数に対し、useLayoutEffectはレンダリング前に実行される関数という違いがあります。

その為、画面描画に影響しない、または、すぐに関数内の処理が実行されなくても問題がない場合はuseEffectを使い、関数内の処理を終えたタイミングで画面を描画させたい場合はuseLayoutEffectを使う、という形で使い分けると良さそうです。

ただ、画面描画の事を考えるとデータを全て取得した時点で表示させたいケースも多々あると思いますが、useLayoutEffectを多用する事は危険です。

何故かというと、関数内の処理が終わらないと画面が描画されないという事は、データ読み込み等の処理で時間がかかった分だけ、描画にも時間がかかってしまい、ユーザービリティを悪くしてしまいます。

なので、基本useEffectを使うようにして、条件付きレンダリングを多用していたり、要件的に処理が終わったタイミングで描画させたい等あれば、useLayoutEffectを使うのが良いと考えます。

コード例

useEffect

import React, { useEffect } from 'react'

export const Sample = () => {

  useEffect(() => {
    console.log("描画後に実行")
  }, [])

  return (
    <div>useEffectのサンプルです！</div>
  )
}

useLayoutEffect

import React, { useLayoutEffect } from 'react'

export const Sample = () => {

  useLayoutEffect(() => {
    console.log("描画前に実行")
  }, [])

  return (
    <div>useLayoutEffectのサンプルです！</div>
  )

最後に

useLayoutEffectを使う場合、データ通信の影響によって、画面が描画されるまでの時間が長くなる可能性があります。それによってユーザービリティを悪くしてしまう原因にもなるので、要件に合わせてuseEffectとuseLayoutEffectを適宜使い分ける事が大事という事ですね。

ただ、useLayoutEffectを使いたいタイミングは、往々にしてありそうだなーっと感じましたので、適したタイミングで使えるよう覚えておきたいと思います！