useDeferredValueをラップし値とペンディング状態を返すフック
valueTinitialValueT-| Prop | Type | Default |
|---|---|---|
value | T | - |
initialValue | T | - |
[T, boolean]readonly [deferredValue: T, isPending: boolean]| Prop | Type | Default |
|---|---|---|
[T, boolean] | readonly [deferredValue: T, isPending: boolean] | - |
400 results
import { useDeferredDebounce } from '@k8ordo/ui';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>
</>
);