JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 196916
  • Score
    100M100P100Q176431F
  • License MIT

A React hook for debouncing setState and other callbacks

Package Exports

  • @react-hook/debounce

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-hook/debounce) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useDebounce()

Bundlephobia Types NPM Version MIT License 

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?)

export const useDebounce = <State>(
  initialState: State | (() => State),
  wait?: number,
  leading?: boolean
): [State, Dispatch<SetStateAction<State>>] => {
  const [state, setState] = useState(initialState)
  return [state, useDebounceCallback(setState, wait, leading)]
}

Options

Property Type Default Description
initialState State The initial state stored in useState
wait number 100 Defines the amount of time you want setState to wait after the last received action before executing
leading boolean false Calls setState on the leading edge (right away). When false, setState will not be called until the next frame is due

Returns [state, setState]

Variable Type Description
state State The value set by setState or the initialState
setState Function A debounced setState callback

useDebounceCallback(callback: Function, wait?: number, leading?: boolean)

export const useDebounceCallback = <CallbackArgs extends any[]>(
  callback: (...args: CallbackArgs) => void,
  wait = 100,
  leading = false
): ((...args: CallbackArgs) => void)

Options

Property Type Default Description
callback (...args: CallbackArgs) => void This is the callback you want to debounce. You need to wrap closures/unstable callbacks in useCallback() so that they are stable, otherwise throttling will break between renders.
wait number 100 Defines the amount of time you want setState to wait after the last received action before executing
leading boolean false Calls setState on the leading edge (right away). When false, setState will not be called until the next frame is due

Returns debouncedCallback

Variable Type Description
debouncedCallback (...args: CallbackArgs) => void A debounced version of your callback

LICENSE

MIT