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

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

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

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

export const useUsers = () => {
  const { data, isLoading } = useQuery({
    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 秒の遅延を追加します。次に、データと読み込み状態のブール値を返します。

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

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

  if (isLoading) {
    return 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
  );
};

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

制限と代替手段

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

ビューのブロックを避けるための代替案は次のとおりです:

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

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

  return (
    

      

        
Users
        

          Add users
        
      
      {isLoading ? 
Loading...
 : }
    
  );
};

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

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

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

type Props = PropsWithChildren;

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

  return {children}>;
};

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

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

  return (
    

      ...
      
  );
};

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

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

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

どうやって？

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

useSuspenseQueryの実装

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

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

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery(
    ...
  );

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

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

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

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

  return ;
};

const Example = (): JSX.Element => {
  return (
    

      

        
Users
        

          Add users
        
      
      Loading...
}>
        
  );
};

サスペンスの利点

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

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

結論

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

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

私のニュースレター:D