Einführung

State bezeichnet den internen Zustand einer Komponente, der sich über die Lebensdauer hinweg verändern kann. Er ermöglicht das Reagieren auf Benutzerinteraktionen, Eingaben und andere Ereignisse. Mit Hooks wie useState lassen sich Werte speichern, aktualisieren und gezielt ins Rendering einbinden, sodass die Benutzeroberfläche automatisch auf Änderungen reagiert.

Inhaltsverzeichnis

Was ist State?

In React bezeichnet State (Zustand) ein zentrales Konzept, das es Komponenten erlaubt, Daten intern zu speichern und dynamisch auf Änderungen zu reagieren. Anders als bei Props, die von außen an eine Komponente übergeben werden, wird State innerhalb einer Komponente verwaltet und kann sich im Laufe der Zeit ändern - z.B. durch Benutzer-Interaktionen oder API-Antworten.

State ist ein Objekt, das Daten enthält, die sich im Laufe des Lebenszyklus einer Komponente ändern können. Wird der State geändert, rendert React die Komponente (und ihre Kind-Komponenten) neu, um die Änderungen in UI zu zeigen.

State in Klassenkomponenten (traditionell)

Bevor wir zu modernen Hooks kommen, werfen wir einen kurzen Blick auf State in Klassenkomponenten, um das Konzept besser zu verstehen.

Dazu erstellen wir ein Component CounterClassBased und werden in diesem Component den klassenbasierten Ansatz einsetzen.

            CounterClassBased.jsx
        
import React, { Component } from 'react';

class CounterClassBased extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <p>Anzahl Klicks: {this.state.count}</p>
                <button onClick={this.increment}>Klick</button>
            </div>
        );
    }
}

export default CounterClassBased;

Wenn man nun dieses Component irgendwo verwendet, erhält man funktionierendes Stück der Anwendung.

<CounterClassBased />

React State - State in class based component

Hook `useState()`

Mit der Einführung von React Hooks in React 16.8 wurde das State-Management in Funktionskomponenten revolutioniert. Der wichtigste Hook für State-Management ist useState.

Hooks stellen ein Schlüsselkonzept in React dar. Dies sind spezielle Funktionen, welche nur innerhalb von React Components oder innerhalb von anderen Hooks verwendet werden können. Hooks fügen bestimmte Funktionen und Verhalten zu React Components, in denen sie verwendet werden.

Beispielsweise der Hook useState() ermöglicht es einem Component einen bestimmten Zustand zu setzen und zu verwalten.

Beispiel mit `useState()`

Wir werden nun das obige Beispiel, welches mit einem klassenbasierten Ansatz geschrieben war, umbauen und nach eine Funktion umschreiben useState() verwenden.

            CounterClassBased.jsx
        
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;

Die Verwendung erfolgt auf klassischem Wege.

<CounterUseStateBased />

Das Ergebnis ist identisch mit zu dem oberen Beispiel. Allerdings wird hier der moderne Ansatz verwendet.

React State - useState Hook Beispiel

navigation Navigation