Der useState-Hook ist ein grundlegender React-Hook, der es Funktionskomponenten ermöglicht, einen Zustand zu besitzen. Er bietet eine Möglichkeit, Zustandsvariablen innerhalb einer Komponente zu deklarieren und zu aktualisieren.

Syntax:

Um den useState-Hook zu verwenden, wird er aufgerufen und der Anfangszustand (initialState) als Argument übergeben. Er gibt ein Array mit zwei Elementen zurück: den aktuellen Zustandswert (state) und eine Funktion (setState) zum Aktualisieren des Zustands.

const [state, setState] = useState(initialState);

• Für die Benennung der state-Variable kann ein beliebiges Wort gewählt werden. Es wird empfohlen, einen Variablennamen zu verwenden, der genau beschreibt, welcher Zustand gespeichert oder aktualisiert wird, wie z. B. inputValue, page, number, name usw.;

• Ebenso besteht bei der Verwendung der setState-Funktion Flexibilität bei der Namensgebung. Es ist jedoch gängige Konvention, dass der Name der setState-Funktion mit "set" beginnt, gefolgt vom Namen der zugehörigen Zustandsvariable. Wenn die state-Variable beispielsweise mail heißt, würde die entsprechende setState-Funktion typischerweise setMail genannt werden.

Hinweis

Wenn setState aufgerufen wird, rendert React die Komponente neu und aktualisiert den Zustand mit dem neuen Wert. Es ist wichtig zu beachten, dass bei der Verwendung von useState die Zustandsvariable kein Objekt sein muss. Sie kann einen primitiven Wert (wie eine Zahl, einen String oder einen Boolean) oder einen komplexen Wert (wie ein Array oder Objekt) enthalten.

Beispiel 1:

Wir erstellen die Komponente Counter, die ihren eigenen Zustand verwaltet. Wenn die Schaltfläche Increment angeklickt wird, aktualisieren wir den Zustand und lösen ein erneutes Rendern der Komponente aus.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In diesem Beispiel wird der useState-Hook verwendet, um eine Zustandsvariable count mit dem Anfangswert 0 zu deklarieren. Die Funktion setCount wird verwendet, um die Variable count zu aktualisieren, wann immer die Schaltfläche angeklickt wird.

Zeilenweise Erklärung:

• Zeile 1: Import des useState-Hooks aus der React-Bibliothek zur Nutzung der Funktionalität;
• Zeile 3: Definition der Komponente Counter mit der üblichen Funktionssyntax;
• Zeile 4: Initialisierung des Zustands mit dem useState-Hook;

1. count repräsentiert den Wert des Zählers. Der Anfangswert ist 0, angegeben in den Klammern von useState(0);
2. setCount ist die Funktion, die den Zustand bei Bedarf aktualisiert.

• Zeilen 6-8: Diese JavaScript-Arrow-Funktion übernimmt die Logik zur Aktualisierung des Zustands. Sie wird ausgeführt, wenn die Schaltfläche "Increment" angeklickt wird. Innerhalb der Funktion wird die Funktion setCount verwendet, um den Zustand zu aktualisieren;
• Zeilen 10-15: Rendert das Markup der Komponente. In Zeile 12 wird der aktuelle Zustandswert (count) angezeigt. Die Schaltfläche in Zeile 13 verwendet das Attribut onClick, um die auszuführende Funktion beim Klicken zu definieren. In diesem Fall wird die Funktion increment übergeben.

Vollständiger App-Code:

Beispiel 2:

Wir erstellen die Form-Komponente mit ihrem eigenen Zustand. Der Benutzer wird aufgefordert, seinen Namen in das Eingabefeld einzugeben. Abhängig von der Eingabe wird der angezeigte Inhalt angepasst.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

In diesem Beispiel wird der useState-Hook verwendet, um eine Zustandsvariable userName mit dem Anfangswert eines leeren Strings zu deklarieren. Die Funktion setUserName aktualisiert die Variable userName, wann immer dies erforderlich ist.

Zeilenweise Erklärung:

• Zeile 1: Import des useState-Hooks aus der React-Bibliothek zur Nutzung der Funktionalität;
• Zeile 3: Definition der Form-Komponente mit der Standard-Funktionssyntax;
• Zeile 4: Initialisierung des Zustands mit dem useState-Hook;

1. userName repräsentiert den Wert des Eingabefelds, initial als leerer String ("") gesetzt, wie in den Klammern von useState("") angegeben;
2. setUserName ist die Funktion, mit der der Zustand bei Bedarf aktualisiert werden kann.

• Zeilen 6-9: Diese JavaScript-Arrow-Funktion übernimmt die Logik zur Aktualisierung des Zustands. Sie wird ausgelöst, wenn der Benutzer etwas in das Feld eingibt. Der Eingabewert wird innerhalb der Funktion mit event.target.value abgerufen. Anschließend wird die Funktion setUserName verwendet, um den Zustand mit dem Wert aus dem Eingabefeld zu aktualisieren;
• Zeilen 11-21: Das Markup der Komponente wird gerendert.
  1. In Zeile 15 wird userName als Anfangswert für das Eingabefeld über das value-Attribut zugewiesen;
  2. In Zeile 16 wird mit dem onChange-Attribut die Funktion angegeben, die bei einer Änderung im Eingabefeld aufgerufen wird.

Vollständiger App-Code: