@react-hook/throttle

---

useThrottle()

npm i @react-hook/throttle

---

A React hook for throttling setState and other callbacks.

Quick Start

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

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

Options

Property	Type	Default	Description
initialState	any		The initial state stored in 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	any	The value set by setState or the initialState
setState	Dispatch<SetStateAction<State>>	A throttled setState callback

---

useThrottleCallback(callback, fps?, leading?)

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

Options

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