Два реальных технических собеседования на Middle/Senior Frontend-разработчика

Коротко о видео

Это смонтированная запись двух технических этапов найма. В первой части интервьюер проверяет понимание загрузки страницы, CSS-позиционирования и controlled/uncontrolled-компонентов, предлагает проанализировать макет и обсудить связи сущностей, а также задачи на отложенный Promise, reconciliation React и список компонентов. После короткой вставки с результатом первого интервью начинается второй разговор: кандидат рассказывает о формах и дизайн-системе, отвечает на вопросы по React, Redux, TypeScript, иммутабельности и в конце уточняет стек, процессы и ожидания команды.

Затронутые темы

Что взять на заметку

• Структурируйте ответ о загрузке страницы: URL и кэши, DNS, сетевое соединение и HTTP-запрос, затем DOM/CSSOM, render tree, layout, paint и compositing; используемый транспорт зависит от протокола.
• Перед реализацией макета выделяйте сущности, их связи, пользовательские действия, состояния интерфейса и API-контракты, а не только список запросов.
• Для асинхронного helper-а используйте дженерик: возвращаемый Promise<T> должен сохранять тип переданного значения.
• Различайте повторный рендер и remount в React: компонент сохраняет state при той же позиции, типе и key, а изменение key принудительно монтирует его заново.
• React.memo полезен только при стабильных и сравнимых props; useCallback и useMemo стоит применять по конкретной причине, а не автоматически.
• Селекторы Redux выбирают данные для подписанного компонента, а мемоизация помогает не пересчитывать производные значения при неизменных входных данных.
• TypeScript не проверяет данные в рантайме: внешние ответы лучше принимать как unknown и сужать через schema-валидацию или type guard; any отключает защиту типов.
• Не сохраняйте пароли и другие чувствительные данные в localStorage; для восстанавливаемых черновиков форм продумайте безопасное серверное хранение и контроль доступа.
• Если элементы списка имеют много вариантов, отделяйте контейнер списка от конкретного рендеринга элементов через children, slots или render-компоненты.