The Event handlers in React applications are passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event.
The SyntheticEvent objects are pooled.
This means, when an event is triggered, React takes an instance from the pool, populates its properties and, reuses it.
To assure consistent usage of the pooled events, React nullifies the properties of synthetic events right after executing an event handler.
This method saves allocations during high firing events, but adds a bit of overhead in “releasing”, “destroying” and “reusing” instances.
Though Event Pooling was built to increase the performance it didn’t improve the performance in modern browsers.
It also confused developers. For example, not being to access
eventx.target in the setState updater.
So the React team decided to remove event pooling.
Let’s checkout a simple example of
input element and its event handler.
When we type something in the input box, we get below the error and warning
This is because React reused the event objects between different events for performance in old browsers, and set all event fields to null in between them.
With React 16 and earlier, we have to call
event.persist() to properly use the event, or read the property we need.
In React 17, the same code works as expected allowing us to fetch
event.target.value without calling
The old event pooling optimization has been fully removed, so we can read the event fields whenever we need them.
event.persist() is still available on the React event object, but now it doesn’t do anything.
Check out the pull request to learn more.