useThrottleFn

Category

Utilities

Export Size

429 B

Last Changed

5 days ago

Related

useDebounceFn

Throttle execution of a function

Demo

Usage

import { useThrottleFn } from '@reause/shared'
import { useEffect } from 'react'

const throttledFn = useThrottleFn(() => {
  // do something, it will be called at most 1 time per second
}, 1000)

useEffect(() => {
  window.addEventListener('resize', throttledFn)
  return () => window.removeEventListener('resize', throttledFn)
}, [throttledFn])
// note: returned fn is referentially stable so effects don't re-subscribe;
// ms is a plain number, re-read on
// every call

Recommended Reading

• Debounce vs Throttle: Definitive Visual Guide

Type Declarations

export type PromisifyFn<T extends FunctionArgs> = (...args: Parameters<T>) => Promise<Awaited<ReturnType<T>>>

export function useThrottleFn<T extends FunctionArgs>(fn: T, ms?: number, trailing?, leading?, rejectOnCancel?): PromisifyFn<T>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

351a6 - fix(shared): resolve useThrottleFn audit findings (#748)

30916 - fix(test): stabilize flaky timing-sensitive browser tests

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)