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

Question

Подписка реализуется через механизм, при котором внешний объект уведомляет подписчиков об изменениях. React-компонент подписывается при монтировании и отписывается при размонтировании. При получении уведомления компонент инициирует ререндер через setState или другой механизм React. Важно, чтобы подписка и отписка были симметричны.

YeaHub · Accepted Answer

Подписка — это базовый способ “сообщить” React, что во внешнем мире что-то изменилось.ОпределениеПодписка (subscription) — это механизм, при котором объект хранит список слушателей и уведомляет их при изменении своего состояния.Базовая структура внешнего объектаВнешний объект должен уметь:Хранить состояние.Регистрировать подписчиков.Уведомлять их при изменениях.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;
}, []);
Подписка создаётся при монтировании.Отписка выполняется при размонтировании.React получает сигнал о необходимости рендера.Типичные ошибкиЗабывать отписываться.Создавать подписку при каждом рендере.Мутировать стор без уведомления подписчиков.ВыводПодписка на внешний объект — это явный контракт между внешним состоянием и React, без которого ререндеры невозможны.