useThrottle — Rate-limit a value or callback to fire at most once per interval

import { useState, useEffect, useRef, useCallback } from "react";
 
/**
 * useThrottledValue
 * Returns a throttled copy of `value` that updates at most
 * once every `interval` ms.
 */
function useThrottledValue<T>(value: T, interval: number): T {
  const [throttled, setThrottled] = useState(value);
  const lastUpdated = useRef(Date.now());
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
  useEffect(() => {
    const now = Date.now();
    const elapsed = now - lastUpdated.current;
 
    if (elapsed >= interval) {
      setThrottled(value);
      lastUpdated.current = now;
    } else {
      // Schedule a trailing update
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => {
        setThrottled(value);
        lastUpdated.current = Date.now();
      }, interval - elapsed);
    }
 
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [value, interval]);
 
  return throttled;
}
 
/**
 * useThrottledCallback
 * Returns a stable, throttled version of `callback` that
 * executes at most once every `interval` ms.
 */
function useThrottledCallback<T extends (...args: any[]) => void>(
  callback: T,
  interval: number
): T & { cancel: () => void } {
  const callbackRef = useRef(callback);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const lastCalledRef = useRef(0);
  const lastArgsRef = useRef<Parameters<T> | null>(null);
 
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);
 
  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);
 
  const cancel = useCallback(() => {
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = null;
    lastArgsRef.current = null;
  }, []);
 
  const throttled = useCallback(
    (...args: Parameters<T>) => {
      lastArgsRef.current = args;
      const now = Date.now();
      const elapsed = now - lastCalledRef.current;
 
      if (elapsed >= interval) {
        callbackRef.current(...args);
        lastCalledRef.current = now;
      } else if (!timerRef.current) {
        timerRef.current = setTimeout(() => {
          if (lastArgsRef.current) {
            callbackRef.current(...lastArgsRef.current);
          }
          lastCalledRef.current = Date.now();
          timerRef.current = null;
          lastArgsRef.current = null;
        }, interval - elapsed);
      }
    },
    [interval]
  ) as T & { cancel: () => void };
 
  throttled.cancel = cancel;
 
  return throttled;
}

"use client";
 
import { useState, useEffect, useRef } from "react";
 
function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);
 
  const handleScroll = useThrottledCallback(() => {
    setScrollY(window.scrollY);
  }, 100);
 
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [handleScroll]);
 
  return (
    <div style={{ position: "fixed", top: 10, right: 10 }}>
      Scroll: {scrollY}px
    </div>
  );
}
 
function ResizeDisplay() {
  const [width, setWidth] = useState(
    typeof window !== "undefined" ? window.innerWidth : 0
  );
 
  const throttledWidth = useThrottledValue(width, 200);
 
  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  }, []);
 
  return (
    <p>
      Raw: {width}px — Throttled: {throttledWidth}px
    </p>
  );
}

function useRAFCallback(callback: () => void) {
  const rafRef = useRef(0);
  const callbackRef = useRef(callback);
  callbackRef.current = callback;
 
  return useCallback(() => {
    cancelAnimationFrame(rafRef.current);
    rafRef.current = requestAnimationFrame(() => callbackRef.current());
  }, []);
}