Chapter 4: Handling Events and Forms

React's event system is a sophisticated abstraction layer built on top of native browser events to ensure cross-browser consistency and high-performance reconciliation. By utilizing Event Delegation, React attaches a single event listener to the root container rather than individual elements, significantly reducing memory overhead in complex DOM trees. This chapter specifies the architecture of the SyntheticEvent system and the performance trade-offs of controlled component patterns.

I. Synthetic Event Architecture & Delegation

React intercepts native events and wraps them in a SyntheticEvent object. This normalized interface eliminates inconsistencies between different browser engines (e.g., Safari vs. Chrome). In modern React (17+), events are delegated to the Root Container (e.g., #root) instead of the document object. This shift allows for the coexistence of multiple React versions on a single page and improves compatibility with third-party libraries.

1. Controlled vs. Uncontrolled Components

• Controlled: React state drives the input value. This allows for immediate validation and formatting but incurs a Reconciliation Tax on every keystroke.
• Uncontrolled: The DOM maintains the state, and React accesses it via refs. This is more performant for complex forms but makes programmatic validation more difficult.

---

II. Production Anti-Patterns

• Directly Accessing event.nativeEvent: Relying on engine-specific properties that may not be normalized, breaking cross-browser consistency.
• Switching Control Modes: Initializing an input with undefined and then updating it to a string. This triggers a React warning and can lead to inconsistent UI state.
• Inline Event Handlers: Defining arrow functions directly in JSX onClick={() => ...}. This creates new function references every render, breaking React.memo for child components.

III. Performance Bottlenecks

• Input Jagginess: High-frequency updates on a text input causing the entire subtree to re-render. Use useDeferredValue to offload secondary UI updates.
• Event Handler Saturation: Attaching un-throttled handlers to onScroll or onMouseMove, which can saturate the Fiber work loop and block the main thread.