Why Use Event Pooling in React

Event pooling is a performance optimization technique used in React to improve memory management and application responsiveness. This article explains how event pooling works, why developers historically relied on it to reduce garbage collection overhead, and how its behavior has changed in modern versions of React.

Understanding React’s Synthetic Events

To understand event pooling, you must first understand how React handles events. Instead of attaching event listeners to individual DOM nodes, React uses a single event listener at the root of the document. When an event occurs, React wraps the native browser event in a custom wrapper called a SyntheticEvent.

This wrapper ensures that events behave consistently across different browsers. However, creating a new SyntheticEvent object for every single user interaction—such as typing, scrolling, or clicking—can quickly consume a large amount of memory.

The Benefits of Event Pooling

React introduced event pooling to solve the problem of high memory allocation. Here is why developers relied on it:

• Reduced Memory Consumption: Instead of allocating memory for a new event object every time an event is triggered, React allocates a “pool” of event objects. When an event occurs, React retrieves an object from the pool, populates it with the event data, and passes it to the event handler.
• Minimized Garbage Collection (GC) Clank: In JavaScript, when objects are created and then discarded, the browser’s garbage collector must run to clean up the unused memory. Frequent garbage collection can cause noticeable frame drops and UI stuttering (jank), especially in high-frequency events like onMouseMove or onKeyPress. Event pooling keeps the same objects in memory, preventing GC spikes.
• Improved Performance on Low-End Devices: By recycling event objects, React applications run much smoother on mobile devices and hardware with limited CPU and memory resources.

How Event Pooling Works in Practice

During event pooling, React nullifies the properties of the SyntheticEvent object immediately after the event callback has finished executing. The object is then returned to the pool for future reuse.

Because the event object is recycled, you cannot access event properties asynchronously (for example, inside a setTimeout, a promise, or an asynchronous state update).

function handleChange(event) {
  // This works fine:
  const value = event.target.value;

  setTimeout(() => {
    // This would fail in older React versions because the event object was recycled:
    console.log(event.target.value); 
  }, 100);
}

To bypass this recycling in older versions of React, developers had to call event.persist(). This removed the specific event from the pool, allowing its properties to remain accessible in asynchronous code.

Modern Context: React 17 and Beyond

While event pooling was highly beneficial in older browsers, modern JavaScript engines have become exceptionally fast at allocating and garbage-collecting small objects.

Because event pooling often confused developers—requiring the constant use of event.persist() for asynchronous operations—React officially removed event pooling in React 17. Modern React applications now create new event objects for every event, as the performance trade-off is no longer necessary for the vast majority of web applications.