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({
    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 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
  );
};

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 Ansicht zu vermeiden:

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

Hier verwenden wir bedingtes Rendering anstelle einer „frühen Rückkehr“. 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;

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

  return {children}>;
};

Verwendung in unserer Komponente

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

  return (
    

      ...
      
  );
};

Diese Faktorisierung zentralisiert die bedingte Rendering-Logik und vereinheitlicht die Verwendung von Ladenachrichten, wodurch saubererer und besser wartbarer Code entsteht.

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 von 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 um die Verwaltung aller Dinge für uns.

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(
    ...
  );

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

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

      

        
Users
        

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

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