Chrome -ExtensionHandler в React

Question

Я сейчас пытаюсь создать расширение Chrome. Для этого я использую приложение React. Все рендеринг и прочее работает. Проблемы связаны с обработчиками событий chrome.

В моем приложении для реагирования у меня есть контекст.

Внутри этого контекста находится useEffect хук, в котором я регистрирую события:

useEffect(() => {
  chrome.tabs.onUpdated.addListener(myListener)
}, []);

Функция слушателя использует переменные из useState в контексте, поэтому мне приходится обновлять слушателя каждый раз, когда эти переменные меняются.

Конечно, есть функция removeEventListener, но когда я вызываю он ничего не делает, потому что функция уже изменилась, и из-за этого Chrome думает, что такой слушатель не зарегистрирован.

Кто-нибудь знает, как удалить старые слушатели или просто очистить всех слушателей?

Answer 1

Фрагмент кода решения:

const handlerRef = useRef();
useEffect(() => {
    if(handlerRef.current){
        chrome.yourField.yourUpdate.removeListener(handlerRef.current);
    }
    chrome.yourField.yourUpdate.addListener(handler);
}, [yourDependencies]);
useEffect(() => {
     handlerRef.current = handler;
});

Спасибо @wOxxOm!