CODEWITHSUNDEEP
javascriptreactjsconsolewarnings
Predrag Davidovic
Predrag Davidovic

Reputation: 1566

Warning: This synthetic event is reused for performance reasons React

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

Upvotes: 1

Views: 4045

Answers (1)

Shravan Dhar
Shravan Dhar

Reputation: 1560

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().

Upvotes: 3

Related Questions