Fundamentalsbeginner
Event Handling in React
Understand React's synthetic event system and how it differs from native DOM events.
React wraps native browser events in a cross-browser wrapper called a SyntheticEvent, which normalizes behavior across different browsers so handlers work consistently. You attach handlers using camelCase props like onClick or onChange, passing a function reference rather than a string of code as in plain HTML.
React's event system is like a building's central mail room instead of a mailbox on every door — one clerk (the root listener) reads the addressee on each letter and delivers it to the right unit, rather than each door needing its own mail slot and carrier.
Key Concepts
1
Under the hood (React 17+), React attaches a single event listener at the root DOM container rather than one listener per element, and uses event delegation to figure out which component's handler should fire based on the event's target. This is more memory-efficient than attaching thousands of individual listeners for large lists.
2
SyntheticEvents pool was removed in React 17, so you can safely access event properties asynchronously (e.g., inside a setTimeout) without needing to call event.persist() as in older React versions. However, you still call event.preventDefault() and event.stopPropagation() the same way as with native events.
setTimeoutevent.persist()event.preventDefault()event.stopPropagation()
3
Interviewers commonly ask candidates to explain event delegation and why inline arrow functions in onClick={() => handleClick(id)} create a new function every render — a minor cost usually, but relevant in performance-sensitive lists.
onClick={() => handleClick(id)}