Skip to main content

useDebounce()

Delays updating the parameters by debouncing.

Useful to avoid spamming network requests when parameters might change quickly (like a typeahead field).

:::

tip

useDebounce() returns refs, so the debounced value can be passed directly to other composables or components. isPending is true from the moment the input changes until the debounced value is updated.

:::

Usage​

<script setup lang="ts">
  import { ref } from 'vue';
  import { useDebounce } from '@data-client/vue';
  import IssueList from './IssueList.vue';

  const query = ref('');
  // highlight-next-line
  const [debouncedQuery, isPending] = useDebounce(query, 200);
</script>

<template>
  <TextInput
    spellcheck="false"
    placeholder="Search react issues"
    v-model="query"
    :loading="isPending"
    autofocus
    size="large"
  >
    <SearchIcon />
  </TextInput>
  <Suspense>
    <IssueList :query="debouncedQuery" owner="facebook" repo="react" />
    <template #fallback><Loading /></template>
  </Suspense>
</template>

Types​

function useDebounce<T>(
  value: T | Ref<T>,
  delay: number,
  updatable?: boolean | Ref<boolean>,
): [Ref<T>, Ref<boolean>];

value and updatable can be plain values or refs. Returns a tuple of [debouncedValue, isPending] refs. When updatable is false, the debounced value stops updating and isPending resets to false.