Verwendung des 'useState'-Hooks in React

Der 'useState'-Hook in React ist ein wichtiger Bestandteil in funktionalen Komponenten. Er wird für die Verwaltung des Zustands oder Status (engl. "state") innerhalb dieser Komponenten gebraucht. Das bedeutet konkret, dass Sie mit Hilfe des Hooks Variablen definieren können, deren Werte innerhalb der Komponente aktualisiert und von anderen Elementen innerhalb der Komponente abgerufen werden können.

Praktisches Beispiel

Ein einfaches Beispiel für die Nutzung von 'useState' ist eine Schaltfläche zum Umschalten:

import React, { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  const handleToggle = () => {
    setIsOn(!isOn);
  }

  return (
    <button onClick={handleToggle}>{isOn ? 'AN' : 'AUS'}</button>
  );
}

export default ToggleButton;

In diesem Beispiel haben wir useState dazu verwendet, einen Zustand isOn zu schaffen, der zunächst false ist. Weiterhin haben wir die Funktion setIsOn definiert, die den Zustand isOn umschaltet. Immer wenn der Button geklickt wird, wird handleToggle aufgerufen und schaltet isOn um.

Best Practices und weitere Anmerkungen

Es gibt einige Best Practices für die Nutzung des 'useState'-Hooks in React. Eine davon ist, dass Sie mehrere Zustände in derselben Komponente haben können. Statt also einen großen Zustandsobjekt zu erstellen, können Sie mehrere useState-Hooks verwenden.

Ein weiterer Punkt ist, dass der Zustand in funktionalen Komponenten immer den aktuellen Wert und nicht den vorherigen beinhaltet. Daher ist es wichtig, immer den aktuellen Zustand zu verwenden, wenn Zustandsänderungen durchgeführt werden.

Beachten Sie bitte auch, dass der 'useState'-Hook nicht zum Verknüpfen des Zustands zwischen Komponenten, zur Aktualisierung des Zustands in Klassenkomponenten oder zur Speicherung von Daten im lokalen Speicher des Browsers verwendet wird. Für diese Anforderungen gibt es in React andere Mittel und Methoden.