> Какие варианты реализации debounce существуют в React для ограничения частоты вызова функции (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: IT-One, EPAM

Стек: React

> Пример ответа

В React для debounce можно использовать несколько подходов. Самый простой - обёртка setTimeout с clearTimeout внутри хука useCallback или useRef:

JSX
import { useCallback, useRef } from 'react';

function useDebounce(callback, delay) {
  const timerRef = useRef(null);

  return useCallback((...args) => {
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => callback(...args), delay);
  }, [callback, delay]);
}

Для более сложных сценариев (например, отмена последнего вызова при размонтировании) используют useEffect с очисткой:

JSX
function useDebouncedValue(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

Также можно применить готовые библиотеки: lodash.debounce (обёрнутый в useMemo для стабильности ссылки) или use-debounce (хуки useDebounce и useDebouncedCallback). Важно помнить, что при использовании debounce в обработчиках событий (например, onChange) нужно сохранять ссылку на функцию через useRef или useCallback, чтобы избежать пересоздания таймера при каждом рендере.