Quick Start

Installation

Don't have TanStack Pacer installed yet? See the Installation page for instructions.

Which utility do you need?

Not sure whether you want a debouncer, throttler, rate limiter, queuer, or batcher? Start with Which Pacer Utility Should I Choose?. It compares all five and explains the sync, async, and framework-specific variations of each.

API references

See the API References page for the full API of each utility.

Basic usage

In vanilla JavaScript, use the classes and functions from the core pacer package directly.

Class usage

import { Debouncer } from '@tanstack/pacer' // class

const debouncer = new Debouncer(fn, options)

debouncer.maybeExecute(args) // execute the debounced function
debouncer.cancel() // cancel the debounced function
debouncer.flush() // flush the debounced function

Function usage

import { debounce } from '@tanstack/pacer' // function

const debouncedFn = debounce(fn, options)

debouncedFn(args) // execute the debounced function

Framework hook usage (recommended)

With a framework adapter like React, the useDebouncer hook creates a debounced function and cleans it up with the component lifecycle.

tsx

import { useDebouncer } from '@tanstack/react-pacer'

const debouncer = useDebouncer(fn, options) // recommended

debouncer.maybeExecute(args) // execute the debounced function
debouncer.cancel() // cancel the debounced function
debouncer.flush() // flush the debounced function

Option helpers

Each utility has an option helper for defining shared options with full type checking, so you can reuse them across instances.

import { debouncerOptions } from '@tanstack/pacer'

const commonDebouncerOptions = debouncerOptions({
  wait: 1000,
  leading: false,
  trailing: true,
})

const debouncer = new Debouncer(fn, { ...commonDebouncerOptions, key: 'myDebouncer' })

Providers

Each framework adapter has a provider component for setting default options on every instance of a utility.

tsx

import { PacerProvider } from '@tanstack/react-pacer'

// set default options for react-pacer instances
<PacerProvider defaultOptions={{ debouncer: { wait: 1000 } }}>
  <App />
</PacerProvider>