reactjs - How can I fix this long delay in a Material-UI ToggleButtonGroup?

Question

I'm migrating an app from React-Bootstrap to Material-UI. Mostly a positive experience, but my toggle button group is very sloooooow. Like 3+ seconds to respond to to a click. I thought if I stripped it down to a minimum the problem would go away, but it didn't. (It did improve; I think the delay before was 5-7 seconds.) Here is the sandbox.

It displays two toggle buttons, "MUTE" and "ON". If you click a button it takes 3+ seconds for the event handler to log the call on the console. Mostly it takes that amount of time to change state visually, though in some cases, one of the buttons changes state immediately when you click it, while the other delays before changing state. Even in that case, though, the console log is delayed, and changing back to the other button is delayed.

Here is the JSX of the component:

    <ToggleButtonGroup value={toggle} onChange={onMicToggle} exclusive>
      <ToggleButton value="mute">mute</ToggleButton>
      <ToggleButton value="on">on</ToggleButton>
    </ToggleButtonGroup>

And here is the calling code:

    <MicControl
      toggle={toggle}
      onMicToggle={(e, v) => {
        setToggle(v);
        console.log("onMicToggle:", e, "Value:", v);
      }}
    />

Any fixes or workarounds greatly appreciated!

Answer 1

Just remove console.log("onMicToggle:", e, "Value:", v); from your onChange callback function