React Synthetic Events

What is Synthetic Events in React?

A synthetic event is React’s cross-browser wrapper around the native DOM event. It exposes the same interface — target, preventDefault, stopPropagation — but behaves identically in every browser. The underlying native event is available as e.nativeEvent.

Why Synthetic Events matters

Browsers historically disagreed about event details. The synthetic layer normalises them, so you write one handler that works everywhere without feature detection.

Synthetic Events example

function Field() {
  function handleChange(e) {
    console.log(e.target.name, e.target.value); // the input that changed
    console.log(e.type);                        // "change"
    console.log(e.nativeEvent);                 // the real DOM event
  }
  return <input name="city" onChange={handleChange} />;
}

Key points to remember

• The API mirrors the native event, so existing DOM knowledge transfers directly.
• Since React 17 event pooling is gone — you can safely read the event asynchronously.
• React attaches one listener per event type at the root container and delegates from there.

Common mistakes with Synthetic Events

• Following an old tutorial that tells you to call e.persist() — unnecessary since React 17.
• Mixing addEventListener on a React-controlled node with React handlers, which makes ordering hard to reason about.