Обязательно ли `window.removeEventListener ('выгрузить')`?

Question

Я сохраняю самые последние значения входных данных в localStorage до того, как пользователь покинет веб-страницу. Запись в localStorage выполняется на window.onunload.

useEffect(() => {
  const updater = () => {
    updateStorageValue('last_input', input);
  };

  window.addEventListener('unload', updater);

  return () => window.removeEventListener('unload', updater);
}, [input]);

Допустим, компонент (где использовался этот useEffect) был смонтирован, когда пользователь закрыл / обновил вкладку / окно.

Мне просто любопытно, имеет ли какое-либо влияние удаление события unload, когда вся веб-страница перестанет работать.

Answer 1

React не отключает компоненты приложения при закрытии / обновлении страницы. Итак, ответ на ваш вопрос: нет, это не имеет никакого эффекта.

Но если это обычный компонент, живущий на странице (не монтируемый непосредственно перед выходом), то функция очистки должна быть там, чтобы удалите предыдущий прослушиватель событий unload перед добавлением следующего.

Ваш useEffect удаляет прослушиватель событий unload и добавляет новый при изменении input. Но если вы удалите функцию очистки, у вас будет столько слушателей событий unload, сколько обновлений input.

Например, предположим, что значение input изменяется в следующем порядке:

'R'
'Re'
'Rea'
'Reac'
'React'

В этом случае эти функции будут вызываться при событии unload:

updateStorageValue('last_input', 'R');
updateStorageValue('last_input', 'Re');
updateStorageValue('last_input', 'Rea');
updateStorageValue('last_input', 'Reac');
updateStorageValue('last_input', 'React');