KaQiita

新米 Web エンジニアが適当なことを書いてます。温かく見守ってやってください。

【React】useLayoutEffect とは?useEffect との違いについて

はじめに

業務で React を書いていて久しぶりに useEffect を使う機会があり、ドキュメントを読んで確認していると useLayoutEffect という似たような hooks があることを知りました。

そこで、せっかく出会ったので少しまとめてみることにしました。

useEffect について

まずは、useEffect の復習から。

公式ドキュメントに分かりやすく書かれているので、この記事よりこちらを読んだ方が良いかもしれません。

ja.reactjs.org

以下でも公式ドキュメントの例を使って説明します。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect に書かれた処理は、レンダリング後に行われます。

この例では、レンダリング後にドキュメントのタイトルを count という state を使ってセットし直しています。

これをコンポーネント内に書いておくことで、特別な API を使わずとも state である count にアクセスすることができます。

useLayoutEffect について

useLayoutEffect は、上記で説明した useEffect とほとんど同じです。

ただコールバック関数が実行されるタイミングが異なります。

useEffectレンダリング処理が終わった段階で渡された関数を実行しますが、useLayoutEffectレンダリング処理が終わってその結果が DOM に反映された後にコールバック関数が実行されます。

つまり、useEffect を使っている場合はコールバック関数の処理が完了する前の DOM がユーザーに一瞬見えてしまうことがありますが、useLayoutEffect はこれを防いでくれます。

これはクラスコンポーネントcomponentDidMountcomponentDidUpdate と同じスケジューリングです。

ただその分、ユーザーへのページ表示が遅くなってしまうので大きな問題が起こらない限り useEffect の方を使うべきでしょう。

公式ドキュメントでも、基本的に useEffect の方を使うことが推奨されています。

終わりに

にしていても React Hooks は書いていて楽しいです。

フロントエンドに関してあまり詳しくなく、React Hooks 自体もフロントに強い先輩エンジニアに教えてもらっただけなのですが、これは書いていて面白いなと感じます。

参考文献

ja.reactjs.org ja.reactjs.org kentcdodds.com qiita.com