Funktionsweise von useState()

Einführung in die Funktionsweise

Durch den Aufruf von useState() innerhalb eines Components werden bestimmte Daten registriert. Es besteht eine Ähnlichkeit zu Definition von Variablen oder Konstanten in reinem JavaScript. Allerdings gibt es eine Besonderheit. React überwacht die registrierten Elemente intern. Bei einer Änderung von diesen überwachten Daten wird React das Component neu evaluieren.

Das erfolgt durch die Prüfung seitens React auf Änderung der verwendeten Daten im Component. Das Wichtigste ist, dass eine Überprüfung stattfindet, ob die UI aktualisiert werden soll, weil sich die Daten geändert haben, weil, beispielsweise, diese Daten innerhalb von JSX eingesetzt werden. Ist ein Update erforderlich, wird React das echte DOM an der Stelle aktualisieren, an welcher diese Daten verwendet werden. Wenn kein Update notwendig ist, endet die Re-Evaluierung ohne Aktualisierung von DOM.

Der gesamte Prozess beginnt mit dem Aufruf von useState() innerhalb des Components. Dabei wird ein Zustandswert erzeugt (gespeichert und verwaltet intern durch React) und dem entsprechenden Component zugeordnet.

Initialer Wert wird durch die Angabe des Parameters an useState() gesetzt. In unserem Beispiel ist useState(0). Spricht, der initiale Wert ist gleich 0.

import { useState } from 'react';

const CounterUseStateBased = () => {
    const [currentCounter, setCounter] = useState(0);

    return (
        <div>
            <p>Anzahl Klicks: {currentCounter}</p>
            <button onClick={() => setCounter(currentCounter + 1)}>
                Klick
            </button>
        </div>
    );
};

export default CounterUseStateBased;

Folgende Zeile ist die Stelle, an der ein Zustand bzw. zu überwachende Dateneinheiten (in diesem Fall currentCounter) registriert werden.

const [currentCounter, setCounter] = useState(0);

Wie man allerdings am Konstrukt sehen kann, nimmt die useState() Funktion nicht nur einen initialen Wert an, sondern gibt auch bestimmte Sachen zurück.

Im oberen Beispiel wird Destruktion eingesetzt. Man könnte das obere Beispiel auch folgendermaßen umschreiben.

const counterState = useState(0);
const currentCounter = counterState[0];
const setCounter = counterState[1];

Blick unter die Haube von React

Zugriff auf den Wert

React verwaltet die Zustände in einem internen Speicher, der für uns Entwickler nicht zugänglich ist. Weil wir aber oft auf die Werte in der Zustandsverwaltung zugreifen müssen, stellt uns React einen Weg zur Verfügung, um sie auszulesen. Das erfolgt durch den ersten Wert des Rückgabewertes der useState() Funktion. Das erste Element beinhaltet immer den aktuellen Wert. Dieser Wert kann entsprechend für die Ausgabe oder an anderen Stellen im Component verwendet werden.

Setzen eines Werts

Ebenfalls müssen Werte in der Zustandsverwaltung (State Management) regelmäßig aktualisiert werden. Weil aber die Verwaltung nicht auf einem direkten Wege erfolgt, sondern durch React übernommen wird, stellt uns React eine Funktion bereit, mit der wir den Wert aktualisieren können. Durch die Verwendung dieser Funktion wird React über eine Änderung informiert und kann nachgelagerte Aktualisierung(en) durchführen. Das ist das zweite Element im Rückgabewert der useState() Funktion.

Im oberen Beispiel haben wir die Funktion setCounter genannt. Diese rufen wir auf und übergeben einen Wert als Parameter, welcher als neuer Wert gesetzt werden soll.

Konstanten bei Destruktion

Wenn der Rückgabewert der useState() Funktion bereits bei der Zuweisung in einzelne Elemente zerlegt wird, erfolgt in den meisten Fällen eine Zuweisung mit const. An dieser Stelle könnte die Frage entstehen, wie es möglich ist, dass die Werte dennoch aktualisiert werden können.

Der Grund hierfür ist die Aktualisierung bzw. eine Neu-Ausführung des Components. Im Grunde erfolgt bei einem Update eine neue Zuweisung. Auch die Funktion useState() wird in Fall eines Updates neu ausgeführt.

Namenskonventionen

Typischerweise wird tatsächlich die destruktive Version bei Verwendung von useState() eingesetzt.

const [myVar, setMyVar] = useState('');

Bekanntlich ist es technisch problemlos möglich die Namen bei der Destruktion frei wählen zu können. Allerdings gibt es in React eine Namenskonvention, die uns mitteilt, wie am besten diese Variablennamen zusammengesetzt werden sollen.

Das erste Element

const [currentValue, updateFunction] = userState();

Das erste Element (der aktuelle Wert) sollte so gewählt werden, dass am besten den Zweck beschreibt und man anhand dem Namen ableiten kann, welchen Zweck diese Variable hat bzw. welche Daten sie beinhaltet.

Folgende Beispiele sind gut.

• enteredPrice
• userEmail
• productCounter
• ...

Generische Namen oder Namen wir setValue sollten vermieden werden.

Das zweite Element

const [currentValue, updateFunction] = userState();

Das zweite Elemente, der Name der Funktion, die zum Setzen eines neuen Wertes verwendet wird, sollte wie folgt gewählt werden. Es soll klar sein, dass es sich um eine Funktion handelt und was sie tut. Im Allgemeinen besagt die Namenskonvention, dass das Schema so aussieht: setXYZ, wobei XYZ der Name ist, welchen man für das erste Element vergeben hat.

Folglich wird aus enteredPrice der Name der Funktion setEnteredPrice. Oder aus userEmail wird setUserEmail.