Event delegation in React

[smercadomx]

Given that React does attach event handlers to the nodes themselves, does the React team recommend app developers to do event delegation when working with large lists for saving memory? Something like:

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

class App extends React.Component {
  render() {
    return (
      <ul onClick={(e) => console.log(`ID: ${e.target.dataset.id} was clicked`)}>
        <li data-id="1">Item 1</li>
        <li data-id="2">Item 2</li>
        <li data-id="3">Item 3</li>
        ...
      </ul>
    );
  }
}

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

[gaearon]

No, we wouldn't expect this to meaningfully save memory.

Given that React does attach event handlers to the nodes themselves

I think you might have misunderstood the answer. React doesn't attach your click event handlers to the nodes. It uses event delegation and listens at the document level.

The handler you're seeing attached is the same empty event handler and necessary to work around an iOS Safari issue.

[albseb511]

No, we wouldn't expect this to meaningfully save memory.

Given that React does attach event handlers to the nodes themselves

I think you might have misunderstood the answer. React doesn't attach your click event handlers to the nodes. It uses event delegation and listens at the document level.

The handler you're seeing attached is the same empty event handler and necessary to work around an iOS Safari issue.

I know this is a closed issue, but just want to highlight that this issue pops up on google for many people.
I want to mention that this is not the case since React 17.
it listens at the root level.

https://github.com/facebook/react/blob/master/CHANGELOG.md#react-dom-2

[rachitiitr]

No, we wouldn't expect this to meaningfully save memory.

@gaearon I am having a hard time believing this.

      <ul>
        {Array(100)
          .fill(null)
          .map((_, idx) => (
            <li key={idx} data-id={idx} onClick={() => console.log(idx)}> // creates a new callback with `idx` in its closure
              Item {idx}
            </li>
          ))}
      </ul>

1. Say, I have 100 child elements and I attach callbacks to each child item
2. 100 child item callbacks can't be condensed into a single master callback by React in my opinion
3. Why? Because every callback has its own instance, with its own closure, and does different things when invoked

So, that's why I believe as React developers, it would be better for us to handle event delegation ourselves and attach a single callback listener at the ul just like how the OP suggested.
That way instead of 100 callback function instances, we just have a single callback created, thus saving memory.

Please let me know how can React help save memory here automatically for us?