Feat/use debounce

.github/workflows/test.yml

@@ -92,3 +92,10 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: Autosizer
           files: ./packages/autosizer/coverage/coverage-final.json
+
+      - name: Upload `useDebounce` coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          flags: useDebounce
+          files: ./packages/use-debounce/coverage/coverage-final.json

apps/docs/package.json

@@ -10,7 +10,7 @@
     "clean": "rimraf .turbo && rimraf node_modules && rimraf .next"
   },
   "dependencies": {
-    "@react-awesome/components": "1.0.22",
+    "@react-awesome/components": "1.0.23",
     "@vercel/speed-insights": "^1.0.10",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @react-awesome/components
 
+## 1.0.23
+
+### Patch Changes
+
+- Updated dependencies
+  - @react-awesome/use-debounce@1.0.0
+
 ## 1.0.22
 
 ### Patch Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/components",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,6 +46,7 @@
     "@react-awesome/use-previous": "0.0.3",
     "@react-awesome/use-toggle": "1.0.0",
     "@react-awesome/use-breakpoint": "1.0.0",
+    "@react-awesome/use-debounce": "1.0.0",
     "@react-awesome/autosizer": "0.0.0"
   }
 }

packages/use-debounce/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ["@react-awesome/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

packages/use-debounce/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @react-awesome/use-debounce
+
+## 1.0.0
+
+### Major Changes
+
+- Release first version

packages/use-debounce/README.md

@@ -0,0 +1,32 @@
+# @react-awesome/use-debounce
+
+<p align="center">
+  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-debounce" />
+  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=use-debounce" />
+  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
+  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
+  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-debounce" />
+</p>
+
+**use-debounce** tracks the previous value of a variable.
+
+Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-debounce) for more information.
+
+## Installation
+
+```sh
+yarn add @react-awesome/use-debounce
+# or
+npm i @react-awesome/use-debounce
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).

packages/use-debounce/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@react-awesome/use-debounce",
+  "version": "1.0.0",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "description": "useDebounce debounces the state value.",
+  "keywords": [
+    "react",
+    "debounce",
+    "state",
+    "react",
+    "react",
+    "hooks",
+    "useDebounce"
+  ],
+  "repository": {
+    "url": "https://github.com/trinhthinh388/react-awesome-components"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "vite --config ../../vite.config.ts build",
+    "dev": "vite --watch --config ../../vite.config.ts build",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist",
+    "test": "vitest --config ../../vite.config.ts --coverage --run",
+    "test:ui": "vitest --config ../../vite.config.ts --coverage --ui",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@react-awesome/eslint-config": "*",
+    "@react-awesome/tsconfig": "*",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/use-debounce/src/index.ts

@@ -0,0 +1 @@
+export * from './use-debounce'

packages/use-debounce/src/use-debounce.spec.tsx

@@ -0,0 +1,22 @@
+import { useDebounce } from './use-debounce'
+import { renderHook } from '@testing-library/react'
+
+describe('useDebounce', () => {
+  beforeEach(() => {
+    // tell vitest we use mocked time
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    // restoring date after each test run
+    vi.useRealTimers()
+  })
+
+  it('Should debounce the state update', () => {
+    const { result, rerender } = renderHook(() => useDebounce(1, 3_000))
+    expect(result.current).toBe(undefined)
+    vi.runAllTimers()
+    rerender()
+    expect(result.current).toBe(1)
+  })
+})

packages/use-debounce/src/use-debounce.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useDebounce<T>(state: T, timeout: number = 3_00): T {
+  const [debounced, setDebounced] = useState<T>()
+  const timeoutId = useRef<number>()
+
+  useEffect(() => {
+    const id = timeoutId.current
+    if (id) {
+      clearTimeout(id)
+    }
+
+    timeoutId.current = window.setTimeout(() => {
+      setDebounced(state)
+    }, timeout)
+
+    return () => {
+      clearTimeout(id)
+    }
+  }, [state, timeout])
+
+  return debounced as T
+}

packages/use-debounce/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@react-awesome/tsconfig/react-library.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+}