State ist in der Webentwicklung der Zustand einer Anwendung, also alle Daten, die sie in einem bestimmten Moment hält. Dazu gehört, was im Warenkorb liegt, welcher Tab offen ist, ob jemand angemeldet ist und was gerade in einem Formularfeld steht.
- State
Die Gesamtheit der Daten, die eine Anwendung oder Komponente zu einem Zeitpunkt hält und aus denen sie ihre Darstellung ableitet.
Beispiel: „Der State des Filters merkt sich die gewählten Branchen, auch wenn jemand zwischendurch die Seite wechselt.“Auch: Zustand. Im Englischen sind Application State und UI State üblich, je nachdem, ob die Daten der ganzen Anwendung oder nur der Oberfläche gemeint sind.
Verwandt: Reaktivität. Sie sorgt dafür, dass die Oberfläche jeder Änderung am State folgt.
Lokaler und globaler State
Lokaler State gehört einer einzelnen Komponente, etwa ob ein Akkordeon offen ist. Globaler State wird von vielen Teilen der Anwendung gebraucht, etwa der angemeldete Nutzer oder der Inhalt des Warenkorbs.
Für globalen State gibt es eigene Werkzeuge, das sogenannte State Management. Bekannte Bibliotheken sind Redux und Zustand für React sowie Pinia für Vue.js.
Wo State gespeichert wird
Im Speicher des Browsers, solange die Seite offen ist. Wird sie neu geladen, ist er weg, es sei denn, er steht zusätzlich in der Adresse, im Local Storage oder auf dem Server.
Für Websites lohnt es sich, wichtigen State in die URL zu schreiben, etwa die gewählten Filter einer Liste. Dann lässt sich die Ansicht als Link teilen, und der Zurück-Button funktioniert wie erwartet.
Warum State eine häufige Fehlerquelle ist
Weil derselbe Wert schnell an zwei Stellen liegt und auseinanderläuft. Zeigt der Warenkorb oben drei Artikel und die Kasse zwei, steckt fast immer ein doppelt geführter State dahinter.
Die Faustregel lautet deshalb: Jeder Wert hat genau einen Ort, an dem er gespeichert wird, und alle anderen Stellen lesen ihn von dort.