the-react-hooks
HooksuseThrottle

useThrottle()

The useThrottle() hook limits the execution rate of a value update. Unlike debounce (which waits for a pause), throttle ensures updates happen at a regular interval (e.g., every 500ms) while the user is active. This is ideal for scroll events, resizing, or rate-limiting API calls during continuous input.

Import

typescript
import { useThrottle } from 'the-react-hooks';

Usage

Type rapidly below. The Throttled value updates every 1.5s.

Real-time
0Updates
...
Throttled
0Updates
...
Component.tsx
import { useThrottle } from 'the-react-hooks';
import { useState, useEffect } from 'react';

export const Component = () => {
  const [text, setText] = useState('');
  
  const throttledText = useThrottle(text, 1000);

  useEffect(() => {
    console.log('Sending API request for:', throttledText);
  }, [throttledText]);

  return (
    <input 
      value={text}
      onChange={(e) => setText(e.target.value)}
      placeholder="Type here..."
    />
  );
}

API

Arguments

  • value – T The value to be throttled.
  • interval – number (Optional) The time interval in milliseconds to wait before updating the value again. Defaults to 500ms.

Returns

Returns the throttled value of type T.
PrevioususeSessionStorageNextuseTimeout