Code
<script lang="ts">
import { useDebounce } from 'svelora';
let value = $state('');
const debounced = useDebounce(() => value, 300);
</script>
<input bind:value placeholder="Type to debounce..." />
<p>{debounced()}</p>
useDebounce
Reactive debounce hook. Delays execution until a pause in calls. Tracks pending state and supports cancel/flush.
Basic: Search
Type in the input — the search only fires after 500ms of inactivity.
Idle Executed: 0x
Auto-save
Content auto-saves 1 second after you stop typing.
No changes
Real World: API Search
Debounced API call with loading state. Try typing "alice", "bob", or "grace".
Cancel & Flush
Delay is 2 seconds. Use Cancel to discard, or Flush to execute immediately.
Idle