UseEffectによる副作用の処理

useEffect フックは、データの取得、サブスクリプション、手動での変更など、外部要因やサービスとコンポーネントを同期するための手段。

構文:

最初の引数（setup）は、すべてのレンダー後に実行されるアロー関数。2 番目の引数（dependencies）はオプションの配列で、dependencies が指定された場合は依存関係のいずれかが前回のレンダーから変更されたときのみエフェクトが再実行される。依存配列を省略すると、すべてのレンダー後にエフェクトが実行される。

useEffect(setup, dependencies)

setup はアロー関数、dependencies は配列であることが分かっているため、useEffect フックの記述例は次の通り。

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

例 1:

Articlesコンポーネントを作成し、useEffectフックを利用してarticlesステートにデータを割り当てます。これは、Reactフックの強力な組み合わせを体験する絶好の機会です。

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

このコンポーネント内では、useEffectフックを活用してarticlesステートにデータが格納されるようにしています。前述の通り、useEffect関数は各レンダー後に実行されるため、データが取得できればユーザーに表示されます。これにより、常に最新のコンテンツが表示されるシームレスなユーザー体験が実現されます。

行ごとの説明：

• 1行目: ReactライブラリからuseEffectとuseStateフックをインポートし、その機能を利用;
• 2行目: fetchData関数を"../service/api"からインポート。この関数はAPIリクエストを行い、データを取得する役割;
• 4行目: Articlesコンポーネントを一般的な関数構文で定義;
• 5行目: useStateフックを使って状態を初期化し、articles変数の初期値を表す。この例では空配列;
• 7〜15行目: useEffectフックの実際の使用例;
  • 7行目と15行目: 構文。これが使用方法;
  • 8行目: fetchData関数を呼び出し。APIリクエストを行い、Promiseを返すことが期待される;
  • 9〜11行目: Promiseが解決されたとき（thenブロック）、resp オブジェクトを受け取る。resp から resp.jokes を使ってデータを抽出し、setArticles で articles の状態に設定;
  • 12〜14行目: APIリクエスト中にエラーが発生した場合（catchブロック）、console.errorでコンソールにログ出力;
• 17〜19行目: コンポーネントのマークアップをレンダリング。

例2：

Counterコンポーネントを作成し、counter値を追跡。タスクは、counter変数の値が変更されるたびにその値をログ出力すること。これを実現するために、依存配列にuseEffect変数を含めたcounterフックを利用。

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

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

行ごとの説明：

• 1行目: ReactライブラリからuseEffectとuseStateフックをインポートし、その機能を利用;
• 3行目: 一般的な関数構文で「Counter」コンポーネントを定義;
• 4行目: useStateフックを使って状態を初期化し、count変数の初期値を表す。この例では0;
• 6〜8行目: useEffectフックの実際の使用例;
  • 7行目: 依存配列内の値が変更されるたびにこのロジックが実行される。この場合はcount変数;
  • 8行目: 依存配列。Reactにcount変数の値が変更されたときにuseEffectフック内のコードを実行するよう指示;
• 14〜19行目: コンポーネントのマークアップをレンダリング。

コンソールを確認し、useEffect フック内のアロー関数の実行ロジックを観察してください。アロー関数は初回レンダー時に実行され、その後 counter 変数の値が変化するたびに再度呼び出されます。この挙動は、コンソールに表示される対応するログを観察することで確認できます。