useThrottle

Throttle a value.

https://www.shaktools.com/shak-hooks
Utility

API Reference

Installation

terminal
pnpm add @shak-hooks/usehooks
import.ts
import { useThrottle } from "@shak-hooks/usehooks";
Source: packages/react/src/useThrottle.ts

Signature

signature.ts
export function useThrottle<T>(value: T, interval: number = 500): T

Parameters

NameTypeOptionalDefault
valueTNo-
intervalnumberYes500

Returns

T

Implementation

use-throttle.ts
1import { useState, useEffect, useRef } from "react";
2
3export function useThrottle<T>(value: T, interval: number = 500): T {
4 const [throttledValue, setThrottledValue] = useState<T>(value);
5 const lastExecuted = useRef<number>(Date.now());
6
7 useEffect(() => {
8 if (Date.now() >= lastExecuted.current + interval) {
9 lastExecuted.current = Date.now();
10 setThrottledValue(value);
11 } else {
12 const timerId = setTimeout(() => {
13 lastExecuted.current = Date.now();
14 setThrottledValue(value);
15 }, interval);
16
17 return () => clearTimeout(timerId);
18 }
19 }, [value, interval]);
20
21 return throttledValue;
22}

Advertisement

Google Ads

Usage

example.tsx
1import { useThrottle } from "@shak-hooks/usehooks";
2
3const result = useThrottle(undefined, undefined);
4// result: T
5// Use values directly (React state).

Let‘s do great work together

Empowering creators with free, high-performance AI, SEO, and developer tools. Join thousands of users optimizing their workflow with Shak-Tools.

Tools10+ Free
UsersGlobal

Stay in the loop

Join our newsletter for the latest AI tools and updates.

ShakTools
© 2025 Shaktools. All Rights Reserved.Privacy Policy