React ist eine beliebte JavaScript-Bibliothek, die für die Erstellung von Benutzeroberflächen verwendet wird. Sie bietet Entwicklern eine Vielzahl von Werkzeugen, darunter Hooks, die das Erstellen von Anwendungen einfacher und effizienter machen.

Einer der am häufigsten verwendeten Hooks ist useState, mit dem Entwickler funktionalen Komponenten Zustände hinzufügen können.

In diesem Artikel werfen wir einen detaillierten Blick auf useState, seine Einsatzmöglichkeiten und die besten Praktiken für seine Implementierung.

Was ist der useState Hook?

Bevor wir uns mit den Besonderheiten von useState befassen, wollen wir zunächst definieren, was Hooks sind und wie sie sich von herkömmlichen Klassenkomponenten unterscheiden.

Ein Hook ist eine Funktion, mit der du den Status und andere React-Funktionen in funktionalen Komponenten nutzen kannst.

Im Gegensatz zu Klassenkomponenten verfügen funktionale Komponenten nicht über eine eingebaute Möglichkeit, den Status zu speichern. Hooks wie useState lösen dieses Problem, indem sie es dir ermöglichen, Zustände zu funktionalen Komponenten hinzuzufügen.

Hintergrund des useState Hooks

Vor der Einführung des useState Hooks in React 16.8 war es funktionalen Komponenten nicht möglich, ihren eigenen Status zu speichern. Stattdessen mussten Entwicklerinnen und Entwickler Klassenkomponenten oder externe Zustandsverwaltungsbibliotheken wie Redux verwenden, um den Zustand in ihren Anwendungen zu verwalten.

Obwohl Klassenkomponenten und externe Bibliotheken für die Zustandsverwaltung immer noch praktikable Optionen sind, hat die Einführung des useState Hook es Entwicklern viel einfacher gemacht, ihren funktionalen Komponenten Zustände hinzuzufügen und die React-API insgesamt zu vereinfachen.

Mit dem useState Hook können Entwicklerinnen und Entwickler nun funktionale Komponenten für die meisten Anwendungsfälle verwenden, was die Menge des benötigten Boilerplate-Codes reduziert und die Bewertung des Zustands in ihren Anwendungen erleichtert.

Bestandteile der useState-Syntax

Der useState Hook nimmt einen anfänglichen Statuswert als Argument und gibt ein Array mit zwei Elementen zurück: den aktuellen Statuswert und eine Funktion, die den Statuswert aktualisiert.

Hier ist die Syntax:

const [state, setState] = useState(initialState);
  • state: Der aktuelle Statuswert.
  • setState: Eine Funktion, die den Zustandswert aktualisiert.
  • initialState: Der Anfangswert der Zustandsvariable, die deklariert wird. Dieser Wert ist optional. Wenn kein Wert angegeben wird (was nicht ratsam ist), wird er automatisch auf undefined gesetzt.

Es ist wichtig zu wissen, dass React bei Verwendung des useState Hooks deine Komponente automatisch neu rendert, sobald sich der Statuswert ändert.

So verwendest du den useState Hook

Um useState zu implementieren, rufst du die Funktion auf und gibst einen Anfangswert als Argument an. Die Funktion gibt ein Array zurück, das den aktuellen Statuswert und eine Funktion zur Aktualisierung des Status enthält.

Hier ist ein Beispiel für die Verwendung von useState zur Verwaltung eines einfachen Zählers:

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

In diesem Beispiel initialisieren wir den Zustand von count mit dem useState Hook auf 0. Dann zeigen wir den aktuellen Zählwert und eine Schaltfläche an. Wenn die Schaltfläche angeklickt wird, wird der Zählwert erhöht, da wir mit der Funktion setCount eine Pfeilfunktion hinzugefügt haben.

<button onClick={() => setCount(count + 1)}>Click me</button>

