title: JS clear timer of previous function call before new function call
body: <p>My React app uses a slider component from Material UI. Its onChange event calls a function to update the state. I realized that my component rerenders for every slider step which is why I want to delay the updating of the state for like 300ms after the last time the slider was moved.</p>
  <p>My approach is to start a timer with the state update via onChange. When the onChange is called again, the previous timer should be canceled though. This is the part I still struggle with.</p>
  <p>The setSliderValue is a function which takes a number to update the state. <strong>How do I clear &quot;timer&quot;  only when sliderChangeHandler is called again?</strong></p>
  <pre><code>const [sliderValue, setSliderValue] = useState(20);
  
  const sliderChangeHandler = (event, newValue) =&gt; {
      const timer = setTimeout(setSliderValue, 300, newValue);
      clearTimeout(timer);
  };
  </code></pre>