What is event pooling in react?

Question

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

refer : Event System in React

but I am unable to understand. Can't the statement be much easier to understand for a newbie like me.? — Ajay Gaur, Mar 20 '16 at 13:22
It means that when a SyntheticEvent object is needed, the system reuses an old one instead of creating a new one. If you don't understand what it is saying about asynchronous operations you should read some general tutorials about asynchronous functionality and then apply that knowledge back to this specific topic. — nnnnnn, Mar 20 '16 at 13:26

Pranjali Roy · Answer 1 · 2018-11-27T13:41:52.507

42

Event Pooling - React uses SyntheticEvent which is a wrapper for native browser events so that they have consistent properties across different browsers. The event handlers that we have in any react-app are actually passed instances of SyntheticEvent unless we use nativeEvent attribute to get the underlying browser event.

Wrapping native event instances can cause performance issues since every synthetic event wrapper that's created will also need to be garbage collected at some point, which can be expensive in terms of CPU time.

React deals with this problem by allocating a synthetic instance pool. Whenever an event is triggered, it takes an instance from the pool and populates its properties and reuses it. When the event handler has finished running, all properties will be nullified and the synthetic event instance is released back into the pool. Hence, increasing the performance.

edited Nov 27 '18 at 13:41

answered Nov 27 '18 at 13:02

Pranjali Roy

421
1
4
5

This is a great explanation for React Event pooling. – alaahd Jun 03 '19 at 20:40
1

Does react automatically nullify the event instances? When we can that an **event handler is finished running**? Answer Please... – Siluveru Kiran Kumar Jun 15 '19 at 07:02
A good explanation of Synthetic Events and Event Pooling! – ks_mani Jul 16 '20 at 16:33
5

I just want to add that since React 17 event pooling has been removed because it doesn't improve performance in modern browsers – Vadim Shvetsov Aug 14 '20 at 19:02

score 21 · Accepted Answer · answered Mar 20 '16 at 15:40

It means that the properties of the event only exist while the callback is active. Adding async to the mix, or storing the event for future use, will fail.

This is easily observed if you try console.log(event) inside an event handler. By the time you inspect the object, most properties on the event object will be null. If you stop execution of the script with debugger; immediately after logging the value, you can inspect the values.

class MyComponent extends React.Component {
    handleClick (e){
    console.log('The event currentTarget is', e.currentTarget); // DOM element
    setTimeout(() => {
    console.log('event.currentTarget was', e.currentTarget); // null
  }, 1000)
  }
  render () {
    return <button onClick={this.handleClick}>Fire event!</button>
  }
}

This will log a DOM element when you click the button, and null a second later. For reasons beyond me, event.target is still stored until the next event occurs, and not nullified.

One can assign the required property from `event` object to a local variable and then can access it inside the async block using closure. — Akshay Gundewar, Aug 07 '18 at 07:19
" Adding async to the mix will fail ". yes it fails but why, can you explain? — srikar kulkarni, Jul 29 '19 at 07:35

score 8 · Answer 3 · answered Jan 12 '21 at 07:27

Be informed that event pooling is removed from React 17, citing the below reason.

React 17 removes the “event pooling” optimization from React. It doesn’t improve performance in modern browsers and confuses even experienced React users

https://reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling

What is event pooling in react?

3 Answers3

Linked

Related