Как добавить обработчик события на DOM-элемент в React?

Что проверяют

Знаете ли вы, чем событие в React отличается от нативного и где проходит граница между декларативным onClick и ручным addEventListener. Следом обычно спрашивают, как передать аргумент в обработчик и когда без нативного слушателя не обойтись.

Как отвечать

Основной способ декларативный: обработчик передаётся пропсом в camelCase, onClick={handleClick}. Передаётся ссылка на функцию, а не результат вызова. Дальше детали, которые отличают сильный ответ:

• синтетическое событие: React оборачивает нативное событие в SyntheticEvent с единым API, оригинал доступен через e.nativeEvent. С React 17 слушатели вешаются на корневой контейнер приложения, а не на document, и пулинг событий убран, поэтому объект события можно читать асинхронно;
• отмена действия: только e.preventDefault(), return false в React не работает. Всплытие останавливает e.stopPropagation(), фаза перехвата доступна через onClickCapture;
• аргументы: onClick={() => remove(id)} или data-id на элементе и чтение e.currentTarget.dataset.id. Стрелка создаёт новую функцию на каждый рендер, это важно, только если ребёнок обёрнут в memo, тогда нужен useCallback;
• нативный слушатель: для window, document или стороннего DOM-узла используют useEffect с addEventListener и обязательным снятием в функции очистки. Элемент получают через useRef.

Нативный путь нужен и там, где React ограничивает: onWheel, onTouchStart и onTouchMove он вешает пассивными, и preventDefault() внутри них не сработает. Тогда слушатель ставят вручную с { passive: false }.

Где спотыкаются

Пишут onClick={handleClick()}. Функция вызывается при рендере, а если внутри меняется состояние, получается бесконечный цикл перерисовок.

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

Путают e.target и e.currentTarget: первый указывает на элемент, где случился клик, второй на элемент с обработчиком. Если в кнопке лежит иконка, dataset у target окажется пустым.