Что нужно добавить в useEffect в React, чтобы снять обработчик после закрытия модального окна

В useEffect нужно вернуть функцию очистки. React вызовет ее, когда компонент размонтируется. Он также вызовет ее перед новым запуском этого же эффекта, если изменились зависимости.

Для DOM-событий схема простая. Effect добавляет обработчик через addEventListener, cleanup снимает его через removeEventListener. Это симметричная пара. Если вы подписались на внешний ресурс, вы должны явно отписаться.

Короткий ответ для интервью:

Нужно вернуть из useEffect cleanup-функцию и в ней вызвать removeEventListener с той же функцией-обработчиком. Если modal закрывается через состояние, effect лучше завязать на isOpen, чтобы обработчик жил только пока окно открыто.

Закрытие modal не всегда означает размонтирование компонента. Часто компонент остается в дереве, а видимость управляется через isOpen, CSS-класс или анимацию. В такой схеме cleanup при закрытии не выполнится сам по себе, если зависимости эффекта не меняются.

Поэтому обработчик глобального события, например Escape на document, должен добавляться только когда modal открыт. При переходе isOpen из true в false React выполнит cleanup предыдущего эффекта и снимет обработчик.

Пример безопасного обработчика Escape для modal:

import { useEffect } from "react";

type ModalProps = {
  isOpen: boolean;
  onClose: () => void;
};

export function Modal({ isOpen, onClose }: ModalProps) {
  useEffect(() => {
    if (!isOpen) {
      return;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        onClose();
      }
    };

    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [isOpen, onClose]);

  if (!isOpen) {
    return null;
  }

  return (
    <div role="dialog" aria-modal="true" aria-label="Подтверждение действия">
      ...
    </div>
  );
}

Здесь обработчик объявлен внутри эффекта, поэтому cleanup снимает ровно ту же ссылку. Зависимости показывают, что эффект зависит от открытия окна и текущего onClose. Если onClose создается в родителе заново на каждый render и это мешает, его можно стабилизировать через useCallback. Просто убрать его из зависимостей без понимания последствий нельзя.

В реальном modal одного Escape мало. Нужны понятное имя диалога, управление фокусом и возврат фокуса после закрытия. Если глобальный обработчик останется после cleanup, он может закрыть уже другой UI и сбить фокус пользователю клавиатуры.

Самый заметный симптом плохого cleanup: после нескольких открытий modal одно нажатие Escape вызывает закрытие несколько раз, лишние запросы, лишнюю аналитику или ошибку обновления состояния. Это значит, что старые обработчики не были сняты.

Еще один риск связан со stale closure. Если обработчик был создан со старым onClose или старым состоянием, он может работать не с теми данными. На интервью лучше сказать, что cleanup и корректные зависимости решают разные части одной задачи. Cleanup убирает старую подписку, зависимости не дают обработчику устареть.

Для снятия обработчика браузеру нужно найти ту же подписку. Обычно важны тип события, ссылка на функцию и значение capture. Если вы добавили обработчик с { capture: true }, снимайте его с тем же capture.

useEffect(() => {
  const handleClick = (event: MouseEvent) => {
    // обработка клика вне modal
  };

  document.addEventListener("click", handleClick, true);

  return () => {
    document.removeEventListener("click", handleClick, true);
  };
}, []);

Не стоит писать две разные inline-функции. Они могут выглядеть одинаково, но для removeEventListener это разные ссылки.

Cleanup для события снимает только подписку на событие. Он не отменяет работу, которая уже стартовала. Если при открытии modal вы запускаете таймер, подписку или сетевой запрос, очищайте их в том же cleanup.

useEffect(() => {
  if (!isOpen) {
    return;
  }

  const controller = new AbortController();

  fetch("/api/modal-data", { signal: controller.signal }).catch((error) => {
    if (error.name !== "AbortError") {
      // показать error state или отправить ошибку в лог
    }
  });

  return () => {
    controller.abort();
  };
}, [isOpen]);

Иначе закрытие окна остановит только новые события, но старый запрос может вернуться позже и перезаписать актуальное состояние. На практике это выглядит как race condition, мигание данных или ошибка после закрытия modal.