Should I use custom event delegation in React JS

Question

React uses event delegation, as mentioned in the documentation here:

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.

I have a very common scenario where I have a list of items and I want a event handler on each item, should I use my custom event delegation and access target element from event object to perform logic or should I attach individual event listener callbacks to each list item and rely on React to take care of performance.

Answer 1

Attach event handler to each. You might look into paging the list, most displays won't show 500-1000 items at a time.

class SnipListItemRender extends React.Component {
  render() {
    let SnipSpanSty = {width: 'calc(70% - 142px)'};
    SnipSpanSty.color = (this.props.index === this.props.selectedKey) ? '#b58900' : '#afac87';
    return (
      <div id='SnipDivSty' onclick={this.snipClickHandler} className="FlexBox" style={SnipDivSty}>
        <div id='SelectSnipDivSty' style={SelectSnipDivSty}>
          <JButton btn={selectSnipBtn} parentClickHandler={this.snipClickHandler} />
        </div>
        <span id='SnipSpanSty' style={SnipSpanSty}>{this.props.snippet.snip}</span>
        <JButton btn={SnipBtn} parentClickHandler={this.snipClickHandler} />
      </div>
    );
  }
}

class SnipListItem extends SnipListItemRender {
  snipClickHandler = (buttonid) => { Actions.selectSnipItem(this.props.snippet, buttonid); }
}

let _snipDataMap = function(snip, index) {
  return (
    <li id='SnipsDivLiSty' key={index} style={SnipsDivLiSty}>
      <SnipListItem snippet={snip} index={index} selectedKey={this.props.selectedKey} />
    </li>
  );
}

export default class SnipsView extends React.Component {
  render() {
    let list = this.props.data.map(_snipDataMap, this)
    return (
      <div id='SnipsDivSty' style={SnipsDivSty}>
        <ul id='SnipsDivUlSty' style={SnipsDivUlSty}>
          {list}
        </ul>
      </div>
    );
  }
}