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

Question

I\'ve been working on a simple react-redux todo example for a class and I came across several warning messages that show in the console everytime I check and uncheck a checkbox

Answer 1

Similar problem here though my setup is, functional component, Material UI input.

The guy above that mentioned event.persist();, thank you that worked for me, but the first suggestion had no noticeable affect, not sure if thats because Im using functional components and not class components. (I dont use class components anymore, only functional with hooks)

Also note the warning info suggested to use event.persist(). My issue was I was capturing form input using onChange and storing input into my state, after about the second or third character it would throw errors and also crash my app.

Before:

    const handleChange = (e) => {
    
    setState((form) => ({
      ...form,
      [e.target.name]: e.target.value,
    }));
  };

After:

    const handleChange = (e) => {
    e.persist();
    setState((form) => ({
      ...form,
      [e.target.name]: e.target.value,
    }));
  };

So it appears this is the correct solution to a similar issue, while I was not using a checkbox, I was using a form input, a Material-UI . I can remove the single line of

e.persist();

and the code will fail again, add it back, everything is good no crashing no warnings.