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行目：useEffect と useState フックを React ライブラリからインポートし、その機能を利用;
• 2行目：fetchData 関数を "../service/api" からインポート。この関数は API リクエストを実行し、データを取得する役割;
• 4行目：Articles コンポーネントを一般的な関数構文で定義;
• 5行目：useState フックを使って state を初期化し、articles 変数の初期値を表現。この例では空配列;
• 7〜15行目：useEffect フックの実際の使用例;
  • 7行目と15行目：構文。これが使用方法;
  • 8行目：fetchData 関数を呼び出し。API リクエストを実行し、Promise を返すことを想定;
  • 9〜11行目：Promise が解決された場合（then ブロック）、resp オブジェクトを受け取る。resp からデータを抽出し、resp.jokes から取得したデータを setArticles で articles state に設定;
  • 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変数の値が変化するたびに再度呼び出されます。この挙動は、コンソールに表示される対応するログで確認できます。