useState: Was es ist, der State-Hook und die Syntax in React

Was ist useState in React

useState ist ein grundlegender React-Hook, der in Version 16.8 hinzugefügt wurde und funktionalen Komponenten die Möglichkeit gibt, lokalen State zu speichern und zu ändern. Bevor Hooks eingeführt wurden, konnte State nur in Klassenkomponenten über this.state und this.setState verwendet werden, was funktionale Komponenten rein präsentativ machte. useState beseitigte diese Einschränkung und ermöglichte es, vollständige Anwendungen mit funktionalen Komponenten zu schreiben.

Der Hook nimmt ein Argument entgegen — den initialen State-Wert — und gibt ein Array mit zwei Elementen zurück. Das erste Element ist der aktuelle State-Wert, das zweite eine Funktion zu dessen Aktualisierung. React garantiert, dass die Setter-Funktion stabil ist und sich zwischen Rendervorgängen nicht ändert, sodass Sie sie sicher an untergeordnete Komponenten übergeben und in Closures verwenden können.

Laut der React DevTools-Nutzungsumfrage (2024) wird useState in 96% der React-Anwendungen verwendet, was es zum häufigsten Hook im Ökosystem macht. Selbst in Anwendungen, die globalen State über Redux oder Zustand verwenden, bleibt lokaler State über useState der primäre Mechanismus zur Verwaltung des UI-Status — offene Modale, Eingabefeldwerte, aktive Tabs.

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

Wie useState funktioniert

Der interne Mechanismus von useState basiert auf dem Faser-Knoten-System von React. Jede Komponente in React wird durch einen Faser-Knoten repräsentiert, der eine verknüpfte Liste der zugehörigen Hooks speichert. Wenn eine Komponente useState aufruft, erstellt React einen neuen Knoten in dieser Liste und speichert darin den aktuellen State-Wert und einen Verweis auf die Aktualisierungswarteschlange.

Wenn die Setter-Funktion aufgerufen wird, aktualisiert React den State nicht sofort. Stattdessen stellt es die Aktualisierung in eine Warteschlange für ausstehende States, plant eine Neurenderung der Komponente und berechnet erst während des nächsten Rendervorgangs den neuen State basierend auf dem alten und den angewandten Aktualisierungen. Dies gewährleistet Batching — wenn Sie den Setter dreimal in einem Ereignisbehandler aufrufen, gruppiert React sie zu einer einzigen Neurenderung.

Laut der React-Arbeitsgruppe — React 18 (2024) wurde das automatische Batching in React 18 erweitert: State-Aktualisierungen werden jetzt nicht nur in Ereignisbehandlern, sondern auch in setTimeout-, Promise-Callbacks und nativen Ereignisbehandlern gruppiert. Dies brachte eine Leistungssteigerung von bis zu 30% in Szenarien mit mehreren State-Aktualisierungen.

Funktionale State-Aktualisierung

Wenn der neue State vom vorherigen abhängt, verwenden Sie die funktionale Form des Setters: setCount(prev => prev + 1). React übergibt den tatsächlichen State-Wert zum Zeitpunkt der Aktualisierung an die Funktion, was auch bei gebatchten Aktualisierungen Korrektheit gewährleistet. Ohne die funktionale Form kann setCount(count + 1) einen veralteten Wert verwenden, wenn es mehrmals hintereinander aufgerufen wird.

// Lazy Initialization — wird nur einmal ausgeführt
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

useState-Syntax: Deklaration und Aktualisierung

Die grundlegende Syntax von useState ist äußerst prägnant: const [state, setState] = useState(initialValue). Der Anfangswert wird nur während des ersten Rendervorgangs verwendet; bei nachfolgenden Rendervorgängen ignoriert React ihn und gibt den aktuell gespeicherten Wert zurück. Wenn die anfängliche Berechnung teure Operationen erfordert, übergeben Sie eine Initialisierungsfunktion: useState(() => computeExpensiveInitial()).

Lazy Initialization ist besonders wichtig, wenn der Anfangswert aus localStorage, komplexer Datentransformation oder der Analyse von URL-Parametern stammt. React ruft die Initialisierungsfunktion nur einmal auf — beim Mounten der Komponente, was bei nachfolgenden Rendervorgängen Ressourcen spart. Ohne Lazy Initialization würde der teure Ausdruck bei jedem Rendervorgang ausgewertet, selbst wenn sein Ergebnis ignoriert wird.

