ReactのuseEffectの処理内容と使う場面

React コンポーネント hooks

useEffectとは何か

useEffectは、Reactフックの1つであり、コンポーネントのレンダリングサイクルの中で副作用を処理するために使用されます。
これは、API呼び出し、イベントの登録、タイマーのセットなどの非同期な操作を行う際に特に便利です。
useEffectは、コンポーネントがマウントされたとき、特定のプロパティが変更されたとき、またはコンポーネントがアンマウントされたときに実行されるコードを指定することができます。

useEffectの基本的な構文は以下の通りです。

import React, { useEffect } from 'react';

function MyComponent() {
  // useEffectの第1引数には副作用のコードが入ります
  useEffect(() => {
    // ここに副作用のコードを書く
    console.log('useEffectが実行されました');

    // クリーンアップ関数を返すことができます
    return () => {
      console.log('クリーンアップ関数が実行されました');
    };
  }, []); // 第2引数には監視対象の変数を指定します
  // 空の配列の場合、コンポーネントがマウントされたときに1回だけ実行されます

  // コンポーネントの描画など他のコードもここに含まれます

  return (
    <div>
      {/* コンポーネントの中身 */}
    </div>
  );
}

useEffectの第1引数には実行される副作用のコードが入ります。
第2引数は依存する変数のリストで、このリスト内の変数が変更されたときにuseEffectが再実行されます。
空の配列を指定すると、コンポーネントがマウントされたときに1回だけ実行され、アンマウント時にクリーンアップ関数が実行されます。

これにより、非同期な操作を行う際にリソースのリークを防ぎ、適切なタイミングで副作用を制御することができます。

useEffectを使う場面

useEffectはReactで非同期な操作や副作用を行う場面で非常に有用です。
以下は、useEffectを使用する一般的な場面です。

1. データの取得やAPI呼び出し
ページがロードされたときや特定の状態が変化したときに、サーバーからデータを取得するためにuseEffectを使用できます。
これにより、非同期操作を実行し、取得したデータをコンポーネントの状態に設定できます。

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error('データのフェッチ処理でエラーが発生:', error);
    }
  };

  fetchData();
}, []); // 空の配列はマウント時に1回だけ実行

2. イベントの登録や解除
useEffectを使用してコンポーネントがマウントされたときにイベントを登録し、アンマウント時にイベントの購読を解除することができます。

useEffect(() => {
  const handleResize = () => {
    // ウィンドウのリサイズ時の処理
  };

  // イベントの登録
  window.addEventListener('resize', handleResize);

  // クリーンアップ関数でイベントの解除
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 空の配列はマウント時に1回だけ実行

3. タイマーの設定やクリア
useEffectを使用してタイマーを設定し、コンポーネントがアンマウントされたときにタイマーをクリアできます。

useEffect(() => {
  const timerId = setInterval(() => {
    // 定期的な処理
  }, 1000);

  // クリーンアップ関数でタイマーのクリア
  return () => {
    clearInterval(timerId);
  };
}, []); // 空の配列はマウント時に1回だけ実行

4. 外部ライブラリの初期化
外部ライブラリやリソースの初期化や解放をuseEffect内で行うことができます。

useEffect(() => {
  // 外部ライブラリの初期化

  // クリーンアップ関数で解放
  return () => {
    // 外部ライブラリの解放
  };
}, []); // 空の配列はマウント時に1回だけ実行

これらの例は、useEffectが非同期な操作や副作用をコンポーネントのライフサイクルに合わせて処理する方法になります。