@supunlakmal/hooks/dist/hooks/performance-optimization/useThrottle.js

A collection of reusable React hooks

import { useState, useEffect, useRef } from 'react';
/**
 * Throttles a value.
 *
 * @template T The type of the value to throttle.
 * @param {T} value The value to throttle.
 * @param {number} limit The minimum time interval in milliseconds between updates.
 * @returns {T} The throttled value.
 */
export const useThrottle = (value, limit) => {
    const [throttledValue, setThrottledValue] = useState(value);
    const lastRan = useRef(Date.now());
    useEffect(() => {
        const handler = setTimeout(() => {
            if (Date.now() - lastRan.current >= limit) {
                setThrottledValue(value);
                lastRan.current = Date.now();
            }
        }, limit - (Date.now() - lastRan.current));
        // Set throttledValue immediately on the first render or when the value changes significantly
        // This ensures responsiveness for the initial value or large jumps
        if (throttledValue !== value && Date.now() - lastRan.current >= limit) {
            setThrottledValue(value);
            lastRan.current = Date.now();
        }
        return () => {
            clearTimeout(handler);
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [value, limit]); // Recalculate effect if value or limit changes
    return throttledValue;
};
//# sourceMappingURL=useThrottle.js.map