Principle and Performance Optimization of Event Pooling Mechanism in React's Synthetic Event System

I. Problem Description
In React's synthetic event system, Event Pooling is an important performance optimization mechanism. In React 16 and earlier versions, when an event is triggered, React does not create a new event object each time, but instead reuses objects from an existing event object pool. This mechanism aims to reduce Garbage Collection (GC) overhead and improve application performance. Understanding how event pooling works, its lifecycle, and why it was removed by default in React 17 helps to gain a deeper grasp of the design philosophy behind React's event system.

II. Core Concepts and Goals

1. Synthetic Event Object: A cross-browser compatible object generated by React after wrapping the native event object.
2. Event Pool: A cache pool storing synthetic event objects for object reuse.
3. Core Goal: To reduce memory allocation and garbage collection frequency through object reuse, thereby improving performance, especially in high-frequency event scenarios (e.g., onScroll, onMouseMove).

III. Workflow of Event Pooling (Taking React 16 as an example)

Step 1: Event Triggering and Object Acquisition

• When a user triggers an event (e.g., clicking a button), React retrieves an idle synthetic event object from the event pool.
• If an object is available in the pool, it is reused directly; if the pool is empty, a new synthetic event object is created.

// Pseudo-code illustration
function getPooledEvent(eventType, nativeEvent) {
  if (There is an idle object in the event pool) {
    const event = eventPool.pop(); // Take from the pool
    Reinitialize event properties (overwrite with data from nativeEvent);
    return event;
  } else {
    return new SyntheticEvent(eventType, nativeEvent); // Create new object
  }
}

Step 2: Property Copying and Event Dispatch

• React copies properties from the native event (nativeEvent) to the retrieved synthetic event object.
• This synthetic event object is then passed to the event handler (e.g., the onClick callback).
• Important: The properties of the synthetic event object are valid and accessible during the execution of the callback function.

Step 3: Object Recycling and Property Clearing

• After the event callback finishes execution, React immediately recycles this synthetic event object, returning it to the event pool.
• Before returning, React clears all properties of the object (sets them to null or default values) to prevent memory leaks.
• After recycling, the object can be reused for subsequent event triggers.

// Pseudo-code illustration
SyntheticEvent.prototype.persist = function() { /* Explained later */ };

function releasePooledEvent(event) {
  event.nativeEvent = null;
  event.target = null;
  // ... Clear all other properties
  if (!event.isPersistent()) { // By default, event objects are not persistent
    eventPool.push(event); // Return to the pool
  }
}

IV. Key Features and Developer Considerations

Feature 1: Asynchronous Access Issue

• Since the event object is recycled immediately after the callback ends, if you try to access the event object's properties in asynchronous code (e.g., setTimeout, Promise, fetch callback), you will get null or incorrect values.

handleClick = (e) => {
  console.log(e.target); // Normal: <button>Click me</button>
  setTimeout(() => {
    console.log(e.target); // Error: null, because the event object has been recycled
  }, 0);
};

Feature 2: Persistent Event Object (persist)

• React provides the e.persist() method to "remove" the synthetic event object from the event pool, preventing it from being recycled, thus allowing safe access in asynchronous code.
• After calling e.persist(), React does not clear the object's properties nor return it to the pool, instead waiting for the garbage collector to reclaim it naturally.

handleClick = (e) => {
  e.persist(); // Mark as persistent
  setTimeout(() => {
    console.log(e.target); // Normal: <button>Click me</button>
  }, 0);
};

V. Changes in React 17

Reasons for Removing Event Pooling

1. Optimizations in Modern JavaScript Engines: Modern JavaScript engines like V8 have become highly efficient in garbage collection and small object allocation, making the performance benefits of event pooling less significant.
2. Prioritizing Developer Experience: Event pooling required additional calls to e.persist() for asynchronous access, increasing development complexity and error probability.
3. Consistency and Simplification: Removing event pooling makes synthetic event objects behave more intuitively (acting like regular objects).

Mechanism in React 17 and Later

• Event pooling is no longer used by default. A new synthetic event object is created for each event, which is not reused and does not have its properties cleared prematurely.
• Consequently, accessing event object properties in asynchronous code becomes safe. The e.persist() method becomes a no-op (calling it has no effect but is retained for backward compatibility).
• This simplifies the developer's mental model, though it may theoretically slightly increase memory allocation pressure (the impact is minimal in practical applications).

VI. Performance Trade-off Summary

VII. Key Points for Interview Answers

1. Event pooling is a mechanism designed by React to optimize performance by reusing event objects.
2. Workflow: Retrieve object from pool → Copy properties and dispatch → Recycle and clear after callback.
3. Asynchronous access requires calling e.persist() to prevent object recycling.
4. React 17 removed the event pooling mechanism due to optimizations in modern engines and considerations for developer experience.
5. Understanding this change reflects the framework's balancing act between performance and developer experience.