Der useState Hook ist vermutlich der am häufigsten verwendete Hook in React und wurde mit Version 16.8 eingeführt. Vereinfacht ausgedrückt ermöglicht er die Verwaltung von Variablen, die eine wichtige Aufgabe haben.
Der useState Hook ist nämlich ein Schlüsselelement, wenn es darum geht, die Programmierung auf der Funktionsebene mit der Darstellung von UI-Komponenten auf der visuellen Ebene zu verbinden. Er gibt uns nicht nur die Möglichkeit, den Zustand unserer Anwendung zu speichern und zu ändern, sondern wir können auch in Echtzeit sehen, wie sich diese Änderungen auf die Benutzeroberfläche auswirken. Dies erlaubt uns, interaktive und dynamische Websites zu erstellen, die auf Benutzerinteraktionen reagieren. Ein wirklich mächtiges Tool für die moderne Webentwicklung.
Wichtig zu wissen ist, dass die Änderung einer useState Variable zu einem erneuten Rendern der Komponente (also der Webseite) führt. Und das ist der größte Vorteil und dadurch wird unsere Web-App interaktiv.
Ein kleines, interaktives Beispiel
Anhand dieses Beispiels lernen wir die Funktionsweise näher kennen.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
- Offiziell lizenziert 2, 4-ghz-wireless-controller
- kompatibel mit SEGA saturn, SEGA Mega Drive Mini, PC/Mac, PS3 und Switch
Letzte Aktualisierung am 8.02.2025 / Affiliate Links / Bilder von der Amazon Product Advertising API
- im ersten Schritt wird die zusätzliche Komponente useState importiert. Ohne diesen Import könnt ihr den Hook nicht nutzen
- die Funktion
Counter
wird erstellt - nun wird der useState Hook genutzt. Der erste Parameter
count
ist die Variable selbst, der zweite ParametersetCount
ist die Funktion, mit der später der Variable ein Wert zugewiesen wird. In unserem Beispiel wird die Variable mit dem Wert0
initialisiert - im
return
wird die eigentliche Webseite gerendert - innerhalb vom
<p>
Tag wird der Wert unserer useState Variable ausgegeben, hier findet also die Verbindung zum Programm-Teil statt - zusätzlich wird ein
<button>
gerendert der eineonClick
Funktion hat. DieonClick
Funktion wiederum ruft die Funktion zum „Wert-setzen“ unserer Variable auf, nämlichsetCount
. Hier wird einfach der aktuelle Wert genommen (also der Wert dencount
derzeit hat) und 1 addiert - dadurch, dass sich der Wert der useState Variable geändert hat, wird ein erneutes Rendern der Webseite ausgelöst und der im
<p>
Tag dargestellte Wert wird sofort nach einem Klick auf den Button aktualisiert
Natürlich können useState Variablen auch Strings, Arrays, Bools, usw. sein. Weitere Informationen findet ihr in der offiziellen Dokumentation von React:
https://react.dev/reference/react/useState