React: How event delegation works in React?

[smercadomx]

I've been reading statements like this one in multiple articles:

Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping.

But when I do this:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
      return (
        <ul>
          <li onClick={() => console.log('click')}>Item 1</li>
          <li onClick={() => console.log('click')}>Item 2</li>
          <li onClick={() => console.log('click')}>Item 3</li>
        </ul>
      );
    }
  }

ReactDOM.render(<App />, document.getElementById('root'));

I get 4 event listeners, one on the document and one on each li:

Is this a bug?

[jquense]

The relevant handlers are on the document, the ones on the element are empty listeners that are added to work around an iOS safari bug, which requires the event handle on the element to receive clicks. In general all events are delegated to the document unless some detail or event requires them to be elsewhere!