Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@react-hook/throttle

jaredLunde929.1kMIT2.2.0TypeScript support: included

A React hook for throttling setState and other callbacks

react, react hook, throttle, throttle hook, react throttle, throttle state, throttle react state, react throttle hook, use throttle, usethrottle

readme

useThrottle()

Bundlephobia Types NPM Version MIT License 

npm i @react-hook/throttle

A React hook for performantly throttling setState and other callbacks.

Quick Start

`jsx harmony import {useThrottle, useThrottleCallback} from '@react-hook/throttle'

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

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


## API

### useThrottle(initialState, fps?, leading?)

A hook that acts just like `React.useState`, but with a `setState` function
that is only invoked at most X frames per second. A trailing call is guaranteed,
but you may opt-in to calling on the leading edge, as well.

```ts
export const useThrottle = <State>(
  initialState: State | (() => State),
  fps?: number,
  leading?: boolean
): [State, Dispatch<SetStateAction<State>>]

Arguments

Property Type Default Description
initialState `State (() => State)` | The initial state provided to React.useState()
fps number 30 Defines the rate in frames per second with which setState is invoked with new state
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 current value in state
setState Dispatch<SetStateAction<State>> A throttled setState callback

useThrottleCallback(callback, fps?, leading?)

A hook that invokes its callback at most X frames per second. A trailing call is guaranteed, but you may opt-in to calling on the leading edge, as well.

export const useThrottleCallback = <Callback extends (...args: any[]) => void>(
  callback: Callback,
  fps = 30,
  leading = false
): Callback

Arguments

Property Type Default Description
callback ((...args: CallbackArgs) => void) | This is the callback you want to throttle. You need to wrap closures/unstable callbacks in useCallback() so that they are stable, otherwise throttling will break between renders.
fps number 30 Defines the rate in frames per second with which setState is invoked with new state
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 throttledCallback

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

LICENSE

MIT