// Objekt-State — neue Referenz erstellen
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState mit verschiedenen Datentypen

useState funktioniert gleichermaßen gut mit Primitiven (Zahlen, Zeichenketten, Booleans) und Referenztypen (Arrays, Objekte). Es gibt jedoch einen wichtigen Unterschied: Bei Primitiven erkennt React Änderungen über den Wert, bei Objekten und Arrays über die Referenz. Das Mutieren eines vorhandenen Objekts ohne Erstellen eines neuen löst keine Neurenderung aus, da die Referenz dieselbe bleibt.

Wenn Sie mit Objekten und Arrays arbeiten, erstellen Sie immer eine neue Kopie mit den geänderten Daten. Verwenden Sie für Objekte die Spread-Syntax: setUser(prev => ({...prev, name: newName})). Verwenden Sie für Arrays Methoden, die ein neues Array zurückgeben: filter, map, concat, oder die Spread-Syntax zum Hinzufügen von Elementen. Mutationsmethoden wie push, pop, splice funktionieren nicht — React ignoriert sie, da sich die Array-Referenz nicht geändert hat.

// ✅ Richtig: Hooks auf oberster Ebene
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

Regeln für die Verwendung von Hooks mit useState

Wie alle React-Hooks folgt useState zwei Regeln. Erstens: Rufen Sie Hooks nur auf der obersten Ebene Ihrer Komponente auf — platzieren Sie sie nicht innerhalb von Bedingungen, Schleifen oder verschachtelten Funktionen. Dies stellt sicher, dass Hooks bei jedem Rendervorgang in derselben Reihenfolge aufgerufen werden, was für die interne verknüpfte Liste von React entscheidend ist.

Die zweite Regel: Rufen Sie Hooks nur von React-Funktionskomponenten oder benutzerdefinierten Hooks auf. Rufen Sie useState nicht von normalen Funktionen, Callbacks oder Klassenkomponenten auf. Ein Verstoß gegen diese Regeln führt zum Fehler Invalid hook call, den React zur Laufzeit abfängt.

• Nicht in Bedingungen — if (flag) { useState(0) } verletzt die Reihenfolge der Hook-Aufrufe.
• Nicht in Schleifen — for (...) { useState(0) } macht die Reihenfolge unvorhersehbar.
• Nicht in Callbacks — useEffect(() => { useState(0) }, []) zerstört die verknüpfte Liste.

// ❌ Problem des veralteten Closures
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ Mit funktionaler Aktualisierung behoben
}

// count ist veraltet!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

Häufige Fehler mit useState

Der häufigste Fehler ist die direkte Mutation von Objekten und Arrays anstatt neue Referenzen zu erstellen. Entwickler sind den veränderbaren Stil von Klassenkomponenten gewohnt, wo this.state.user.name = „Neuer Name“ funktionierte (obwohl auch dies nicht empfohlen wurde). In funktionalen Komponenten wird eine solche Mutation einfach ignoriert: React sieht keine Referenzänderung und rendert die Komponente nicht neu.

• Objektmutation — user.name = „Neu“ anstelle von setUser({...user, name: „Neu“}).
• Veralteter Closure — Verwendung eines veralteten Werts im Setter ohne die funktionale Form.
• Zusätzliche Neurenderungen — Aufruf des Setters mit demselben Wert (React 18 führt dennoch eine Rendering für Primitive durch).
• State zurücksetzen — unbeabsichtigtes Aktualisieren der key-Prop einer Komponente, was zu deren erneutem Mounten führt.

Das Problem des veralteten Closures tritt auf, wenn ein an useEffect oder einen Ereignisbehandler übergebener Callback zum Zeitpunkt der Callback-Erstellung einen veralteten State-Wert aus dem Closure erfasst. Die Lösung besteht darin, die funktionale Form des Setters zu verwenden oder die erforderlichen Werte in das Abhängigkeitsarray von useEffect aufzunehmen. Laut der React-Dokumentation — Hooks FAQ (2025) sind veraltete Closures nach falschen Abhängigkeitsarrays die zweithäufigste Ursache für Fehler in Hooks.

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);