Можно ли изменить поведение обработчика события?

Return внутри useEffect с зависимостями

Да, return внутри useEffect ВСЕГДА выполняется перед следующим запуском эффекта или перед размонтированием компонента, независимо от наличия массива зависимостей. Это называется функция очистки (cleanup function).

Как работает очистка

Утилита очистки вызывается в следующих случаях:

1. Перед повторным запуском эффекта — если зависимости изменились
2. Перед размонтированием компонента — финальная очистка
3. В режиме Strict Mode (разработка) — вызывается дважды для проверки

Пример с массивом зависимостей

function ChatComponent() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    console.log('Подписываюсь на сокет');
    const socket = io('ws://api.example.com');
    
    socket.on('message', (msg) => {
      setMessages(prev => [...prev, msg]);
    });

    return () => {
      console.log('Отписываюсь, закрываю соединение');
      socket.disconnect();
    };
  }, []);
}

В этом примере:

• useEffect запустится один раз при монтировании
• Return выполнится при размонтировании

Пример с непустым массивом зависимостей

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    console.log(`Загружаю профиль пользователя ${userId}`);
    let isMounted = true;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (isMounted) setUser(data);
      });

    return () => {
      console.log('Отмена загрузки');
      isMounted = false;
    };
  }, [userId]);
}

Последовательность при изменении userId:

1. Вызов return функции предыдущего эффекта
2. Выполнение нового useEffect с новым userId

Различие между массивами зависимостей

Без массива зависимостей — эффект + очистка при каждом рендере:

useEffect(() => {
  console.log('Рендер');
  return () => console.log('Очистка');
});

С пустым массивом [] — эффект один раз при монтировании:

useEffect(() => {
  console.log('Монтирование');
  return () => console.log('Размонтирование');
}, []);

С зависимостями [dep1, dep2] — при изменении зависимостей:

useEffect(() => {
  console.log('Зависимость изменилась');
  return () => console.log('Очистка старой подписки');
}, [dep1, dep2]);

Частые ошибки

Забыли вернуть функцию очистки:

useEffect(() => {
  const interval = setInterval(() => {
    console.log('Тик');
  }, 1000);
  return () => clearInterval(interval);
}, []);

Забыли добавить зависимость:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log(count);
  }, 1000);
  return () => clearTimeout(timer);
}, [count]);

Вывод

Return функция в useEffect — это механизм очистки ресурсов. Она ВСЕГДА выполняется перед следующим запуском эффекта или перед размонтированием компонента. Наличие массива зависимостей влияет только на то, когда запустится сам эффект, а не на выполнение return функции.