Почему не работает removeEventListener в React?

Question

[AmalDoskhoev]

Есть такой участок кода:

useEffect(() => {
    if (cookieInfo) {
      if (cookieInfo === "no") {
        setCookieBLock(true);
        window.addEventListener("mousewheel", disableOnwheel, {
          passive: false,
        });
        console.log(1);
      } else {
        console.log(2);
        window.removeEventListener("mousewheel", disableOnwheel, {
          passive: false,
        });
      }
    }
  }, [cookieInfo]);

  function disableOnwheel(e) {
    e.preventDefault();
    console.log(3);
  }

По логам вижу все выводится по порядку сначала 1, при скролле 3, а после нажатия кнопки отмены 2, т.е. в removeEventListener он заходит, но не срабатывает, скролл как перестал работать, так и не работает, в чем может быть проблема?

Comments

[WbICHA]

в чем может быть проблема?

В том, что кто-то использует addEventListener и removeEventListener в реакте.

[AmalDoskhoev]

WbICHA, если есть альтернативы, то я слушаю)

[WbICHA]

ApachaiReact, начать изучать реакт.)

[Антон Горецкий]

WbICHA, согласен что в реакте им не место. С другой стороны, а как еще повесить обработчик на window?

[AmalDoskhoev]

WbICHA, как раз этим и занимаюсь) если есть способ запретить прокрутку чисто на реакте, то буду счастлив услышать этот метод)

[Gary_Ihar]

WbICHA, ну а чё нет ?

[Gary_Ihar]

ApachaiReact, посмотри как повесить и удалить листенер. Потом почитай про ссылки на объекты/функции. Потом читай про хук useEffect, потом скорее всего понадобится почитать про мемоизацию и уже после всего этого сам накатай сюда ответ

[Alexandroppolus]

WbICHA,

В том, что кто-то использует addEventListener и removeEventListener в реакте.

на window/document вполне можно навешивать

[WbICHA]

ApachaiReact, Антон Горецкий, Gary_Ihar, Alexandroppolus, прошу прощения, прочёл пятой точкой и незаметил, что эвент на виндоу.)
В таком случае Gary_Ihar почти прав, но тебе достаточно одного юзЭффекта.

[AmalDoskhoev]

Есть решение намного проще) для скрытия скролла достаточно прописать
document.body.style.overflow = "hidden"
А для появления
document.body.style.overflow = "auto"
Как я до этого не допер, удивляюсь) Конечно есть небольшой скачок при появлении, но для моей задачи он незначителен)

Answer 1

[Владимир]

Итак, как раз для прокрутки addEventListener и removeEventListener использовать в реакте вполне легально.
Более того, вы вполне обошли использование рефов используя window, тут все хорошо.
Но вот на следующих граблях - жизненном цикле вы таки споткнулись.
Где гарантия, что компонент не перерендерился и функция disableOnwheel осталось той же что и была ?
Нужно
1) Вынести disableOnwheel за пределы компонентов, там нет ничего что зависело бы от наличия React
2) Внимательно прочесть про клинап https://reactjs.org/docs/hooks-effect.html

Comments

[AmalDoskhoev]

Благодарю за грамотное разъяснения!