feat(react): add useDebounce hook

packages/trakas-react/__tests__/hooks/useDebounce.tsx

@@ -0,0 +1,43 @@
+import { act, render, screen } from "@testing-library/react";
+import { useEffect, useState } from "react";
+import { useDebounce } from "../../src/hooks/useDebounce";
+
+function TestComponent() {
+  const [value, setValue] = useState("1");
+  const debounceValue = useDebounce(value, 3000);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setValue("2");
+    }, 2000);
+  }, []);
+
+  return <div>{debounceValue}</div>;
+}
+
+describe("useDebounce", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  test("not updates value within 5s", async () => {
+    render(<TestComponent />);
+    act(() => {
+      jest.advanceTimersByTime(4000);
+    });
+
+    const textElement = screen.queryByText("2");
+    expect(textElement).toBeNull();
+  });
+
+  test("updates value after 5s", async () => {
+    render(<TestComponent />);
+    act(() => {
+      jest.advanceTimersByTime(5000);
+    });
+
+    const textElement = await screen.findByText("2");
+    expect(textElement).not.toBeNull();
+    expect(textElement).toBeInTheDocument();
+  });
+});

packages/trakas-react/src/hooks/useDebounce.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T = undefined>(value: T | undefined, delay: number): T | undefined {
+  const [debouncedValue, updateDebounceValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      updateDebounceValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

packages/trakas-react/src/index.ts

@@ -1 +1,2 @@
 export * from "./hooks/useToggle";
+export * from "./hooks/useDebounce";