Иногда функция вызывается слишком часто — например, при вводе в поисковую строку или скролле страницы. Это перегружает приложение.
useDebounce в React помогает запускать действие только после того, как пользователь перестал что-то делать.import { useEffect, useState } from "react";
function useDebounce<T>(value: T, delay: number) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(id);
}, [value, delay]);
return debounced;
}Пример:
const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 500);
useEffect(() => {
if (debouncedQuery) {
fetch(`/api/search?q=${debouncedQuery}`);
}
}, [debouncedQuery]);Теперь запрос отправляется только через 500 мс после остановки ввода, а не при каждом нажатии клавиши.
👉 @sWebDev
