DOM и React Senior Состояние и useState/useReducer обновлено
useOnClickOutside
Условие
Хук принимает ref и обработчик, вызывает обработчик при клике вне элемента. Слушатель обязан сниматься при размонтировании.
Что проверяют тесты
клик снаружи вызывает обработчик
клик внутри не вызывает
слушатель снимается
Как подойти
Слушатель на document + contains. mousedown, а не click: иначе элемент может быть удалён до всплытия click и contains вернёт false. Обработчик держим в ref, чтобы не перевешивать слушатель на каждый рендер при инлайновой стрелке.
Подсказки: 3
- Проверка «снаружи» - это !ref.current.contains(e.target).
- Слушатель вешается на document, снимать его обязательно в очистке.
- ref.current может быть null на момент срабатывания.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация