React-Query の useQuery の使用をやめてください。

Web アプリケーションでは、読み込み状態とエラー状態の管理が非常に重要です。読み込み状態を表示することでユーザーに常に情報が提供されますが、これまで、この管理を手動で実装するのは面倒な場合がありました。

React Query は、読み込み状態とグローバル状態の処理を大幅に簡素化します。実際、React Query は冗長なリクエストを回避し、それによってアプリケーションのパフォーマンスを最適化します。

アプリケーションに読み込み状態を実装するコード例を見てみましょう。

ユーザーのリストを取得するフックを定義します:

export const useUsers = () => {
  const { data, isLoading } = useQuery<User[]>({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

ここでは、useQuery を使用して 4 人のユーザーを取得します。読み込み状態を示すために 2 秒の遅延を追加します。次に、データと読み込み状態のブール値を返します。

コンポーネント側で、Example:
という名前のコンポーネントを作成しましょう。

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <UsersList users={users} />
    </div>
  );
};

このコンポーネントでは、フックを使用してユーザーのリストを取得します。ビューをレンダリングする前に、読み込みメッセージで「早期リターン」を実行し、タイトル、ボタン、ユーザーを表示します。

制限と代替手段

ただし、各ネットワーク呼び出しでは、読み込み状態を明示的に管理する必要があります。コードが因数分解されていない場合、タイトルやアクションなど、ビューの一部の要素が表示を待機している可能性があります。

ビューのブロックを避けるための代替案を次に示します:

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      {isLoading ? <div>Loading...</div> : <UsersList users={users} />}
    </div>
  );
};

ここでは、「早期リターン」の代わりに条件付きレンダリングを使用します。このソリューションは可読性が低く、複雑なコンポーネントでは保守が困難です。

理想的なソリューション: 汎用読み込みコンポーネント

最も独創的な解決策は、変数に基づいて読み込みメッセージまたはメインコンポーネントをレンダリングするコンポーネントを作成することです。

type Props = PropsWithChildren<{
  isLoading: boolean;
}>;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <>{children}</>;
};

コンポーネントでの使用法

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      ...
      <LoadingWrapper isLoading={isLoading}>
        <UsersList users={users} />
      </LoadingWrapper>
    </div>
  );
};

この因数分解により、条件付きレンダリング ロジックが集中化され、メッセージの読み込みの使用が統合され、よりクリーンで保守しやすいコードが提供されます。

サスペンスの魔法を発見する

しかし、今作成したこのコンポーネントはすでに React に組み込まれていると言ったらどうでしょうか。さらに良いことに、それは魔法です！ isLoading 状態を手動で管理する必要はもうありません!

どうやって？

React の Suspense (React バージョン >= 16.6) を使用すると、すべてがよりシンプルかつクリーンになります。 Suspense を使用すると、コンポーネントが非同期データを待機していることを React に明示的に宣言でき、React がすべての管理を担当します。

useSuspenseQueryの実装

useSuspenseQuery を使用して読み込み状態を自動的に管理してみましょう。その方法は次のとおりです:

ユーザーを取得するためのフック

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery<User[]>(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

サスペンスのあるコンポーネントでの使用法

次に、Suspense を使用するように Example コンポーネントを更新しましょう。

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return <UsersList users={users} />;
};

const Example = (): JSX.Element => {
  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <Suspense fallback={<div>Loading...</div>}>
        <UsersComponent />
      </Suspense>
    </div>
  );
};

サスペンスの利点

Suspense では、読み込み状態の管理を 1 か所に集中させ、コードをより読みやすく、保守しやすくしています。サスペンス フォールバックは、データが利用できない限り自動的に表示されるため、isLoading 状態を手動で管理する必要がなくなります。

さらに、Suspense は開発チームにコードを因数分解することを奨励します。標準化された読み込みコンポーネントと非同期状態ハンドラーを使用することで、開発者は再利用可能で一貫性のあるモジュールを作成できるため、長期的にはコードの品質と保守性が向上します。

結論

Suspense と useSuspenseQuery を使用すると、React アプリケーションの読み込み状態の管理に革命が起こります。このアプローチにより、コードが簡素化されるだけでなく、スムーズで一貫したレンダリングが保証されるため、ユーザー エクスペリエンスも向上します。 useQuery から useSuspenseQuery への移行は、よりクリーンで効率的なアプリケーションを実現するための自然な進化です。

さらに、Suspense を統合すると、開発チームがコードを因数分解することが奨励されます。結論として、Suspense と useSuspenseQuery の採用は、単なる技術的な改善ではなく、より健全で効果的な開発実践への一歩でもあります。

私のニュースレター:D

以上がReact-Query の useQuery の使用をやめてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。