Der useState-Hook in React

Der useState-Hook ist dein wichtigstes Werkzeug, um in React-Komponenten Zustand zu verwalten. Ohne State wären deine Komponenten statisch – mit State werden sie interaktiv. In diesem Beitrag schauen wir uns Schritt für Schritt an, wie useState funktioniert, wie du ihn richtig einsetzt und welche Fallstricke du kennen solltest.

Die Grundlagen von useState

useState ist eine Funktion, die du aus React importierst. Sie gibt ein Array mit zwei Elementen zurück: den aktuellen Wert und eine Setter-Funktion, mit der du den Wert änderst. Per Array-Destrukturierung holst du dir beide heraus:

import { useState } from "react";

function Beispiel() {
  const [wert, setWert] = useState("Startwert");

  return <p>{wert}</p>;
}

Das Argument von useState ist der Anfangswert. Hier ist es der String "Startwert". Beim ersten Rendern bekommt wert genau diesen Wert.

State aktualisieren

Um den State zu ändern, rufst du die Setter-Funktion auf. React merkt sich den neuen Wert und rendert die Komponente neu:

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

  return (
    <div>
      <p>Aktueller Stand: {count}</p>
      <button onClick={() => setCount(count + 1)}>Plus</button>
      <button onClick={() => setCount(count - 1)}>Minus</button>
    </div>
  );
}

Wichtig: Du veränderst count nie direkt. Immer läuft die Änderung über setCount. Nur so weiß React, dass es neu rendern muss.

Updates auf Basis des alten Werts

Wenn dein neuer Wert vom alten abhängt, solltest du die funktionale Form der Setter-Funktion nutzen. Sie bekommt den aktuellen Wert als Argument:

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

  function dreimalErhoehen() {
    setCount((alt) => alt + 1);
    setCount((alt) => alt + 1);
    setCount((alt) => alt + 1);
  }

  return <button onClick={dreimalErhoehen}>{count}</button>;
}

Würdest du hier dreimal setCount(count + 1) schreiben, würde der Zähler nur um eins steigen – weil count innerhalb einer Render-Runde gleich bleibt. Mit der funktionalen Form steigt er korrekt um drei.

State mit Objekten und Arrays

State muss nicht nur eine Zahl sein. Du kannst auch Objekte oder Arrays speichern. Dabei gilt: Erzeuge immer eine neue Kopie, statt den alten Wert zu verändern. Das gelingt elegant mit dem Spread-Operator:

function Profil() {
  const [user, setUser] = useState({ name: "Anton", alter: 30 });

  function geburtstag() {
    setUser({ ...user, alter: user.alter + 1 });
  }

  return (
    <button onClick={geburtstag}>
      {user.name} ist {user.alter}
    </button>
  );
}

Mit { ...user } kopierst du alle bisherigen Eigenschaften und überschreibst nur alter. Bei Arrays funktioniert das ähnlich, etwa mit setListe([...liste, neuerEintrag]).

Mehrere State-Variablen

Du kannst useState beliebig oft in einer Komponente aufrufen. Oft ist es übersichtlicher, mehrere kleine States zu führen statt eines großen Objekts:

function Formular() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </form>
  );
}

Fazit

Mit useState hauchst du deinen Komponenten Leben ein. Merke dir: Der Hook gibt dir Wert und Setter zurück, du änderst State nie direkt, und wenn der neue Wert vom alten abhängt, nutzt du die funktionale Form. Bei Objekten und Arrays erstellst du immer eine neue Kopie. Wenn du diese Regeln verinnerlichst, hast du die Grundlage für fast jede interaktive React-App gelegt. Im nächsten Beitrag geht es um useEffect – den Hook für Seiteneffekte.