Zustand: Daten, die sich ändern, während die Seite offen ist

Ein Like-Button ist eines der kleinsten Programme, die Menschen wirklich benutzen. Er speichert eine Zahl, zählt beim Klick eins dazu und zeigt das Ergebnis. Fast jede Schwierigkeit in der Frontend-Entwicklung versteckt sich in diesen drei Schritten.

Fang mit der naiven Version an, mit der, die jeder Anfänger zuerst schreibt.

let likes = 0;

function like() {
  likes = likes + 1;
}

like();
like();

React löst das, indem es den Wert und den Weg, ihn zu ändern, im selben Atemzug liefert. useState gibt ein Paar zurück: den Wert jetzt und einen Setter. Rufe den Setter auf, und die Komponente läuft erneut mit dem neuen Wert.

import { useState } from "react";

function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes} likes
    </button>
  );
}Der Wert und der Weg, ihn zu ändern, zusammen zurückgegeben.

Die beiden Hälften dieser Zeile haben verschiedene Aufgaben. likes ist das, was dieser Durchlauf der Komponente sieht und zeichnet. setLikes ist der einzige ehrliche Weg, das zu ändern, was der nächste Durchlauf sehen wird. Ein Button, dessen Beschriftung sich nie ändert, ist fast immer ein Button, der die Variable ändert und den Setter nie aufruft.

Dasselbe Prinzip gilt beim Tippen. Ein Suchfeld, das verliert, was du getippt hast, ist das klassische Symptom für ein Feld, an das sich niemand erinnert.

function SearchBox() {
  const [text, setText] = useState("");

  return (
    <form>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>You typed: {text}</p>
    </form>
  );
}Das Feld zeigt, was im Zustand steht, und der Tastendruck schreibt den Zustand zurück.

Jetzt die Falle, in die alle tappen, meistens bei einer To-do-Liste. Arrays und Objekte sind keine Werte wie Zahlen: Sie sind Verweise auf einen Platz im Speicher. Wenn du den Inhalt änderst, bleibt der Verweis genau da, wo er war.

const [items, setItems] = useState(["Bread", "Tea"]);

function addBad(name) {
  items.push(name);
  setItems(items);
}

function addGood(name) {
  setItems([...items, name]);
}Eine dieser beiden Versionen lässt die Liste auf dem Bildschirm unverändert.

Es gibt also zwei Arten von Daten in einer Komponente, und eine Frage trennt sie: Wer darf sie ändern? Eigenschaften werden von außen gegeben und sind nur lesbar. Der Zustand gehört nach innen und ist veränderbar. Ein Zähler mit einstellbarer Schrittweite braucht beides.

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

  return (
    <button onClick={() => setCount(count + step)}>
      {count}
    </button>
  );
}

const a = <Counter step={1} />;
const b = <Counter step={5} />;Die Schrittweite kommt von außen, der Zähler gehört nach innen.