ReactJS - JavaScript AddEventListener не удаляет функцию слушателя при Unmount компонента ⇐ Html

[Anonymous]

Я добавил слушателя событий в событие "Keydown" в моем приложении ReactJS. Из-за сторонней библиотеки я добавляю ее через Settimeout в использовании, этот компонент похож на всплывающее окно, поэтому он много раз в жизни приложения. Это как ниже; < /p>

Код: Выделить всё

      useEffect(() => {
const timeoutID = setTimeout(() => {
clearTimeout(timeoutID);
window.addEventListener("keydown", theFunction, true);

}, 500);

function theFunction(event: KeyboardEvent) {
// do something
}

return () => {
window.removeEventListener("keydown", theFunction, true);
};
}, []);

Это типичное использование, чтобы удалить слушатель событий, используя метод removeEventListener . Проблема заключается в том, что когда компонент остается, событие остается и складывается поверх другого. Я на самом деле вижу это на вкладке слушателей событий на DevTools .
Я подозревал, что каждый раз, когда этот компонент сочетает, функция изменяется в памяти, поэтому это не та же функция, и поэтому React React не может его удалить. Я взял функцию из использования и положил ее в верхнюю часть компонента (за пределами определения функциональных компонентов, чуть ниже импорта).

Код: Выделить всё

// imports

function theFunction(event: KeyboardEvent) {
// do something
}

const Component = () => {
useEffect(() => {
const timeoutID = setTimeout(() => {
clearTimeout(timeoutID);
window.addEventListener("keydown", theFunction, true);

}, 500);

return () => {
window.removeEventListener("keydown", theFunction, true);
};
}, []);

и voila ! Событие теперь добавляет только один раз и не складывается. Зачем реагировать не удаляет этот состав EventListener в этом случае Unmount?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ction-at-c