Was ist State?

Alles bisher war statisch: Daten gingen ein, eine Seite kam heraus, nichts hat sich jemals verändert. Echte Apps erinnern sich an Dinge, die sich ändern: eine Anzahl von Likes, ein geöffnetes Menü, der Text in einem Suchfeld. Dieses Gedächtnis nennt man state (Zustand).

React gibt Komponenten mit dem useState-Hook einen State:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Eine Zeile, drei Teile:

• count: der aktuelle Wert
• setCount: die Funktion, die ihn ändert
• useState(0): der Startwert

Die goldene Regel: State niemals direkt zuweisen. count = 5 ändert eine Variable, die React nicht beobachtet. setCount(5) ändert den State und rendert die Komponente neu. Dieses erneute Rendern aktualisiert den Bildschirm.