Синхронизация состояния с localStorage

Сначала может показаться удобным считывать localStorage в одном месте, а записывать в другом, но со временем эти части могут разойтись. Ошибки возникают, когда обновления состояния не сохраняются или сохранённые значения не отражаются в состоянии.

Вам нужен единый источник истины, который поддерживает состояние React и хранилище в полном соответствии.

Аккуратное решение — хук useLocalStorage, который оборачивает useState и автоматически сохраняет изменения. Он возвращает значение и функцию его установки, как и useState.

Использующий его код работает с ним так же, как с обычным состоянием, но получает сохранение данных без дополнительных усилий.

Чтение localStorage — синхронная операция, поэтому не следует выполнять её при каждом рендеринге. Передайте функцию в useState в качестве ленивого инициализатора, чтобы чтение выполнялось только один раз при монтировании.

Внутри этой функции разберите сохранённое значение или верните заданное значение по умолчанию.

Если вычислять начальное состояние непосредственно в аргументе, это выражение будет выполняться при каждом рендеринге, хотя после первого оно игнорируется. При передаче функции React вызывает её только один раз.

Для чтения localStorage это предотвращает повторную синхронную работу в основном потоке при каждом рендеринге.

Чтобы сохранять обновления, добавьте useEffect, который выполняется при каждом изменении значения и вызывает localStorage.setItem(key, JSON.stringify(value)).

Если поместить значение в массив зависимостей, каждое изменение состояния будет автоматически записываться в хранилище.

При установке значения на основе предыдущего используйте функциональную форму setValue(prev => prev + 1). Это предотвращает устаревшие замыкания, из-за которых записывалось бы старое захваченное значение.

Это особенно важно внутри обработчиков событий и эффектов, которые могут захватить устаревший снимок состояния.

getItem возвращает null, если ключ не существует. Инициализатор должен обнаружить это и использовать значение по умолчанию, а не пытаться разобрать null.

Такая проверка, как stored != null ? JSON.parse(stored) : defaultValue, корректно обрабатывает первое посещение.

В TypeScript сделайте хук обобщённым: function useLocalStorage<T>(key: string, initial: T). Это сохраняет тип значения, поэтому использующий хук код получает полную безопасность типов.

Возвращаемый кортеж имеет тип [T, Dispatch<SetStateAction<T>>], как и у useState.

Со временем структура данных меняется, и старые сохранённые значения могут нарушить работу нового кода. Храните рядом с данными ключ версии, чтобы обнаруживать устаревшие форматы.

Например, сохраните { version: 2, data } и сравнивайте версию при чтении.

Если сохранённая версия не совпадает с текущей, удалите старое значение или преобразуйте его, вместо того чтобы безоговорочно ему доверять. Самая простая стратегия — удалить устаревшую запись и использовать значения по умолчанию.

Это предотвращает сбои из-за данных, записанных старой версией приложения.

Полный useLocalStorage объединяет ленивый инициализатор, который безопасно считывает и разбирает данные, функцию установки с поддержкой функциональных обновлений и useEffect, который записывает изменения с учётом версии.

В результате получается готовая замена useState, сохраняющая данные после перезагрузки.

Проверьте, насколько хорошо Вы понимаете инициализацию состояния.

Вы научились создавать хук useLocalStorage с ленивым инициализатором, сохранять изменения через useEffect, использовать функциональные обновления для предотвращения устаревших замыканий и обрабатывать отсутствующие значения.

Кроме того, Вы познакомились с обобщениями TypeScript и версионированием, позволяющим безопасно удалять устаревшие данные.