Simplify throttling using react-use

Author: DMNerd

src/hooks/useThrottledTrigger.js

@@ -1,94 +1,44 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
-
-export function createThrottledTrigger({
-  callback,
-  throttleMs,
-  now = Date.now,
-  setTimer = setTimeout,
-  clearTimer = clearTimeout,
-}) {
-  const state = {
-    timer: null,
-    lastRunAt: null,
-  };
-
-  const invoke = () => {
-    state.lastRunAt = now();
-    callback?.();
-  };
-
-  const schedule = (waitMs) => {
-    state.timer = setTimer(() => {
-      state.timer = null;
-      invoke();
-    }, waitMs);
-  };
-
-  const runNow = () => {
-    if (state.timer != null) {
-      clearTimer(state.timer);
-      state.timer = null;
-    }
-    invoke();
-  };
-
-  const trigger = () => {
-    if (!Number.isFinite(throttleMs) || throttleMs <= 0) {
-      invoke();
-      return;
-    }
-
-    if (state.timer != null) return;
-
-    if (state.lastRunAt == null) {
-      invoke();
-      return;
-    }
-
-    const elapsed = now() - state.lastRunAt;
-    if (elapsed >= throttleMs) {
-      invoke();
-      return;
-    }
-
-    schedule(throttleMs - elapsed);
-  };
-
-  const dispose = () => {
-    if (state.timer != null) {
-      clearTimer(state.timer);
-      state.timer = null;
-    }
-  };
-
-  return { trigger, runNow, dispose };
-}
+import { useCallback, useEffect, useRef, useState } from "react";
+import useThrottleFn from "react-use/esm/useThrottleFn.js";
 
 export function useThrottledTrigger({ callback, throttleMs = 150 }) {
   const callbackRef = useRef(callback);
+  const skipNextThrottledCallRef = useRef(false);
+  const [triggerVersion, setTriggerVersion] = useState(0);
 
   useEffect(() => {
     callbackRef.current = callback;
   }, [callback]);
 
-  const controller = useMemo(
-    () =>
-      createThrottledTrigger({
-        callback: () => callbackRef.current?.(),
-        throttleMs,
-      }),
-    [throttleMs],
+  useThrottleFn(
+    () => {
+      if (skipNextThrottledCallRef.current) {
+        skipNextThrottledCallRef.current = false;
+        return;
+      }
+      callbackRef.current?.();
+    },
+    throttleMs,
+    [triggerVersion],
   );
 
-  useEffect(() => () => controller.dispose(), [controller]);
-
   const trigger = useCallback(() => {
-    controller.trigger();
-  }, [controller]);
+    if (!Number.isFinite(throttleMs) || throttleMs <= 0) {
+      callbackRef.current?.();
+      return;
+    }
+    setTriggerVersion((version) => version + 1);
+  }, [throttleMs]);
 
   const runNow = useCallback(() => {
-    controller.runNow();
-  }, [controller]);
+    if (!Number.isFinite(throttleMs) || throttleMs <= 0) {
+      callbackRef.current?.();
+      return;
+    }
+    skipNextThrottledCallRef.current = true;
+    callbackRef.current?.();
+    setTriggerVersion((version) => version + 1);
+  }, [throttleMs]);
 
   return { trigger, runNow };
 }

src/tests/useRandomScale.test.js

@@ -6,65 +6,6 @@ import {
   applyRandomizedScale,
   formatRandomizedScaleAnnouncement,
 } from "@/hooks/useRandomScale";
-import { createThrottledTrigger } from "@/hooks/useThrottledTrigger";
-
-test("createThrottledTrigger throttles repeated trigger calls", () => {
-  let nowMs = 0;
-  let nextTimerId = 1;
-  const activeTimers = new Map();
-  const calls = [];
-
-  const setTimer = (fn, delay) => {
-    const timerId = nextTimerId;
-    nextTimerId += 1;
-    activeTimers.set(timerId, { fn, dueAt: nowMs + delay });
-    return timerId;
-  };
-
-  const clearTimer = (timerId) => {
-    activeTimers.delete(timerId);
-  };
-
-  const runTimersDue = () => {
-    const due = [...activeTimers.entries()]
-      .filter(([, timer]) => timer.dueAt <= nowMs)
-      .sort((a, b) => a[1].dueAt - b[1].dueAt);
-
-    due.forEach(([timerId, timer]) => {
-      activeTimers.delete(timerId);
-      timer.fn();
-    });
-  };
-
-  const throttled = createThrottledTrigger({
-    callback: () => calls.push(nowMs),
-    throttleMs: 100,
-    now: () => nowMs,
-    setTimer,
-    clearTimer,
-  });
-
-  throttled.trigger();
-  assert.deepEqual(calls, [0]);
-
-  nowMs = 20;
-  throttled.trigger();
-  throttled.trigger();
-  assert.equal(activeTimers.size, 1);
-  assert.deepEqual(calls, [0]);
-
-  nowMs = 99;
-  runTimersDue();
-  assert.deepEqual(calls, [0]);
-
-  nowMs = 100;
-  runTimersDue();
-  assert.deepEqual(calls, [0, 100]);
-
-  nowMs = 130;
-  throttled.runNow();
-  assert.deepEqual(calls, [0, 100, 130]);
-});
 
 test("applyRandomizedScale updates state by randomize mode", () => {
   const result = { root: "D", scale: "Dorian" };