57Implement useThrottle() for values and callbacks

Implement two hooks:

• useThrottle(value, interval): returns a copy of value that updates at most once per interval ms. The first change after a quiet period shows immediately; changes during the interval are merged into one trailing update with the latest value.
• useThrottledCallback(callback, interval): returns a stable function that calls the latest callback at most once per interval ms, with a trailing call for the last arguments.

function ScrollProgress() {
  const [y, setY] = useState(0);
  const onScroll = useThrottledCallback(() => setY(window.scrollY), 100);
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [onScroll]); // stable, so the listener is added once
  return <progress value={y} max={document.body.scrollHeight} />;
}

Requirements

• useThrottledCallback returns the same function on every render, yet always calls the callback from the latest render (no stale closures).
• Both hooks clear their timers on unmount.