Wenn du den useState Hook verwendest, musst du daran denken, ihn aus der React-Bibliothek zu importieren. Wenn du den Import vergisst, wirst du wahrscheinlich auf Fehler stoßen, wenn du versuchst, den Hook zu verwenden. Hier erfährst du, wie du useState importierst:

import { useState } from 'react';

Indem du useState in die Import-Anweisung einfügst, sagst du React, dass du den useState Hook in deiner Komponente verwenden willst.

Verwendung verschiedener Datentypen mit dem useState Hook in React

Der useState Hook in React ist nicht darauf beschränkt, nur String- oder numerische Datentypen zu verwalten. Du kannst ihn auch verwenden, um Zustände für verschiedene Datentypen zu verwalten, z. B. für Arrays, Objekte und Boolesche Werte.

Arrays mit dem useState Hook verwenden

Du kannst den useState Hook verwenden, um ein Array in React zu verwalten. Wenn du zum Beispiel ein Array mit Früchten hast, kannst du deinen Status mit dem Array initialisieren:

import { useState } from 'react';

function App() {
  const [list, setList] = useState(['apple', 'banana', 'orange']);

  const addToList = () => {
    const newItem = 'grape';
    setList([...list, newItem]);
  };

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addToList}>Add Item</button>
    </div>
  );
}

export default App;

In diesem Beispiel verwenden wir useState, um ein Array namens list zu verwalten. Der Ausgangszustand von list ist auf ein Array mit drei Objekten – Apfel, Banane und Orange– eingestellt.

Wir haben auch eine Funktion addToList erstellt, die alle Elemente des Arrays mit dem Spread-Operator kopiert (...) und dann ein neues Element Traube zum Array list hinzufügt, sobald die Schaltfläche „Element hinzufügen“ angeklickt wird.

Dieses Mal aktualisieren wir den Status nicht inline mit einer Pfeilfunktion, weil es sinnvoller ist, diese Operation als eigenständige Funktion zu erstellen und sie über die onClick Methode aufzurufen, die der Schaltfläche „Element hinzufügen“ hinzugefügt wurde.

Verwendung von Objekten mit dem useState Hook

Du kannst den useState Hook auch verwenden, um ein Objekt in React zu verwalten. Hier ist ein Beispiel:

import { useState } from 'react';

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    setUser({ ...user, age: user.age + 1 });
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={handleClick}>Increase Age</button>
    </div>
  );
}

export default App;

In diesem Beispiel verwenden wir useState, um ein Objekt namens user zu verwalten. Der Ausgangszustand von user ist ein Objekt mit zwei Eigenschaften – Name und Alter.

Wir haben auch eine Funktion handleClick, die alle Objektdaten mit dem Spreizungsoperator kopiert (...) und außerdem das Alter des Benutzers um 1 erhöht, wenn die Schaltfläche Alter erhöhen angeklickt wird.

Es ist wichtig zu wissen, dass du dieses Objekt einer Variablen zuweisen und die Variable dann initialisieren kannst. Das ist nützlich, wenn du ein großes Objekt oder Array hast und einen leicht verständlichen Code schreiben möchtest:

import { useState } from 'react';
// Declare data
let userData = {
    name: 'John',
    age: 30,
};

function App() {
    const [user, setUser] = useState(userData);

    const handleClick = () => {
        setUser({ ...user, age: user.age + 1 });
    };

    return (
        <div>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <button onClick={handleClick}>Increase Age</button>
        </div>
    );
}

export default App;

Verwendung von Booleschen Werten mit dem useState Hook

Du kannst den useState Hook auch verwenden, um einen booleschen Wert in React zu verwalten. Hier ist ein Beispiel:

import { useState } from 'react';

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

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

  return (
    <div>
      <p>The switch is {isOn ? 'on' : 'off'}</p>
      <button onClick={toggleSwitch}>Toggle Switch</button>
    </div>
  );
}

export default App;

In diesem Beispiel verwenden wir useState, um einen booleschen Wert namens isOn zu verwalten. Der Anfangszustand von isOn ist auf false gesetzt. Wir haben auch eine Funktion toggleSwitch, die den Wert von isOn umschaltet, wenn der Toggle Switch Button angeklickt wird.

