Describe how events are handled in React.

Difficulty: 4/10

synthetic events, event delegation, event pooling

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

0-2 years experience

1You 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?
2If you forget to call event.preventDefault() in an onSubmit handler, what will the user see?

2-5 years experience

1We have a form where multiple inputs share the same onChange handler. Explain how you would identify which input changed.

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?