title: Material-UI slider causes massive re-renders
body: <p>I have a slider to control volume. When there one or two accordions in a list below on the same page it renders fast and smooth when the slider is dragged, but as soon as I have a list of accordions below (rendered using react-virtuoso) that is much larger, it slows down awfully and the motion of the slider becomes very jerky.</p>
  <p>I did notice that when I hover on the slider dot the whole page re-paints, but it also does this on the mui website too. But dragging the slider dot is simply awful.</p>
  <p>I'm using <code>react-redux</code> to store the value of the slider and update the volume, but why would it be that the presence of many accordions would slow it down.</p>
  <p>I'd add a code sandbox, but I'm having trouble getting it to load MUI nicely. If I get that working, I'll edit and add the link.</p>
  <p><a href="https://i.stack.imgur.com/gTzMx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gTzMx.png" alt="React profiler" /></a></p>
  <p>I also noted when looking at the performance monitor that the CPU usage appears to go up to 95% while moving the slider as seen by the spikes in this image:
  <a href="https://i.stack.imgur.com/gbWqT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gbWqT.png" alt="performance monitor CPU spike" /></a></p>