React has been doing
automatically since its first release.
It attaches one handler per event type directly at the
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
The react DOM container is wrapped inside a div with id
main that has a
change event containing
Attaching change event to the main div
When a country is selected, we cannot see the selected country. Watch this video to see it in action.
The reason for this unexpected behavior is the
onChange event of dropdown
which is attached to the
change event of the
main div containing
onChange event of dropdown.
To fix such issues, React 17 no longer attaches event handlers at the document level. Instead, it attaches them to the root DOM container into which React tree is rendered.
Image is taken from React 17 blog.
Changes in React 17
After changes in React 17, events are attached to the root DOM container into which the React tree is rendered.
In our example,
onChange event of dropdown would be attached to the div with id
This event would be triggered when any country is selected rendering the expected behavior.
To see the solution in action, check out the
React 17 release candidate can be installed from here.