keyhan
cb9320ee15
- Create reusable useDebounce<T> hook in frontend/src/hooks/useDebounce.ts - Replace manual setTimeout/clearTimeout + extra state in AdminAppsPage with clean useDebounce(search, 400) pattern - Removes timer state and handleSearch wrapper function
29 lines
832 B
TypeScript
29 lines
832 B
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
|
||
/**
|
||
* Debounce a value by a given delay.
|
||
*
|
||
* @param value The raw (fast-changing) value, e.g. a search input string.
|
||
* @param delay Debounce delay in milliseconds (default 400ms).
|
||
* @returns The debounced value – only updates after the user stops
|
||
* changing `value` for `delay` ms.
|
||
*
|
||
* @example
|
||
* const [search, setSearch] = useState('');
|
||
* const debouncedSearch = useDebounce(search, 400);
|
||
*
|
||
* // use `debouncedSearch` in your query key / API call
|
||
*/
|
||
export function useDebounce<T>(value: T, delay = 400): T {
|
||
const [debounced, setDebounced] = useState<T>(value);
|
||
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => setDebounced(value), delay);
|
||
return () => clearTimeout(timer);
|
||
}, [value, delay]);
|
||
|
||
return debounced;
|
||
}
|