DOM и React Senior Состояние и useState/useReducer обновлено
useEventListener
Условие
Хук вешает обработчик события на цель (по умолчанию window) и снимает его при размонтировании. Смена обработчика не должна перевешивать слушатель.
Что проверяют тесты
ловит событие
снимает слушатель
смена обработчика не перевешивает слушатель
свежий обработчик вызывается
Как подойти
Тот же приём, что и в useInterval: ref-мост между «нужен свежий колбэк» и «не перевешивать слушатель». Без него каждый рендер снимал бы и вешал обработчик заново - на частых событиях вроде scroll это заметная нагрузка, а на некоторых целях ещё и теряются события.
Подсказки: 2
- Инлайновая стрелка в вызове хука - новая ссылка на каждом рендере.
- Держи обработчик в ref, а в зависимостях эффекта оставь только тип и цель.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация