Wie man eigene Custom Hooks für React erstellt: Ein praktischer Leitfaden

In modernen React-Anwendungen spielt die Wiederverwendbarkeit von Code eine zentrale Rolle. Eine effiziente Möglichkeit, Code modular und übersichtlich zu gestalten, ist die Verwendung von benutzerdefinierten Hooks. Diese ermöglichen es, wiederkehrende Logik aus den Komponenten herauszuziehen und sie in eigenständige, wiederverwendbare Funktionen zu kapseln. Dieser Abschnitt beschreibt, wie man eigene Hooks erstellt und dabei sowohl benutzerdefinierte Logik für die Benutzerverwaltung als auch für API-Abfragen implementiert.

Der erste Schritt auf diesem Weg ist die Erstellung eines benutzerdefinierten Hooks für die Benutzerverwaltung. Normalerweise verwendet man in React useState und useEffect, um Zustände zu verwalten, doch durch die Einführung von benutzerdefinierten Hooks kann dieser Prozess vereinfacht und übersichtlicher gestaltet werden. Ein häufiges Beispiel ist die Verwaltung der Benutzeranmeldung, -registrierung und -abmeldung.

Im ersten Schritt wird eine Funktion erstellt, die die Benutzerregistrierung übernimmt. Diese Funktion wird innerhalb eines benutzerdefinierten Hooks wie folgt integriert:

javascript
Copy code
export function useUser() {

  const [username, setUsername] = useState(null);
  const register = (newUsername) => setUsername(newUsername);

  const login = (existingUsername) => setUsername(existingUsername);

  const logout = () => setUsername(null);
  return {
    username,
    register,
    login,
    logout,
    isLoggedIn: !!username,
  };
}

Ein weiterer Vorteil dieser Vorgehensweise ist, dass sich Änderungen, wie etwa die später geplante Anbindung an eine Datenbank, problemlos umsetzen lassen, ohne dass jede einzelne Komponente angepasst werden muss. Stattdessen genügt eine Änderung innerhalb des useUser Hooks, und alle Komponenten, die diesen Hook nutzen, profitieren automatisch von der neuen Logik.

Ein Beispiel für einen solchen API-Hook könnte so aussehen:

javascript
Copy code
export function useAPIFetchPosts({ featured }) {
  const { data } = useSuspenseQuery({
    queryKey: ['posts', featured],

    queryFn: async () => await fetchPosts({ featured }),

  });
  return data;
}

Dieser Hook kapselt die Logik der API-Abfrage und stellt der Komponente nur das Ergebnis zur Verfügung. Die Komponente selbst muss sich nicht um die Details der API-Anfrage kümmern, sondern kann sich ausschließlich auf die Anzeige der Posts konzentrieren.

Durch die Verwendung von benutzerdefinierten Hooks für API-Abfragen wird der Code nicht nur übersichtlicher, sondern auch zukunftssicherer. Falls sich die API oder die Art der Datenabfrage in der Zukunft ändern sollte, genügt eine Anpassung in den API-Hooks, ohne dass jede betroffene Komponente erneut überarbeitet werden muss.

Neben diesen grundlegenden Konzepten ist es wichtig zu beachten, dass der Erfolg der Implementierung von Custom Hooks nicht nur in der Modularität des Codes liegt, sondern auch in der einfachen Wartbarkeit. Der Schlüssel dazu ist die Trennung der Verantwortlichkeiten: Die Komponenten kümmern sich ausschließlich um die Benutzeroberfläche und die Interaktion mit dem Nutzer, während alle komplexeren Logiken, wie Benutzeranmeldung oder API-Kommunikation, in benutzerdefinierten Hooks abgelegt werden.

Wichtig ist auch, dass man bei der Verwendung von benutzerdefinierten Hooks eine klare und konsistente Namensgebung beibehält. Ein guter Standard ist es, API-bezogene Hooks mit dem Präfix useAPI zu versehen, damit ihre Funktionalität auf einen Blick erkennbar ist. Dies erleichtert nicht nur die Lesbarkeit des Codes, sondern trägt auch zur Strukturierung bei.

Es ist zu betonen, dass der Einsatz von Custom Hooks nicht nur aus technischer Sicht vorteilhaft ist, sondern auch das Team in der Entwicklung unterstützt. Durch eine klare Strukturierung des Codes wird die Zusammenarbeit innerhalb des Teams vereinfacht, da jeder Entwickler genau weiß, welche Logik wo zu finden ist.