Diese Funktion kann verwendet werden, um das Umschalten zwischen dem hellen und dem dunklen Modus in deinen Projekten zu steuern.

Bevor wir zum Schluss kommen, wollen wir uns noch eine fortgeschrittene Anwendung des useState Hooks mit Formularen ansehen.

Der useState Hook und Formulare

Um Formulardaten und Benutzereingaben in React zu verarbeiten, verwendest du state. Dieser wird verwendet, um die aktuellen Werte der Formularelemente zu speichern. Er verfolgt alle Benutzerinteraktionen, z. B. die Eingabe eines Textes oder die Auswahl einer Option aus einem Dropdown-Menü, und aktualisiert schließlich den Status mit dem neuen Wert.

Hier ist ein Beispiel für die Verwendung von useState, um ein einfaches Formular zu erstellen:

import { useState } from 'react';

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

function Form() {
    const [formData, setFormData] = useState(formStateData);

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="firstName"
                value={formData.firstName}
                onChange={handleInputChange}
            />
            <input
                type="text"
                name="lastName"
                value={formData.lastName}
                onChange={handleInputChange}
            />
            <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

In diesem Beispiel erstellen wir zunächst ein Objekt für die Daten, die mit dem Formular erfasst werden sollen, mit Standardwerten für die Felder Vorname, Nachname und E-Mail. Dann initialisieren wir den Zustand formData mit useState.

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

const [formData, setFormData] = useState(formStateData);

Dann definieren wir eine handleInputChange Funktion, die den formData Status aktualisiert, sobald ein Formularfeld geändert wird.

const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
};

Schließlich definieren wir eine handleSubmit Funktion, die die aktuellen Formulardaten auf der Konsole protokolliert, wenn das Formular abgeschickt wird.

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
};

useState Best Practices

Bei der Verwendung des useState Hooks ist es wichtig, bewährte Praktiken zu befolgen, um häufige Fehler zu vermeiden und eine optimale Leistung zu gewährleisten. Hier sind ein paar Tipps, die du beachten solltest:

  • Vermeide tief verschachtelte Zustände: Anstatt komplexe Zustandsdaten in einem einzigen Objekt zu speichern, solltest du sie in kleinere Teile zerlegen, damit sie leichter zu verwalten sind.
  • Verwende funktionale Aktualisierungen: Wenn du einen Zustand auf der Grundlage eines vorherigen Zustands aktualisierst, solltest du funktionale Aktualisierungen verwenden, um Race Conditions zu vermeiden und sicherzustellen, dass der richtige Zustand aktualisiert wird.
  • Vermeide übermäßige Statusaktualisierungen: Statusaktualisierungen können teuer sein, also versuche, die Anzahl der Aktualisierungen zu minimieren. Ziehe den useEffect Hook in Betracht, um Aktualisierungen zu bündeln und die Leistung zu optimieren.
  • Vermeide unnötige Re-Renderings: React rendert eine Komponente immer dann neu, wenn sich ihr Zustand oder ihre Props ändern. Um unnötige Re-Renderings zu vermeiden, verwende die Memo-Funktion.

Zusammenfassung

In diesem Artikel haben wir uns eingehend mit dem useState Hook beschäftigt und gelernt, wie man ihn verwendet, um funktionalen Komponenten einen Zustand hinzuzufügen. Außerdem haben wir besprochen, wie useState mit Formularen, Arrays und Objekten verwendet werden kann, und wir haben uns mit Best Practices für eine optimale Leistung beschäftigt. Wenn du diese bewährte Praktiken befolgst, kannst du sicherstellen, dass deine React-Anwendungen effizient, skalierbar und einfach zu warten sind.

Du suchst nach der idealen Hosting-Lösung für deine React-Anwendungen? Teste das Anwendungs-Hosting von Kinsta kostenlos!