Wie man mit React Hooks und React Suspense Daten abruft: Ein einfaches Backend-Setup

Im vorherigen Kapitel haben wir gelernt, wie man den React Context verwendet, um Daten effizient innerhalb einer Anwendung zu übergeben, ohne sie manuell von Komponente zu Komponente weiterzureichen. Nun erweitern wir dieses Konzept und fokussieren uns auf die Nutzung von React Hooks und React Suspense, um Daten zu laden und die Benutzeroberfläche zu verbessern. In diesem Kapitel werden wir zunächst einen einfachen Backend-Server mit dem Tool json-server aufsetzen, der es uns ermöglicht, Daten von einer JSON-Datei abzurufen und zu verändern. Danach werden wir lernen, wie man diese Daten mit Hilfe des Effect Hook und des State Hook in React abruft. Zum Schluss werden wir uns mit TanStack Query und React Suspense befassen, um das Abrufen von Daten zu optimieren und das Rendering der Seite zu verzögern, bis alle Inhalte vollständig geladen sind.

Bevor wir uns mit der konkreten Implementierung beschäftigen, sollten wir sicherstellen, dass die technischen Voraussetzungen erfüllt sind. Eine aktuelle Version von Node.js sowie der Node Package Manager (npm) sind erforderlich. Dies sind grundlegende Werkzeuge, um die Backend-Entwicklung und das Abrufen von Daten innerhalb einer React-Anwendung zu ermöglichen. Visual Studio Code (VS Code) wird für den Code-Editor empfohlen, aber auch andere Editoren funktionieren ähnlich.

Aufsetzen eines einfachen Backend-Servers

Um die Daten für unsere Anwendung zu simulieren, benötigen wir einen Server. In diesem Fall verwenden wir json-server, ein Werkzeug, das uns ermöglicht, eine REST-API aus einer JSON-Datei zu erstellen. Dieser Mock-Server wird uns helfen, Daten anzufordern und zu manipulieren, ohne einen echten Server zu benötigen. Der erste Schritt besteht darin, eine db.json-Datei zu erstellen, die die Daten enthält, die wir verwenden möchten. Diese Datei könnte folgendermaßen aussehen:

json
Copy code
{

  "posts": [
    {
      "id": "1",
      "title": "React Hooks",
      "content": "The greatest thing since sliced bread!",
      "author": "Daniel Bugl",
      "featured": false
    },
    {
      "id": "2",
      "title": "Using React Fragments",
      "content": "Keeping the DOM tree clean!",
      "author": "Daniel Bugl",
      "featured": false
    },
    {
      "id": "3",
      "title": "React Context",
      "content": "Manage global state with ease!",
      "author": "Daniel Bugl",
      "featured": true
    }
  ],
  "users": [
    {
      "id": "1",
      "username": "Daniel Bugl",
      "password": "hunter2"
    }
  ]
}

In dieser Datei haben wir zwei Hauptobjekte: posts und users. posts enthält Beiträge mit einem Titel, Inhalt und einem "featured"-Status, während users Informationen über Benutzer speichert, einschließlich Benutzername und Passwort. Diese Struktur ist wichtig, weil sie es uns ermöglicht, sowohl öffentliche Daten als auch Benutzerdaten zu verwalten.

Installation des json-server-Tools

Um den Mock-Server zu starten, müssen wir zunächst das json-server-Tool installieren. Mit dem folgenden Befehl wird es installiert:

bash
Copy code
$ npm install --save-exact [email protected]

Nachdem das Tool installiert wurde, können wir den Server mit folgendem Befehl starten:

bash
Copy code
$ npx json-server server/db.json

Dies startet den Server und stellt die Daten unter verschiedenen Routen zur Verfügung, zum Beispiel:

• GET /posts – um alle Beiträge abzurufen

• POST /posts – um einen neuen Beitrag hinzuzufügen

• PUT /posts/:id – um einen Beitrag zu aktualisieren

• DELETE /posts/:id – um einen Beitrag zu löschen

