Хук useDebounce используется для оптимизации работы с событиями, которые срабатывают слишком часто, например, при вводе текста в поле поиска или при перерисовки графиков, при изменении ползунка слайдера. Дебаунс помогает минимизировать количество вызовов функции, задерживая ее выполнение до тех пор, пока не завершится период активности. Это полезно для снижения нагрузки на сервер, уменьшения числа переработок в рендере компонентов и обеспечения более плавного пользовательского интерфейса.
export function useDebounce<T>(value: T, delay?: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return debouncedValue;
}