UseDebouncedValue

Debounce value changes

Usage

Code Editor
Copy
import { useDebouncedValue } from '@erudilabs/alma'
const [value, setValue] = useState('')
const [debounced] = useDebouncedValue(value, 200)

Value:

Debounced state: 

Code Editor
Copy
<>
  <TextInput
    name="debounced-value-demo-input"
    label="Enter some text here"
    placeholder="Enter value to see debounce effect"
    defaultValue={value}
    onChange={(event) => setValue(event.currentTarget.value)}
  />
  <div className="mt-4">
    <p>Value: {value}</p>
    <p>Debounced state: {debounced}</p>
  </div>
</>

Definition

Code Editor
Copy
function useDebouncedValue<T = any>(
  value: T,
  wait: number,
): readonly [T, () => void];