useDebounce

Debounce a value to prevent frequent updates.

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

Utility

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useDebounce } from "@shak-hooks/usehooks";

Source: packages/react/src/useDebounce.ts

Signature

signature.ts

export function useDebounce<T>(value: T, delay: number): T

Parameters

Name	Type	Optional	Default
value	T	No	-
delay	number	No	-

Returns

T

Implementation

use-debounce.ts

1import { useState, useEffect } from "react";

3export function useDebounce<T>(value: T, delay: number): T {

4 const [debouncedValue, setDebouncedValue] = useState<T>(value);

6 useEffect(() => {

7 const handler = setTimeout(() => {

8 setDebouncedValue(value);

9 }, delay);

11 return () => {

12 clearTimeout(handler);

13 };

14 }, [value, delay]);

16 return debouncedValue;

17}

Google Ads

Usage

example.tsx

1import { useDebounce } from "@shak-hooks/usehooks";

3const result = useDebounce(undefined, 0);

4// result: T

5// Use values directly (React state).