Dein erster Effekt

Bisher haben deine Komponenten nur eines getan: Sie liefern zurück, wie die Seite aussehen soll. React ruft die Komponente auf, nimmt ihr JSX und setzt es auf die Seite. Das ist das Rendern, und es passiert jedes Mal wieder, wenn sich der State der Komponente ändert.

Aber manches, was eine App tut, ist kein JSX: Sie ändert den Titel im Tab des Browsers, startet einen Timer, lädt Daten von einem Server oder speichert etwas in localStorage. Das geschieht außerhalb von React, und React will, dass das Rendern nichts anderes tut, als auszurechnen, wie die Seite aussieht. Darum kommt es in einen Effekt: Code, den React ausführt, nachdem es die Komponente gerendert hat und die Seite das Ergebnis zeigt.

Einen Effekt schreibst du mit useEffect. Das ist ein Hook wie useState: eine Funktion von React, deren Name mit use beginnt und die du ganz oben in einer Komponente aufrufst. Du gibst ihr eine Funktion, und React ruft diese Funktion auf, nachdem die Komponente gerendert wurde:

import { useEffect, useState } from "react";

export default function App() {
    const [tickets, setTickets] = useState(1);

    useEffect(() => {
        document.title = `Tickets: ${tickets}`;
    });

    return (
        <button onClick={() => setTickets((tickets) => tickets + 1)}>
            Tickets: {tickets}
        </button>
    );
}

document.title ist der Text im Tab des Browsers, den zuerst das <title> in index.html festlegt. So läuft es ab:

1. React rendert App, und die Seite zeigt den Button mit Tickets: 1.
2. Dann führt React den Effekt aus, und der Tab zeigt auch Tickets: 1.
3. Ein Klick ändert den State. React rendert App noch einmal mit 2 und führt danach den Effekt wieder aus, der den neuen Titel setzt.

Der Effekt sieht immer die Werte des Renders, auf das er folgt, sodass Titel und Button übereinstimmen.

Die Vorschau hat keinen eigenen Tab, den Titel siehst du dort also nicht. Um zu sehen, wann der Effekt läuft, gib mit console.log() etwas darin aus: Die Konsole unter der Seite zeigt dann jedes Mal eine Zeile.

Typische Fehler:

• useEffect nicht zu importieren: Die Seite bleibt leer, und die Konsole sagt ReferenceError: useEffect is not defined.
• Den Titel direkt in der Komponente zu ändern, außerhalb eines Effekts. Es scheint vielleicht zu funktionieren, aber es passiert, während React noch ausrechnet, wie die Seite aussieht, bevor die Seite etwas zeigt. Änderungen außerhalb von React gehören in einen Effekt.