Effects
useDebounce
Debounces a changing value.
Demo
live · imported from hookli
- value
- —
- debounced
- —
settled
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>
);
}Usage
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>
);
}API
useDebounce<T>(value: T, delay: number): TParameters
| Name | Type | Default | Description |
|---|---|---|---|
| value | T | — | The value to debounce — any type works. |
| delay | number | — | Milliseconds the value must stay unchanged before the debounced value updates. |
Returns
| Name | Type | Description |
|---|---|---|
| debouncedValue | T | Trails the input value, updating only after delay ms without a change. |
Hook
The implementation, straight from hookli. Copy it, or install the package.
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;
};