【ITニュース解説】🔹 `useEffect` – Efectos secundarios y ciclo de vida 2/8

ReactのuseEffectフックは、Reactコンポーネントが外部システムと連携し、「副作用」と呼ばれる特定の処理を実行するための強力な仕組みである。コンポーネントが表示された後や、特定の値が変更されたときに、データ取得、イベントリスナーの設定、DOMの直接操作、タイマーの管理といった、コンポーネント自身のレンダリング結果以外の世界に影響を与える操作を行う必要がある場合にこのフックを使用する。これは、かつてクラスコンポーネントで使われていたcomponentDidMount、componentDidUpdate、componentWillUnmountといったライフサイクルメソッドの役割を、関数コンポーネントでよりシンプルかつ柔軟に実現するために導入された機能である。

useEffectの基本的な構文は、主に二つの部分から構成される。一つは実行したい「効果」のコードを記述する関数、もう一つはその効果を実行するタイミングを制御する「依存配列」である。具体的には次のようになる。

Copy
1useEffect(() => {
2  // ...ここに実行したい効果のコードを記述する...
3
4  return () => {
5    // ...これはオプションの「クリーンアップ関数」である...
6  };
7}, [依存する変数や値]);

この構文の中で最も重要なのが「依存配列」だ。この配列に何を設定するかによって、効果がいつ実行されるかが決定される。 まず、[ dependencia1, dependencia2 ]のように特定の変数や値を配列に含めた場合、useEffect内のコードは、これらの依存する変数のいずれかが前回のレンダリング時と比べて変更された場合にのみ実行される。これは最も一般的なパターンであり、コンポーネントの状態やプロパティに応じて効果を再実行したいときに利用する。 次に、[]のように空の配列を指定した場合、効果はコンポーネントが最初に画面に表示された後、一度だけ実行される。これは、初期データの取得や、一度だけ設定したいイベントリスナーなど、コンポーネントの初期化処理に最適であり、クラスコンポーネントのcomponentDidMountに相当する動作である。 最後に、依存配列を全く提供しない場合、効果はコンポーネントがレンダリングされるたびに毎回実行される。これは予期せぬ動作や無限ループを引き起こす可能性があるため、通常は避けるべきであり、細心の注意が必要となる。

useEffectの内部で返される関数は「クリーンアップ関数」と呼ばれ、これはオプションで定義できる。このクリーンアップ関数は、現在の効果が再度実行される前、またはコンポーネントが画面から取り除かれる（アンマウントされる）ときに実行される。例えば、イベントリスナーを設定した場合、コンポーネントが不要になったときにそのリスナーを解除しなければ、メモリリークや意図しない動作の原因となる。タイマーやデータ購読なども同様で、クリーンアップ関数を使ってそれらを適切に停止または解除することが非常に重要である。

具体的なuseEffectの活用例として、外部APIからデータを取得する場面が挙げられる。例えば、ユーザーが入力したポケモンの名前pokemonNameに基づいて、そのポケモンの情報を表示するコンポーネントを考える。

Copy
1import React, { useState, useEffect } from 'react';
2
3function PokemonInfo({ pokemonName }) {
4  const [pokemon, setPokemon] = useState(null);
5  const [loading, setLoading] = useState(true);
6  const [error, setError] = useState(null);
7
8  useEffect(() => {
9    if (!pokemonName) return; // 名前がなければ何もしない
10
11    setLoading(true);
12    setError(null);
13    setPokemon(null);
14
15    fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`)
16      .then(response => {
17        if (!response.ok) {
18          throw new Error('ポケモンが見つかりませんでした');
19        }
20        return response.json();
21      })
22      .then(data => {
23        setPokemon(data);
24      })
25      .catch(error => {
26        setError(error.message);
27      })
28      .finally(() => {
29        setLoading(false);
30      });
31
32  }, [pokemonName]); // pokemonNameが変更されたときだけ効果を再実行
33
34  // ...ローディング中、エラー時、データ表示のUIロジック...
35}

この例では、useStateを使ってポケモンのデータ、ローディング状態、エラー状態を管理している。useEffectの内部では、pokemonNameが変更されるたびに新しいデータをfetch関数で取得し、その過程でローディング状態を更新したり、エラーが発生した場合はそれを捕捉して表示したりする。pokemonNameを依存配列に含めることで、入力された名前が変わるたびにAPI呼び出しが再実行されるが、それ以外のコンポーネントの再レンダリングでは不要なデータ取得は行われない。

useEffectを効果的に使うための良いプラクティスがいくつか存在する。まず、「一つの効果に一つの責任」という原則を守ることである。関連性のないロジック（例えば、データフェッチングとイベントリスナーの設定）は、それぞれ別のuseEffectに分割すると、コードが読みやすく、管理しやすくなる。次に、イベントリスナーやタイマーなど、リソースを消費する副作用を設定した場合は、必ずクリーンアップ関数でそれらを解除すること。これにより、メモリリークを防ぎ、アプリケーションの安定性を保つことができる。また、依存配列の指定を忘れないことも非常に重要である。Reactの開発ツールやリンターは、useEffect内で使用されているが依存配列に含まれていない変数を警告してくれる場合が多い。これらの警告を無視すると、予期せぬバグの原因となるため、注意深く対応すべきである。もし依存配列に関数を加える必要がある場合は、その関数がレンダリングのたびに再定義されないよう、useCallbackフックを使ってメモ化するか、useEffectフックの内部で関数を定義することを検討すると良い。

useEffectを使う上で初心者が陥りやすい一般的なエラーとその回避策も理解しておくべきである。 一つは「無限ループ」である。依存配列を指定せずにuseEffect内で状態を更新するコードを書くと、状態の更新がコンポーネントの再レンダリングを引き起こし、その再レンダリングが再びuseEffectを実行し、さらに状態を更新するという無限のサイクルに陥ってしまう。これを防ぐには、必ず依存配列を指定し、効果の実行タイミングを制御する必要がある。例えば、初回レンダリング時のみ実行したいなら空配列[]を指定し、特定の値が変更されたときだけ実行したいならその値を依存配列に含める。 もう一つは「古いデータ（stale state）」を参照してしまう問題である。例えば、コンポーネントの状態変数countを使い、依存配列を空[]にしてsetIntervalでcountの値をログ出力するuseEffectを書いた場合、setIntervalが設定された時点のcountの値（通常は0）を常に参照し続けてしまう。これは、setIntervalのコールバック関数が一度だけ作成され、その時点のcountの値を「記憶」してしまうためである。この問題を解決する方法はいくつかある。一つは、countを依存配列に追加することだが、これはcountが変更されるたびにsetIntervalが再設定されるため、パフォーマンスに影響を与える可能性がある。より良い解決策は、状態更新関数（setCountなど）にコールバック形式を使用することである。setCount(c => c + 1)のように記述すると、Reactは状態の最新値をcとして提供してくれるため、useEffectの依存配列にcountを含める必要がなくなり、setIntervalも一度だけ設定される。

このように、useEffectはReactコンポーネントが外部と協調するための非常に柔軟で強力なツールである。その仕組みと正しい使い方を理解することは、堅牢で効率的なReactアプリケーションを開発する上で不可欠である。