Один поиск, несколько запросов
Ввод меняется быстрее, чем сервер отвечает. Запрос по слову «код» может вернуться позже запроса по слову «кодирование». Если просто записывать каждый ответ в состояние, старый результат заменит новый.
Отмена лишнего запроса сокращает работу, но надёжность лучше связывать с конкретным владельцем обновления. Эффект отвечает только за актуальный набор параметров.
useEffect(() => {
const controller = new AbortController();
let current = true;
load(query, controller.signal).then(result => {
if (current) setResult(result);
}).catch(error => {
if (current && error.name !== "AbortError") {
setError(error);
}
});
return () => {
current = false;
controller.abort();
};
}, [query]);Ошибка тоже принадлежит запросу
Проверять актуальность нужно и при успехе, и при ошибке. Иначе устаревший отказ появится поверх уже загруженных результатов.
Для обычного поиска достаточно отмены и контроля владельца. Сложный журнал запросов не нужен, если запросы ничего не меняют на сервере. При записи данных ситуация другая: отмена ожидания не означает отмену уже выполненной записи.
Что проверить
Быстрая смена фильтра, переход со страницы и медленный первый ответ позволяют обнаружить гонку. Полезная проверка намеренно меняет порядок ответов, а не только подтверждает счастливый путь.