# useDebounce

> Debounces a changing value.

- Category: Effects
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-debounce

## Signature

```ts
useDebounce<T>(value: T, delay: number): T
```

## Parameters

- `value`: `T` — The value to debounce — any type works.
- `delay`: `number` — Milliseconds the value must stay unchanged before the debounced value updates.

## Returns

- `debouncedValue`: `T` — Trails the input value, updating only after delay ms without a change.

## Usage

```tsx
import { useState } from "react";
import { useDebounce } from "hookli";

export function Demo() {
  const [text, setText] = useState("");
  const debounced = useDebounce(text, 500);

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Value: {text}</p>
      <p>Debounced: {debounced}</p>
    </div>
  );
}
```

## Source

`src/hooks/useDebounce.hook.ts`

```ts
import { useEffect, useState } from "react";

export const useDebounce = <T>(value: T, delay: number): T => {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
};
```