Wie man eine dynamische Anwendung mit React und Hooks aufbaut: Eine Schritt-für-Schritt-Anleitung

In der Entwicklung von React-Anwendungen gibt es zahlreiche Konzepte, die den Prozess vereinfachen und optimieren. Eines der wichtigsten ist der Umgang mit dem key-Prop, das React hilft, effizient die Unterschiede zwischen zwei Listen zu berechnen, wenn sich die Daten ändern. Die Nutzung eines eindeutigen Identifikators, wie einer Datenbank-ID, ist die beste Praxis, um den Zustand eines Listenelements zu verfolgen. In Fällen, in denen ein solcher Identifikator nicht vorhanden ist, kann auch der Index der Liste als key verwendet werden, was in vielen Anwendungen vollkommen ausreichend ist.

In einer React-Anwendung ist es immer wichtig, den key-Prop dem äußersten Eltern-Element innerhalb der .map()-Funktion zuzuordnen. Falls man also innerhalb eines Components wie Post eine Liste darstellt, sollte der key nicht im Post selbst, sondern im äußeren Fragment oder einem Container-Element gesetzt werden. Dies stellt sicher, dass React die Liste korrekt verwaltet und Änderungen effizient anzeigt.

Nachdem wir nun eine statische Darstellung der Blog-Beiträge implementiert haben, geht es darum, die App mit dynamischen Funktionen auszustatten. Der erste Schritt dabei ist die Einführung von useState, einem der grundlegenden Hooks in React, mit dem Zustände verwaltet werden können. Ein einfaches Beispiel ist die Verwaltung des Benutzernamens in der UserBar. Zu Beginn ist der Benutzername statisch gesetzt, doch mit useState wird es möglich, diesen dynamisch zu ändern, wenn der Benutzer sich anmeldet, registriert oder abmeldet.

Wenn wir den Benutzernamen durch den Hook useState ersetzen, wird der Zustand in einem username gespeichert, und die zugehörige setUsername-Funktion ermöglicht es, diesen Zustand zu ändern. Dies sorgt dafür, dass sich der Zustand der App verändert, ohne die gesamte Seite neu zu laden. Der UserBar-Komponente wird durch die Übergabe dieser setUsername-Funktion an andere Komponenten wie Login, Register und Logout ermöglicht, dynamisch auf Änderungen des Zustands zu reagieren. Diese Art von State-Management ist entscheidend für die Interaktivität von Anwendungen.

Ein weiterer wichtiger Schritt ist das Implementieren der Formularlogik, bei der wir mit useState und der traditionellen Methode des Handlings von Formulardaten arbeiten. Die handleSubmit-Funktion ist hierbei der Schlüssel, da sie das Formular über die e.preventDefault()-Methode vor der Standard-Aktion bewahrt und es uns ermöglicht, den Benutzernamen zu setzen oder zurückzusetzen. Im Login- und Registrierungsprozess greifen wir auf die Formulardaten zu, um den Benutzernamen zu aktualisieren und das Benutzererlebnis interaktiv zu gestalten.

Zusätzlich zu den grundlegenden Zustandshandhabungen, die durch useState ermöglicht werden, sollten Entwickler auch die Auswirkungen von State-Änderungen auf die Performance und Struktur der Anwendung berücksichtigen. Es ist besonders wichtig, darauf zu achten, wie oft Komponenten neu gerendert werden und wie React den DOM effizient aktualisieren kann, um unnötige Berechnungen und Render-Zyklen zu vermeiden.

Ein Aspekt, der bei der Arbeit mit React oft übersehen wird, ist die Bedeutung der sauberen und effizienten Nutzung von Fragments und Keys. Wenn Sie beispielsweise dynamische Listen von Elementen rendern, achten Sie darauf, dass Sie den key an der richtigen Stelle setzen, um eine saubere und performante DOM-Struktur zu gewährleisten. Fragments sind dabei ein nützliches Werkzeug, um zusätzliche DOM-Knoten zu vermeiden und die Baumstruktur der Anwendung so einfach wie möglich zu halten.

