Reactでのデータ取得の技術

さて、Reactで開発していると必ずぶつかる壁がありますよね。それがデータの取得です。 今回はこのテーマをちょっと深掘りしていきましょう。最高のUIを組み上げたと思った後、必ずこの問題がやってきますよね。 この問い、UIを作ったことがある人ならみんな一度は考えたことがあるはず。静的なコンポーネントにどうやってリアルタイムの命を吹き込むのか。今日の話はまさにここから始まります。 まず、多分みんなが最初に習うであろう定番のアプローチから見ていきましょうか。 今回はHTTP通信を簡単にしてくれる人気のライブラリー Axios と React の useEffect フック。この2つを組み合わせた最も一般的な方法です。 この手動でのデータ取得プロセス、お馴染みの流れですよね。まずローディング中ですよっていう状態、ローディングをtrueにしてAPIを叩く。 成功すればデータをセットして、もし失敗したらエラーをセットする。この一連の流れを僕らが1つ1つ手で実装していくわけです。 これが実際のコード。もちろんちゃんと動きます。でも実はこのコード、いくつかの複雑な問題とか、思わぬ落とし穴を隠してるんですよ。 一見シンプルで正しいように見えるこのパターンが、なぜ後々僕らを悩ませるようになるのか、その理由を一緒に紐解いていきましょう。 ここからが本題です。このいわば教科書通りの方法が、実際のアプリケーションというプレッシャーの下でどんな問題を引き起こすのか見ていきましょう。 useEffectで一番やっちゃいがちで、何よりイライラさせられるバグ、それがこの無限ループです。きっとこれに時間を溶かした経験がある方も多いんじゃないでしょうか。うわーってなりますよね、これ。 そして、このスライドがその原因をばっちり示してくれてます。useEffectの第2引数、いわゆる依存配列をうっかり忘れちゃうとどうなるか。 コンポーネントはデータを持ってきてステートを更新する。すると再レンダリングが走ってまたデータを持ってきて、これをもう永遠に繰り返しちゃうんです。 たった1つ、この空の配列 `[]` を追加するだけで、これをコンポーネントが表示された最初の1回だけに制限できるんですね。 よし、無限ループを直したぞって安心するのはまだ早いんです。もしユーザーがデータの到着を待たずに別のページへ移動してしまったら、また別の、もっと静かな問題が顔を出してくるんです。 これがReactにおけるメモリーリークです。コンポーネントはもう画面上にはいないのに、非同期で取ってきてたデータがちょっと遅れて到着して、もういないはずの誰かの状態を更新しようとしちゃう。 コンソールで一度は見たことがあるあの警告ですよね。この問題の解決策がこちらです。 要はコンポーネントが不要になったら、つまりユーザーがページを離れたら、進行中のデータ取得リクエストそのものを中止してあげる必要があります。 これを実現するためにuseEffectから関数を返す、いわゆるクリーンアップ処理を実装してリクエストを断ち切るわけですね。 そして最後の罠が、もう正直言って面倒くさいこの繰り返し作業です。考えてみてください。 たった1つのAPIを呼ぶために、ローディング管理、エラー管理、そしてさっきのクリーニング処理まで、これだけのほとんど同じような定型コードを毎回毎回書かなきゃいけないんですよ。 さて、ここまで問題点をたくさん見てきました。もうこんな面倒なことやめません。 これらすべてを、もっとスマートに、もっとエレガントに解決してくれる方法はないんでしょうか。あるんです。 まさにこの引用が示す通り、TanStack Query、通称React Queryは、僕らが今見てきたような問題を解決するためにだけに作られた超強力なライブラリーなんです。 サーバーとのやり取り周りを劇的に、本当に劇的にシンプルにしてくれます。 これがReact Queryの魔法です。さっき僕らを悩ませた無限ループ、メモリーリーク、そしてうんざりするほどのボイラープレートコード。 これらすべてをこのライブラリーが裏側で賢く吸収して、僕らに意識させないようにしてくれるんです。すごいですよね。 では、最も重要なポイントです。その違いがどれほどのものか。もう言葉で説明するより、実際のコードを並べてその目で確かめてもらうのが一番早いです。見てみましょう。 これがこの解説のクライマックスです。見てください、この劇的な変化を。信じられます？あれだけ長々と書いていた状態管理とか、非同期処理のコードがたった1行、たった1行のカスタムフック呼び出しに置き換わってるんです。 適切なツールを選ぶことのパワーをこれ以上なく示してますよね。つまり、React Queryはただコードを短くするだけじゃないんですよ。 データ取得に伴うありとあらゆる複雑さを抽象化してくれて、僕ら開発者が本当に集中すべきアプリケーションのコアなロジックに専念させてくれるんです。 最後にこの問いを考えてみてください。もしもう二度とローディングスピナーやエラーメッセージの表示ロジックを手で書かなくていいとしたら。 React Queryがもたらすのは単なるコードの削減じゃありません。それは僕らの開発体験そのものを、もっと創造的で、もっと楽しいものへと変革する力を持っているんです。 あなたの次のプロジェクトでぜひこの力を体験してみてはいかがでしょうか。