Hooks machen React-Funktionen wie State, Ref, Effect und Context in Funktionskomponenten zugänglich. Vor den Namen stehen die Fragen: Wann braucht es einen neuen Render? Womit wird synchronisiert? Warum bleiben Werte und Funktionen erhalten?
§ 00 · Hooks — Funktionen für den Zugriff auf React-Funktionen
Der Name eines Hooks beginnt mit use. Hooks ermöglichen Funktionskomponenten die Nutzung von State und weiteren React-Funktionen. Kombinierst du eingebaute Hooks und lagerst wiederkehrende Zustandslogik in eine eigene Funktion aus, entsteht ein benutzerdefinierter Hook. Er teilt Logik, lässt aber nicht automatisch mehrere Komponenten denselben State teilen.
Rufe Hooks nur auf der obersten Ebene einer Komponente oder eines anderen Hooks auf. Nicht in Bedingungen, Schleifen oder verschachtelten Funktionen: React ordnet den Zustand anhand der Aufrufreihenfolge zu. Aus gewöhnlichen JavaScript-Funktionen werden Hooks nicht aufgerufen.
§ 01 · useState und useRef — sichtbares und unsichtbares Gedächtnis
useState ist für Werte gedacht, die die Ansicht beeinflussen. Eine Aktualisierung über den Setter veranlasst React, den nächsten Render einzuplanen. Berechnest du den nächsten Wert aus dem vorherigen State, kann eine Updater-Funktion wie setCount(count => count + 1) Fehler durch veraltete Werte reduzieren.
useRef bewahrt einen Wert zwischen Render-Vorgängen. Eine Änderung an ref.current löst aber keinen neuen Render aus. Es eignet sich für DOM-Referenzen oder Informationen wie Timer-IDs und frühere Werte, die für die Berechnung der Ansicht nicht unmittelbar nötig sind. Liegt ein anzuzeigender Wert in einem Ref, kann er sich ändern, ohne dass die Ansicht folgt.
| Frage | useState | useRef |
|---|---|---|
| Wert zwischen Render-Vorgängen erhalten | Ja | Ja |
| Neuer Render bei Änderung | Ja | Nein |
| Auf dem Bildschirm sichtbarer Wert | Geeignet | Ungeeignet |
| DOM, Timer und externe Instanzen | Meist unnötig | Geeignet |
§ 02 · useEffect — mit externen Systemen synchronisieren
useEffect synchronisiert eine Komponente mit Systemen außerhalb von React: Netzwerkverbindungen, Browser-APIs, Timern oder Widgets anderer Anbieter. Wer es nur als „Ort für Code nach dem Rendern“ versteht, verlagert leicht auch aus State berechenbare Werte in Effects und verursacht unnötige Render-Vorgänge und wiederholte Ausführung.
Die Setup-Funktion kann bei Bedarf eine Cleanup-Funktion zurückgeben. Cleanup räumt Verbindungen, Abonnements und Timer vor der erneuten Synchronisierung und beim Entfernen der Komponente auf. Das Abhängigkeitsarray muss alle reaktiven Werte enthalten, die der Effect liest. Statt durch ein leeres Array eine bestimmte Ausführungszahl zu erzwingen, prüfe zuerst, womit der Effect synchronisiert.
§ 03 · useReducer — Zustandsübergänge in einer Funktion bündeln
Bei vielen Regeln für Zustandsänderungen oder gemeinsam wechselnden Feldern bündelt useReducer diese Regeln in einer Reducer-Funktion. Die Komponente sendet per dispatch eine action, die beschreibt, was passiert ist. Der Reducer berechnet aus dem aktuellen state und der action den nächsten state.
Ein Reducer muss rein sein und darf vorhandenen State nicht direkt verändern. Er ist useState nicht immer überlegen. Für wenige einfache Werte ist useState leichter lesbar. Der Nutzen von useReducer wächst, wenn mehr Arten von Zustandsübergängen entstehen und sich die Aktualisierungslogik über viele Ereignishandler verteilt.
§ 04 · Context — gemeinsame Werte tief in den Baum reichen
Context versorgt tiefer liegende Komponenten mit gemeinsam benötigten Werten wie Theme, Sprache oder Anmeldeinformationen, ohne sie als Props durch jede Zwischenkomponente zu führen. Ein Provider stellt den Wert bereit; useContext liest und abonniert den Wert des nächsten übergeordneten Providers.
Context ist kein Universalspeicher, der jeden State global machen sollte. Ändert sich der Wert, werden lesende Komponenten neu gerendert. Ein unbedacht eingesetztes großes Objekt, das sich häufig ändert, vergrößert deshalb den Wirkungsbereich. Prüfe zuerst, ob Props oder eine andere Platzierung des State ausreichen. Nutze Context, wenn mehrere weit auseinanderliegende Verbraucher wirklich denselben Wert brauchen.
§ 05 · useCallback — die Funktion selbst erhalten
useCallback liefert dieselbe Funktionsdefinition zurück, solange sich ihre Abhängigkeiten nicht ändern. Das kann helfen, wenn du einen Callback als Prop an ein mit memo umschlossenes Kind übergibst oder wenn die Identität einer Funktion als Abhängigkeit eines anderen Hooks wichtig ist. Der Hook führt die Funktion nicht aus und speichert nicht ihr Ergebnis.
useMemo erhält das Ergebnis einer Berechnung, useCallback die Funktion selbst. memo ist eine Optimierung, die einen erneuten Render einer Komponente bei unveränderten Props überspringen kann. Alle drei sind Werkzeuge gegen gemessene Leistungsprobleme, keine für die Korrektheit notwendige Syntax. useCallback an jede Funktion zu hängen, kann lediglich die Verwaltung von Abhängigkeiten und die Komplexität des Codes erhöhen.
Beitrag lesen: sass.studio.