【React Hooks】useEffectについて #useEffect

公式ドキュメントや記事を読んだけどわからないので書きました。

useEffectとは？

関数コンポーネント内で副作用 (サイドエフェクト) を実行するためのフックです。
React Hooks¹ で用意されています。

副作用とは、DOMの更新・データの取得・ロギングなど、関数コンポーネントの出力（レンダリング）に関係ない処理のことです。useEffect を使うことで、レンダリングと副作用を切り離すことができます。

以下が構文です。

useEffect(() => {
  /* 実行させたい副作用関数 */
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 副作用関数の実行タイミングを制御する依存データを記述

挙動

useEffectフックは、 第二引数にある配列のいずれかの要素が作成・更新されたときに第 1 引数の処理を実行します。

useEffect(() => {
  console.log(`filter ステートが更新された: ${filter}`);
}, [filter]);

また、useEffect 内で参照している外部の変数や関数を第二引数の配列を「依存配列」と言います。

空の配列の場合、コンポーネントがマウントされたときのみに第 1 引数の処理を実行します。この配列そのものを省略すると常に副作用が実行されます。

useEffect(() => {
  console.log(`コンポーネントがマウントされた`);
}, []);

一部ユースケース

DOMの更新：コンポーネントがレンダリングされた後にDOMを操作する必要がある場合
データフェッチ：APIからデータを取得し、そのデータに基づいてコンポーネントを更新する場合
イベントリスナー：特定のイベント（例えば、ウィンドウサイズの変更）に対してリスナーを設定し、そのイベントが発生したときにコンポーネントを更新する場合

典型的には、「React が DOM を更新した後で何らかの追加コードを実行したい」 という場合に useEffect フックを使うようです。

useEffectの使用例

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

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

  // レンダリング後に実行される
  useEffect(() => {
    document.title = `${count} clicks`;
  });

  return (
    <>
      <p>{count} clicks</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </>
  );
}

クラスを書かずとも state など React の機能が使えます。フックには useState, useContext など種類があり、基礎的なものはこの記事がわかりやすいかと思います。https://qiita.com/seira/items/f063e262b1d57d7e78b4 ↩