## What is event delegation? Event delegation is a performance optimization method in the world of Javascript. Let's say you have an unordered list `

handleClick(id)} /> ))} ``` - See full source code [here](https://github.com/thawsitt/test-event-delegation-off/blob/master/src/App.js). ## With event delegation - 1 event listener Here, we attach only one `onClick` handler to the parent div. ```jsx const handleClick = (event) => { // Get id from button element const id = event.target.id; setSelectedItems((prevState) => new Set([...prevState, id])); };

{ids.map((id) => ( ))}

``` - See full source code [here](https://github.com/thawsitt/test-event-delegation-on/blob/master/src/App.js). # Results ![race-start](https://images.unsplash.com/photo-1457969414820-5fdd86fc0b84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1948&q=80) Who will be the winner? --- ## Test 1. First load ![off-start](https://i.imgur.com/ma85zXa.png) --- ![on-start](https://i.imgur.com/UCz72YY.png) ## Test 2. Interaction ![off-interaction](https://i.imgur.com/ZH74ZEC.png) --- ![on-interaction](https://i.imgur.com/WFLNWDI.png) ## Test 3. Heap snapshot ![off-snapshot](https://i.imgur.com/S9T9d8q.png) --- ![on-snapshot](https://i.imgur.com/PcfY82p.png) ## Test 4. Event Listeners count ![off-count](https://i.imgur.com/t3YLsqB.png) --- ![on-count](https://i.imgur.com/dQHoXr7.png) # Conclusion We didn't find any noticeable performance difference between the two. React is already optimized in most cases, so you can focus on the awesome features you are shipping. 🚀🚀🚀 Feel free to benchmark the two demos yourself and let me know if you find any different results. - Without event delegation: 🌎 [Demo](https://test-event-delegation-off.now.sh), 🌱 [Source Code](https://github.com/thawsitt/test-event-delegation-off/blob/master/src/App.js) - With event delegation: 🌎 [Demo](https://test-event-delegation-on.now.sh), 🌱 [Source Code](https://github.com/thawsitt/test-event-delegation-on/blob/master/src/App.js)

thawsitt

Should I use event delegation in React?

Join Our Newsletter. No Spam, Only the good stuff.