Как реализовать приложение с поиском по API с вводом запроса, отображением списка, индикацией загрузки и обработкой ошибок

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

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

Как отвечать

Опишите состояния явно: ожидание ввода, загрузка, успех, пустой результат, ошибка. В TypeScript их удобно выразить размеченным объединением по полю status вместо трёх независимых флагов, которые могут сложиться в невозможную комбинацию.

Каркас на React:

• ввод: управляемый input, запрос не на каждую букву, а через debounce около 300 мс. Минимальная длина запроса отсекает бессмысленные вызовы;
• запрос: fetch с AbortController, предыдущий запрос отменяется при новом вводе и при размонтировании. Параметр кодируется через URLSearchParams или encodeURIComponent;
• ошибки: fetch не бросает исключение на 404 и 500, нужно проверить response.ok. Отличайте отмену (AbortError) от настоящей ошибки и давайте кнопку «Повторить»;
• загрузка: при уточнении запроса старый список лучше оставить на экране с индикатором, чем мигать пустым состоянием. Сообщения о загрузке и ошибке объявляются скринридеру через aria-live;
• пустой результат: отдельное сообщение, а не пустой ul.

Упомяните, что в продакшене это часто отдают TanStack Query: ключ ['search', q], отмена через signal, кэш и placeholderData: keepPreviousData, чтобы не терять прошлый список. Запрос в URL (?q=) даёт ссылку, которой можно поделиться. Тестируют через React Testing Library с подменой сети в MSW.

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

Не отменяют старые запросы. Медленный ответ на «re» приходит после быстрого ответа на «react» и перезаписывает правильный список.

Считают, что catch поймает ошибку сервера. С fetch ответ 500 считается успешным, и в список уходит тело с описанием ошибки.

Забывают сбросить ошибку при новом поиске или берут индекс массива в key. В первом случае сообщение об ошибке висит над свежими результатами, во втором React путает элементы при изменении списка.