Как синхронизировать состояние компонента с localStorage?

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

Основной подход

Идея проста: при первом рендере мы читаем значение из localStorage и используем его как начальное состояние. Затем при каждом изменении состояния записываем новое значение обратно в localStorage.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved !== null ? JSON.parse(saved) : initialValue;
  });

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

  return [value, setValue];
}

export default useLocalStorage;

Как это работает

• Функция-инициализатор в useState выполняется только один раз при монтировании, что позволяет прочитать сохранённое значение без лишних обращений.
• useEffect с зависимостями [key, value] записывает значение в localStorage каждый раз, когда оно меняется.
• JSON.stringify и JSON.parse нужны, потому что localStorage хранит только строки.

Использование в компоненте

function ThemeSwitcher() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Тема: {theme}
    </button>
  );
}

Важные нюансы

• localStorage синхронный, поэтому при больших объёмах данных это может замедлить рендер.
• Данные доступны только в браузере, поэтому при серверном рендеринге (SSR) нужно проверять наличие window.
• Изменения в localStorage из других вкладок можно отслеживать через событие storage.

Итог: синхронизация состояния с localStorage полезна для сохранения пользовательских настроек и черновиков без бэкенда. Используйте кастомный хук, чтобы избежать дублирования кода и упростить повторное применение.