UseDebouncedState

Debounce value changes with minimal renders

Usage

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

Debounced state: 

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

Definition

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