Как подписаться на изменения LocalStorage

Иногда есть необходимость подписываться на изменения значений в LocalStorage и быстро на них реагировать. В этой статье напишем универсальную реализацию на JavaScript, которая не будет привязана к определенному фреймворку. Нужно будет просто добавить необходимую прослойку. В React этой прослойкой будет являться кастомный хук, отвечающий за подписку/отписку на событие внутри useEffect. Реализация будет состоять из нескольких частей:

1. Реализация шины событий
2. Класс-обертка для работы с LocalStorage
3. Прослушивание нативного события storage
4. Добавление в React-компонент

Шина событий

Есть множество паттернов для реализации отправки и прослушивания изменений объектов. Возьмем за основу паттерн Pub/Sub (Издатель/Подписчик) и реализуем класс для шины событий.

// EventBus.js

class EventBus {
  constructor() {
    this.topics = {};
  }

  notify(key, value) {
    this.topics[key]?.forEach((cb) => {
      cb(value);
    });
  }

  subscribe(key, cb) {
    if (!this.topics[key]) {
      this.topics[key] = [];
    }
    this.topics[key].push(cb);
  }

  unsubscribe(key, cb) {
    this.topics = this.topics[key]?.filter((_cb) => _cb !== cb);
  }
}

Класс-обертка для работы с LocalStorage

Сервис для работы localStorage будет содержать экземпляр шины событий. При установке нового значения по ключу мы будем оповещать подписчиков этого ключа и сохранять значение в localStorage . При помощи метода subscribe можно будет подписаться на изменения значений по переданному ключу. Этот метод также возвращает функцию для отписки. Метод getItem просто отдает значение из localStorage по ключу. В нем при необходимости можно реализовать логику парсинга для чтения объектов из localStorage.

// LocalStorageService.js

class LocalStorageService {
  constructor() {
    this.eventBus = new EventBus();
  }

  getItem(key) {
    return window.localStorage.getItem(key);
  }

  setItem(key, value) {
    const oldValue = this.getItem(key, value);
    if (oldValue === value) return; // если значение не изменилось - ничего не делаем

    window.localStorage.setItem(key, value);
    this.eventBus.notify(key, value);
  }

  subscribe(key, cb) {
    this.eventBus.subscribe(key, cb);
    return () => this.eventBus.unsubscribe(key, cb);
  }
}

// экспортируем экземпляр класса
export const localStorageService = new LocalStorageService();

Прослушивание нативного события storage

Это событие будет полезно если есть необходимость следить за изменением localStorage из другого документа, т.е. между вкладками. Это событие не отправляется при изменениях localStorage на той же странице. Оно будет полезно для общения разных страниц одного и того же домена. Страницы разных доменов не имеют доступа к localStorage друг друга. StorageEvent наследуется от класса Event и имеет следующие поля:

const storageEvent = {
  key: "token",              // ключ, значение которого изменилось
  newValue: "token_value_b", // новое значение
  oldValue: "token_value_a", // старое значение
  storageArea {              // объект хранилища со всеми ключами и их значениями
    token: "token_value_a",
    user_settings: "",
    length: 2
  },
  url: "http://localhost:3001/" // url документа, ключ которого изменился
}

Добавим подписку на событие storage.

class LocalStorageService {
  constructor() {
    this.eventBus = new EventBus();

    this.handleStorage = this.handleStorage.bind(this);     // свяжем функцию с контекстом
    window.addEventListener('storage', this.handleStorage); // подпишемся на событие storage 
  }

  // добавим функцию для обработки события storage
  handleStorage(event) {
    this.eventBus.notify(event.key, event.newValue);
  }

  //…
}

Теперь если продублировать приложение в соседней вкладке и изменить токен, обновленный токен появится и на первой вкладке. Если изменить значение ключа в localStorage вручную через devtools, то обновленное значение также появится и в интерфейсе приложения.

Добавление в React-компонент

Добавим кастомный хук useLocalStorageKey, который будет принимать ключ, значение которого будет прослушивать.

// useLocalStorageKey.js

import { useEffect, useState } from 'react';
import { localStorageService } from './LocalStorageService';

export const useLocalStorageKey = (key) => {
  const [value, setValue] = useState(localStorageService.getItem(key));

  useEffect(() => {
    const onUpdate = (newValue) => {
      setValue(newValue);
    };

    // возвращаем функцию очистки
    return localStorageService.subscribe(key, onUpdate);
  }, [key]);

  // функция для изменений значения по переданному ключу
  const setLocalStorageValue = (value) => {
    localStorageService.setItem(key, value);
  };

  return [value, setLocalStorageValue];
};

И добавим вызов хука в компонент. Две кнопки просто устанавливают разные значения токена.