Diese grundlegenden HTTP-Anfragen ermöglichen es uns, auf einfache Weise mit den Daten zu interagieren und diese in der Anwendung zu verwenden.

Abrufen von Daten mit React Hooks

jsx
Copy code
import React, { useEffect, useState } from 'react';
function App() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('http://localhost:3000/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);
  return (
    <div>
      <h1>Beiträge</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}
export default App;

Verwendung von TanStack Query für die Datenabfrage

Neben der Verwendung von React Hooks können wir auch eine Bibliothek wie TanStack Query einsetzen, um das Abrufen von Daten noch effizienter und leistungsfähiger zu gestalten. Diese Bibliothek bietet eine Reihe von Funktionen zur Datenabfrage, Caching und zur Synchronisierung von Serverzuständen.

Ein einfaches Beispiel mit TanStack Query sieht folgendermaßen aus:

jsx
Copy code
import { useQuery } from '@tanstack/react-query';

function App() {
  const { data, error, isLoading } = useQuery(['posts'], () =>

    fetch('http://localhost:3000/posts').then(res => res.json())

  );
  if (isLoading) return <div>Lädt...</div>;

  if (error) return <div>Fehler beim Laden der Daten.</div>;

  return (
    <div>
      <h1>Beiträge</h1>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}
export default App;

Mit TanStack Query wird der Abruf von Daten automatisch verwaltet, einschließlich Caching und Fehlerbehandlung. Das sorgt für eine effizientere Handhabung und ermöglicht eine bessere Skalierbarkeit der Anwendung.

Einführung in React Suspense

Ein weiteres nützliches Konzept in React ist React Suspense, das es uns ermöglicht, das Rendering von Komponenten zu verzögern, bis alle benötigten Daten vollständig geladen sind. Dies ist besonders nützlich, wenn Daten von externen APIs abgerufen werden und wir sicherstellen wollen, dass die Anwendung erst vollständig gerendert wird, wenn alle benötigten Informationen vorliegen. Ein einfaches Beispiel könnte folgendermaßen aussehen:

jsx
Copy code
import React, { Suspense } from 'react';
function Posts() {
  const posts = fetch('http://localhost:3000/posts').then(res => res.json());
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}
function App() {
  return (
    <Suspense fallback={<div>Lädt...</div>}>
      <Posts />
    </Suspense>
  );
}
export default App;

Durch den Einsatz von Suspense wird die Komponente Posts nur gerendert, wenn alle Daten erfolgreich geladen wurden. Falls der Abruf noch im Gange ist, wird der Fallback-Text "Lädt..." angezeigt.

Endtext

Wie man Daten mit React und TanStack Query abruft und verändert

In der vorherigen Abschnitt haben wir das Promise-API verwendet, um mit dem Ergebnis einer asynchronen Funktion zu arbeiten, indem wir die .then()-Methode innerhalb des Effect Hooks genutzt haben. Es ist jedoch wichtig zu verstehen, dass Effect Hooks keine asynchronen Funktionen direkt akzeptieren, um sogenannte "Race Conditions" zu vermeiden. Trotzdem kann man eine asynchrone Funktion innerhalb des Hooks definieren und sie sofort aufrufen. Ein Beispiel für diese Vorgehensweise sieht folgendermaßen aus:

javascript
Copy code
useEffect(() => {

  async function fetchPosts() {
    const response = await fetch('/api/posts');
    const posts = await response.json();
    dispatch({ type: 'FETCH_POSTS', posts });
  }
  void fetchPosts();
}, []);

Die Verwendung des void-Operators stellt sicher, dass wir die asynchrone Funktion korrekt aufrufen, ohne darauf zu warten. In diesem Fall interessiert es uns nicht, das Ergebnis abzuwarten. Dieser Ansatz hat den Vorteil, dass der Code dank der async/await-Syntax oft leichter lesbar ist. Man kann sowohl das .then()-Muster als auch async/await verwenden, je nachdem, welche Variante den Code verständlicher macht. Es sollte jedoch darauf geachtet werden, diese beiden Muster nicht zu mischen, um die Lesbarkeit zu wahren.

Neuen Beitrag über den Backend-Server erstellen

Um neue Beiträge zu erstellen, muss die handleSubmit-Funktion angepasst werden, sodass sie eine POST-Anfrage an den Server schickt. Der Ablauf lässt sich wie folgt skizzieren:

1. Die handleSubmit-Funktion wird zu einer asynchronen Funktion gemacht.

2. Nachdem die Formulardaten erfasst wurden, wird eine fetch-Anfrage an /api/posts gesendet.

3. Diese Anfrage muss als POST-Anfrage konzipiert werden, und der Header muss so gesetzt werden, dass der Backend-Server weiß, dass ein JSON-Objekt gesendet wird:

   javascript
   Copy code
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   

4. Das erstellte newPost-Objekt wird als Anfragekörper übermittelt:

   javascript
   Copy code
   body: JSON.stringify(newPost),
   
   

5. Falls die Antwort des Servers keinen Erfolg zurückgibt, wird ein Fehler geworfen:

   javascript
   Copy code
   if (!response.ok) {
   
     throw new Error('Unable to create post');
   
   }
   

6. Andernfalls wird die CREATE_POST-Aktion ausgelöst, um den neuen Beitrag an der Client-Seite anzuzeigen und das Formular zurückzusetzen:

   javascript
   Copy code
   dispatch({ type: 'CREATE_POST', post: newPost });
   form.reset();
   

Nachdem ein neuer Beitrag erstellt wurde, kann dieser in der db.json auf dem Server überprüft werden, um sicherzustellen, dass er korrekt eingefügt wurde.

Verwendung von TanStack Query zum Abrufen und Ändern von Daten

Nachdem wir nun Beiträge erfolgreich mit der Fetch API und dem Effect Hook geladen und erstellt haben, können wir uns mit einer Library wie TanStack Query beschäftigen, um Anfragen zu stellen und Daten zu verändern. TanStack Query bietet eine viel einfachere Möglichkeit, Daten abzufragen und den Cache zu verwalten. Darüber hinaus ermöglicht es eine bessere Invalidierung von Zuständen, was bedeutet, dass wir nach dem Erstellen eines neuen Beitrags nicht manuell eine Aktion auslösen müssen, um die Posts neu zu laden.

TanStack Query ist eine Bibliothek zur Verwaltung von Serverdaten. Sie besteht aus drei Hauptteilen:

• Einem Query Client, der den Cache verwaltet und Invalidierungen durchführt.

• Einem Query Client Provider, der die gesamte Anwendung umhüllt, um den Query Client für alle Komponenten verfügbar zu machen.

• Einer Sammlung von Hooks, darunter der Query Hook (zum Abrufen und Abonnieren von Daten) und der Mutation Hook (für Datenänderungen auf dem Server).

Die grundlegende Einrichtung der TanStack Query-Bibliothek umfasst mehrere Schritte:

1. Erstellen eines neuen Ordners und Installieren der Bibliothek:

   bash
   Copy code
   npm install --save-exact @tanstack/[email protected]
   
   

2. Konfiguration von ESLint:

   bash
   Copy code
   npm install --save-dev --save-exact @tanstack/[email protected]
   

3. Erstellen eines src/api.js-Files zur Initialisierung des Query Clients:

   javascript
   Copy code
   import { QueryClient } from '@tanstack/react-query';
   
   export const queryClient = new QueryClient();
   

4. Der QueryClientProvider wird in der App.jsx-Datei eingebunden, um den gesamten Zustand der Anwendung zu verwalten:

   javascript
   Copy code
   import { QueryClientProvider } from '@tanstack/react-query';
   
   import { queryClient } from './api.js';
   

Sobald TanStack Query eingerichtet ist, kann die Query Hook verwendet werden, um Daten auf eine sehr einfache Weise abzurufen. Die Handhabung von Seiten wie PostFeed und PostList wird effizienter, und der Code bleibt übersichtlich.

Wichtige Aspekte, die der Leser beachten sollte:

• Der Einsatz von async/await verbessert die Lesbarkeit und Wartbarkeit von Code, jedoch sollten diese Konzepte nicht mit der .then()-Methode im selben Block kombiniert werden.

• Das Handling von Fehlern bei der Erstellung von Beiträgen ist entscheidend. Neben der Fehlerbehandlung in der Anfrage sollte auch eine ordnungsgemäße Benutzerinteraktion (z. B. eine Fehlermeldung auf der Benutzeroberfläche) erfolgen.

• TanStack Query vereinfacht die Verwaltung von Serverdaten erheblich und optimiert die Kommunikation zwischen Frontend und Backend. Besonders die Caching- und Invalidierungsmechanismen sind nützlich, wenn man eine skalierbare und performante Anwendung erstellen möchte.

• Das Verständnis der Funktionsweise von QueryClient und QueryClientProvider ist notwendig, um zu verstehen, wie der Zustand der Serverdaten über mehrere Komponenten hinweg synchronisiert wird.

Wie man den useRef Hook in React effektiv nutzt

In React gibt es eine Reihe von fortgeschrittenen Hooks, die Entwicklern ermöglichen, ihre Komponenten effizienter und flexibler zu gestalten. Einer der wichtigsten und vielseitigsten dieser Hooks ist useRef. Dieser Hook wird häufig verwendet, um auf DOM-Elemente zuzugreifen oder mutable Werte zu speichern, die während des Lebenszyklus einer Komponente nicht die Neuberechnung der Komponente auslösen. Im Folgenden erläutern wir die Anwendung von useRef durch verschiedene praxisorientierte Beispiele.

Zuerst müssen wir eine Demo-Seite erstellen, um mit den verschiedenen Hooks zu experimentieren. Zuerst kopieren wir den Ordner Chapter08_2 in einen neuen Ordner Chapter09_1, öffnen diesen Ordner in VS Code und erstellen ein neues Verzeichnis src/components/demo/, um unsere Demo-Komponenten hinzuzufügen. Danach erstellen wir eine Datei Demo.jsx in src/pages/, die die Demo-Seite rendern wird.

Nun, da die Demo-Seite eingerichtet ist, können wir mit den konkreten Anwendungen des useRef Hooks beginnen.

Verwendung von useRef zur Referenzierung eines DOM-Elements

Der wichtigste Anwendungsfall für den useRef Hook besteht darin, eine Referenz auf ein DOM-Element zu erhalten. Der Hook gibt ein Objekt zurück, das einer Komponente oder einem Element über das ref-Attribut zugewiesen werden kann. Mit dieser Referenz können wir später auf das DOM-Element zugreifen. Ein typisches Beispiel ist das automatische Fokussieren eines Eingabefeldes beim Rendern.

In unserem Fall können wir ein Eingabefeld erstellen, das automatisch den Fokus erhält, wenn die Komponente gerendert wird. Wir definieren eine Referenz für das Eingabefeld mit useRef und verwenden dann den useEffect Hook, um die focus() Methode des Eingabefeldes aufzurufen. Der Vorteil dieser Technik gegenüber der HTML-Attribut-Option autofocus ist, dass wir die Kontrolle darüber haben, wann der Fokus gesetzt wird, und wir auch auf andere Logik innerhalb der Komponente reagieren können, bevor der Fokus gesetzt wird.

jsx
Copy code
import { useRef, useEffect } from 'react';

export function AutoFocus() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <input ref={inputRef} />;
}

Mit dieser Methode können wir sicherstellen, dass das Eingabefeld immer den Fokus erhält, sobald die Komponente gerendert wird, und das ganz unabhängig vom Zustand der restlichen Anwendung.

Ändern von Zuständen innerhalb eines Refs

Es ist entscheidend zu verstehen, dass das Mutieren des current Wertes eines Refs keine Neuberechnung der Komponente auslöst. Wenn wir jedoch den Zustand eines Refs ändern möchten und diese Änderung eine Neuberechnung der Komponente erfordert, können wir eine Ref-Callback-Funktion verwenden. Diese Funktion wird ausgeführt, wenn das Element im DOM geladen wird und wir können sie nutzen, um initiale Eigenschaften wie die Größe eines Elements zu ermitteln.

Ein weiteres praktisches Beispiel wäre das Ermitteln der Anfangsbreite eines Elements:

jsx
Copy code
import { useState } from 'react';

export function InitialWidthMeasure() {

  const [width, setWidth] = useState(0);
  function measureRef(node) {
    if (node !== null) {
      setWidth(node.getBoundingClientRect().width);
    }
  }
  return <div ref={measureRef}>Initial Width: {Math.round(width)}px</div>;
}

In diesem Beispiel messen wir die Breite eines Div-Elements, sobald es in den DOM geladen wird, und speichern den Wert in einem Zustand. Dies ermöglicht es uns, auf diese Größe zuzugreifen und sie in der Benutzeroberfläche anzuzeigen.

Verwendung von Refs zur Persistenz von mutable Werten

Refs sind nicht nur nützlich, um auf DOM-Elemente zuzugreifen, sondern auch, um mutable Werte über Neuberechnungen hinweg zu speichern. Ein klassisches Beispiel hierfür ist die Speicherung von Referenzen zu Timer-Intervallen. In solchen Fällen können Refs dazu beitragen, den Zustand des Timers zu speichern, ohne dass es zu unnötigen Neuberechnungen der Komponente kommt.

jsx
Copy code
import { useRef, useState, useEffect } from 'react';
export function Timer() {
  const intervalRef = useRef(null);
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    intervalRef.current = setInterval(() => setSeconds(prev => prev + 1), 1000);

    return () => clearInterval(intervalRef.current);

  }, []);
  return (
    <div>
      <h1>{seconds} seconds</h1>
      <button onClick={() => clearInterval(intervalRef.current)}>Stop</button>
    </div>
  );
}

