【ITニュース解説】Stop Using useEffect for Data Fetching

Reactアプリケーション開発において、外部のサーバーからデータを取得する作業は非常に一般的で重要な機能の一つだ。しかし、このデータ取得をどのように実装するかは、アプリケーションの安定性や保守性に大きく影響する。特に、Reactの標準機能であるuseEffectフックを使ってデータ取得を行う場合、その使い方を誤ると予期せぬ重大な問題を引き起こす可能性がある。最近、大手IT企業であるCloudflareで発生したシステム障害は、このuseEffectの誤用が原因であったと報告され、React開発者の間で大きな話題となった。

Cloudflareの事例では、彼らが開発していたReactダッシュボードで利用されていたuseEffectフックが原因で、本来意図しない大量のAPIリクエストがバックエンドのサーバーに送信された。具体的には、useEffectフックの「依存配列」に問題のあるオブジェクトが含まれていたことが直接の原因だった。依存配列とは、useEffectが中の処理をいつ再実行すべきかをReactに伝えるための重要なリストだ。このリスト内の要素が、前回のコンポーネントの描画時と異なる値になった場合、useEffectはその中の処理を再度実行する。Cloudflareのケースでは、依存配列内のオブジェクトがコンポーネントが再描画されるたびに「常に新しいもの」として扱われてしまった。結果として、API呼び出しが何度も何度も繰り返され、たった一つのダッシュボードの表示中に、通常であれば一度で済むはずのAPIリクエストが何十回、何百回と実行されてしまったのだ。この小さなミスは、単にユーザーインターフェースが遅くなるだけでなく、バックエンドの認証サービスに過大な負荷をかけ、最終的には複数のAPIにわたる大規模なシステム障害を引き起こすという最悪の事態につながった。この出来事は、useEffectを使ったデータ取得がいかに危険で、開発者に依存関係の追跡、不要な処理の停止、リクエストの制御といった重い負担を課しているかを明確に示した事例だ。

従来のuseEffectを用いたデータ取得では、開発者が手動で多くの状態を管理しなければならない。例えば、データが現在読み込み中かどうかを示すisLoading、データの取得中にエラーが発生したかどうかを示すerror、そして実際に取得したデータそのものを示すuserのような状態を、それぞれuseStateフックを使って定義する必要がある。そして、useEffectの内部で非同期関数（APIを呼び出す関数など）を実行し、データの取得が成功すればuser状態を更新し、失敗すればerror状態を更新し、最終的にisLoadingをfalseに設定するといった一連の処理を手書きで記述する必要がある。さらに、より複雑な問題として「競合状態」の回避がある。これは、コンポーネントが画面から削除された後（アンマウントされた後）に、まだ処理中の非同期データ取得が完了し、存在しないコンポーネントの状態を更新しようとしてエラーが発生する可能性を指す。これを防ぐためには、isMountedのような特別なフラグを使って、コンポーネントがまだマウントされているかどうかを確認する「クリーンアップロジック」を別途実装しなければならない。これらの処理は、アプリケーションの様々なコンポーネントでデータ取得を行うたびに繰り返し記述される「ボイラープレート」（定型コード）となり、開発の非効率性だけでなく、バグが混入しやすい原因にもなる。

このようなuseEffectを使ったデータ取得の課題を根本的に解決するために登場したのが、TanStack Query（旧称React Query）のようなデータ取得ライブラリである。TanStack Queryは、データ取得に関する複雑な側面を抽象化し、開発者がより宣言的でクリーンなコードを書けるように設計されている。

TanStack Queryを利用する場合、まずアプリケーションのルート要素にQueryClientProviderというコンポーネントを設定する。これは、TanStack Queryが提供するデータキャッシュなどの機能がアプリケーション全体で利用できるようにするための、いわば初期設定のようなものだ。その後、各コンポーネント内でデータを取得したいときに、useQueryというカスタムフックを利用する。このuseQueryフックは、従来のuseEffectとuseStateを組み合わせて手動で行っていた、ローディング状態、エラー状態、データ本体の管理といった多くの処理をすべて自動で行ってくれる。

useQueryフックには主に二つの重要なオプションを指定する。一つはqueryKeyで、これは取得したいデータに対するユニークな識別子となる文字列の配列だ。例えば、['user', 'deveshsangwan']のように指定する。TanStack QueryはこのqueryKeyを使って内部的にデータをキャッシュしたり、必要に応じてデータを再取得したりする。Cloudflareの事例で問題となった「不安定なオブジェクト参照」ではなく、安定した予測可能な文字列の配列をキーとして使うため、意図しない再フェッチを防ぎ、useEffectの依存配列にまつわる問題を根本的に解決する。もう一つはqueryFnで、これは実際にデータを取得する非同期関数を指定する。この関数は、処理の完了後に結果を返す「Promise」を返し、成功すればデータを、失敗すればエラーをスローする必要がある。

TanStack Queryを使うことの最大の利点は、useEffectや手動での複雑な状態管理が一切不要になる点にある。useQueryフックから返されるdata（実際に取得されたデータ）、isLoading（データが現在読み込み中か）、error（エラーが発生したかどうかの情報）といったプロパティを直接利用するだけで、これらの状態を簡単に扱える。さらに、TanStack Queryはデータの「キャッシュ」や「バックグラウンドでの再フェッチ」といった高度な機能を標準で提供している。キャッシュ機能により、一度取得したデータはメモリ上に保持され、同じqueryKeyで再度データを要求してもAPIへの余計なリクエストを送信せず、即座にキャッシュされたデータを返すことができる。また、バックグラウンドでの再フェッチは、例えばユーザーがアプリケーションのタブを切り替えて戻ってきた時などに、自動的に最新のデータを取得しようと試みる機能であり、常に最新のデータを表示しつつもユーザー体験を損なわない。これらの機能が自動で提供されることで、開発者はデータ取得に関する煩雑な処理から解放され、アプリケーションのユーザーインターフェース（UI）の構築により集中できる。

結論として、useEffectはReactのライフサイクルにおける「副作用」（データ取得、イベントリスナーの設定、DOMの直接操作など、コンポーネントのレンダリングとは独立して行われる処理）を管理するための汎用的なツールであり、データ取得に特化して設計されたものではない。そのため、データ取得のような複雑な処理をuseEffectだけで完結させようとすると、手動での多くの状態管理、複雑なクリーンアップロジック、そして競合状態や意図しない再実行といった、デバッグが困難な問題に直面しやすくなる。TanStack Queryのような専門的なライブラリを導入することで、データ取得に関するこれらの課題が自動的に解決され、コードはよりクリーンで保守しやすくなる。これは、システムエンジニアとして、より堅牢でパフォーマンスの高いアプリケーションを効率的に構築するために不可欠なアプローチだと言える。