React 17 delegates events to root instead of document

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().

1<!--Div's change event contains stopPropagation()-->
2<div id="main">
3  <!--Div where react component will be rendered -->
4  <div id="react-root"></div>
5</div>
Copy

1
2class CountryDropDown extends React.Component {
3  state = {
4    country: '',
5  }
6  const handleChange = e => {
7    this.setState({ country: e.target.value });
8  }
9  render() {
10    return (
11      <table class="table table-striped table-condensed">
12        <thead>
13          <tr>
14            <th>Country</th>
15            <th>Selected country</th>
16          </tr>
17        </thead>
18        <tbody>
19          <tr>
20            <td>
21              <select value={this.state.country}
22                onChange={this.handleChange}
23              >
24                <option value="">--Select--</option>
25                <option value="India">India</option>
26                <option value="US">US</option>
27                <option value="Dubai">Dubai</option>
28              </select>
29            </td>
30            <td>
31              {this.state.country}
32            </td>
33          </tr>
34        </tbody>
35      </table>
36    );
37  }
38}
39ReactDOM.render(<CountryDropDown />, document.getElementById('react-root'));
Copy

Attaching change event to the main div

1document.getElementById("main").addEventListener(
2  "change",
3  function (e) {
4    e.stopPropagation();
5  },
6  false
7);
Copy

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 document node. The change event of the main div containing e.stopPropagation() prevents the 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 react-root. This event would be triggered when any country is selected rendering the expected behavior.

Note

React 17 release candidate can be installed from here.

Check out the earlier discussion on event delegation here and the pull request here.