Zum Schluss sei noch darauf hingewiesen, dass eine React-Anwendung nicht nur aus der Handhabung von Zuständen und Benutzerinteraktionen besteht. Die Integration von APIs, die Verwaltung von externen Daten und das Asynchronisieren von Anfragen sind ebenfalls zentrale Aspekte, die den Funktionsumfang und die Leistungsfähigkeit einer Anwendung erheblich erweitern können. In einer echten Anwendung müssen Daten oft aus einer externen Quelle geladen werden, was zusätzliche Logik erfordert, um diese Daten effizient zu verwalten und darzustellen.

Wie man React-Hooks effektiv für die Datenabfrage und die Verwaltung von Formularen nutzt

React bietet eine Vielzahl von Tools, die das Entwickeln von interaktiven und dynamischen Anwendungen erheblich erleichtern. Besonders die React-Hooks haben die Art und Weise verändert, wie Entwickler mit Zuständen, Effekten und anderen Aspekten der Anwendungslogik umgehen. Eine der zentralen Herausforderungen beim Erstellen von modernen Webanwendungen ist die effiziente Handhabung der Datenabfrage und die Verwaltung von Formularen. Durch die Integration von Hooks wie useState, useEffect und useReducer können diese Prozesse jedoch deutlich vereinfacht und optimiert werden.

Beim Arbeiten mit Daten ist es oft notwendig, auf externe Ressourcen zuzugreifen, sei es, um Daten zu laden oder um Änderungen an einem Server zu speichern. Traditionell erforderten solche Operationen das Schreiben von umfangreichen Klassen und die Verwaltung von Zuständen über komplexe Komponentenstrukturen. React hat dieses Modell mit der Einführung von Hooks geändert, die es ermöglichen, Zustände und Effekte direkt in Funktionskomponenten zu handhaben, was den Code vereinfacht und flexibler macht.

Ein Beispiel hierfür ist die Verwendung des useEffect-Hooks, um Daten von einem Server abzurufen. Dieser Hook erlaubt es, eine Funktion auszuführen, sobald sich der Zustand der Komponente ändert oder eine bestimmte Bedingung erfüllt ist. Dabei wird in der Regel eine asynchrone Anfrage an den Server geschickt, um die benötigten Daten zu laden. Der Vorteil von useEffect ist, dass die Komponente nach dem Abrufen der Daten automatisch neu gerendert wird, ohne dass manuelle Eingriffe nötig sind.

Eine weiterführende Technik, die für eine verbesserte Benutzererfahrung sorgt, ist die Optimierung der UI durch den Einsatz von useTransition. Dieser Hook verhindert, dass Benutzer während der Datenabfrage mit blockierten UI-Elementen konfrontiert werden. Stattdessen können Veränderungen im Hintergrund durchgeführt werden, ohne dass der Benutzer dies direkt merkt. Dies wird besonders dann wichtig, wenn große Mengen an Daten verarbeitet oder mehrere Anfragen gleichzeitig gestellt werden. Mit useTransition bleibt die Anwendung flüssig, und der Benutzer kann weiterhin mit der UI interagieren, ohne auf das Ende des Abrufs warten zu müssen.

Für komplexere Anwendungen oder wenn der Zustand über verschiedene Komponenten hinweg geteilt werden muss, eignet sich der useReducer-Hook hervorragend. Dieser Hook ermöglicht es, Zustandsänderungen auf eine deklarative Weise zu behandeln, ähnlich wie bei Redux, jedoch direkt innerhalb der Komponente. Hiermit können Entwickler einen zentralisierten Zustand erstellen, der von mehreren Komponenten gleichzeitig genutzt werden kann, was vor allem bei der Handhabung von komplexeren Formularen oder Zustandslogiken von Vorteil ist.

Die Handhabung von Formularen ist ein weiteres häufiges Szenario, in dem React-Hooks eine entscheidende Rolle spielen. Die Nutzung des useState-Hooks für einfache Formulare ist weit verbreitet, da er eine klare und verständliche Möglichkeit bietet, Eingabewerte zu verfolgen. Ein weiterer hilfreicher Hook in diesem Zusammenhang ist der useActionState, der es erlaubt, Benutzeraktionen wie das Absenden eines Formulars zu verwalten, und gleichzeitig eine benutzerfreundliche Rückmeldung gibt, wenn eine Aktion noch ausgeführt wird.

