React-HooksExplained

24 of 24 rows

Hook↕	Was es tut↕	Wofür du es benutzt↕
State
⤢useState	Hält einen einzelnen Wert, der beim Ändern ein Re-Render auslöst.	Lokaler Komponenten-State: Formularfelder, Toggles, Zähler.
⤢useReducer	Hält State, der von einem Action-Reducer gesteuert wird, wie ein kleiner Store.	State mit mehreren zusammenhängenden Feldern oder komplexen Übergängen.
⤢useRef	Hält einen veränderlichen Wert, der KEIN Re-Render auslöst.	Veränderliche Container, Timer und direkter DOM-Zugriff über .current.
Effekte
⤢useEffect	Führt einen Side Effect nach dem Render aus, mit optionalem Cleanup.	Daten laden, Subscriptions und Synchronisation mit einem externen System.
⤢Effect cleanup	Die Funktion, die ein Effekt zurückgibt, läuft vor dem nächsten Effekt und erneut beim Unmount.	Subscriptions und Timer abbauen oder einen laufenden Fetch abbrechen.
⤢useLayoutEffect	Wie useEffect, aber feuert synchron nach der DOM-Mutation.	Layout lesen oder schreiben, bevor der Browser malt (Toasts, Tooltips).
⤢useEffect vs handlers	Event-Handler laufen als Reaktion auf eine Nutzeraktion; Effekte laufen nach dem Render zur Synchronisation.	Vom Nutzer verursachte Logik gehört in einen Handler, render-verursachte Logik in einen Effekt.
⤢StrictMode	Mountet Komponenten in der Entwicklung doppelt, damit Effekte laufen, sich aufräumen und erneut laufen.	Doppelte Subscriptions und fehlendes Cleanup abfangen, bevor es in Produktion geht.
Performance
⤢useMemo	Cacht einen berechneten Wert, bis sich seine Abhängigkeiten ändern.	Teure Neuberechnungen über Renders hinweg vermeiden; ändere bewusst einen Wert in den Deps, um den Cache zu leeren.
⤢useCallback	Cacht eine Funktionsreferenz, bis sich ihre Abhängigkeiten ändern.	Stabile Callbacks, die an memoisierte Kinder weitergegeben oder als Deps genutzt werden.
⤢React.memo	Überspringt das Re-Render einer Komponente, deren Props unverändert sind.	Schwere Kindkomponenten; übergib eine Vergleichsfunktion als zweites Argument, wenn flache Gleichheit nicht reicht (ein HOC, kein Hook).
Context und externe Handles
⤢useContext	Liest einen Context-Wert ohne Prop-Drilling.	Theme, Locale oder ein authentifizierter Nutzer, über den Baum geteilt.
⤢useImperativeHandle	Passt die Instanz an, die ein Parent über eine Ref sieht.	Eine fokussierte API aus einem Kind über forwardRef freigeben.
Concurrency und weitere
⤢useTransition	Markiert ein State-Update als nicht dringend, damit die UI reaktiv bleibt.	Die Eingabe flink halten, während eine schwere Liste neu rendert.
⤢useDeferredValue	Vertagt einen Wert, damit Updates unterbrechbar sind.	Teure Renders ohne Timer entprellen.
⤢useId	Erzeugt eine stabile, eindeutige ID für Accessibility-Attribute.	Label und Input über Server- und Client-Renders hinweg verknüpfen.
⤢use()	Liest ein Promise oder einen Context während des Renders; der einzige Hook, den du bedingt aufrufen darfst.	Ein Promise mit Suspense auspacken oder Context in einem frühen Return lesen.
⤢useActionState	Hält State, der von einer Form-Action gesteuert wird, inklusive eines Pending-Flags.	Formular-Submits, die Fehler oder aktualisierten State zurückgeben, um sie inline anzuzeigen.
⤢useOptimistic	Rendert sofort einen optimistischen Wert und fällt auf den echten State zurück, wenn die Action abgeschlossen ist.	Einen Like oder eine gesendete Nachricht zeigen, während ihre Server-Anfrage läuft.
⤢useFormStatus	Liest den Pending-Zustand des umgebenden <form>, ohne Props.	Ein Submit-Button, der sich selbst deaktiviert, während sein Eltern-Formular absendet.
⤢useSyncExternalStore	Abonniert einen Store außerhalb von React und liest einen konsistenten Snapshot.	Browser-APIs wie den Online-Status oder State-Stores von Drittanbietern.
⤢useInsertionEffect	Läuft vor den Layout-Effekten, gemacht, um CSS-in-JS-Regeln zu injizieren.	Style-Bibliotheken, die Regeln einfügen müssen, bevor Layout gelesen wird.
⤢useDebugValue	Zeigt ein eigenes Label für den internen State eines Hooks in den React DevTools.	Benennen, was ein Custom Hook enthält, beim Debuggen.
⤢Custom hooks (use*)	Dein eigener Hook, der die Built-ins kombiniert, um Logik zu teilen.	Wiederverwendbares State-Verhalten wie useFetch oder useMediaQuery.