Event Handling
React wraps native browser events in SyntheticEvent objects for cross-browser consistency and unified delegation.
Mental Model
"The Universal Adapter: No matter what country outlet you plug into, the adapter gives your laptop clean standard power."
Interactive Engine Simulation
React doesn't attach events to every button. It listens at the root and delegates. The native event is wrapped in a SyntheticEvent.
Executable Code Snippet
1function Dashboard() {
2 const handleClick = (event) => {
3 // This is a SyntheticEvent, not a NativeEvent
4 console.log(event.type);
5 event.stopPropagation();
6 };
7
8 return <button onClick={handleClick}>Execute</button>;
9}- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. Synthetic Events
React doesn't attach events directly to the elements you define. Instead, it wraps native browser events in a **SyntheticEvent** object. This ensures identical behavior across all browsers (Chrome, Safari, Firefox) and improves performance through event delegation.
Modern Delegation (React 17+)
02. Automatic Binding
In modern function components, you don't need to worry about `this` binding. However, remember that React handlers are passed as **camelCase** (`onClick` instead of `onclick`). These handlers are executed during the Bubble phase by default.
Expert Note
"Because React uses delegation at the root, calling 'stopPropagation' doesn't stop the native event from reaching the document. It only stops it within the React virtual tree. This is a common source of confusion when mixing React with legacy jQuery plugins."