Практическое применение: поиск, прокрутка, изменение размера

В компоненте живого поиска поддерживайте две отдельные переменные состояния: inputValue для исходного значения ввода (оно обновляется при каждом нажатии клавиши и сохраняет отзывчивость поля ввода) и debouncedQuery, полученное из useDebounce(inputValue, 300) (оно обновляется через 300 мс после остановки ввода и запускает вызов API). Такое разделение обеспечивает мгновенную визуальную обратную связь без избыточного количества запросов.

Показывайте индикатор загрузки сразу после начала ввода, а не только при запуске вызова API. Устанавливайте isLoading: true, когда inputValue !== debouncedQuery: эти значения не совпадают, пока ожидается отложенный вызов. После стабилизации запроса и завершения получения данных снова устанавливайте это значение в false. Так пользователи постоянно видят отзывчивый индикатор загрузки.

Эффект параллакса или индикатор прогресса чтения обновляется в зависимости от положения прокрутки. Ограничьте частоту обработчика прокрутки максимумом в 60 кадров в секунду с задержкой 16 мс: const throttledScrollY = useThrottle(scrollY, 16). Интерфейс обновляется плавно, без затрат на пересчёт положения при каждом пикселе прокрутки.

Прослушивание изменения размера окна для пересчёта макета лучше выполнять с отложенным вызовом, а не с ограничением частоты. Расчёт макета должен выполняться только один раз после завершения изменения размера. Используйте задержку 200 мс для размеров окна. Во время перетаскивания границы для изменения размера интерфейс может отображать упрощённое состояние, а пересчитанный макет появится после остановки изменения размера.

При изменении debouncedQuery создайте новый AbortController и передайте его signal в fetch(url, { signal }). Возвращайте функцию очистки, которая вызывает controller.abort(). Это отменяет любой выполняющийся запрос для предыдущего запроса, когда появляется новый запрос после задержки, и предотвращает состояния гонки, при которых медленный старый ответ перезаписывает быстрый новый.

Без AbortController, если пользователь вводит "re", ждёт, а затем вводит "react", второй запрос может завершиться раньше первого (например, из-за кэширования). Результаты поиска сначала ненадолго покажут результаты React, а затем будут перезаписаны устаревшими результатами для "re". AbortController предотвращает это, полностью отменяя более ранний запрос.

Выпадающий список сочетает отложенный вызов для обращений к API и мгновенное состояние для отображения ввода. inputValue определяет содержимое текстового поля. useDebounce(inputValue, 250) определяет момент запуска запроса вариантов. Список вариантов отображается на основе состояния загруженных результатов, отдельного от обоих состояний ввода.

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

Отложенный вызов отлично подходит для автоматического сохранения содержимого формы по мере ввода. Установите задержку 1000 мс для объекта со значениями формы. При изменении значения после задержки запускайте сохранение в localStorage или в конечную точку API. Пока ожидается отложенный вызов, пользователь видит индикатор «Сохранение...», а после завершения запроса — «Сохранено».

Значения задержки — это решения, влияющие на удобство использования. Для поиска задержка 200–300 мс обеспечивает баланс между отзывчивостью и сокращением количества запросов. Для изменения размера допустима задержка 150–200 мс, поскольку пользователи ожидают, что макет стабилизируется после изменения размера. Для автосохранения 1000 мс дают пользователю время набрать предложение перед сохранением. Подбирайте значение с учётом ожидаемой скорости взаимодействия.

В реальных приложениях часто требуется одновременно применять несколько оптимизаций. Например, редактор документов может использовать отложенное автосохранение (1 с), ограничение частоты расчёта количества слов (500 мс) и IntersectionObserver для аналитики. Эти методы хорошо сочетаются, поскольку каждый работает независимо, используя собственный таймер и область действия.

Почему следует использовать AbortController вместе с запросом поиска после задержки?

Используйте useDebounce для полей поиска, обработчиков изменения размера и автосохранения формы. Используйте useThrottle для прокрутки и движения мыши. Всегда объединяйте вызовы API после задержки с AbortController, чтобы предотвращать состояния гонки. Показывайте состояние загрузки, когда inputValue !== debouncedQuery, чтобы интерфейс оставался отзывчивым и информативным.