Создание пользовательского хука useDebounce

Хук useDebounce принимает значение и задержку в миллисекундах, а возвращает отложенную версию этого значения: function useDebounce(value, delay). Возвращаемое debouncedValue отстаёт от текущего значения и обновляется только после того, как указанная задержка истекла без новых изменений.

Внутри хука объявите переменную состояния: const [debouncedValue, setDebouncedValue] = useState(value). Это состояние хранит последнее подтверждённое значение. Изначально оно равно начальному значению и обновляется только после срабатывания таймера отложенного вызова. Компоненты, считывающие debouncedValue, получают стабильное, окончательно установленное значение ввода.

Основная логика находится в useEffect: создайте таймер с помощью setTimeout(() => setDebouncedValue(value), delay) и сохраните его идентификатор. Эффект выполняется при каждом изменении value или delay. Таймер срабатывает через delay миллисекунд после последнего изменения и обновляет состояние отложенного значения.

Функция очистки useEffect вызывает clearTimeout(timerId). Когда value меняется до срабатывания таймера, React запускает очистку, отменяя ожидающее обновление. Затем планируется новый таймер. Это основной механизм работы отложенного вызова: быстрые изменения постоянно сбрасывают таймер.

Массив зависимостей useEffect должен содержать [value, delay]. Эффект запускается заново при изменении входного значения, поэтому планируется новый таймер, а также при изменении задержки, если вызывающий код динамически корректирует интервал отложенного вызова. Оба значения необходимо включить, чтобы избежать проблем с устаревшими замыканиями.

Использование несложно: const debouncedSearch = useDebounce(searchInput, 300). Отдельный useEffect с [debouncedSearch] в списке зависимостей выполняет сетевой запрос. Состояние ввода (searchInput) обновляется сразу, поэтому поле остаётся отзывчивым; ожидать нужно только сетевому запросу.

По умолчанию стандартная реализация выполняется только на завершающем этапе. Для режима «немедленного выполнения», который вызывает функцию при первом срабатывании, но применяет отложенный вызов к последующим, нужна ссылка для отслеживания того, был ли уже выполнен вызов, и её сброса после задержки. Это сложнее, но полезно для кнопок отправки.

Сделайте хук обобщённым для обеспечения безопасности типов: function useDebounce(value: T, delay: number): T. Это позволяет TypeScript вывести тип debouncedValue из типа value. Обобщённый параметр T автоматически передаётся во внутреннее состояние и возвращаемый тип.

Частая ошибка — забыть вернуть функцию очистки из useEffect. Без очистки каждое изменение значения создаёт новый таймер, но никогда не отменяет старый. В результате срабатывают несколько таймеров, из-за чего setDebouncedValue вызывается несколько раз с устаревшими значениями, полностью лишая отложенный вызов смысла.

Другой вариант — хранить саму функцию отложенного вызова в useRef с помощью lodash. В отличие от подхода на основе состояния, подход с объектом ссылки откладывает вызовы функций, а не значения. Используйте хук на основе состояния, когда нужно производное значение; используйте подход с функцией обратного вызова, когда нужно отложить обработчик события.

Проверьте работу хука, добавив вывод в консоль внутри обратного вызова таймера и наблюдая за консолью браузера во время быстрого набора. Вы должны видеть одну запись на каждое событие остановки, а не по одной на каждое нажатие клавиши. При быстром наборе записей должно быть значительно меньше, чем нажатий клавиш.

Почему useEffect в useDebounce должен возвращать функцию очистки, вызывающую clearTimeout?

Хук useDebounce(value, delay) хранит состояние отложенного значения, которое обновляется только после delay мс тишины. Его useEffect устанавливает таймер и очищает его при очистке, отменяя устаревшие таймеры. Используйте отложенное значение как зависимость эффектов, выполняющих получение данных с сервера. Добавьте обобщённый параметр TypeScript для полной безопасности типов.