delay経過後にstartTransitionでアクションを実行するフック
delaynumber| Prop | Type | Default |
|---|---|---|
delay | number | - |
[boolean, (action) => void]readonly [isPending: boolean, run: (action: (signal: AbortSignal) => void | Promise<void>) => void]| Prop | Type | Default |
|---|---|---|
[boolean, (action) => void] | readonly [isPending: boolean, run: (action: (signal: AbortSignal) => void | Promise<void>) => void] | - |
Type to run a mock API call after a 500ms debounce.
import { useDebouncedTransition } from '@k8ordo/ui';const [query, setQuery] = useState('');
const [result, setResult] = useState('');
const [isPending, run] = useDebouncedTransition(500);
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const next = e.target.value;
setQuery(next);
run(async (signal) => {
await sleep(800, signal);
setResult(`Results for "${next}"`);
});
};
return (
<>
<TextField value={query} onChange={handleChange} />
<p aria-busy={isPending}>{isPending ? 'Loading…' : result}</p>
</>
);