Event Handling and Synthetic Events

User interfaces are driven by events — clicks, typing, submissions, key presses. React lets you attach event handlers directly in JSX with camelCase props like onClick and onChange, passing a function that runs when the event fires. This keeps the handler close to the element it concerns and fits naturally into the declarative component model.

Behind these handlers is the SyntheticEvent: React wraps the browser's native event in a consistent, cross-browser object with the same interface everywhere. Your handler receives this synthetic event, from which you can read values, prevent defaults, and stop propagation, using the same API regardless of the underlying browser.

Handling events well means understanding how to pass handlers, read event data, control default behaviour, and connect events to state updates — the loop that makes a UI interactive. This lesson covers attaching handlers, the synthetic event object, and the patterns that keep event handling clean and bug-free in React 19.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.