Describe how events are handled in React.
In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.
What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.
Scenario Questions
- 1
You need to add a click handler to a button that logs the button's label. How would you attach the handler in a functional component?
- 2
If you forget to call event.preventDefault() in an onSubmit handler, what will the user see?
- 1
We have a form where multiple inputs share the same onChange handler. Explain how you would identify which input changed.
- 2
A teammate reports that a click event on a child component is not firing because a parent has an onClick that stops propagation. How would you debug and fix it?
- 3
Why might an event handler that references a stale state variable cause bugs, and how would you resolve it?
- 1
Our app renders a large list with many interactive items. Discuss the trade‑offs of using React's synthetic event system versus attaching native listeners directly.
- 2
We need to implement a custom drag‑and‑drop component that must be performant. How would you manage event listeners to avoid memory leaks and ensure smooth updates?
- 1
The company is migrating a legacy codebase that uses manual DOM event listeners to React. What architectural considerations and migration steps would you propose to ensure consistency and avoid regressions?
- 2
Multiple teams share a UI library with custom event wrappers. How would you design a strategy to standardize event handling across the organization while supporting future React versions?
Follow-up Questions
- ❓Can you give an example where event pooling caused a bug?
- ❓How does React's event system differ between class and functional components?
- ❓What are the implications of using capture vs bubble phases in React handlers?