Fazit

Die Verwendung von useRef in React ist eine äußerst vielseitige und effiziente Methode, um auf DOM-Elemente zuzugreifen und mutable Werte zu speichern, die sich nicht auf den Lebenszyklus der Komponente auswirken. Die Kombination von useRef mit anderen Hooks wie useEffect oder useState ermöglicht die Erstellung komplexer und reaktiver Anwendungen. Das Wissen über den effektiven Einsatz von Refs ist entscheidend für Entwickler, die ihre React-Komponenten auf die nächste Stufe heben möchten.

Warum und wie React Hooks die Entwicklung von Webanwendungen revolutionieren

React ist eine der beliebtesten JavaScript-Bibliotheken zur Entwicklung interaktiver Benutzeroberflächen. Mit seiner Einführung von Hooks hat es eine erhebliche Veränderung in der Art und Weise gebracht, wie Entwickler moderne Webanwendungen gestalten. Insbesondere die Möglichkeit, State und Effekte innerhalb von Funktionskomponenten zu verwalten, hat die Handhabung von Zustand und Verhalten in React-Anwendungen erheblich vereinfacht. Diese Veränderung erlaubt es Entwicklern, Code übersichtlicher zu gestalten, da die Notwendigkeit, komplexe Klassensysteme zu verwenden, entfällt.

