Что такое SyntheticEvent в React?

Суть на практике

SyntheticEvent — объект-обёртка React над нативным событием браузера. Он даёт относительно единый API кросс-браузерно и встраивается в систему делегирования событий React (обработчики вешают не «в лоб» на каждый узел так же, как вы думаете о DOM).

function Button() {
  function handleClick(e) {
    // e — SyntheticEvent
    e.preventDefault();
    console.log(e.type, e.currentTarget);
  }
  return <button onClick={handleClick}>OK</button>;
}

Полезные факты для интервью

• Имена в JSX — camelCase: onClick, onChange, onSubmit.
• Доступ к нативному событию: e.nativeEvent.
• Раньше React пулил (переиспользовал) объекты событий — в современных версиях pooling убрали, но старые статьи всё ещё путают кандидатов.
• События из Portal всплывают по React-дереву согласно компонентной иерархии, даже если DOM-родитель другой.

SyntheticEvent не отменяет необходимость знать нативный DOM: для некоторых низкоуровневых API всё равно смотрят nativeEvent. Для большинства UI-задач достаточно обёртки.

Итог: SyntheticEvent — React-обёртка над DOM-событием с общим API; сырое событие доступно через nativeEvent.

stopPropagation на SyntheticEvent останавливает всплытие в системе React; для нативного поведения иногда дополнительно смотрят nativeEvent. Путать target и currentTarget на интервью тоже любят — имейте чёткое различие.