import { useLocalStorageKey } from './useLocalStorageKey';

const KEY_TOKEN = 'token';

function App() {
  const [token, setToken] = useLocalStorageKey(KEY_TOKEN);

  const handleAddTokenAClick = () => {
    setToken('token_value_a');
  };

  const handleAddTokenBClick = () => {
    setToken('token_value_b');
  };

  return (
    <>
      <button type="button" onClick={handleAddTokenAClick}>
        Add token 'a'
      </button>

      <button type="button" onClick={handleAddTokenBClick}>
        Add token 'b'
      </button>

      <p>Token: {token}</p>
    </>
  );
}

export default App;

Исходный код

В этой статье повнимательнее рассмотрим два новых хука: useTransition() и useDeferredValue(). Эти два хука дают возможность определять приоритет обновления состояния, или, скорее, указывать, является ли обновление менее важным, чем другие, и откладывать его в пользу более срочных.

Какое обновление можно считать срочным, а какое обычным?

• Срочные обновления: отражают прямое взаимодействие, такое как набор текста, клики, нажатия и т. д., т.е. то с чем взаимодействует пользователь. Когда вы вводите текст в поле ввода, вы хотите сразу увидеть введенный вами текст. В противном случае UI будет казаться медленным и подлагивать. Поэтому мы хотим сделать такие обновления приоритетным.
• Обычные обновления: переход пользовательского интерфейса из одного вида в другой. Пользователи знают, что представление должно измениться или обновиться (например, когда ожидается ответ на запрос данных). Даже если есть небольшая задержка, это можно рассматривать как ожидаемое поведение, и это не будет восприниматься как медлительность приложения.

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

Хук useTransition() и функция startTransition()

До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом. С помощью useTransition() теперь можно пометить некоторые обновления состояния как несрочные.

Когда использовать useTransition() ?

Одним из примеров может быть список товаров с параметрами фильтрации. Когда вы переключаете чекбоксы, чтобы выбрать размер или цвет одежды, вы ожидаете, что чекбоксы сразу же отобразят отмеченное или снятое состояние. А сам список товаров, которые необходимо обновить согласно фильтрам, может быть отдельным и менее срочным обновлением.

Как использовать useTransition() ?

function App() {
 const [isPending, startTransition] = useTransition();
 const [searchQuery, setSearchQuery] = useState('');
 
 // запрос данных, который занимает некоторое время
 const filteredResults = getProducts(searchQuery);
 
 function handleQueryChange(event) {
   startTransition(() => {
     // оборачивая setSearchQuery() в startTransition(),
     // мы помечаем эти обновления как менее важные
     setSearchQuery(event.target.value);
   });
 }
 
 return (
   <div>
     <input type="text" onChange={handleQueryChange} />
 
     {isPending && <span>Loading...</span>}
     <ProductsList results={filteredResults} />
   </div>
 );
}

Хук useDeferredValue()

useDeferredValue() очень похож на useTransition() в том, что он позволяет отложить несрочное обновление состояния, но применяется его к части дерева. Это похоже методы debounce и throttle, которые мы часто используем для отложенных обновлений. React будет работать с такими обновлениями, как только завершатся срочные обновления.

Когда использовать useDeferredValue()?

С помощью useTransition() вы сами решаете, когда конкретное обновление состояния может быть помечено как менее срочное. Но иногда такой возможности может и не быть, например, если фрагмент кода находится в сторонней библиотеке. В таких случаях можно воспользоваться хуком useDeferredValue(). С помощью useDeferredValue() вы можете обернуть значение и пометить его изменения как менее важные и, следовательно, отложить повторный рендеринг. useDeferredValue() будет возвращать предыдущее значение до тех пор, пока есть более срочные обновления для завершения и отображения дерева с обновленным значением.

Как использовать useDeferredValue() ?

function ProductsList({ results }) {
 // deferredResults получат обновленные данные
 // когда завершатся срочные обновления
 const deferredResults = useDeferredValue(results);
 
 return (
   <ul>
     {deferredResults.map((product) => (
       <li key={product.id}>{product.title}</li>
     ))}
   </ul>
 );
}

Итоги

Эти два новых хука позволяют сделать интерфейсы максимально отзывчивыми, даже в сложных приложениях с большим количеством повторных рендерингов, отдавая приоритет обновлениям, которые имеют решающее значение для взаимодействия с пользователем, и помечая некоторые другие как менее важные. Это не означает, что нужно оборачивать все состояния этими хуками. Их следует использовать в крайнем случае, если приложение или компоненты не могут быть оптимизированы другими способами (например, при помощи lazy loading’а, пагинации, веб-воркеров и т. д.).