Функция в useEffect повторяется несколько раз, как завершить жизненный цикл?

Question

[SeventimeSsS]

У меня есть функция onKeyPress, она срабатывает когда я нажимаю на кнопку, она отрабатывает нормально и изменяет state, но пробелам в том что когда я нажимаю на нее один раз, она срабатывает дважды, а в последующие разы увеличивается в разы

Вот как выглядит код

const [focus, setFocus] = useState(0);

    useEffect(() => {
        window.addEventListener('keydown', onKeyPress);
    }, [focus])

    const onKeyPress = ({keyCode}) => {
        console.log(keyCode)
        let newIndex = focus;

        if (keyCode === 39) {
            newIndex = focus + 1
        }

        setFocus(newIndex)
        console.log(focus)
    }

И вот что выдает в консоль

Comments

[вовчек]

Потому что addEventListener живет до перезагрузки страницы, и при перерендере при нажатии каждый раз вешается новый слушатель, при 8 перерендерах, при нажатии на кнопку, у вас функция запустится 8 раз)

И я не видел, чтобы слушатели вешали на реакте, на чистом JS - да, а на реакте, слушатели реализуются по другому.

Answer 1

[0xD34F]

срабатывает дважды, а в последующие разы увеличивается в разы

Всё правильно, получаете то поведение, какое описали, новое значение focus - новый обработчик:

useEffect(() => {
    window.addEventListener('keydown', onKeyPress);
}, [focus])

Старый-то вы не удаляете.

А вообще, есть способ получать актуальное значение focus без создания нового обработчика, так что вам и одного хватит:

useEffect(() => {
  const onKeyDown = ({ keyCode }) => {
    if (keyCode === 39) {
      setFocus(focus => focus + 1);
    }
  };

  window.addEventListener('keydown', onKeyDown);
  return () => window.removeEventListener('keydown', onKeyDown);
}, []);

Comments

[SeventimeSsS]

Спасибо за отвеет вы мне очень помогли, я пробовал прописывать removeEventListener, но видимо я не совсем правильно это делал.