Es gibt jedoch auch Aspekte der Entwicklung, die oft übersehen werden, wenn man mit Hooks arbeitet. Ein häufiges Problem ist die Reihenfolge, in der Hooks in einer Komponente verwendet werden. Sie sollten immer in der gleichen Reihenfolge aufgerufen werden, um unerwartete Fehler und Probleme zu vermeiden. Ebenso ist die Verwendung von Hooks in verschachtelten Bedingungen oder Schleifen nicht erlaubt, da dies zu inkonsistentem Verhalten führen kann.

Wichtig ist es auch, den Überblick über die Leistung der Anwendung zu behalten. React bietet eine Reihe von Tools wie useMemo und useCallback, die helfen, unnötige Neu-Renderings zu vermeiden und die Performance zu steigern. useMemo speichert Berechnungen und gibt Ergebnisse wieder, ohne sie erneut auszuführen, wenn sich die Eingabewerte nicht geändert haben. Der useCallback-Hook hingegen sorgt dafür, dass Funktionen nur dann neu erstellt werden, wenn ihre Abhängigkeiten sich geändert haben. Diese Techniken sind besonders bei größeren Anwendungen oder solchen mit komplexen UI-Komponenten von Bedeutung.

Bei der Implementierung von Formularen oder der Arbeit mit großen Datenmengen ist es unerlässlich, den Fokus auf Benutzerfreundlichkeit und Performance zu legen. Es ist von entscheidender Bedeutung, dass die Anwendung so reagiert, dass der Benutzer während der Interaktion nicht das Gefühl hat, dass die Anwendung „steckt“ oder zu langsam reagiert. Indem man sich auf die Optimierung der Ladezeiten, das Management von Zuständen und das Verhindern von UI-Blockaden konzentriert, schafft man eine robuste und reaktionsschnelle Anwendung, die sowohl benutzerfreundlich als auch performant ist.

Wie man Routen und Navigation mit React Router und Hooks effizient gestaltet

Zunächst müssen wir sicherstellen, dass unser ErrorBoundary-Komponent den Suspense-Komponenten ersetzt. Stattdessen rendern wir den Routes-Komponenten, der die verschiedenen Routen unserer Anwendung definiert. In dieser neuen Struktur können wir die Routen wie folgt konfigurieren:

jsx
Copy code
<Routes>

  <Route path="/" element={<Home />} />
</Routes>

Wenn wir nun die App ausführen, etwa mit dem Befehl $ npm run dev, werden wir feststellen, dass die Startseite genauso aussieht wie zuvor, jedoch nun durch React Router gerendert wird, anstatt fest codiert zu sein.

Erstellen einer neuen Route mit URL-Parametern

Nun, da wir React Router korrekt eingerichtet haben, können wir eine neue Route erstellen, um einen einzelnen Beitrag anzuzeigen. Diese Route folgt dem Muster /post/:id, wobei :id ein URL-Parameter ist, der die ID des anzuzeigenden Beitrags enthält. Ein Beispiel für eine URL könnte post/8 sein, wobei 8 die ID des Beitrags ist.

Die Schritte zur Einrichtung dieser Route sind wie folgt:

1. Zuerst kopieren wir den Ordner Chapter08_1 in einen neuen Ordner namens Chapter08_2 und öffnen diesen in VS Code.

2. In der Datei src/api.js definieren wir eine Funktion, um einen einzelnen Beitrag abzurufen:

javascript
Copy code
export async function fetchPost({ id }) {

   const res = await fetch(`/api/posts/${id}`);
   return await res.json();
}

3. In der Datei src/components/post/Post.jsx importieren wir die useSuspenseQuery-Hook sowie die fetchPost-Funktion:

javascript
Copy code
import { useSuspenseQuery } from '@tanstack/react-query';

import { fetchPost } from '@/api.js';

4. Der Post-Komponent wird so umstrukturiert, dass er nur eine id-Eigenschaft akzeptiert und den Beitrag über den useSuspenseQuery-Hook abruft:

javascript
Copy code
export function Post({ id }) {
   const { data } = useSuspenseQuery({
      queryKey: ['post', id],

      queryFn: async () => await fetchPost({ id }),

   });
   const { title, content, author } = data;
}

5. Als Nächstes erstellen wir die Datei src/pages/ViewPost.jsx, importieren dort Suspense, useParams aus react-router und den Post-Komponent:

javascript
Copy code
import { Suspense } from 'react';
import { useParams } from 'react-router';

import { Post } from '@/components/post/Post.jsx';

6. Innerhalb der ViewPost-Seite rufen wir mit der useParams-Hook die id aus den URL-Parametern ab und rendern den Post-Komponent:

javascript
Copy code
export function ViewPost() {
   const { id } = useParams();
   return (
      <Suspense fallback={<div>Loading post...</div>}>
         <Post id={id} />
      </Suspense>
   );
}

7. Nun importieren wir den ViewPost-Komponent in die Datei src/App.jsx und definieren eine neue Route für den Beitrag:

javascript
Copy code
<Route path="/post/:id" element={<ViewPost />} />

Wenn wir die Anwendung nun mit $ npm run dev ausführen, können wir manuell zu einer bestimmten Beitragsseite navigieren, indem wir /post/:id in der URL aufrufen. Die Seite zeigt den Beitrag an, dessen ID in der URL angegeben wurde.

Verlinken zu einer Route

Es ist jedoch nicht ausreichend, nur manuell zu einer Route zu navigieren. Um die Benutzererfahrung zu verbessern, möchten wir die Möglichkeit bieten, direkt von der Startseite zu einem einzelnen Beitrag zu gelangen. Dies kann mithilfe des Link-Komponents von React Router erreicht werden.

javascript
Copy code
import { useContext } from 'react';

import { ThemeContext } from '@/contexts/ThemeContext.js';

import { Link } from 'react-router';
export function PostListItem({ id, title, author }) {
   const theme = useContext(ThemeContext);
   return (

      <div style={{ backgroundColor: theme.background }}>

         <h2>{title}</h2>
         <Link to={`/post/${id}`}>View Post ></Link>
         <p>Written by {author}</p>
      </div>
   );
}

In der PostList-Komponente ersetzen wir dann den ursprünglichen Post-Komponent durch PostListItem, um für jeden Beitrag einen Link anzuzeigen, der zu der jeweiligen Beitragsseite führt.

Navigation zurück zur Startseite

Ein weiteres Bedürfnis besteht darin, eine einfache Möglichkeit zu haben, von der Beitragsseite wieder zur Startseite zurückzukehren. Dies kann durch den NavLink-Komponent realisiert werden, der uns eine aktive Navigation ermöglicht, bei der der Link zum aktuellen Zustand der Route hervorgehoben wird.

Wir erstellen eine neue Datei src/components/NavBarLink.jsx, in der der NavLink-Komponent verwendet wird:

javascript
Copy code
import { NavLink } from 'react-router';

export function NavBarLink({ children, to }) {
   return (
      <NavLink to={to} style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}>
         {children}
      </NavLink>
   );
}

Durch den Import und die Verwendung dieses neuen NavBarLink-Komponents in der App.jsx-Datei können wir eine Navigationsleiste erstellen, die dem Benutzer ermöglicht, zwischen den verschiedenen Seiten der Anwendung zu navigieren.

Wie man mit React's useDeferredValue eine bessere Benutzererfahrung bei der Suche erreicht

In modernen Webanwendungen ist eine schnelle und reaktive Benutzeroberfläche von entscheidender Bedeutung, um eine angenehme Nutzererfahrung zu gewährleisten. Eine der Herausforderungen bei der Entwicklung solcher Oberflächen besteht darin, wie man die Benutzerinteraktionen effektiv verarbeitet, während gleichzeitig die Performance der Anwendung beibehalten wird. Eine wichtige Technik, die hier eingesetzt werden kann, ist die Verwendung des useDeferredValue-Hooks von React. Dieser ermöglicht es, die Verarbeitung von Benutzerinput so zu steuern, dass Priorität auf schneller wiederholte Aktualisierungen gelegt wird, während weniger wichtige Updates verzögert werden. Dies ist besonders nützlich bei der Suche in großen Datenmengen.

