Skip to Content
UI KitHooksuseThrottle

Overview

The useThrottle hook is an essential tool in React development, designed to control the frequency of function execution. It’s particularly valuable in scenarios like handling rapidly changing input values, ensuring that updates occur at a controlled rate to optimize performance.

By integrating useThrottle in your application, you can optimize performance for scenarios involving rapidly changing data, ensuring a smooth and efficient user experience.

Key Features

  • Rate Limiting: Controls the frequency at which values are updated.
  • Performance Enhancement: Improves the efficiency of applications by reducing the number of updates.
  • Versatility: Can be used with various data types and scenarios.

How It Works

The hook takes in a value and a delay time in milliseconds. It uses useState and useEffect from React to manage the throttled value, updating it only after the specified delay since the last change.

Syntax

const throttledValue = useThrottle(value, delay);
  • value: The value to be throttled.
  • delay: The delay time in milliseconds before the value is updated.

Usage Example

Here’s an example of how useThrottle can be used in a search input scenario:

import { useState } from 'react';
import { useThrottle } from '@akinon/ui-hooks';
 
const SearchComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const throttledSearchTerm = useThrottle(searchTerm, 500);
 
  const handleSearch = event => {
    setSearchTerm(event.target.value);
  };
 
  // Use throttledSearchTerm for fetching data or other side effects
 
  return (
    <input
      type="text"
      value={searchTerm}
      onChange={handleSearch}
      placeholder="Search..."
    />
  );
};
 
export default SearchComponent;
useSessionStorageuseToggle