Как правильно подписываться на события в функциональных компонентах?

Как организовать подписку на события в функциональном компоненте?

• В функциональных компонентах React для управления подпиской и отпиской применяется useEffect
• Обработчик события регистрируется внутри useEffect, например через window.addEventListener
• В функции очистки, возвращаемой из useEffect, этот обработчик удаляется с помощью removeEventListener
• Такой механизм помогает избежать утечек памяти и появления лишних подписок
• Пустой массив зависимостей [] у useEffect означает, что подписка создаётся один раз при монтировании
• Если подписка использует пропсы или состояние, соответствующие значения необходимо добавить в массив зависимостей useEffect
• Пример:

useEffect(() => {
const handleResize = () => console.log(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);

В результате функциональный компонент React получает надежное управление жизненным циклом подписки.

Подробный ответ

Основной ответ

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

Например, подписка окна на событие resize выглядит так:

useEffect(() => {
const handleResize = () => { /* логика обработки */ };
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

Пустой массив зависимостей ([]) задаёт однократное создание подписки при монтировании и её удаление при размонтировании.

Ключевые моменты

• Для побочных эффектов, включая подписку на события и последующую очистку, используется стандартный механизм useEffect
• Обработчики необходимо удалять в функции очистки: это предотвращает утечки памяти и дублирование подписок при повторных рендерах
• Когда подписка связана с пропсами или состоянием, зависимости useEffect следует указывать корректно, чтобы handler’а актуализировался

Практический контекст

В прикладных проектах этот подход используют для подписки на глобальные события браузера (scroll, resize, keyboard), события WebSocket и пользовательские события глобального EventEmitter. В React 18+ корректная очистка также помогает избежать проблем с двойным запуском эффектов в Strict Mode.