Wie funktioniert der `useState`-Hook?

Question

Accepted Answer

`useState` gibt einer Funktionskomponente ein Stück **lokalen, reaktiven Zustand**. Es gibt ein Paar zurück: den **aktuellen Wert** und eine **Setter-Funktion**. Das Aufrufen des Setters plant ein erneutes Rendern mit dem neuen Wert ein.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Zwei Dinge, die Anfänger überraschen

**1. Aktualisierungen sind asynchron / gebündelt.** `count` ändert sich nicht in der Zeile nach `setCount`; es hat den neuen Wert beim *nächsten* Rendern. Dies erhöht sich also nur einmal:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

Verwenden Sie den **funktionalen Updater**, wenn der nächste Wert vom vorherigen abhängt, da React den neuesten Wert übergibt:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. Der Initialwert wird nur beim ersten Rendern verwendet.** Übergeben Sie für einen teuren Standard eine Funktion, damit sie einmal ausgeführt wird (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## Warum es wichtig ist

Zustand ist das, was eine Komponente interaktiv macht — React führt die Funktion erneut aus und rendert die UI neu, wenn sich der Zustand ändert.

Behandeln Sie Zustand als **unveränderlich**: Erstellen Sie ein neues Array/Objekt, anstatt zu mutieren, z. B. `setItems([...items, x])`, sonst erkennt React die Änderung möglicherweise nicht.