title: Adding event listener to large amount of elements in React
body: <p>I had a <code>CategoryPicker</code> component which displays a large category tree(hierarchical, about 20,000 nodes), each of the node was bound to a <code>onClick</code> event handler in order to figure out which node the user is clicking.</p>
  
  <p>It turns out to be extremely slow when mounting this component, profiling result shows that <code>EventPluginHub.putListener</code> consumes most of the resources.</p>
  
  <p>The only solution I can think of is using jQuery to bind event handler to it's ancestor, you know, the old school way. But apparently this is against React's design philosophy.</p>
  
  <pre><code>const CategoryPicker = React.createClass({
    render() {
      return (
        // data has about 20,000 elements
        {data.map((d) =&gt; {
          return (
            &lt;div onClick={this.handleClick.bind(this, d.cateId)} key={d.cateId}&gt;
              {d.cateName}
            &lt;/div&gt;
          );
        });}
      );
    }
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/3f7H2.png" alt="profile result"></p>
  
  <p><strong>Update</strong></p>
  
  <p>I've tried remove <code>onClick</code> event handler on the nodes, the performance boost is evident. Guess I have to use the jQuery way to handle this situation right now.</p>