React Hook for throttled state value

useThrottledState.js

// Usage:
const [value, setValue] = useThrottledState(0, 1000, true);
// As long as `live` is true, every `updateInterval` milliseconds, `value` will
// get updated (causing the calling component to re-render).  Meanwhile, you can
// call `setValue` as frequently as you want without causing a re-render each time.
function useThrottledState(initialValue, updateInterval, live) {
  const realValueRef = useRef(initialValue);
  const setRealValue = (xf) => {
    realValueRef.current = isFunction(xf) ? xf(realValueRef.current) : xf;
  };
  const [throttledValue, setThrottledValue] = useState(initialValue);

  useEffect(() => {
    if (live) {
      var intervalID = setInterval(() => {
        setThrottledValue(realValueRef.current);
      }, updateInterval);
    } else {
      setThrottledValue(realValueRef.current)
    }

    return () => clearInterval(intervalID);
  }, [live]);

  return [throttledValue, setRealValue];
}