Im Kern ermöglichen Hooks das direkte Arbeiten mit Zustand und anderen React-Features ohne die Verwendung von Klassenkomponenten. Dabei gibt es sowohl grundlegende als auch fortgeschrittene Hooks, die jeweils bestimmte Anforderungen der Anwendung abdecken. Zu den bekanntesten gehören useState und useEffect, die grundlegende Funktionen zur Zustandsverwaltung und zu Seiteneffekten bieten. Doch auch die React-Community hat viele nützliche, oft maßgeschneiderte Hooks entwickelt, die eine noch flexiblere und effizientere Anwendungsentwicklung ermöglichen.

Ein grundlegendes Verständnis der Funktionsweise von React Hooks ist essenziell, um sie effektiv in eigenen Projekten einzusetzen. Neben den eingebauten Hooks bietet React auch eine Sammlung fortgeschrittenerer Hooks, die es ermöglichen, wiederverwendbare Logik auszustalten und dabei ein hohes Maß an Abstraktion zu erzielen. Besonders in großen Anwendungen, die eine skalierbare und wartbare Architektur erfordern, sind diese fortgeschrittenen Techniken unverzichtbar.

Ein wichtiger Aspekt der Arbeit mit React Hooks ist die Einhaltung bestimmter Regeln. Diese Regeln gewährleisten, dass Hooks korrekt verwendet werden und die Komponenten nicht unvorhersehbar reagieren. Beispielsweise dürfen Hooks nur auf oberster Ebene von Funktionskomponenten oder benutzerdefinierten Hooks aufgerufen werden. Dies ist entscheidend, um das Verhalten der Anwendung zu stabilisieren und unvorhergesehene Fehler zu vermeiden.

