Warning: This synthetic event is reused for performance reasons React

Question

Can somebody explain to me why I got these warning in console, when I try to drag and how to solve it?

// Main Component

 handleDragStart = data => event => { console.log("dataaa", data, "event ", event); }; makeBoxes = () => { return this.state.boxes.map(box => ( <Box key={box.id} box={box} draggable={true} onDragStart={this.handleDragStart} /> )); }; render() { return <div className="box-group">{this.makeBoxes()}</div>; }

// Box Component

 export default class Box extends React.Component { render() { const { id, color, text } = this.props.box; return ( <div className="boxElement" id={id} style={{ backgroundColor: color }} draggable={this.props.draggable} onDragStart={this.props.onDragStart({ id: id })} > <div>{text}</div> </div> ); } }

I got this warning: Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property clientX on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

https://codesandbox.io/s/nostalgic-pike-o51yj

Answer 1

In your BoxesGroup, I've edited the handleDrag function to look like this to solve it:

  handleDragStart = data => event => {
    event.persist();
    event.dataTransfer.setData("text", event.target.id);
    console.log("data", data, "event ", event);
  };

This is from React docs :

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

By default react has a pool of events and it keeps using them. (similar to a thread pool). To avoid react from putting the event back in the pool after you've used it, you can call event.persist() .