Der useDeferredValue-Hook hilft dabei, Aktualisierungen, wie die Eingabe in ein Suchfeld, dynamisch zu verzögern. Im Gegensatz zum „Debouncing“, bei dem ein fester Zeitraum nach einer Eingabe abgewartet wird, bevor eine Aktualisierung stattfindet, richtet sich die Verzögerung hier nach der Geschwindigkeit, mit der die Benutzeroberfläche gerendert werden kann. Auf schnelleren Maschinen werden die Updates häufiger durchgeführt, während auf langsameren Maschinen die Performance der UI nicht beeinträchtigt wird.

Anwendung des useDeferredValue-Hooks in der Praxis

javascript
Copy code
function sleep(ms) {

  return new Promise(resolve => setTimeout(resolve, ms));

}

Danach definieren wir eine API-Funktion, die alle Posts abruft und filtert:

javascript
Copy code
export async function searchPosts(query) {

  const res = await fetch('/api/posts');

  const posts = await res.json();
  const filteredPosts = posts.filter(post => post.title.toLowerCase().includes(query.toLowerCase()));
  await sleep(1000); // Verzögerung von 1 Sekunde
  return filteredPosts;
}

Der Hauptteil der Anwendung umfasst nun die Erstellung einer Komponente, die die Suchergebnisse anzeigt. Diese Komponente verwendet den useSuspenseQuery-Hook von React Query, um die Posts asynchron zu laden und darzustellen.

Doch die Herausforderung bleibt: Wenn der Benutzer einen Suchbegriff eingibt, wird die Benutzeroberfläche durchgehend mit der Nachricht „Lädt…“ überlagert, was eine nicht ideale Benutzererfahrung darstellt.

Verbesserung der Benutzererfahrung mit useDeferredValue

Die Implementierung von useDeferredValue könnte wie folgt aussehen:

javascript
Copy code
import { useState, useDeferredValue, Suspense } from 'react';
export function PostSearch() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <Suspense fallback={<div>loading...</div>}>
      <PostSearchResults query={deferredQuery} />
    </Suspense>
  );
}

Weitere nützliche Konzepte und Techniken

Neben der Verwendung von useDeferredValue gibt es auch andere leistungsstarke React-Hooks, die für die Optimierung von Performance und Benutzererfahrung verwendet werden können, wie zum Beispiel useMemo und useCallback.

• useMemo wird verwendet, um die Ergebnisse einer Funktion zu speichern, sodass diese Funktion nicht bei jedem Rendern erneut ausgeführt wird. Dies kann die Performance erheblich verbessern, vor allem bei rechenintensiven Operationen. Man sollte jedoch beachten, dass useMemo nicht dafür gedacht ist, Berechnungen einmalig durchzuführen, sondern um eine wiederholte Ausführung derselben Funktion zu vermeiden, solange sich die Eingabewerte nicht ändern.

• useCallback funktioniert ähnlich wie useMemo, aber anstelle von Werten wird eine Funktion gespeichert. Dies ist besonders nützlich, wenn eine Funktion als Prop an ein Kind weitergegeben wird, um unnötige Renderzyklen zu vermeiden.

Es ist jedoch wichtig, diese Techniken nicht übermäßig zu verwenden, da unnötige Optimierungen die Lesbarkeit und Wartbarkeit des Codes beeinträchtigen können. In der Praxis sollte man sich auf Performance-Engpässe konzentrieren und nur dann optimieren, wenn es wirklich notwendig ist.

Fazit

Der useDeferredValue-Hook ist ein mächtiges Werkzeug, um die Benutzererfahrung in Anwendungen zu verbessern, die auf dynamische Eingaben reagieren, wie etwa eine Suchfunktion. Durch das verzögerte Laden von Updates wird eine flüssigere Benutzeroberfläche ermöglicht, bei der alte Daten angezeigt werden, bis die neuen Daten vollständig geladen sind. Die gleichzeitige Verwendung anderer Hooks wie useMemo und useCallback kann helfen, die Performance weiter zu optimieren und unnötige Berechnungen zu vermeiden.