useDeferredDebounce

A hook that wraps useDeferredValue and returns the value together with a pending flag.

Import

Usage

Basic Usage

400 results

apple
banana
cherry
dragonfruit
elderberry
fig
grape
honeydew
kiwi
lemon
mango
nectarine
orange
papaya
quince
raspberry
strawberry
tangerine
ugli
voavanga

Parameters

value: Type: T; Default: -
initialValue: Type: T; Default: -

Prop	Type	Default
`value`	`T`	-
`initialValue`	`T`	`-`

const [query, setQuery] = useState('');
const [deferredQuery, isPending] = useDeferredDebounce(query);

const filtered = words.filter((w) => w.includes(deferredQuery));

return (
  <>
    <TextField value={query} onChange={(e) => setQuery(e.target.value)} />
    <ul aria-busy={isPending} className={isPending ? 'opacity-60' : undefined}>
      {filtered.map((w) => <li key={w}>{w}</li>)}
    </ul>
  </>
);