throttle-hooks for React

• Installation
• Usage
  • Throttling
  • Debouncing
• Further reading
• License

Installation

npm i throttle-hooks

Usage

Package contains 2 hooks:

• useThrottle
• useDebounce

Throttling

useThrottle() accepts 3 optional arguments:

• wait - number in miliseconds. Default is 400
• leading - boolean. Default is false
• trailing - boolean. Default is false

useThrottle(wait, leading, trailing) returns function setter, which you can use anywhere in your component.

const throttle = useThrottle(400, true, false);

// With arrow function
throttle(()=>{
  // Express yourself...
});

// Or by invoking named function
throttle(expressYourself);
// You can also submit custom scope and arguments
throttle(expressYourself, scope, args);

You can use as many useThrottle hooks as you like. Each hook is independent.

Component example:

import { useState } from 'react';
import { useThrottle } from 'throttle-hooks';

import Button from '#components/Button';


export default function SomePage(){
  const [numClicks, setNumClicks] = useState(0);
  const throttle = useThrottle(1000);

  const _handleClick = ()=>{
    let updatedClicks = numClicks + 1;
    setNumClicks(updatedClicks);

    throttle(()=>{
      console.log("Recevied: numClicks:", updatedClicks);
    });
  }

  return (
    <div>
      <h1>Hello!</h1>
      <p>{ numClicks }</p>
      <Button onClick={_handleClick}>
        Click
      </Button>
    </div>
  )
}

Debouncing

useDebounce() accepts 2 optional arguments:

• wait - number in miliseconds. Default is 400
• leading - boolean. Default is false

useDebounce(wait, leading) returns function setter, which you can use anywhere in your component.

const debounce = useDebounce(400, true);

// With arrow function
debounce(()=>{
  // Express yourself...
});

// Or by invoking named function
debounce(expressYourself);
// You can also submit custom scope and arguments
debounce(expressYourself, scope, args);

You can use as many useDebounce hooks as you like. Each hook is independent.

Component example:

import { useState } from 'react';
import { useDebounce } from 'throttle-hooks';

import Button from '#components/Button';


export default function SomePage(){
  const [numClicks, setNumClicks] = useState(0);
  const debounce = useDebounce(1000);

  const _handleClick = ()=>{
    let updatedClicks = numClicks + 1;
    setNumClicks(updatedClicks);

    debounce(()=>{
      console.log("Recevied: numClicks:", updatedClicks);
    });
  }

  return (
    <div>
      <h1>Hello!</h1>
      <p>{ numClicks }</p>
      <Button onClick={_handleClick}>
        Click
      </Button>
    </div>
  )
}

Further reading

• Difference between throttle and debounce
• Debounce from the term author

License

MIT. 2021-present © Mark Khramko