SyntheticEvent
Тема дорожной карты · React
SyntheticEvent React — это кросс-браузерная обёртка вокруг нативного браузерного события, нормализующая свойства и поведение событий в разных браузерах и предоставляющая React-разработчикам единообразный API событий независимо от платформы. Каждый обработчик событий React получает экземпляр SyntheticEvent в качестве аргумента — например, onChange в полях ввода формы получает React.ChangeEvent<HTMLInputElement>, являющийся обобщённой специализацией TypeScript SyntheticEvent с типобезопасным доступом к event.target.value. React пул объектов SyntheticEvent для производительности (в React 17 и ранее), то есть объект события обнуляется после возврата обработчика, и к его свойствам нельзя обращаться асинхронно — event.persist() служил обходным решением, хотя React 18 полностью убрал пулинг. Понимание SyntheticEvent необходимо для обработки форм, горячих клавиш, drag-and-drop и взаимодействий с буфером обмена в React-фронтенд-приложениях без прямых DOM-слушателей событий. В TypeScript React-проектах типы React.MouseEvent, React.KeyboardEvent, React.FormEvent и другие подтипы SyntheticEvent обеспечивают точную типобезопасность коллбэков обработчиков событий, устраняя ошибки времени выполнения, вызванные обращением к несуществующим свойствам.
Как это работает
SyntheticEvent использует camelCase event props (onClick, onChange, onSubmit), получающие SyntheticEvent — кроссбраузерную обёртку React над нативным событием. Для форм: "controlled"-компоненты держат значение input в state и ререндерятся на change; "uncontrolled" читают значение через ref при необходимости. useRef возвращает мутируемый контейнер (.current), переживающий рендеры без триггера ререндера — полезно для DOM-узлов и uncontrolled-инпутов.
Когда применять
Controlled-формы — когда (а) нужна валидация по мере ввода, (б) UI зависит от form state (live preview, условные поля), (в) сабмит через fetch с полным контролем. Uncontrolled — когда форма большая + простая (DOM хранит значения, читаете через FormData на сабмит). Для нетривиальных форм — react-hook-form: избегает ререндера на каждое нажатие в полностью controlled-формах.
Типичные ошибки
Ловушки SyntheticEvent: забытый preventDefault() на сабмите формы — браузер перезагружается; бинд событий на элементах, которые их не генерируют (onClick на <div> без keyboard support = недоступно); хранение каждого нажатия в state на 50-полевой форме (rerender-шторм); использование ref.current внутри render (refs не реактивны — изменения не триггерят ререндер). useRef — escape hatch, не обычный state.