useEffect から React Query まで: React でのデータ管理の最新化

現代の Web 開発環境では、サーバー側のデータを効率的に管理する、高速で応答性の高いアプリケーションを構築することがこれまで以上に重要になっています。 React でデータをフェッチする従来の方法、特に useEffect を使用すると、多くの場合、複雑な状態管理、コードの繰り返し、パフォーマンスの問題が発生する可能性があります。 React Query を使用すると、開発者は定型コードを最小限に抑えながら、自動キャッシュ、バックグラウンド取得、組み込みのミューテーション サポートなどの機能を利用できます。

この記事では、React Query の核となる概念を探り、React Query をプロジェクトに統合する方法を示し、開発ワークフローを大幅に改善できる強力な機能に焦点を当てます。 React アプリケーションでデータをフェッチ、キャッシュ、同期する方法を変革する準備をしましょう!

React Effects を使用したデータの取得をやめるべき理由

データの取得に React の useEffect を使用することは完全に有効ですが、React Query のような専用のデータ取得ライブラリを優先して、React の useEffect を使用しないことを検討する理由がいくつかあります (React のドキュメントでも、データの取得に React Query を使用することを推奨しています)。

データの取得にエフェクトを使用する場合のいくつかの欠点は次のとおりです。

• パフォーマンスの問題: 「ネットワーク ウォーターフォール」と不必要な再フェッチは、React useEffect を使用するときによくある問題の一部であり、非常に悪いユーザー エクスペリエンスを引き起こす可能性があります。
• 組み込みキャッシュの欠如: useEffect は初期状態ではキャッシュを提供していないため、ネットワーク リクエストが繰り返され、それを管理するための複雑なソリューションが必要になります。
• 状態管理の複雑さ: useEffect を使用して読み込み、エラー、データの状態を手動で管理すると、特にアプリケーションがスケールするにつれて、コードが煩雑でエラーが発生しやすくなる可能性があります。
• エフェクトはサーバー上で実行されません: コンポーネントが最初にレンダリングされるときにデータが利用できない可能性があります。

React クエリの仕組み

React Query は、React アプリケーションでのデータの取得と状態管理を簡素化するように設計された強力なライブラリです。 React Query の仕組みを詳しく説明します:

1. データのクエリ

• useQuery フック: React Query の中核は useQuery フックです。このフックを使用すると、サーバーからデータを取得し、その状態 (読み込み、エラー、データなど) を自動的に管理できます。
• クエリ キー: 各クエリは一意のキー (配列内の 1 つ以上の文字列) によって識別されます。このキーは、React Query のキャッシュとデータの効率的な管理に役立ちます。

2. キャッシング

• 自動キャッシュ: データがフェッチされると、React Query はそれをキャッシュします。同じクエリが再度実行されると、新しいネットワーク リクエストを作成する代わりに、キャッシュからデータが取得されます。
• 古いデータ管理: データがどのくらいの期間、新しい (古くない) とみなされるかを定義できます。この期間が経過すると、React Query はバックグラウンドでデータを再フェッチします。

3. バックグラウンドの再フェッチ

React Query は、いくつかのシナリオでデータを自動的に再フェッチして、データを最新の状態に保ち、同期を保ちます。これが発生する主な状況は次のとおりです:

• コンポーネントのマウント: コンポーネントがマウントされるとき、データが古いと見なされる場合。
• ウィンドウ フォーカス: ユーザーがタブまたはウィンドウを切り替えて、アプリケーションを含むウィンドウに戻ったときなど、ウィンドウがフォーカスを取り戻すたび。
• ネットワーク再接続: ネットワーク接続が失われ、後で復元された場合。

4. データの突然変異

• useMutation Hook: サーバー上でデータを作成、更新、または削除するプロセスを指します。データを取得するクエリとは異なり、useMutation はデータを変更し、それに関連する副作用を管理するために使用されます。
• 楽観的な更新: ユーザーがデータを変更するアクションを実行すると、そのアクションの予想される結果を反映するために UI がすぐに更新され、ユーザー エクスペリエンスが向上します。

5. クエリの無効化

