React Query でデータベース クエリのパフォーマンスを最適化するためのヒント

React Query でデータベース クエリのパフォーマンスを最適化するためのヒント

React Query は、フロントエンド アプリケーション プログラムのパフォーマンスを最適化するための便利なツールを多数提供する強力なデータ管理ライブラリです。中でも、データベース クエリのパフォーマンスの最適化は、注目に値する重要な側面です。この記事では、React Query でデータベース クエリのパフォーマンスを最適化するためのヒントと、具体的なコード例について説明します。

1. バッチ クエリ

React Query では、useQuery フック関数を使用して単一のデータ クエリを実行するのが一般的です。ただし、複数の同様のデータをクエリする必要がある場合は、バッチ クエリを使用するとパフォーマンスが大幅に向上します。データベースから複数のユーザー情報を例に取ると、各ユーザーを個別にクエリするのではなく、すべてのユーザー ID を含む配列を渡すことで、ユーザー情報をバッチで取得できます。

import { useQuery } from 'react-query';

const getUsers = async (ids) => {
  const response = await fetch(`/api/users?ids=${ids.join(',')}`);
  const data = await response.json();
  return data;
};

const UserList = () => {
  const userIds = [1, 2, 3, 4, 5];
  const { data } = useQuery(['users', userIds], () => getUsers(userIds));
  
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

2. データ キャッシュ

デフォルトでは、React Query は、後続のコンポーネントのレンダリングで使用するために、クエリによって返されたデータをメモリにキャッシュします。これは、複数のコンポーネントが同じクエリ結果を使用する必要がある場合、React Query はクエリを 1 回だけ実行し、複数のコンポーネントが同じデータを共有することを意味します。このデータ キャッシュ メカニズムにより、不必要なデータベース クエリが大幅に削減され、パフォーマンスが向上します。

const UserProfile = ({ userId }) => {
  const { data } = useQuery(['user', userId], () => getUser(userId));
  
  return (
    <div>
      <h2>{data.name}</h2>
      <p>{data.email}</p>
      <p>{data.bio}</p>
    </div>
  );
};

const UserPage = () => {
  const userIds = [1, 2, 3, 4, 5];
  
  return (
    <div>
      <h1>User Page</h1>
      {userIds.map(userId => (
        <UserProfile key={userId} userId={userId} />
      ))}
    </div>
  );
};

3. データ プリフェッチ

事前に読み込む必要がある一部のデータについては、データ プリフェッチ機能を使用すると、ページの読み込み速度が向上します。 React Query は、コンポーネントのレンダリング前のデータのプリフェッチとローカルでのキャッシュをサポートしています。こうすることで、コンポーネントがレンダリングされるときに、必要なデータがすでにキャッシュ内に存在するため、追加のクエリは必要ありません。

import { useQueryClient } from 'react-query';

const Home = () => {
  const queryClient = useQueryClient();
  
  useEffect(() => {
    queryClient.prefetchQuery('users', getUsers);
    queryClient.prefetchQuery('posts', getPosts);
  }, []);
  
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

4. データ更新

データベース更新操作が完了すると、React Query は関連コンポーネントのデータを自動的に更新し、再レンダリングできます。これは、更新操作を手動でトリガーする必要がなく、データ更新プロセスが React Query 内にカプセル化されていることを意味します。こうすることで、データの整合性を気にせずにビジネス ロジックの実装に集中できます。

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

const updateUser = async (userId, newData) => {
  const response = await fetch(`/api/users/${userId}`, {
    method: 'PUT',
    body: JSON.stringify(newData),
    headers: { 'Content-Type': 'application/json' },
  });
  
  if (!response.ok) {
    throw new Error('更新用户失败');
  }
};

const UserProfile = ({ userId }) => {
  const queryClient = useQueryClient();
  
  const { data } = useQuery(['user', userId], () => getUser(userId));

  const updateUserMutation = useMutation(newData => updateUser(userId, newData), {
    onSuccess: () => {
      queryClient.invalidateQueries(['user', userId]);
    },
  });
  
  const handleUpdateUser = (newData) => {
    updateUserMutation.mutate(newData);
  };
  
  return (
    <div>
      <h2>{data.name}</h2>
      <p>{data.email}</p>
      <p>{data.bio}</p>
      <button onClick={() => handleUpdateUser({ name: 'new name' })}>
        更新用户
      </button>
    </div>
  );
};

上記は、React Query でデータベース クエリのパフォーマンスを最適化するための一般的なヒントとコード例です。バッチ クエリ、データ キャッシュ、データ プリフェッチ、およびデータ更新を通じて、不必要なデータベース クエリを削減しながら、フロントエンド アプリケーションのパフォーマンスを大幅に向上させることができます。この記事が、React Query でデータベース クエリを最適化するためのヘルプとガイダンスを提供できれば幸いです。

以上がReact Query でデータベース クエリのパフォーマンスを最適化するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。