Darüber hinaus spielt der Übergang von Klassenkomponenten zu Funktionskomponenten mit Hooks eine bedeutende Rolle in der Weiterentwicklung von React-Anwendungen. Der Vorteil liegt in der verbesserten Lesbarkeit und in der Fähigkeit, eine deklarative Programmierung zu verfolgen, was insbesondere bei der Wartung und dem Testen von Code von großem Nutzen ist.

Die Fähigkeit, eigene benutzerdefinierte Hooks zu erstellen, stellt eine weitere Stärke von React dar. Hierbei handelt es sich um eine der fortgeschrittensten Techniken, die eine tiefere Integration in die React-Architektur ermöglicht. Entwickler können so Logik, die in verschiedenen Komponenten benötigt wird, auslagern und als eigenständigen Hook wiederverwenden. Auf diese Weise lassen sich komplexe Anforderungen mit minimalem Aufwand realisieren.

Neben den standardisierten und benutzerdefinierten Hooks bietet die React-Community eine Vielzahl zusätzlicher Hooks, die für spezifische Anwendungen nützlich sind. Diese externen Hooks decken zahlreiche Anwendungsfälle ab, von der API-Integration bis hin zur Zustandsverwaltung und der Optimierung von Renderprozessen. Es ist daher sinnvoll, sich mit diesen Community-Hooks auseinanderzusetzen, um bestehende Lösungen für gängige Probleme zu nutzen und den Entwicklungsprozess zu beschleunigen.

