Warning: This synthetic event is reused for performance reasons happening with <input type="checkbox" />

This happened because the event implicitly passed to onItemClick is used in an asynchronous context.
As Andre Lemay said, you should assign your needs to local variables and reference them.

In my case, I had this code:

handleInput = e => { // <-- e = synthetic event  this.setState(state => ({ // <-- asynchronous call    data: {      ...state.data,      [e.target.name]: e.target.value // <-- this was causing the warnings (e.target is in an asynchronous context)    }  }));};

Then I changed it to:

handleInput = e => {  const { name, value } = e.target; // <-- moved outside asynchronous context  this.setState(state => ({    data: {      ...state.data,      [name]: value    }  }));};

I'd suggest trying two solutions:

First change

onChange={this.handleCheckbox}

to

onChange={() => this.handleCheckbox()}

If that won't work, in 'handleCheckbox' add event.persist(); Like this:

handleCheckbox = (event) => {  event.persist();  this.setState({    isChecked: !this.state.isChecked  });};

This may be a little late, but I just came across the same problem and solved in a way that I think might be better than Adam Orlov's answer. I don't believe either answer is directly applicable to the asked question, but this comes up when googling about synthentic events and checkboxes so it's as good a place as any...

I believe Adam is correct in his belief that React will essentially clear all properties of the SyntheticEvent object (which makes sense, since React is telling us that it's reusing the object).

However, unless you need the entire object, I don't think calling event.persist() is the best solution, as according to the documentation, that will remove the object from the pool (presumably they put it there for a good reason).

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.

Instead of doing this, if you only need one or two values from the event object, you can just assign those to local variables, and then reference the local variables inside your own function, like this:

<input type="checkbox" onChange={(event) => {    let checked = event.currentTarget.checked; //store whatever values we need from from the event here    this._someOtherFunction(checked)} />

In this way, you don't have to restructure your code in any way to avoid doing anything async that relies on event data, and you also don't have to worry about potential performance impacts as you allow React to do what it wants with the event pool.