What are Synthetic Events in React?
Learn what React Synthetic Events are: a cross-browser wrapper over native DOM events, how delegation works, nativeEvent access, and React 17 pooling.
Expected Interview Answer
A Synthetic Event is React's cross-browser wrapper around the browser's native DOM event, giving every event handler a consistent API and predictable behavior regardless of which browser is running.
React attaches a single set of listeners at the root and delegates events, then wraps each native event in a SyntheticEvent object that normalizes properties and methods like preventDefault and stopPropagation across browsers. You still get the underlying native event through the nativeEvent property. Since React 17, events are attached to the root container rather than document, and the older event-pooling behavior was removed, so you no longer need to call event.persist() to read the event asynchronously.
- Consistent event API across all browsers
- Familiar methods like preventDefault and stopPropagation everywhere
- Efficient event delegation from a single root listener
- Access to the raw native event via nativeEvent
- Cleaner, more predictable handler code
AI Mentor Explanation
Different cricket boards use slightly different scoring software, but a match referee files every result on one standard ICC report form so anyone reading it sees the same fields in the same places. The underlying local system still exists beneath it. A Synthetic Event is that standard form: it wraps each browser's native event in one consistent shape your handlers can always trust.
Step-by-Step Explanation
Step 1
Attach a handler
Add an event prop like onClick={handleClick} to a JSX element using camelCase naming.
Step 2
React delegates
Instead of binding to the element, React listens once at the root and routes events through delegation.
Step 3
Wrap the native event
When the event fires, React wraps the browser's native event in a SyntheticEvent with a normalized API.
Step 4
Use the consistent API
Call e.preventDefault() or e.stopPropagation() the same way in every browser inside your handler.
Step 5
Reach the native event if needed
Access e.nativeEvent for browser-specific details not exposed on the synthetic wrapper.
What Interviewer Expects
- Definition as a cross-browser wrapper over native events
- Understanding of event delegation from the root
- Knowing preventDefault and stopPropagation work consistently
- Awareness of the nativeEvent escape hatch
- Knowing pooling was removed and event.persist() is no longer needed since React 17
Common Mistakes
- Thinking React binds a separate listener to every element
- Assuming synthetic events are identical objects to native events
- Still calling event.persist(), which is unnecessary in modern React
- Forgetting camelCase event names like onClick, not onclick
- Confusing stopPropagation with preventDefault
Best Answer (HR Friendly)
“Synthetic Events are React's way of making event handling work the same across every browser. React wraps the browser's own event in a consistent object, so developers write handlers once and trust them to behave predictably everywhere.”
Code Example
function LoginForm() {
function handleSubmit(e) {
// e is a SyntheticEvent wrapping the native submit event
e.preventDefault() // works identically across browsers
const nativeEvent = e.nativeEvent // escape hatch to the raw event
console.log('submitted', nativeEvent.type)
}
return (
<form onSubmit={handleSubmit}>
<input name="email" type="email" />
<button type="submit">Log in</button>
</form>
)
}Follow-up Questions
- How does React use event delegation for synthetic events?
- What changed about event pooling and event.persist() in React 17?
- How do you access the underlying native event?
- Why does React use camelCase event names in JSX?
- What is the difference between stopPropagation and preventDefault?
MCQ Practice
1. What is a Synthetic Event in React?
React wraps each native DOM event in a SyntheticEvent to normalize behavior across browsers.
2. How do you access the underlying native event?
The SyntheticEvent exposes the underlying browser event through its nativeEvent property.
3. Since React 17, is event.persist() usually needed to read an event asynchronously?
React 17 removed event pooling, so synthetic events are no longer reused and event.persist() is generally unnecessary.
Flash Cards
What is a Synthetic Event? — React's cross-browser wrapper around the native DOM event with a consistent API.
How to reach the native event? — Use event.nativeEvent inside the handler.
How does React attach listeners? — It delegates from a single root listener rather than binding each element (root since React 17).
Is event.persist() still needed? — No. React 17 removed event pooling, so synthetic events persist by default.