Das Erstellen eigener Hooks bietet nicht nur die Möglichkeit, Code zu optimieren, sondern auch, ihn nachhaltig und erweiterbar zu gestalten. Diese Flexibilität stellt sicher, dass die Anwendung auch in Zukunft weiterentwickelt werden kann, ohne dass umfangreiche Refactorings erforderlich sind. Letztendlich geht es darum, eine saubere Trennung der Verantwortlichkeiten zu gewährleisten und den Code sowohl lesbar als auch anpassbar zu halten.

Wie man komplexe React Hooks mit Vitest testet

Vitest bietet eine einfache Möglichkeit, Tests zu schreiben und auszuführen, und kann automatisch im Überwachungsmodus laufen, sodass Änderungen an den Tests sofort erkannt und ausgeführt werden. Dies sorgt dafür, dass Entwickler die Testergebnisse in Echtzeit sehen können, was den Entwicklungsprozess deutlich beschleunigt. Die folgenden Beispiele zeigen, wie man den Theme Hook und den User Hook mit Vitest überprüft.

Testen des Theme Hooks

Der Theme Hook ist ein Beispiel für einen React Hook, der den Zustand des Themas einer Anwendung verwaltet, z.B. eine primäre Farbe, die durch den Kontext gesetzt wird. Um diesen Hook zu testen, müssen wir den Kontext in einem Wrapper bereitstellen und dann den Hook rendern. Dies ermöglicht es uns, den Hook mit den richtigen Kontextwerten zu testen.

Um den Test für den Theme Hook zu erstellen, folgen wir diesen Schritten:

Zunächst erstellen wir eine Testdatei theme.test.jsx und importieren die notwendigen Funktionen von Vitest sowie die renderHook-Funktion und den ThemeContext, der den Kontext für das Thema bereitstellt:

javascript
Copy code
import { describe, test, expect } from 'vitest';

import { renderHook } from '@testing-library/react';
import { ThemeContext } from '@/contexts/ThemeContext.js';
import { useTheme } from './theme.js';

Anschließend definieren wir einen ThemeContextWrapper, der den Kontext bereitstellt:

javascript
Copy code
function ThemeContextWrapper({ children }) {

  return (
    <ThemeContext.Provider value={{ primaryColor: 'deepskyblue' }}>
      {children}
    </ThemeContext.Provider>
  );
}

Nun können wir den Test schreiben, der prüft, ob die primaryColor korrekt im Hook zurückgegeben wird:

javascript
Copy code
describe('Theme Hook', () => {

  test('should return the primaryColor defined by the context', () => {
    const { result } = renderHook(() => useTheme(), { wrapper: ThemeContextWrapper });
    expect(result.current.primaryColor).toBe('deepskyblue');
  });
});

Die Tests werden sofort von Vitest ausgeführt, wenn der Überwachungsmodus aktiviert ist. Damit ist der Test für den Theme Hook abgeschlossen, und wir können sicherstellen, dass der Hook korrekt auf den Kontext zugreift.

Testen des User Hooks

Ein weiteres Beispiel für das Testen eines komplexen Hooks ist der User Hook, der die Benutzeranmeldung und -registrierung verwaltet und die localStorage-API nutzt. Glücklicherweise übernimmt die jsdom-Um

Warum sollten Entwickler React Hooks nutzen? Ein tiefer Einblick in die Grundlagen und Motivation hinter Hooks

React basiert auf drei fundamentalen Prinzipien, die Entwicklern ermöglichen, klare und wartbare Anwendungen zu schreiben:

1. Deklarativ: Statt React zu sagen, wie es etwas tun soll, sagen wir ihm einfach, was wir erreichen möchten. Wenn sich Daten ändern, müssen wir React nicht sagen, welche Komponenten neu gerendert werden müssen. React kümmert sich um alle Details und stellt sicher, dass alle relevanten Komponenten effizient aktualisiert und neu gerendert werden. Auf diese Weise können Entwickler den Fokus auf die wesentlichen Aufgaben richten, ohne sich um die internen Abläufe sorgen zu müssen.

2. Komponentenbasiert: In React werden Benutzeroberflächen in Komponenten unterteilt, die jeweils ihren eigenen Zustand und ihre eigene Darstellung verwalten. Diese Komponenten können dann kombiniert werden, um komplexe Schnittstellen zu erstellen. Der modulare Ansatz erleichtert das Verwalten von Anwendungen, da jeder Bestandteil in sich geschlossen ist und unabhängig von anderen bearbeitet werden kann.

