feat: useTimeout hook

src/hooks/index.ts

@@ -7,3 +7,4 @@ export * from "./useCounter/useCounter";
 export * from "./useHover/useHover";
 export * from "./useFavicon/useFavicon";
 export * from "./useQueue/useQueue";
+export * from "./useTimeout";

src/hooks/useTimeout/index.ts

@@ -0,0 +1 @@
+export * from "./useTimeout";

src/hooks/useTimeout/useTimeout.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
+import useTimeout from "./useTimeout";
+import { act } from "react-dom/test-utils";
+import { render } from "@testing-library/react";
+
+// Test Component using the useTimeout hook
+function TestComponent({
+  onTimeout,
+  delay,
+}: {
+  onTimeout: () => void;
+  delay: number;
+}) {
+  useTimeout(onTimeout, delay);
+  return null;
+}
+
+describe("useTimeout", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should call the callback after the specified timeout", () => {
+    // mock
+    const callback = vi.fn();
+    const delay = 1000;
+
+    // act
+    render(<TestComponent onTimeout={callback} delay={delay} />);
+
+    act(() => {
+      vi.advanceTimersByTime(delay);
+    });
+
+    // assert
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should clear timeout on unmount", () => {
+    // mock
+    const callback = vi.fn();
+    const delay = 1000;
+
+    // act
+    const { unmount } = render(
+      <TestComponent onTimeout={callback} delay={delay} />
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(delay / 2);
+    });
+
+    unmount();
+
+    act(() => {
+      vi.advanceTimersByTime(delay / 2);
+    });
+
+    // assert
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should clear the timeout when delay changes", () => {
+    // mock
+    const callback = vi.fn();
+    const initialDelay = 1000;
+    const newDelay = 2000;
+
+    // act
+    const { rerender } = render(
+      <TestComponent onTimeout={callback} delay={initialDelay} />
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(initialDelay / 2);
+    });
+
+    rerender(<TestComponent onTimeout={callback} delay={newDelay} />);
+
+    act(() => {
+      vi.advanceTimersByTime(newDelay / 2);
+    });
+
+    // assert
+    expect(callback).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(newDelay / 2);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});

src/hooks/useTimeout/useTimeout.tsx

@@ -0,0 +1,14 @@
+import { useEffect, useRef, useCallback } from "react";
+
+export default function useTimeout(cb: () => void, ms: number) {
+  const timeId = useRef<NodeJS.Timeout | null>(null);
+  const clearCurrentTimeOut = useCallback(() => {
+    if (timeId.current) clearTimeout(timeId.current);
+  }, []);
+
+  useEffect(() => {
+    timeId.current = setTimeout(cb, ms);
+    return clearCurrentTimeOut;
+  }, [ms, cb]);
+  return clearCurrentTimeOut;
+}