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

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

В React debounce реализуют через кастомный хук с useRef и useCallback, либо через библиотеки вроде lodash.debounce. Основные варианты: обёртка в useCallback с мемоизацией, хранение timerId в useRef, и использование useMemo для стабильной ссылки. Для class-компонентов - через this.timer. Важно учитывать замыкания и очистку таймера при unmount.

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

Debounce в React требует особого подхода из-за особенностей рендеринга и замыканий. Прямое использование lodash.debounce внутри компонента создаёт новый экземпляр при каждом рендере, что ломает debounce. Решение - мемоизация через useCallback или useMemo.

Основные подходы:

• Кастомный хук useDebounce: инкапсулирует timerId в useRef, возвращает debounced-версию функции. Очищает таймер при unmount через useEffect.
• useMemo + debounce: создаёт стабильную debounced-функцию, которая не пересоздаётся при ререндерах.
• Библиотечные решения: lodash.debounce с useCallback или useMemo, useDebounce из react-use.
• Debounce значения: отдельный хук useDebouncedValue, который откладывает обновление состояния.

Ключевые нюансы:

• Замыкания: debounced-функция должна захватывать актуальные пропсы/стейт, иначе будет использовать устаревшие значения.
• Очистка: при unmount компонента нужно вызывать clearTimeout, чтобы избежать утечек памяти и вызова setState после размонтирования.
• leading и trailing вызовы: стандартный debounce срабатывает после паузы (trailing), но можно настроить и немедленный вызов (leading).

На практике

В продакшене чаще всего используют готовые хуки из react-use или ahooks, либо пишут свой useDebounce. Для поисковых полей - debounce ввода с задержкой 300-500ms. Для ресайза окна - 150-200ms. Для отправки формы - блокировка повторных кликов через leading debounce.

Важно тестировать поведение с быстрым вводом и проверять, что последний вызов отрабатывает. Использовать useRef для хранения последних аргументов, если debounced-функция зависит от внешних данных.

Пример кода

JSX
// Кастомный хук useDebounce
import { useRef, useCallback, useEffect } from 'react';

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

  // Обновляем ref при изменении callback
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  // Очищаем таймер при unmount
  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);

  const debouncedFn = useCallback((...args) => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
    timerRef.current = setTimeout(() => {
      callbackRef.current(...args);
    }, delay);
  }, [delay]);

  return debouncedFn;
}

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

  const handleSearch = useDebounce((value) => {
    // API call
    fetchSearchResults(value);
  }, 300);

  const onChange = (e) => {
    setQuery(e.target.value);
    handleSearch(e.target.value);
  };

  return <input value={query} onChange={onChange} />;
}

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

Начни с определения debounce и его цели. Объясни проблему замыканий в React и почему просто lodash.debounce не работает. Перечисли основные подходы, акцентируя внимание на useRef для timerId и useCallback для стабильности. Упомяни очистку при unmount и разницу между debounce функции и debounce значения. Приведи пример с поисковым полем. Если спросят про performance, скажи про useMemo для мемоизации debounced-функции.

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

• Понимание жизненного цикла React-компонентов и замыканий.
• Умение работать с хуками: useRef, useCallback, useEffect.
• Знание паттернов оптимизации производительности.
• Способность предотвращать утечки памяти и баги с устаревшими замыканиями.
• Практический опыт с debounce в реальных сценариях.

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

• Создание debounce внутри render без мемоизации - каждый рендер создаёт новый экземпляр.
• Забывание очистки таймера при unmount - вызывает setState после размонтирования.
• Использование устаревшего callback из-за замыкания - не обновляется ref с актуальной функцией.
• Передача debounced-функции в дочерний компонент без useCallback - ломает мемоизацию дочернего компонента.
• Игнорирование leading/trailing опций - неправильное поведение для кнопок отправки.