@react-hook/throttle
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    useThrottle()

    Bundlephobia Types NPM Version MIT License

    npm i @react-hook/throttle

    A React hook for performantly 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?)

    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.

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

    Arguments

    Property Type Default Description
    initialState `State (() => State)`
    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

    Install

    npm i @react-hook/throttle

    DownloadsWeekly Downloads

    116,350

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    27.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • jaredlunde