React: What are Synthetic Events?

Synthetic Events are a cross-browser wrapper over native browser events created by React.

Simple analogy: Imagine you are writing a letter to a friend in another country.

• In Russia you write in Russian (Chrome — its own event).
• In China — in Chinese (Firefox — its own event).
• Synthetic Event — is a translator. You write in Russian, the translator translates into any language. You always work with one interface, regardless of browser.

Why this is needed: Different browsers implement events differently:

• In one browser e.keyCode, in another e.which.
• React smooths out these differences. You always use e.key, e.target.value and everything works the same.

How it works (before React 17): React added ONE handler to the root document (not to each element!). This is called "event delegation". Memory saving.

• You click a button.
• The event bubbles up to document.
• React checks which element was actually clicked and calls your handler.

With React 17+: events are delegated to the root node (where React is rendered), not to document. This improves compatibility with nested React applications and other libraries.

Important: Synthetic Events are reused (event object is reused). Do not store a reference to the event asynchronously — use e.persist() or save the needed fields.

Performance consideration: Event delegation means React attaches very few native event listeners. This is more memory-efficient than attaching individual handlers to each element, especially in large component trees.