All event handlers in React use delegation. This differs from on-element event handlers in HTML.

If you have onclick={alert("clicked")} on an HTML element, the handler is bound to that element. This isn’t the case with React.

React binds all events at your application root element. That’s the part of your app that looks like this:

ReactDOM.render(, document.getElementById(“root”));

This means all of your onClick handlers bubble up the entire DOM tree to your application root element, where they’re handled by one — yes one — super smart event handler that knows how to update your components.

This actually changed recently. Until v17, React bound all event handlers at the document root. This breaking change improves compatibility with others frameworks and opens the door to better support for multiple roots (enter sandboxed Concurrent Mode).

Take it home

Take a moment to read that React v17 announcement post. It wild that, after 3 years with v16, such a seemingly inconsequential change trigged a major release. I think represents major changes to the way we will mount and migrate React apps in the future.