Saltar al contenido principal

useDebounce()

Retrasa la actualización de los parámetros mediante debounce.

Es útil para evitar saturar la red con solicitudes cuando los parámetros pueden cambiar rápidamente (como en un campo de typeahead).

consejo

useDebounce() devuelve refs, por lo que el valor con debounce se puede pasar directamente a otros composables o componentes. isPending es true desde el momento en que cambia la entrada hasta que se actualiza el valor con debounce.

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 y updatable pueden ser valores simples o refs. Devuelve una tupla de refs [debouncedValue, isPending]. Cuando updatable es false, el valor con debounce deja de actualizarse e isPending vuelve a false.