Merken, was du kannst

Führe den Code erneut aus, und alles, was du markiert hast, ist weg: State lebt nur, solange die App läuft. Um ihn zu behalten, brauchst du localStorage, und dafür hast du schon einen Hook aus der Lektion über Refs und eigene Hooks. Er steht in der Datei useLocalStorage.js:

export default function useLocalStorage(schluessel, startwert) {
    const [wert, setWert] = useState(() => {
        const gespeichert = localStorage.getItem(schluessel);
        return gespeichert === null ? startwert : JSON.parse(gespeichert);
    });

    useEffect(() => {
        localStorage.setItem(schluessel, JSON.stringify(wert));
    }, [schluessel, wert]);

    return [wert, setWert];
}

Du verwendest ihn genau wie useState, und er gibt dasselbe Paar zurück: den Wert und die Funktion, die ihn ändert. Zusätzlich beginnt er mit dem, was unter schluessel gespeichert ist, falls etwas dort ist, und speichert den Wert wieder, sobald er sich ändert. Du musst also nur eine Zeile ändern: Aus useState([]) wird useLocalStorage("gelernt", []). Es ist ein Hook, also gehört er an den Anfang von App, zu den anderen Hooks.

Deine eigenen Wörter sollen auch bleiben. Speichere aber nicht alle woerter: Die App lädt sie bei jedem Start aus woerter.json, und der Effekt würde die gespeicherten ohnehin ersetzen. Halte deine eigenen Wörter stattdessen in einem eigenen State, gespeichert mit useLocalStorage("eigeneWoerter", []), und setze den Stapel beim Rendern aus beiden zusammen:

const stapel = [...woerter, ...eigeneWoerter];

Der Stapel ist kein State, er wird berechnet, wie der Punktestand. Er muss nach der Prüfung auf null kommen, denn solange die Wörter nicht da sind, würde ...woerter mit einem Fehler enden. Darunter arbeiten die Karte, die Position, der Punktestand und weiter() dann mit stapel statt woerter.