Подход к лайвкодингу компонента
Вопрос
Тебе дали 40 минут написать компонент автодополнения поиска. Расскажи, как будешь действовать.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Уточняю требования: источник данных, задержка, минимальная длина, что при пустом результате
Проговариваю минимальное состояние и что вычисляется
Сначала рабочая простая версия, потом улучшения
Debounce и защита от гонки ответов через очистку эффекта и AbortController
Состояния загрузки, ошибки и пустого результата
Доступность: label, навигация стрелками, роли combobox/listbox, если хватит времени
Что могут спросить следом
- Как бы ты протестировал этот компонент?
- Что изменится, если использовать TanStack Query?
- Как подсветить совпадение в подсказке без dangerouslySetInnerHTML?
Разбор
Сначала задаю вопросы: откуда данные, есть ли готовый API, с какой длины запроса искать, что показывать при пустом результате и ошибке. Это пара минут, но они экономят переделки.
Потом проговариваю состояние: строка запроса, результаты, статус загрузки и ошибка. Всё, что можно вычислить, например открыт ли список, считаю из этих значений.
Пишу простую рабочую версию: поле, эффект с запросом, список. Затем добавляю debounce через setTimeout в эффекте и отмену прошлого запроса через AbortController в очистке, чтобы старый ответ не перетёр новый. Обрабатываю загрузку, ошибку и пустой результат.
Если остаётся время, делаю доступность: label у поля, переход по подсказкам стрелками, выбор Enter, роли combobox и listbox. Всё время рассказываю, что делаю и почему: интервьюеру важен ход мысли.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.