Synthetic Events

Inside React event handlers, the event object is wrapped in a SyntheticEvent object. These objects are pooled, which means that the objects received at an event handler will be reused for other events to increase performance. This also means that accessing the event object’s properties asynchronously will be impossible since the event’s properties have been reset due to reuse.

The following piece of code will log null because event has been reused inside the SyntheticEvent pool:

function handleClick(event) {
  setTimeout(function () {
    console.log(event.target.name);
  }, 1000);
}

To avoid this you need to store the event’s property you are interested in inside its own binding:

function handleClick(event) {
  let name = event.target.name;
  setTimeout(function () {
    console.log(name);
  }, 1000);
}

Related links:

• React/Redux: Best practices & gotchas

• React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov