部分整理とts化

lib/useInterval.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+
+type Control = {
+  start: () => void;
+  stop: () => void;
+};
+
+type State = "RUNNING" | "STOPPED";
+
+type Fn = () => void;
+
+export const useInterval = (fn: Fn, interval: number, autostart = true) => {
+  const onUpdateRef = useRef<Fn>();
+  const [state, setState] = useState("RUNNING");
+  const start = () => {
+    setState("RUNNING");
+  };
+  const stop = () => {
+    setState("STOPPED");
+  };
+  useEffect(() => {
+    onUpdateRef.current = fn;
+  }, [fn]);
+  useEffect(() => {
+    if (autostart) {
+      setState("RUNNING");
+    }
+  }, [autostart]);
+  useEffect(() => {
+    let timerId;
+    if (state === "RUNNING") {
+      timerId = setInterval(() => {
+        onUpdateRef.current?.();
+      }, interval);
+    } else {
+      timerId && clearInterval(timerId);
+    }
+    return () => {
+      timerId && clearInterval(timerId);
+    };
+  }, [interval, state]);
+  return [state, { start, stop }];
+};
+
+export default useInterval;