React-Hooks: useState, useEffect und Co. verständlich erklärt

Kurz: Hooks sind Funktionen, mit denen React-Komponenten Zustand und Nebenwirkungen nutzen; useState speichert Werte, useEffect läuft nach dem Rendern, und eigene Hooks bündeln Logik.

Genauer: In React sind Komponenten Funktionen, die Oberfläche beschreiben. Mit Hooks (seit React 16.8) bekommen sie Gedächtnis und Reaktionen auf Ereignisse, ohne Klassen. Regeln: Hooks nur auf oberster Ebene der Komponente und nur in Komponenten oder eigenen Hooks aufrufen.

Im Detail

useState: Zustand

function Zaehler() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Geklickt: {n}</button>;
}

Ändert man den Zustand mit setN, rendert React die Komponente neu. Zustand nie direkt verändern (n++, liste.push), sondern neue Werte setzen (setListe([...liste, x])). Bei Abhängigkeit vom alten Wert: setN(v => v + 1).

useEffect: Nebenwirkungen

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // Aufräumen
}, [tick]); // Abhängigkeiten

Für Dinge außerhalb von React: Daten laden, Timer, Event-Listener, Dokumenttitel. Das Abhängigkeits-Array bestimmt, wann der Effekt neu läuft ([] = einmal nach dem ersten Rendern). Die Aufräumfunktion verhindert Lecks. Vermeide Effekte, wo Berechnung beim Rendern reicht; Daten laden besser mit Server Components, TanStack Query oder SWR.

Weitere wichtige Hooks

• useRef: veränderlicher Wert/DOM-Zugriff ohne Neu-Rendern.
• useMemo / useCallback: Ergebnisse/Funktionen zwischenspeichern (nur bei echten Leistungsproblemen).
• useContext: Werte ohne Weiterreichen durch alle Ebenen.
• useReducer: komplexer Zustand mit Aktionen.
• useTransition / useDeferredValue: Eingaben flüssig halten.
• Eigene Hooks (useOnline(), useLocalStorage()) bündeln wiederverwendbare Logik.

Typische Fehler

• Endlosschleife: Zustand im Effekt ohne passende Abhängigkeiten setzen.
• Veralteter Wert (Stale Closure): Abhängigkeiten vergessen; ESLint-Regel react-hooks/exhaustive-deps nutzen.
• Zustand ableitbar? Dann berechnen statt speichern.
• Zustand hochziehen (Lifting State Up) statt zu duplizieren.
• Schlüssel (key) in Listen stabil wählen. Üben: kleine Projekte (Todo-Liste, Zähler, Suchfilter) und die offizielle Doku react.dev.

Siehe auch: React, Next.js App Router, TypeScript, Events und Ereignisse