useState Hook in React einfach erklärt

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>
  );
}
Retro-Bit Official SEGA Saturn 2.4Ghz Wireless Arcade Pad…*
  • Offiziell lizenziert 2, 4-ghz-wireless-controller
  • kompatibel mit SEGA saturn, SEGA Mega Drive Mini, PC/Mac, PS3 und Switch

Letzte Aktualisierung am 16.04.2024 / 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 Parameter setCount ist die Funktion, mit der später der Variable ein Wert zugewiesen wird. In unserem Beispiel wird die Variable mit dem Wert 0 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 eine onClick Funktion hat. Die onClick Funktion wiederum ruft die Funktion zum “Wert-setzen” unserer Variable auf, nämlich setCount. Hier wird einfach der aktuelle Wert genommen (also der Wert den count 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

Ähnliche Beiträge

Beitrag teilen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Cookie Consent Banner von Real Cookie Banner