Как реализовать кастомный хук для работы с eventListener?

Кастомные хуки в React — это функции, которые инкапсулируют логику с состоянием и побочными эффектами для повторного использования. Хук для работы с eventListener — типичный пример, так как подписка на события браузера является побочным эффектом, требующим очистки.

Основная логика хука

Хук должен принимать три аргумента: тип события (например, 'click'), обработчик (callback-функцию) и опциональный элемент, к которому будет привязан слушатель (по умолчанию — объект window). Внутри хука используется useEffect для управления жизненным циклом подписки.

Ключевые аспекты реализации

• Используйте useRef для сохранения обработчика. Это позволяет избежать повторной подписки при каждом рендере, если обработчик изменился.
• В useEffect добавьте слушатель с помощью addEventListener.
• Возвращаемая из useEffect функция очистки должна удалять слушатель с помощью removeEventListener.
• Зависимости useEffect должны включать тип события и элемент-цель, чтобы хук реагировал на их изменения.

Пример кода

import { useEffect, useRef } from 'react';

function useEventListener(eventType, handler, element = window) {
  // Сохраняем обработчик в ref, чтобы он не вызывал эффект при каждом рендере
  const savedHandler = useRef();

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    // Проверяем, поддерживает ли элемент addEventListener
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    // Создаём обёртку, которая вызывает сохранённый обработчик
    const eventListener = (event) => savedHandler.current(event);

    // Добавляем слушатель
    element.addEventListener(eventType, eventListener);

    // Функция очистки: удаляем слушатель
    return () => {
      element.removeEventListener(eventType, eventListener);
    };
  }, [eventType, element]); // Эффект перезапускается при изменении типа или элемента
}

export default useEventListener;

Применение хука

Этот хук можно использовать в любом функциональном компоненте для подписки на события, такие как клики, прокрутка, изменение размера окна или клавиатурные события. Например, для отслеживания нажатия клавиши Escape:

function MyComponent() {
  const handleEscape = (event) => {
    if (event.key === 'Escape') {
      console.log('Escape pressed');
      // Закрыть модальное окно и т.д.
    }
  };

  useEventListener('keydown', handleEscape);

  return Нажмите Escape;
}

Вывод: Кастомный хук useEventListener полезен для централизации логики работы с событиями DOM, обеспечения правильной очистки и повышения переиспользуемости кода в React-приложениях.