Как исправить баги с отображением списка и сообщений об ошибке при пустом и непустом поисковом запросе

Что проверяют

Обычно это задача на live-coding: дан компонент поиска, где при пустом запросе висит «Ничего не найдено», а при вводе мелькает старый список или ошибка от прошлого запроса. Проверяют, видите ли вы, что баг сидит в модели состояний, а не в конкретном if. Следом просят разобраться с гонкой ответов при быстром вводе.

Как отвечать

Сначала назовите состояния, которые экран должен различать, и покажите, что сейчас они смешаны:

• пустой запрос: ничего не грузим, показываем подсказку или исходный список, но не ошибку. Запрос нормализуйте через trim(), строка из пробелов тоже пустая;
• загрузка: индикатор, старые результаты скрыты или явно помечены как устаревшие;
• успех с данными: список;
• успех без данных: «Ничего не найдено», и это не ошибка;
• ошибка сети или сервера: отдельное сообщение с кнопкой повтора.

В React удобно держать это одним полем status со значениями 'idle' | 'loading' | 'success' | 'error', а не набором флагов isLoading, isError, isEmpty, которые легко приходят в невозможные сочетания. Пустой результат вычисляется как status === 'success' && items.length === 0.

Второй блок: гонки. При каждом изменении запроса отменяйте предыдущий через AbortController в функции очистки useEffect, иначе ответ на «ре» придёт позже ответа на «react» и перезапишет его. AbortError пользователю не показывайте. Добавьте задержку ввода (debounce) около 300 мс, чтобы не слать запрос на каждую букву. С TanStack Query большую часть решают ключ запроса и enabled: query.trim() !== ''.

Закончите тестами: пустая строка, пробелы, запрос с результатами, без результатов, ошибка сервера, быстрый ввод подряд. В Testing Library это проверяется через findBy* и мок сети в MSW.

Где спотыкаются

Показывают «Ничего не найдено» до первого запроса или во время загрузки, потому что items.length === 0 проверяется без учёта статуса.

Не сбрасывают ошибку при новом запросе: красная плашка от прошлого запроса висит над свежими результатами.

Чинят гонку одной только задержкой ввода. Она уменьшает число запросов, но порядок ответов не гарантирует, отмена или проверка актуальности всё равно нужны.