Was ist State?

Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 22 von 42.

Bisher war alles unveränderlich: Daten gingen hinein, eine Seite kam heraus, nichts änderte sich jemals. Echte Apps merken sich Dinge, die sich ändern: die Anzahl der Likes, ein geöffnetes Menü, der Text in einem Suchfeld. Dieses Gedächtnis nennt man Zustand.

React stellt Komponenten über den Hook useState einen Zustand bereit:

import { useState } from 'react';

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

Eine Zeile, drei Bestandteile:

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

Die goldene Regel: Weise dem Zustand niemals direkt einen Wert zu. count = 5 löst einen Fehler aus, weil count ein const ist. Selbst wenn es geändert werden könnte, wüsste React nichts davon. setCount(5) ändert den Zustand und rendert die Komponente erneut. Durch dieses erneute Rendern wird der Bildschirm aktualisiert.

Probier es selbst

Diese Lektion enthält keine Programmieraufgabe.