• React Query を使用すると、キャッシュされたクエリを「古い」としてマークし、次回アクセスしたときに再フェッチされるようにすることができます。これは、変更やユーザー操作などの特定のアクションの後に、UI がサーバーからの最新データを確実に反映するために不可欠です。

6. 自動ガベージコレクション

• React Query は、クエリが使用されなくなり、一定期間非アクティブになった場合、クエリをキャッシュから自動的に削除します。このプロセスはメモリ リークを防止し、関連するデータのみがキャッシュに残るようにするのに役立ちます。

7. 開発ツール

• React Query DevTools は、開発者がクエリ、変更、キャッシュ状態をデバッグおよび監視するのに役立つ、React Query のオプションの使いやすいツールです。これは、クエリの詳細を検査し、React Query がクエリのライフサイクルをどのように管理するかを確認するための視覚的なインターフェイスを提供します。

8. サーバーサイド レンダリング (SSR)

• React Query はサーバーサイド レンダリング (SSR) をサポートしており、クライアントに送信する前にサーバー上のデータをプリフェッチするのに役立ちます。これにより、最初のページの読み込みが速くなり、完全にレンダリングされたページが検索エンジンに提供されるため、SEO が向上します。

Reactクエリの実装方法

ここでは、React Query を使用して React アプリでサーバー データの取得、キャッシュ、更新、同期を管理する方法についてのステップバイステップ ガイドを示します。

ステップ 1: React Query をインストールする

まず、React Query をプロジェクトに追加します。

npm install @tanstack/react-query

ステップ 2: QueryClientProvider をセットアップする

React Query を構成するには、アプリを QueryClientProvider でラップします。このプロバイダーは、キャッシュ、バックグラウンド取得、更新を管理する QueryClient インスタンスを使用します。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

ステップ 3: useQuery を使用してデータを取得する

useQuery フックは API からデータを取得し、それを自動的にキャッシュし、読み込みやエラーなどの状態を処理します。

npm install @tanstack/react-query

• キー (['todos']): 各 useQuery には、データを識別してキャッシュするための一意のキーが必要です。
• クエリ関数 (fetchTodos): この非同期関数は、API から必要なデータを取得します。

ステップ 4: useMutation を使用してデータの突然変異を処理する

useMutation フックは、データの作成、更新、または削除に使用されます。ミューテーションが成功すると、クエリの無効化を使用して関連データを再取得し、アプリの状態を最新の状態に保つことができます。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

• ミューテーション関数 (addTodo): この非同期関数はサーバーの状態を変更します。
• onSuccess: 変更後、このコールバックは ['todos'] クエリを無効にし、データを再フェッチして更新して、新しく追加された todo を表示します。

ステップ 5: デバッグ用のオプションの DevTools

React Query DevTools は、開発中にクエリやキャッシュ ステータスなどを監視するのに役立ちます:

import { useQuery } from '@tanstack/react-query';

function YourComponent() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.map((todo) => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  );
}

// Sample fetch function
const fetchTodos = async () => {
  const response = await fetch('/api/todos');
  return response.json();
};

次に、 を追加します。アプリに:

import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoAdder() {
  const queryClient = useQueryClient();
  const addTodoMutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries(['todos']);
    },
  });

  return (
    <button onClick={() => addTodoMutation.mutate({ title: 'New Todo' })}>
      Add Todo
    </button>
  );
}

const addTodo = async (newTodo) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

結論

データの取得と副作用のために useEffect を React Query に置き換えることは、最新の React アプリケーションを構築する場合に非常に推奨されます。

React Query は、React アプリでのサーバー側データの処理方法を変革し、複雑な状態管理を簡素化する、より宣言的なアプローチを提供します。キャッシュ、バックグラウンド同期、クエリの無効化などの強力な機能を活用することで、応答性が高くパフォーマンスの高いアプリケーションを作成できます。そして最後に重要なことですが、React Query DevTools を統合すると、監視とデバッグが容易になり、アプリのデータ フローがスムーズかつ透過的になります。

シンプルなシングルページ アプリを構築している場合でも、複雑なデータ量の多いアプリケーションを構築している場合でも、React Query を使用すると、より少ない労力で、より高速でスマート、よりユーザー フレンドリーなアプリを構築できます。

以上がuseEffect から React Query まで: React でのデータ管理の最新化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。