Как реализовать подписку на изменения внешнего объекта?

Подписка — это базовый способ “сообщить” React, что во внешнем мире что-то изменилось.

Определение

Подписка (subscription) — это механизм, при котором объект хранит список слушателей и уведомляет их при изменении своего состояния.

Базовая структура внешнего объекта

Внешний объект должен уметь:

1. Хранить состояние.

2. Регистрировать подписчиков.

3. Уведомлять их при изменениях.

const store = {
  value: 0,
  listeners: new Set<() => void>(),

  getState() {
    return this.value;
  },

  setState(next: number) {
    this.value = next;
    this.listeners.forEach((l) => l());
  },

  subscribe(listener: () => void) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  },
};

Подписка в React-компоненте

useEffect(() => {
  const unsubscribe = store.subscribe(() => {
    setTick((v) => v + 1); // инициируем ререндер
  });

  return unsubscribe;
}, []);

1. Подписка создаётся при монтировании.

2. Отписка выполняется при размонтировании.

3. React получает сигнал о необходимости рендера.

Типичные ошибки

1. Забывать отписываться.

2. Создавать подписку при каждом рендере.

3. Мутировать стор без уведомления подписчиков.

Вывод

Подписка на внешний объект — это явный контракт между внешним состоянием и React, без которого ререндеры невозможны.