vue3-debounce-input/src/useDebounce.js

Debounce utility for Vue 3, A simple and lightweight Vue3 hook for debouncing values. Ideal for optimizing performance in search fields, input handling, and other scenarios where you want to limit the rate of updates.

import { ref } from "vue";
import { debounce } from "./debounce";

export function useDebounce(fn, delay = 300, options = {}) {
  const debouncedValue = ref(null); // Hold the debounced value
  const isDebouncing = ref(false);

  const debouncedFn = debounce(
    (...args) => {
      isDebouncing.value = false;
      debouncedValue.value = fn(...args); // Set debounced value when the function is called
    },
    delay,
    options
  );

  function triggerDebouncedFn(...args) {
    isDebouncing.value = true;
    debouncedFn(...args);
  }

  return {
    triggerDebouncedFn,
    debouncedValue,
    isDebouncing,
    cancel: debouncedFn.cancel,
  };
}