Pular para o conteúdo principal

useDebounce()

Atrasa a atualização dos parâmetros por meio de debounce.

Útil para evitar o excesso de requisições de rede quando os parâmetros podem mudar rapidamente (como em um campo de typeahead).

dica

useDebounce() retorna refs, então o valor com debounce pode ser passado diretamente para outros composables ou componentes. isPending é true desde o momento em que a entrada muda até que o valor com debounce seja atualizado.

Uso​

<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>

Tipos​

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

value e updatable podem ser valores simples ou refs. Retorna uma tupla de refs [debouncedValue, isPending]. Quando updatable é false, o valor com debounce deixa de ser atualizado e isPending volta para false.