useState-Hook: State und erneute Renderings
Rufen Sie useState auf, um einer Komponente lokalen State hinzuzufügen, aktualisieren Sie den State mit der Setter-Funktion und verstehen Sie, wann und warum React erneut rendert.
useState-Hook: State und erneute Renderings ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist State?
State sind Daten, die sich im Laufe der Zeit ändern und bei einer Änderung die Benutzeroberfläche aktualisieren sollen. Anders als bei normalen Variablen lösen Änderungen am State ein erneutes Rendern der Komponente mit dem neuen Wert aus.
useState-Syntax
useState(initialValue) gibt ein Tupel zurück: den aktuellen Wert und eine Setter-Funktion. Destrukturieren Sie das Ergebnis sofort.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // initial value: 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
}TypeScript: useState typisieren
TypeScript leitet den Typ aus dem Anfangswert ab. Wenn der Anfangswert nicht eindeutig ist (null oder ein leeres Array), fügen Sie einen expliziten Typparameter hinzu.
const [count, setCount] = useState(0); // inferred: number
const [name, setName] = useState(''); // inferred: string
const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicitErneutes Rendern bei State-Änderungen
Der Aufruf der Setter-Funktion plant ein erneutes Rendern. React ruft Ihre Komponentenfunktion mit dem neuen State-Wert erneut auf. Das zurückgegebene JSX ersetzt das vorherige Rendern im virtuellen DOM.
State-Updates sind asynchron
State-Updates werden gebündelt und vor dem nächsten Rendern angewendet, nicht sofort. Lesen Sie den aktualisierten State nicht im selben Event-Handler aus – der neue Wert ist erst beim nächsten Rendern verfügbar.
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
console.log(count); // still 0 — update hasn't applied yet
}Funktionale Updates
Wenn der neue State vom vorherigen State abhängt, verwenden Sie die funktionale Form des Setters. Dadurch vermeiden Sie Fehler durch veraltete Closures.
// Risky (stale closure in async callbacks):
setCount(count + 1);
// Safe (functional update):
setCount(prev => prev + 1);
// Important for buttons that fire rapidly:
function increment() {
setCount(c => c + 1); // always uses the latest value
}State mit Objekten
Wenn der State ein Objekt ist, erstellen Sie stets ein neues Objekt – ändern Sie das vorhandene nicht. React vergleicht anhand der Referenz; Mutationen lösen kein erneutes Rendern aus.
const [user, setUser] = useState({ name: 'Alice', age: 30 });
// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!
// CORRECT: new object
setUser({ ...user, age: 31 });Mehrere State-Variablen
Rufen Sie useState mehrmals für unabhängige State-Variablen auf. Das ist übersichtlicher als ein großes State-Objekt, wenn sich die Werte nicht gemeinsam ändern.
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);Verzögerte Initialisierung
Wenn die Initialisierung des States eine aufwendige Berechnung erfordert, übergeben Sie useState eine Funktion. Sie wird nur beim ersten Rendern ausgeführt, nicht bei jedem erneuten Rendern.
// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());
// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());Wann Sie State nicht verwenden sollten
Nicht jede Variable muss State sein. Abgeleitete Werte (total = items.reduce(…)) sollten während des Renderns berechnet und nicht im State gespeichert werden. State, der aus Props abgeleitet wird, ist meist ein Zeichen von Überengineering.
State nach oben verschieben
Wenn zwei Geschwisterkomponenten State gemeinsam benötigen, verschieben Sie ihn zu ihrem gemeinsamen Vorfahren und geben Sie ihn als Props weiter. Dies ist das grundlegende Muster für die State-Verwaltung in React, bevor Sie Context oder einen Store einsetzen.
Schnelltest
Warum sollten Sie die funktionale Form setCount(prev => prev + 1) statt setCount(count + 1) verwenden?
Zusammenfassung: useState
useState gibt [value, setter] zurück. Der Anfangswert bestimmt den Typ (oder Sie verwenden einen expliziten Generic). Der Setter löst ein erneutes Rendern aus. Verwenden Sie funktionale Updates, wenn der neue State vom alten abhängt. Bei Objekten: Erstellen Sie stets neue Objekte mit Spread und ändern Sie niemals bestehende. Verwenden Sie die verzögerte Initialisierung für aufwendige Berechnungen. Verschieben Sie State zu gemeinsamen Vorfahren, wenn Geschwisterkomponenten ihn gemeinsam benötigen.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „useState-Hook: State und erneute Renderings“ kostenlos?
Ja — der vollständige Text von „useState-Hook: State und erneute Renderings“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „useState-Hook: State und erneute Renderings“?
Rufen Sie useState auf, um einer Komponente lokalen State hinzuzufügen, aktualisieren Sie den State mit der Setter-Funktion und verstehen Sie, wann und warum React erneut rendert. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „useState-Hook: State und erneute Renderings“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- JSX: Syntax und Transpilierung
- Funktionale Komponenten und Props
- useState-Hook: State und erneute Renderings
- Listen, Keys und bedingtes Rendern