3. Learn once, write anywhere: React geht davon aus, dass Entwickler ihre Technologien und Workflows so flexibel wie möglich gestalten. Dies bedeutet, dass React keine spezifischen Annahmen über das technologische Umfeld trifft, in dem die Anwendung läuft. Das ermöglicht es Entwicklern, Anwendungen zu erstellen, ohne umfangreiche Änderungen am bestehenden Code vornehmen zu müssen.

Diese Prinzipien bieten eine solide Grundlage für den Bau von Webanwendungen und machen die Arbeit mit React besonders zugänglich und effizient. Doch auch bei diesen Stärken hat sich im Laufe der Jahre herausgestellt, dass es bestimmte Herausforderungen gibt, die React zunehmend schwieriger zu handhaben machten, insbesondere bei der Verwaltung von Zuständen und komplexeren Aspekten der Anwendung.

Ein weiteres Problem war die Handhabung des „this“-Schlüsselwortes in JavaScript. Bei der Arbeit mit Klassenkomponenten war es oft notwendig, das „this“ explizit neu zu binden, um auf das korrekte Objekt zu verweisen. Diese Komplexität führte häufig zu Verwirrung und erschwerte das Debuggen von Code, da Entwickler oft versuchten, das Verhalten von „this“ zu verstehen, das je nach Kontext unterschiedliche Bedeutungen hatte. In einer Event-Handler-Funktion verweist „this“ auf das Element, das das Event ausgelöst hat, in einer Methode jedoch auf die Instanz der Klasse. Diese Unklarheiten und das ständige Umgehen von Referenzen erschwerten das Verständnis des Codes erheblich.

Ein weiteres Problem, das häufig auftrat, war das Schreiben wiederholter Logik, wenn Daten bei der Initialisierung eines Komponenten geladen oder aktualisiert werden mussten. Früher war es erforderlich, die gleichen API-Aufrufe sowohl in componentDidMount als auch in componentDidUpdate zu definieren, um sicherzustellen, dass Daten bei Änderungen der Eingabeparameter (z. B. Props) neu geladen wurden. Diese doppelte Logik führte zu redundanter und unübersichtlicher Codebasis.

Die Einführung von React Hooks hat diese Probleme weitgehend gelöst. Mit Hooks können Zustände und Nebenwirkungen innerhalb von Funktionskomponenten verwaltet werden, was den Code deutlich vereinfacht. Der useState-Hook ermöglicht es, Zustände direkt in Funktionskomponenten zu verwalten, während der useEffect-Hook es Entwicklern erlaubt, logische Nebeneffekte zu definieren, die bei Veränderungen eines Zustands oder einer Eingabe auftreten.

Durch die Verwendung von Hooks werden Entwickler von der Notwendigkeit befreit, mit der „this“-Referenz zu kämpfen, und der Code wird aufgeräumter und besser wartbar. Darüber hinaus ermöglichen Hooks eine feinere Steuerung über Nebenwirkungen und Zustände, sodass weniger redundante Logik und weniger komplexe Lebenszyklusmethoden erforderlich sind. Im Ergebnis reduziert sich die Notwendigkeit, die Architektur der Anwendung durch Klassenkomponenten unnötig zu verkomplizieren.

Für Entwickler, die gerade erst mit React Hooks beginnen, ist es entscheidend, den Paradigmenwechsel zu verstehen, den sie mit sich bringen. Hooks ermöglichen eine saubere Trennung der Zustände und Nebeneffekte, die zuvor in Klassenkomponenten oft in unübersichtlicher Weise kombiniert wurden. In der Praxis bedeutet dies, dass mit Hooks oft weniger Code geschrieben wird, der jedoch viel klarer und einfacher zu verstehen ist.

Neben der technischen Implementierung ist es wichtig zu begreifen, dass React durch Hooks eine stärkere Modularität und Flexibilität erhält. Mit Hooks können Entwickler Funktionalitäten und Logik in kleinere, wiederverwendbare Teile zerlegen, was zu einer saubereren und wartungsfreundlicheren Codebasis führt. Zudem sind Hooks ein integraler Bestandteil der neuesten Entwicklungen in React und werden in zukünftigen Versionen weiterhin stark unterstützt und ausgebaut.