useThrottle Hook

The useThrottle hook in React is designed to limit the rate at which a function can be executed, making it ideal for handling events that fire rapidly, such as scrolling, resizing, or continuous keypresses.

Features

• Throttle Control: Limits the frequency of function execution to improve performance and reduce resource usage.
• Immediate Execution Option: Executes the function immediately on the first call and then applies the throttle to subsequent calls.
• State Tracking: Monitors the throttling status to manage the function execution effectively.
• SSR Compatibility: Safe for server-side rendering as it does not depend on browser-specific APIs.

Installation

Installing Only Current Hooks

npm install @custom-react-hooks/use-throttle

or

yarn add @custom-react-hooks/use-throttle

Installing All Hooks

npm install @custom-react-hooks/all

or

yarn add @custom-react-hooks/all

Importing the Hook

The useThrottle hook must be imported using a named import as shown below:

Named Import:

import { useThrottle } from '@custom-react-hooks/use-throttle';

This approach ensures that the hook integrates seamlessly into your project, maintaining consistency and predictability in how you use our package.

Usage

import React, { useState } from 'react';
import { useThrottle } from '@custom-react-hooks/all';

const ThrottleComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const throttledValue = useThrottle(inputValue, 1000);

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <h2>Throttled Input Example</h2>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Type here..."
      />
      <p>Input Value: {inputValue}</p>
      <p>Throttled Value: {throttledValue}</p>
    </div>
  );
};

export default ThrottleComponent;

In this example, useThrottle is used to throttle the execution of a function handling the scroll event, thereby enhancing performance.

API Reference

Parameters

• callback: The function to be throttled.
• limit: The time limit (in milliseconds) that determines how often the callback can be executed.
• immediate: (optional) A boolean indicating whether to execute the function immediately on the first call.

Returns

• Returns a throttled version of the provided function.

Use Cases

• Input Rate Limiting: Limit the rate at which input values are processed, useful in search inputs or sliders.
• Performance Optimization: Reduce the number of updates in response to frequent events like window resizing or scrolling.
• Data Fetching: Throttle API calls made in response to user input or other rapidly changing states.

Contributing

Contributions to improve useThrottle are welcome. Feel free to submit issues or pull requests to enhance its functionality and usability.