Hören Sie auf, useQuery von React-Query zu verwenden!

In jeder Webanwendung ist die Verwaltung von Lade- und Fehlerzuständen von entscheidender Bedeutung. Durch die Anzeige des Ladestatus bleibt der Benutzer informiert, aber in der Vergangenheit kann die manuelle Implementierung dieser Verwaltung mühsam sein.

React Query vereinfacht die Handhabung von Ladezuständen und globalen Zuständen erheblich. Tatsächlich vermeidet React Query redundante Anfragen und optimiert so die Leistung der Anwendung.

Nehmen wir ein Codebeispiel, das einen Ladezustand in unserer Anwendung implementiert.

Definieren Sie einen Hook zum Abrufen einer Benutzerliste:

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,
  };
};

Hier rufen wir vier Benutzer mit useQuery ab. Wir fügen eine Verzögerung von 2 Sekunden hinzu, um den Ladezustand zu veranschaulichen. Anschließend geben wir die Daten und einen booleschen Wert für den Ladezustand zurück.

Auf der Komponentenseite erstellen wir eine Komponente mit dem Namen Beispiel:

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>
  );
};

In dieser Komponente verwenden wir unseren Hook, um die Liste der Benutzer abzurufen. Bevor wir die Ansicht rendern, führen wir eine „frühe Rückkehr“ mit einer Lademeldung durch und zeigen dann den Titel, die Schaltfläche und die Benutzer an.

Einschränkungen und Alternativen

Jeder Netzwerkaufruf erfordert jedoch eine explizite Verwaltung des Ladezustands. Wenn der Code nicht faktorisiert ist, warten möglicherweise einige Elemente der Ansicht darauf, angezeigt zu werden, z. B. der Titel und die Aktion.

Hier ist eine Alternative, um ein Blockieren der Sicht zu vermeiden:

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>
  );
};

Hier verwenden wir bedingtes Rendern anstelle einer „frühen Rückgabe“. Diese Lösung ist in komplexen Komponenten weniger lesbar und schwieriger zu warten.

Die ideale Lösung: Eine generische Ladekomponente

Die genialste Lösung besteht darin, eine Komponente zu erstellen, die unsere Ladenachricht oder unsere Hauptkomponente basierend auf einer Variablen rendert.

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

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

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

Verwendung in unserer Komponente

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

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

Diese Faktorisierung zentralisiert die bedingte Rendering-Logik und vereinheitlicht die Verwendung von Ladenachrichten und bietet so saubereren und wartbareren Code.

Entdecken Sie die Magie der Spannung

Aber jetzt sage ich Ihnen, dass diese Komponente, die wir gerade erstellt haben, bereits in React integriert ist. Noch besser: Es ist magisch! Keine manuelle Verwaltung der isLoading-Status mehr!

Wie?

Mit React's Suspense (React-Version >= 16.6) wird alles einfacher und sauberer. Mit Suspense können Sie React explizit erklären, dass eine Komponente auf asynchrone Daten wartet, und React kümmert sich für uns um die gesamte Verwaltung.

UseSuspenseQuery implementieren

Lassen Sie uns useSuspenseQuery verwenden, um den Ladestatus automatisch zu verwalten. So geht's:

Hook zum Abrufen von Benutzern

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

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

Verwendung in der Komponente mit Suspense

Jetzt aktualisieren wir unsere Beispielkomponente, um Suspense zu verwenden:

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>
  );
};

Vorteile von Suspense

Mit Suspense zentralisieren wir die Verwaltung des Ladezustands an einem Ort und machen so den Code lesbarer und wartbarer. Der Suspense-Fallback wird automatisch angezeigt, solange die Daten nicht verfügbar sind, sodass keine manuelle Verwaltung des isLoading-Status erforderlich ist.

Darüber hinaus ermutigt Suspense Entwicklungsteams, ihren Code zu faktorisieren. Durch die Verwendung standardisierter Ladekomponenten und asynchroner Statushandler können Entwickler wiederverwendbare und konsistente Module erstellen und so die Codequalität und Wartbarkeit langfristig verbessern.

Abschluss

Die Verwendung von Suspense und useSuspenseQuery revolutioniert die Verwaltung von Ladezuständen in React-Anwendungen. Dieser Ansatz vereinfacht nicht nur den Code, sondern verbessert auch das Benutzererlebnis, indem er ein reibungsloses und konsistentes Rendering gewährleistet. Der Übergang von useQuery zu useSuspenseQuery ist eine natürliche Entwicklung für sauberere und effizientere Anwendungen.

Darüber hinaus ermutigt die Integration von Suspense Entwicklungsteams, ihren Code zu faktorisieren. Zusammenfassend lässt sich sagen, dass die Einführung von Suspense und useSuspenseQuery nicht nur eine technische Verbesserung, sondern auch ein Schritt in Richtung gesünderer und effektiverer Entwicklungspraktiken ist.

Mein Newsletter :D

Das obige ist der detaillierte Inhalt vonHören Sie auf, useQuery von React-Query zu verwenden!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!