Что такое синтетические события?

Синтетические события (SyntheticEvent) — это обёртка React над нативными DOM-событиями, обеспечивающая единый кроссбраузерный интерфейс.

Что это

React не использует нативные события напрямую, а оборачивает их в SyntheticEvent — объект с тем же API (target, preventDefault, stopPropagation), но одинаковым во всех браузерах.

function handleClick(e) {
  // e — SyntheticEvent
  e.preventDefault();
  console.log(e.target);
}
<button onClick={handleClick}>OK</button>

Как работает делегирование

React вешает один обработчик на корень приложения (не на каждый элемент) и через синтетические события распределяет их по компонентам — это эффективнее.

Преимущества

• Кроссбраузерность — единое поведение.
• Производительность — делегирование вместо множества обработчиков.
• Единый API независимо от браузера.

Детали

• Доступ к нативному событию — через e.nativeEvent.
• В старых React событие переиспользовалось (pooling) — нельзя было использовать асинхронно без e.persist(); в React 17+ pooling убран.

Коротко для собеседования

Синтетические события — обёртка React над нативными DOM-событиями с единым кроссбраузерным API (target, preventDefault). React использует делегирование (один обработчик на корень). Нативное событие доступно через e.nativeEvent. В React 17+ pooling убран.