Вернуться в видеотекуСобеседование Frontend разработчика. ЗП до 300к
Разбор технического собеседования Frontend-разработчика с live coding на React и вопросами по JavaScript и TypeScript. Автор показывает задачи на состояние, валидацию формы, асинхронный запрос, эффекты и типизацию вариантов данных.
- Направление
- Frontend
- Формат
- Видео
- Грейд
- Senior
- Длительность
- 1 ч 15 мин
Коротко о видео
Автор показывает запись недавнего собеседования на позицию Senior Frontend-разработчика; по его мнению, вопросы оказались сравнительно несложными, хотя вакансия предполагала самостоятельную разработку проекта с нуля. В интервью кандидат реализует React-счётчик с задержкой и форму логина, а затем отвечает на вопросы о debounce и throttle, React Hooks, областях видимости JavaScript, TypeScript и коллекциях Set/Map. В конце разбирают моделирование взаимоисключающих вариантов данных через union types и дискриминирующее поле в TypeScript.
Затронутые темы
Что взять на заметку
- Для задания со счётчиком нужно заранее уточнить семантику быстрых кликов: блокируются ли новые действия, отменяется ли предыдущий таймер или все изменения должны накопиться; при отложенных обновлениях состояния важно избегать stale closure и применять функциональную форму setState.
- Для debounce полезный прикладной пример — поиск или фильтрация: запрос отправляется после паузы во вводе, чтобы не обращаться к API на каждый символ. Throttle, напротив, ограничивает частоту обработки события.
- В React-форме следует хранить значения email и password в state как controlled inputs, блокировать кнопку при пустом email или пароле короче шести символов и отдельно учитывать состояние загрузки.
- Асинхронный login-обработчик должен ожидать ответ сервера, отключать кнопку во время запроса, условно показывать текст ошибки и очищать его при следующей попытке или изменении данных.
- Нужно уметь объяснить useEffect: callback эффекта не должен быть async и возвращать Promise; асинхронную операцию запускают из обычного callback, а cleanup возвращают отдельной функцией. Также проверяются массив зависимостей, делегирование событий, event.target и event.currentTarget.
- Для TypeScript важны discriminated unions: отдельные типы вариантов с общим полем-дискриминатором позволяют запретить невозможные сочетания свойств. В JavaScript два разных массива с одинаковым содержимым остаются разными ключами Map, поскольку объекты сравниваются по идентичности.