Что такое синтетическое событие (synthetic event)?

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

Синтетическое событие (synthetic event) — это кросс-браузерная обёртка, которую React создаёт вокруг нативного события браузера. Когда вы пишете onClick или onChange, React не привязывает обработчик напрямую к DOM-элементу, а делегирует его на корневой контейнер и передаёт в ваш обработчик объект синтетического события. Это сделано для единообразия: независимо от браузера, свойства события (например, target, preventDefault) работают одинаково.

Зачем это нужно?

Основные причины: унификация API, улучшение производительности за счёт делегирования и автоматическая очистка памяти. React использует пулинг событий (event pooling): после вызова обработчика свойства события обнуляются, чтобы переиспользовать объект. Поэтому нельзя сохранить событие и использовать его позже, например, в setTimeout — нужно заранее скопировать нужные данные.

Пример использования

function Button() {
  const handleClick = (event) => {
    console.log(event.type); // 'click'
    console.log(event.target); // DOM-элемент
    // event доступен только синхронно
    setTimeout(() => {
      console.log(event.type); // ошибка или null из-за пулинга
    }, 0);
  };
  return <button onClick={handleClick}>Нажми</button>;
}

Если нужно использовать событие асинхронно, сохраните нужные поля заранее: const type = event.type;.

Вывод

Синтетические события — стандартный механизм React для обработки пользовательских действий. Они упрощают разработку, скрывая различия браузеров, но требуют осторожности при асинхронной работе. Понимание этой концепции важно для отладки и оптимизации React-приложений.