useDebounce

Delays rapidly changing values to optimize performance.

Import#


import { useDebounce } from 'primereact/hooks';

Basic#

The value will only be reflected when time between keystrokes is above 400ms.

Debounced Value:


<InputText type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
<span className="text-xl">
    Debounced Value: <strong>{debouncedValue}</strong>
</span>