A React hook that throttles a value

useThrottle.js

import React from "react";

export default function useThrottle(val, ms) {
  const [throttledVal, setThrottledVal] = React.useState(val);
  const latestVal = React.useRef(val);
  
  React.useEffect(() => {
    latestVal.current = val;
  }, [val]);

  // The timer is only recreated if ms changes
  React.useEffect(() => {
    const handle = setInterval(() => {
      // The state only changes every "ms" miliseconds
      // We use a reference to make sure we use the latest val
      setThrottledVal(latestVal.current);
    }, ms);

    return () => clearInterval(handle);
  }, [ms]);

  return throttledVal;
}