Почему накапливается addEvenetListener в хуке useEffect?

Question

Функционал: ввод текста в input, создание списка путем нажатия enter.

https://codesandbox.io/s/awesome-tereshkova-96pf3?file=/src/App.js

У меня есть два addEventListener. Один вне всяких хуков, другой - в useEffect.

Какой логике подчиняется тот, что лежит вне хуков?
Почему при нажатии на элемент списка количество кликов удваивается?
Какой чертой обладает addEventListener, из-за которой он накапливается в хуке useEffect и требует очистки? Почему console.log(), например, не накапливается?

Answer 1

я же уже Вам давал ответ!

listenerClicks = [];
addEventListener("click", function)
listenerClicks = [
    function
];
addEventListener("click", function)
listenerClicks = [
    function,
    function
];
addEventListener("click", function)
listenerClicks = [
    function,
    function,
    function
];

и так далее

При клике происходит проход по массиву listenerClicks и вызов функций. И пока Вы не удалите добавленную туда функцию, до тех пор и будет происходит их вызов при каждом клике.

Почему вызывается несколько раз addEventListener в useEffect? - Потому что у вашем случае useEffect срабатывает первый раз при монтировании компонента, а далее при каждом изменении состояния Вашего todos

БЛОГ НА HUSL

Почему накапливается addEvenetListener в хуке useEffect?

Ответы (1 шт):