Что такое useDebounce и как он помогает при работе с поиском?

Что такое useDebounce?

useDebounce — это кастомный хук в React, который реализует технику debounce (дребезг). Он позволяет отложить выполнение функции или обновление состояния до тех пор, пока не пройдет определенный промежуток времени после последнего вызова. Это особенно полезно при работе с поиском в реальном времени, когда каждый ввод символа может инициировать запрос к серверу.

Как это работает?

Когда пользователь вводит текст, useDebounce не обновляет значение немедленно. Вместо этого он запускает таймер, который сбрасывается при каждом новом вводе. Только после того, как пользователь перестает печатать на заданное время (например, 300 мс), значение обновляется. Это предотвращает отправку множества запросов при быстром наборе.

Пример реализации

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Применение в поиске

В компоненте поиска вы можете использовать useDebounce для задержки отправки запроса:

import useDebounce from './useDebounce';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 300);

  useEffect(() => {
    if (debouncedSearchTerm) {
      fetchResults(debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

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

Вывод

useDebounce — это простой и эффективный способ оптимизировать поисковые запросы, уменьшить количество вызовов API и улучшить пользовательский опыт. Его стоит применять везде, где требуется обработка частых событий, таких как ввод текста, изменение размера окна или скролл.