Ein nicht zu unterschätzender Vorteil von React Hooks ist ihre Flexibilität in der Handhabung von Asynchronität und Nebenwirkungen. Hooks wie useEffect und useLayoutEffect ermöglichen es, diese Operationen effizient zu steuern und die Integrität der Anwendung zu wahren. Im Vergleich zu den traditionellen Lebenszyklusmethoden von Klassenkomponenten bieten diese Hooks eine präzisere Kontrolle und ein besseres Timing.

Neben der grundlegenden Verwendung von Hooks ist es wichtig, die Performance-Aspekte zu berücksichtigen. Insbesondere bei der Arbeit mit großen Datensätzen oder komplexen Anwendungsstrukturen kann die richtige Handhabung von Zuständen und Effekten den Unterschied in der Performance ausmachen. Das Verständnis der Funktionsweise von React in Bezug auf Rendering und Reaktivität ist daher unerlässlich, um effizienten und performanten Code zu schreiben.

React Hooks eröffnen also viele neue Möglichkeiten für Entwickler, die moderne Webanwendungen bauen möchten. Durch den Einsatz von eingebauten und benutzerdefinierten Hooks sowie durch das Verständnis der zugrunde liegenden Prinzipien können Entwickler Anwendungen erstellen, die nicht nur effizient, sondern auch skalierbar und wartbar sind. Besonders hervorzuheben ist dabei, dass die Beherrschung von Hooks die Codequalität erhöht, die Komplexität reduziert und eine bessere Benutzererfahrung ermöglicht.