Події в React або що ж таке SyntheticEvent?

Це довгочит про SyntheticEvent в React, який базується на власних знаннях, а також офіційній документації.

Розпочнемо з того, що таке React, хоча якщо ви тут, то, мабуть, вже це знаєте :)

React — це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для створення інтерфейсів користувача.

Одним з важливих аспектів роботи React є робота з подіями, такими як клацання миші, натискання клавіш, зміна значень полів вводу та багато іншого. Для зручної та ефективної взаємодії з подіями в React використовується механізм SyntheticEvent.

SyntheticEvent - це віртуальна обгортка, навколо реальних подій браузера, яка використовується для роботи з подіями в реакт-компонентах.

Його особливість в тому, що він є кросбраузерний (тобто однаково працює в усіх браузерах, що допомагає уникненню помилок та різниці в поведінці подій в різних браузерах).

При цьому, якщо потрібно використати нативний об'єкт події, який був створений браузером, можна використати таку властивість, як nativeEvent.

Окрім того, SyntheticEvent має наступні властивості:

Та методи:

Інколи можете зустріти ще метод - persist(), але він був актуальним для React до версії 17. Коли ще SyntheticEvent мали такий механізм, як пулінг подій (event pooling).

Цей механізм дозволяв знизити кількість об'єктів подій, створюючи лише один об'єкт SyntheticEvent для кожної події. Це дозволяло зменшити використання пам'яті та покращити продуктивність в додатках React з великою кількістю обробників подій.

Але те, що мало бути суперсилою, стало слабким місцем. За словами розробників, пулінг подій не покращував продуктивність у сучасних браузерах і більш вводив в оману користувачів React, чим допомагав їм.

Тому починаючи з 17 версії був скасований механізм пулінг подій, і метод persist() став не актуальним. Але посилаючись на документацію, хочу наголосити, що наразі цей метод на пару з isPersist() використовується в React Native.

Оновлено 18.04.2023:

Приклад SyntheticEvent в React:

function App() {
  const handleClick = (event) => {
    console.log("Button clicked!", event);
  }

  return (
    <button onClick={handleClick}>
      Button
    </button>
  )
}

Коли ми натискаємо на кнопку, в консоль виводиться повідомлення "Button clicked!" і об'єкт event. Цей об'єкт містить інформацію про подію, яку ми створили.

Так, як SyntheticEvent являється обгорткою для нативних подій, то об’єкт буде мати ось такий вигляд:

На скриншоті ви можете бачити всі властивості та методи описані вище в цьому довгочиті.

Якщо ж ми розкриємо пункт nativeEvent, то побачимо властивості та методи, які є притаманні для подій JS.

Що в загальному підтверджує те, що SyntheticEvent є обгорткою нативних подій :)

А подивитися більш детально та самостійно поклацати можна за посиланнями:

Приклад SyntheticEvent

Приклад Event in JS