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

Question

В функциональных компонентах можно подписаться на события, используя useEffect для side-эффектов или напрямую добавляя обработчики на элементы (например, onClick). Для отписки от событий (например, resize, scroll) нужно возвращать функцию очистки из useEffect.

YeaHub · Accepted Answer

1. Подписка на DOM-события (например, клик, скролл):import { useEffect } from 'react'; function MyComponent() { const handleClick = () => { console.log('Клик!'); }; useEffect(() => { window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); // Отписка }, []); return ; }2. Кастомные события (например, WebSocket, EventEmitter):useEffect(() => { const subscription = someEventEmitter.on('update', handleUpdate); return () => subscription.unsubscribe(); // Отписка }, []);3. React-события (например, onClick, onChange):function Form() { const handleSubmit = (e) => { e.preventDefault(); console.log('Форма отправлена!'); }; return ; } Итог:Для DOM-событий (resize, scroll) используй useEffect + отписку.Для кастомных событий (WebSocket, EventEmitter) также нужен useEffect.Для React-событий (onClick, onSubmit) обработчики вешаются напрямую.