Hooks
No hooks found in any category.
useDebounce
utilityInstallation
npx usehooks-cli@latest add use-debounceDescription
A React hook for debouncing values to delay updates until after a specified delay period. Useful for optimizing performance in search inputs, API calls, and other scenarios where you want to limit the frequency of updates.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| value | T | - | The value to debounce |
| delay | number | - | The delay in milliseconds before the value is updated |
Examples
Search Input Debouncing
Debouncing user input for search functionality
1const [searchTerm, setSearchTerm] = useState('');
2const debouncedSearchTerm = useDebounce(searchTerm, 300);
3
4// Effect runs only when debounced value changes
5useEffect(() => {
6 if (debouncedSearchTerm) {
7 // Perform search API call
8 searchAPI(debouncedSearchTerm);
9 }
10}, [debouncedSearchTerm]);
11
12return (
13 <input
14 value={searchTerm}
15 onChange={(e) => setSearchTerm(e.target.value)}
16 placeholder="Search..."
17 />
18);API Call Optimization
Preventing excessive API calls during rapid state changes
1const [filters, setFilters] = useState({ category: '', price: 0 });
2const debouncedFilters = useDebounce(filters, 500);
3
4useEffect(() => {
5 // API call only happens after user stops changing filters
6 fetchProducts(debouncedFilters);
7}, [debouncedFilters]);
8
9const updateFilter = (key: string, value: any) => {
10 setFilters(prev => ({ ...prev, [key]: value }));
11};Window Resize Debouncing
Debouncing window resize events for performance
1const [windowSize, setWindowSize] = useState({
2 width: window.innerWidth,
3 height: window.innerHeight
4});
5const debouncedWindowSize = useDebounce(windowSize, 250);
6
7useEffect(() => {
8 const handleResize = () => {
9 setWindowSize({
10 width: window.innerWidth,
11 height: window.innerHeight
12 });
13 };
14
15 window.addEventListener('resize', handleResize);
16 return () => window.removeEventListener('resize', handleResize);
17}, []);
18
19// Use debouncedWindowSize for expensive calculations
20useEffect(() => {
21 performExpensiveLayout(debouncedWindowSize);
22}, [debouncedWindowSize]);Dependencies
react
Notes
- •The debounced value will only update after the specified delay has passed since the last change
- •Useful for optimizing performance when dealing with rapid state changes
- •Commonly used with search inputs, form validation, and API calls
- •The delay is reset every time the input value changes
- •Uses setTimeout internally and properly cleans up on unmount
Implementation
1"use client";
2
3import { useState, useEffect } from "react";
4
5export function useDebounce<T>(value: T, delay: number): T {
6 const [debouncedValue, setDebouncedValue] = useState<T>(value);
7
8 useEffect(() => {
9 const handler = setTimeout(() => {
10 setDebouncedValue(value);
11 }, delay);
12
13 return () => {
14 clearTimeout(handler);
15 };
16 }, [value, delay]);
17
18 return debouncedValue;
19}
20
21export default useDebounce;
22