React event delegation (changed in React 17)

A post from a while about about event delegration in React

React has been doing event delegation automatically since its first release. It attaches one handler per event type directly at the document node.

Though it improves the performance of an application, many issues have been reported due to the event delegation on the document node.

To demonstrate one of the issues let’s take an example of a select dropdown.

CountryDropDown in the below example is a React component for country selection, which would be rendered to a div with id react-root. The react DOM container is wrapped inside a div with id main that has a change event containing stopPropagation().