> Как правильно реализовать дебаунс в React (React)

Короткий ответ

Для реализации дебаунса в React используй хук useDebounce, который оборачивает setTimeout/clearTimeout в useEffect с очисткой. Ключевой момент - сохранять стабильную ссылку на callback через useRef, чтобы избежать лишних пересозданий таймера при ререндерах. Для UI-событий (ввод текста, resize) дебаунс применяется внутри onChange или addEventListener, а сам хук возвращает отложенное значение или функцию.

Подробное объяснение

Дебаунс в React требует учёта жизненного цикла компонента: таймеры должны очищаться при размонтировании, чтобы избежать утечек памяти и вызовов setState на unmounted компоненте. Основная сложность - closure problem: callback, переданный в setTimeout, захватывает устаревшие значения из замыкания. Решается через useRef для хранения актуального callback и useCallback/useMemo для стабильности зависимостей.

Архитектурно есть два подхода:

• дебаунс значения (например, для поискового запроса) - хук возвращает отложенное значение, которое обновляется после паузы;
• дебаунс функции (например, для отправки аналитики) - хук возвращает debounced-версию функции, которая вызывается не чаще заданного интервала.

Для server-side rendering (SSR) нужно проверять наличие window перед вызовом setTimeout. В React 18+ с Concurrent Features дебаунс может конфликтовать с автоматическим батчингом - используй flushSync для немедленного обновления DOM, если критично.

На практике

В реальных проектах дебаунс чаще всего применяется для:

• поисковых инпутов (задержка 300-500ms перед отправкой запроса);
• сохранения черновиков (autosave с дебаунсом 1-2 секунды);
• обработки resize/scroll (задержка 100-200ms).

Для форм с несколькими полями лучше дебаунсить не каждое поле отдельно, а весь объект формы через useEffect с зависимостью от всех значений. Это снижает количество таймеров и упрощает логику.

Важно помнить: дебаунс - это компромисс между отзывчивостью UI и производительностью. Для критичных по времени действий (валидация при вводе) лучше использовать throttle или immediate-флаг.

Пример кода

TSX
import { useState, useEffect, useRef, useCallback } from 'react';

// Хук для дебаунса значения
function useDebounceValue<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

  return debouncedValue;
}

// Хук для дебаунса функции с сохранением контекста
function useDebounceFn<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  const fnRef = useRef(fn);
  fnRef.current = fn;

  const timerRef = useRef<ReturnType<typeof setTimeout>>();

  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);

  return useCallback(
    (...args: Parameters<T>) => {
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => fnRef.current(...args), delay);
    },
    [delay]
  );
}

// Пример использования в компоненте поиска
function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounceValue(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      fetch(`/api/search?q=${debouncedQuery}`);
    }
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Поиск..."
    />
  );
}

Как отвечать на собеседовании

Начни с базового определения дебаунса и его отличия от throttle. Затем переходи к специфике React: проблемы с замыканиями, очистка эффектов, использование refs. Упомяни, что для простых случаев можно использовать библиотеку lodash.debounce, но в React-компонентах её нужно оборачивать в useMemo/useRef для стабильности ссылки.

Покажи понимание trade-off: дебаунс увеличивает задержку отклика, но снижает количество операций. Для UI-событий с высокой частотой (scroll) лучше throttle, для ввода текста - дебаунс.

Если интервьюер спросит про React 18, добавь про конфликт с автоматическим батчингом и использование flushSync для критичных обновлений.

Что проверяет интервьюер

• Понимание жизненного цикла React-компонентов и очистки эффектов.
• Умение работать с замыканиями и refs для сохранения актуальных значений.
• Знание разницы между дебаунсом значения и функции.
• Способность выбрать правильный инструмент (дебаунс vs throttle) под конкретную задачу.
• Понимание проблем производительности и оптимизации рендеринга.

Типичные ошибки

• Создание нового таймера при каждом ререндере без очистки предыдущего.
• Использование дебаунса внутри render без useMemo/useCallback - приводит к бесконечному циклу.
• Забывание очистить таймер при unmount компонента.
• Передача в debounce функцию, которая зависит от пропсов/стейта без useRef - приводит к stale closure.
• Применение дебаунса для анимаций или событий, где нужен throttle (например, scroll).
• Использование дебаунса с задержкой 0 - бессмысленно, лучше использовать requestAnimationFrame или microtask.