Zustand mit localStorage synchronisieren

Der erste Impuls ist oft, localStorage an einer Stelle zu lesen und an einer anderen zu beschreiben. Dadurch können beide auseinanderlaufen. Zustandsaktualisierungen, bei denen das Persistieren vergessen wird, oder persistierte Werte, die sich nicht im Zustand widerspiegeln, führen zu Fehlern.

Sie benötigen eine einzige Quelle der Wahrheit, die den React-Zustand und den Speicher synchron hält.

Die saubere Lösung ist ein useLocalStorage-Hook, der useState kapselt und Änderungen automatisch persistiert. Er gibt wie useState einen Wert und einen Setter zurück.

Verwender nutzen ihn genau wie normalen Zustand, erhalten aber die Persistenz automatisch dazu.

Das Lesen aus localStorage ist eine synchrone Operation und sollte daher nicht bei jedem Rendern erfolgen. Übergeben Sie eine Funktion an useState, den sogenannten Lazy Initializer, damit der Lesevorgang nur einmal beim Mounten stattfindet.

In dieser Funktion parsen Sie den gespeicherten Wert oder geben den vorgegebenen Standardwert zurück.

Wenn Sie den initialen Zustand direkt als Argument berechnen, wird dieser Ausdruck bei jedem Rendern ausgeführt, obwohl sein Ergebnis nach dem ersten Rendern ignoriert wird. Bei einer Funktion ruft React sie nur einmal auf.

Bei Lesevorgängen aus localStorage vermeiden Sie dadurch bei jedem Rendern synchrone Arbeit im Hauptthread.

Um Aktualisierungen zu persistieren, fügen Sie einen useEffect hinzu, der bei jeder Änderung des Werts ausgeführt wird und localStorage.setItem(key, JSON.stringify(value)) aufruft.

Wenn Sie den Wert in das Abhängigkeitsarray aufnehmen, wird jede Zustandsänderung automatisch in den Speicher geschrieben.

Wenn Sie den neuen Wert ausgehend vom vorherigen Wert setzen, verwenden Sie die funktionale Form setValue(prev => prev + 1). So vermeiden Sie veraltete Closures, bei denen ein früher erfasster Wert geschrieben würde.

Das ist besonders in Event-Handlern und Effekten wichtig, die möglicherweise einen veralteten Snapshot enthalten.

getItem gibt null zurück, wenn der Schlüssel nicht existiert. Ihr Initializer muss dies erkennen und stattdessen auf den Standardwert zurückgreifen, anstatt null zu parsen.

Eine Prüfung wie stored != null ? JSON.parse(stored) : defaultValue behandelt den ersten Besuch problemlos.

In TypeScript machen Sie den Hook generisch: function useLocalStorage<T>(key: string, initial: T). Dadurch bleibt der Werttyp erhalten, sodass Verwender vollständige Typsicherheit erhalten.

Das zurückgegebene Tupel ist als [T, Dispatch<SetStateAction<T>>] typisiert und entspricht damit useState.

Mit der Zeit ändert sich die Struktur Ihrer Daten, und alte gespeicherte Werte können neuen Code beeinträchtigen. Speichern Sie zusammen mit den Daten einen Versionsschlüssel, damit Sie veraltete Formate erkennen können.

Speichern Sie beispielsweise { version: 2, data } und vergleichen Sie die Version beim Lesen.

Wenn die gespeicherte Version nicht mit der aktuellen übereinstimmt, verwerfen oder migrieren Sie den alten Wert, anstatt ihm zu vertrauen. Die einfachste Strategie besteht darin, den veralteten Eintrag zu entfernen und auf die Standardwerte zurückzugreifen.

So verhindern Sie Abstürze durch Daten, die von einer älteren Version Ihrer App geschrieben wurden.

Ein vollständiger useLocalStorage-Hook kombiniert einen verzögerten Initializer, der Daten sicher liest und parst, einen Setter, der funktionale Aktualisierungen unterstützt, und einen useEffect, der die Daten mit Versionierung in den Speicher schreibt.

Das Ergebnis ist ein direkter Ersatz für useState, der Reloads übersteht.

Testen Sie Ihr Verständnis der Zustandsinitialisierung.

Sie haben gelernt, einen useLocalStorage-Hook mit einem verzögerten Initializer zu erstellen, Änderungen über useEffect zu persistieren, funktionale Aktualisierungen zur Vermeidung veralteter Closures zu verwenden und mit null-Werten umzugehen.

Außerdem haben Sie TypeScript-Generics und Versionierung kennengelernt, um veraltete Daten sicher zu löschen.