feat: add useDebounce hook

packages/hooks/use-debounce/README.md

@@ -0,0 +1,5 @@
+# useDebounce
+
+The `useDebounce` hook is used to debounce a value. It is useful when you want to delay the execution of a function until a value has not changed for a certain amount of time.
+
+Please refer to the [documentation](https://www.raddix.website/docs/use-debounce) for more information.

packages/hooks/use-debounce/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@raddix/use-debounce",
+  "description": "A React hook that provides a debounced value of the provided value.",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "author": "Moises Machuca Valverde <rolan.machuca@gmail.com> (https://www.moisesmachuca.com)",
+  "homepage": "https://www.raddix.website",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gdvu/raddix.git"
+  },
+  "keywords": [
+    "react-hook",
+    "react-debounce-hook",
+    "react-use-debounce",
+    "use-debounce",
+    "use-debounce-hook",
+    "hook-debounce"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint \"{src,tests}/*.{ts,tsx,css}\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "build": "tsup src --dts",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

packages/hooks/use-debounce/src/index.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

packages/hooks/use-debounce/tests/use-debounce.test.ts

@@ -0,0 +1,39 @@
+import { renderHook, act } from '@testing-library/react';
+import { useDebounce } from '../src';
+
+describe('useDebounce test:', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should update the debounced value after the specified delay', () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebounce(value, 1000),
+      {
+        initialProps: { value: 'initial' }
+      }
+    );
+
+    expect(result.current).toBe('initial');
+
+    act(() => {
+      rerender({ value: 'updated' });
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(result.current).toBe('initial');
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(result.current).toBe('updated');
+  });
+});