𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗚𝘂𝗶𝗱𝗲

Deine Passwortleiste ändert sich von schwach zu stark, während du tippst. React merkt sich deine Eingaben durch den State.

Der State speichert Daten. Er verfolgt, was du tippst oder anklickst.

Stell dir vor, du tippst deinen Namen.

  • Dein Ausgangszustand ist ein leerer String.
  • Du tippst J.
  • Du rufst eine Funktion auf, um den State von "" zu "J" zu aktualisieren.
  • Du tippst o.
  • Du rufst die Funktion auf, um den State in "Jo" zu ändern.

Jedes Mal, wenn du den State aktualisierst, führt React ein Re-Rendering der UI aus. Re-Rendering bedeutet, dass React die alte Ansicht löscht und eine neue mit deinen aktualisierten Daten zeichnet.

Warum nicht einfach normale Variablen verwenden? Eine normale Variable ändert sich zwar in deinem Code, aktualisiert aber nicht den Bildschirm. Deine Nutzer würden veraltete Daten sehen. Der React-State löst dies, indem er deine Daten mit deiner UI verknüpft.

So verwendest du useState:

  1. Importiere es aus React. import { useState } from 'react';

  2. Deklariere es. const [age, setAge] = useState(20);

In diesem Beispiel:

  • age ist dein aktueller Wert.
  • setAge ist die Funktion, um den Wert zu ändern.
  • 20 ist dein Startwert.

Probiere das jetzt aus. Öffne ein React-Projekt. Erstelle einen Counter. Klicke auf einen Button, um den Zähler zu aktualisieren. Beobachte, wie sich der Bildschirm sofort ändert.

Quelle: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i