Lokaler State mit useState

Gib deinen Komponenten mit useState ein Gedächtnis, damit du Werte anzeigen kannst, die sich ändern, während der Nutzer interagiert.

8 Min. · 3 Fragen

Ein Like-Zähler, der Text, der in ein Suchfeld eingegeben wird, ein Menü, das sich öffnet und schließt: All diese Werte ändern sich, während die App benutzt wird. Eine normale Variable reicht nicht aus, denn React aktualisiert den Bildschirm nicht, wenn sie sich ändert. Du brauchst das, was man State (Zustand) nennt: ein Gedächtnis, das zur Komponente gehört. Du erstellst es mit useState, einem Hook, also einer speziellen von React bereitgestellten Funktion, deren Name mit use beginnt.

import { useState } from "react";

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

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

Sehen wir uns die wichtigste Zeile genauer an: const [count, setCount] = useState(0);. useState(0) erstellt einen State mit dem Anfangswert 0 und gibt ein Array aus zwei Elementen zurück, die du per Destrukturierung entnimmst: count ist der aktuelle Wert und setCount ist die Aktualisierungsfunktion, der einzige erlaubte Weg, diesen Wert zu ändern. Hier löst onClick bei jedem Klick setCount(count + 1) aus (Events behandeln wir ausführlich in der nächsten Lektion).

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

Wenn du setName aufrufst, macht React zwei Dinge: Es speichert den neuen Wert und führt dann deine Komponentenfunktion erneut aus, um die Ausgabe neu zu berechnen. Das nennt man ein Re-Render. Deshalb aktualisiert sich der Absatz Hello, {name}! bei jedem getippten Buchstaben von selbst: Du beschreibst das Ergebnis, React erledigt den Rest.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was gibt der Aufruf useState(0) zurück?
   • Nur den aktuellen Wert des States
   • Ein Array mit dem aktuellen Wert und seiner Aktualisierungsfunktion
   • Ein Objekt, das den gesamten State der Komponente enthält
2. Was ist der richtige Weg, den Zähler zu erhöhen?
   • count = count + 1
   • useState(count + 1)
   • setCount(count + 1)
3. Was passiert, wenn du die Aktualisierungsfunktion eines States aufrufst?
   • React führt die Komponente erneut aus, um die Anzeige zu aktualisieren
   • Die ganze Seite wird im Browser neu geladen
   • Nichts, du musst die Seite außerdem von Hand aktualisieren