Performance Composables

useDebounceFn / useDebouncedRef

useDebounceFn · useDebouncedRef · import { useDebounceFn, useDebouncedRef } from "@baklavue/composables"

Debounce function execution or ref value. Useful for search inputs, autocomplete.

const debouncedSearch = useDebounceFn((q: string) => fetchResults(q), 300);
const debouncedQuery = useDebouncedRef(searchQuery, 300);

useThrottleFn / useThrottledRef

useThrottleFn · useThrottledRef · import { useThrottleFn, useThrottledRef } from "@baklavue/composables"

Throttle function execution or ref value. Useful for scroll, resize handlers.

const throttledHandler = useThrottleFn(() => updateScroll(), 100);
const throttledScrollY = useThrottledRef(scrollY, 100);

useIntervalFn / useTimeoutFn

useIntervalFn · useTimeoutFn · import { useIntervalFn, useTimeoutFn } from "@baklavue/composables"

Pausable interval and cancellable timeout.

const { pause, resume, isActive } = useIntervalFn(() => fetchData(), 5000);
const { run, cancel, isPending } = useTimeoutFn(
  () => showToast("Saved!"),
  2000,
);

useRafFn

useRafFn · import { useRafFn } from "@baklavue/composables"

Calls a function on every requestAnimationFrame. Animation loops, smooth updates.

const { pause, resume } = useRafFn(({ delta }) => {
  position.value += velocity * (delta / 1000);
});