Finished Hub ESLINT rule enforcement

packages/shared-components/helper/index.ts

@@ -2,3 +2,5 @@ export * from "./cn";
 export * from "./event";
 export * from "./dates";
 export * from "./simulatorConnected";
+export * from "./useDebounce";
+export * from "./useTimeout";

packages/shared-components/helper/useDebounce.ts

@@ -0,0 +1,9 @@
+"use client";
+import { DependencyList, useEffect } from "react";
+import useTimeout from "./useTimeout";
+
+export const useDebounce = (callback: () => void, delay: number, dependencies: DependencyList) => {
+	const { reset, clear } = useTimeout(callback, delay);
+	useEffect(reset, [...dependencies, reset]);
+	useEffect(() => clear, [clear]);
+};

packages/shared-components/helper/useTimeout.ts

@@ -0,0 +1,31 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+
+export default function useTimeout(callback: () => void, delay: number) {
+	const callbackRef = useRef(callback);
+	const timeoutRef = useRef<NodeJS.Timeout>(null);
+
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+
+	const set = useCallback(() => {
+		timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
+	}, [delay]);
+
+	const clear = useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+	}, []);
+
+	useEffect(() => {
+		set();
+		return clear;
+	}, [delay, set, clear]);
+
+	const reset = useCallback(() => {
+		clear();
+		set();
+	}, [clear, set]);
+
+	return { reset, clear, set };
+}