Synchronizowanie stanu z localStorage

Pierwszym odruchem może być odczytywanie localStorage w jednym miejscu i zapisywanie go w innym, ale te dwa miejsca mogą zacząć działać niespójnie. Aktualizacje stanu, przy których zapomniano o zapisie, lub zapisane wartości, które nie są odzwierciedlone w stanie, prowadzą do błędów.

Potrzebne jest jedno źródło prawdy, które utrzymuje stan Reacta i magazyn danych w ścisłej synchronizacji.

Przejrzystym rozwiązaniem jest hook useLocalStorage, który opakowuje useState i automatycznie utrwala zmiany. Zwraca on wartość oraz setter, podobnie jak useState.

Komponenty korzystają z niego dokładnie tak jak ze zwykłego stanu, ale otrzymują trwałość danych bez dodatkowego kodu.

Odczyt localStorage jest operacją synchroniczną, dlatego nie należy wykonywać go przy każdym renderowaniu. Należy przekazać funkcję do useState, czyli funkcję leniwej inicjalizacji, aby odczyt nastąpił tylko raz podczas montowania komponentu.

Wewnątrz tej funkcji należy sparsować zapisaną wartość albo zwrócić podaną wartość domyślną.

Jeśli początkowy stan zostanie obliczony bezpośrednio jako argument, to wyrażenie będzie wykonywane przy każdym renderowaniu, mimo że po pierwszym renderowaniu jego wynik jest ignorowany. W przypadku funkcji React wywołuje ją tylko raz.

W przypadku odczytów z localStorage pozwala to uniknąć powtarzania synchronicznych operacji w wątku głównym przy każdym renderowaniu.

Aby utrwalać aktualizacje, należy dodać useEffect, który uruchamia się za każdym razem, gdy zmienia się wartość, i wywołuje localStorage.setItem(key, JSON.stringify(value)).

Umieszczenie wartości w tablicy zależności sprawia, że każda zmiana stanu jest automatycznie zapisywana w magazynie.

Podczas ustawiania wartości na podstawie poprzedniej wartości należy użyć formy funkcyjnej setValue(prev => prev + 1). Zapobiega to problemowi nieaktualnych domknięć, w których zapisywana byłaby stara przechwycona wartość.

Jest to szczególnie ważne w procedurach obsługi zdarzeń i efektach, które mogą przechwycić nieaktualny stan.

getItem zwraca null, gdy dany klucz nie istnieje. Funkcja inicjalizująca musi to wykryć i użyć wartości domyślnej zamiast próbować parsować wartość null.

Warunek taki jak stored != null ? JSON.parse(stored) : defaultValue poprawnie obsługuje pierwszą wizytę.

W TypeScript można uczynić hook generycznym: function useLocalStorage<T>(key: string, initial: T). Zachowuje to typ wartości, dzięki czemu komponenty korzystające z hooka otrzymują pełne bezpieczeństwo typów.

Zwracana krotka ma typ [T, Dispatch<SetStateAction<T>>], zgodny z useState.

Z czasem kształt danych ulega zmianie, a stare zapisane wartości mogą powodować błędy w nowym kodzie. Należy przechowywać klucz wersji obok danych, aby można było wykrywać nieaktualne formaty.

Na przykład można zapisać { version: 2, data } i porównać wersję podczas odczytu.

Gdy zapisana wersja nie odpowiada bieżącej, należy odrzucić starą wartość lub przeprowadzić jej migrację, zamiast jej ufać. Najprostsza strategia polega na usunięciu nieaktualnego wpisu i użyciu wartości domyślnych.

Zapobiega to awariom powodowanym przez dane zapisane przez starszą wersję aplikacji.

Kompletny hook useLocalStorage łączy funkcję leniwej inicjalizacji, która bezpiecznie odczytuje i parsuje dane, setter obsługujący aktualizacje funkcyjne oraz useEffect, który zapisuje dane z uwzględnieniem wersjonowania.

W rezultacie otrzymujemy bezpośredni zamiennik useState, który zachowuje dane po ponownym załadowaniu strony.

Sprawdź swoją wiedzę na temat inicjalizacji stanu.

Nauczyłeś się tworzyć hook useLocalStorage z funkcją leniwej inicjalizacji, utrwalać zmiany za pomocą useEffect, używać aktualizacji funkcyjnych w celu uniknięcia nieaktualnych domknięć oraz obsługiwać wartości null.

Poznałeś również generyki TypeScript i wersjonowanie, które pozwalają bezpiecznie usuwać nieaktualne dane.