Event Pooling

Note

This page is only relevant for React 16 and earlier, and for React Native.

React 17 on the web does not use event pooling.

Read more about this change in React 17.

The SyntheticEvent objects are pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event handler has been called. For example, this won’t work:

function handleChange(e) {
  // This won't work because the event object gets reused.
  setTimeout(() => {
    console.log(e.target.value); // Too late!
  }, 100);
}

If you need to access event object’s properties after the event handler has run, you need to call e.persist():

function handleChange(e) {
  // Prevents React from resetting its properties:
  e.persist();

  setTimeout(() => {
    console.log(e.target.value); // Works
  }, 100);
}

Is this page useful?