To help you get started, we've collected the most common ways that @react-hook/debounce is being used within popular public projects.

jaredLunde / react-hook / packages / window-size / src / index.ts View on Github

const useSizeHook = (
  dim: Dimension,
  initialValue?: number,
  options: DebounceOptions = emptyObj
): number => {
  const {wait, leading} = options
  const [size, setDebouncedSize] = useDebounce(
    typeof document === 'undefined'
      ? initialValue
      : document.documentElement[dim],
    wait,
    leading
  )

  useEffect(() => {
    const setSize = (): void => setDebouncedSize(document.documentElement[dim])
    window.addEventListener('resize', setSize)
    window.addEventListener('orientationchange', setSize)

    return (): void => {
      window.removeEventListener('resize', setSize)
      window.removeEventListener('orientationchange', setSize)
    }

View more ways to use @react-hook/debounce

npm i @react-hook/debounce

A React hook for debouncing setState and other callbacks

Quick Start

import {useDebounce, useDebounceCallback} from '@react-hook/debounce'

const Component = (props) => {
  // at a basic level, used just like useState
  const [value, setValue] = useDebounce('initialValue')
}

const useMyCallback = (initialState, wait, leading) => {
  // this is the same code useDebounce() uses to debounce setState
  const [state, setState] = useState(initialState)
  return [state, useDebounceCallback(setState, wait, leading)]
}

API

useDebounce(initialState, wait?, leading?)

A hook that acts just like React.useState, but with a setState function that is only invoked after the wait time in ms has been exceeded between calls.

export const useDebounce = (
  initialState: State | (() => State),
  wait?: number,
  leading?: boolean
): [State, Dispatch>]

Options

Returns [state, setStateDebounced, setStateImmediate]

Note: Using setStateImmediate does not cancel a queued setStateDebounced calls, i.e., the setStateDebounced will still take effect once its wait time is over. If needed, cancelling behavior could typically still be achieved by calling both setStateImmediate and setStateDebounced with the same value.

useDebounceCallback(callback, wait?, leading?)

A hook that will invoke its callback only after wait time in ms has been exceeded between calls.

export const useDebounceCallback = (
  callback: (...args: CallbackArgs) => void,
  wait = 100,
  leading = false
): ((...args: CallbackArgs) => void)

Options

Returns debouncedCallback

LICENSE

MIT