Загрузка…
Загрузка…
frontend / middle_plus / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Теория
Как ты следишь за чистотой кода с помощью программ/инструментов?
Кандидат назвал ESLint, общую базу правил.
02
Теория
Чем Prettier отличается от ESLint?
03
Кейс
Представь, ты в большой команде, есть правила написания кода, но не все их используют. Как бы ты настроил это на уровне проекта, чтобы в мастер попадали только проверенные коммиты?
Кандидат предложил husky/pre-commit hook и проверки в CI/CD (GitLab).
04
Поведенческий
Был ли у тебя опыт настраивать CI/CD?
Заметки
Собеседование на позицию middle plus / senior frontend в Сбер (приложение «Единая фронтальная система» — CRM для корпоративных менеджеров Сбера), зарплатная вилка примерно до 300 тыс. руб. Микрофронтенды. Стек: React (сейчас 17, планируется переход на 18), TypeScript, Redux + redux-saga (миграция в сторону RTK), внутренние библиотеки и UI-компоненты. Тесты: Jest + React Testing Library для компонентов, Jest для утилит, покрываются также саги/бизнес-логика. Команда Agile (продакт, аналитики, бэкенд, фронт, тестировщики), двухнедельные спринты, дизайн в Pixso (аналог Figma). Кандидата оценили как middle plus / senior и пригласили на второй (софтовый, 15-20 мин) этап.
Подготовка
Готовиться к глубоким вопросам по JS (event loop, замыкания, прототипы, всплытие событий), по React internals (reconciliation/diffing-алгоритм, batching, useLayoutEffect vs useEffect, порядок выполнения эффектов родитель/потомок, аналоги методов жизненного цикла), TypeScript (interface vs type, any vs unknown, перегрузка функций, дженерики/типизация HOC). Практика: лайвкодинг на группировку/агрегацию данных через reduce с упором на оптимизацию и чистоту кода, а также сложная задача на типизацию компонента-контейнера через дженерики.
Стиль интервьюера
Два интервьюера: Кирилл вёл техническую часть (теория + практика), Саша/коллега рассказывал про вакансию. Стиль дружелюбный, без давления. Интервьюер активно подсказывал и подводил наводящими вопросами (git revert, батчинг, оптимизация reduce, дженерики), задавал follow-up'ы на оптимизацию и просил обосновать решения. Использовались абстрактные задачи на понимание всплытия событий и порядка выполнения эффектов.
05
Теория
У тебя задача — откатить коммит с помощью git. Как бы ты это сделал?
Кандидат назвал git reset --hard, cherry-pick.
06
Теория
А если нужно откатить конкретный коммит по его id так, чтобы он перезатёр текущие изменения?
Интервьюер подводил к git revert.
07
Теория
Знаешь, что такое Critical Rendering Path? Расскажи по порядку стадии.
Кандидат описал DOM, CSSOM, render tree, layout, paint, composite.
08
Теория
Есть ли что-то, что блокирует Critical Rendering Path?
Подгрузка скриптов JS, CSS может блокировать.
09
Теория
Что можно отслеживать с помощью медиазапросов?
10
Теория
Кроме ширины экрана что ещё можно отслеживать медиазапросами?
Высота, соотношение сторон, плотность пикселей, наличие курсора.
11
Теория
В чём принципиальная разница между нативными CSS-переменными и переменными в препроцессорах?
Нативные видны/доступны в браузере и динамичны, в препроцессорах подставляется значение на этапе компиляции.
12
Теория
Для чего нужны data-атрибуты?
13
Поведенческий
Использовал ли где-нибудь data-test-id?
14
Теория
Можно ли хранить какие-нибудь серьёзные данные в data-атрибутах?
Нежелательно — видны через devtools.
15
Теория
Какой тип данных возвращает Promise.resolve()?
16
Теория
Какие есть виды копирования массивов?
Spread, а также глубокое и поверхностное копирование.
17
Теория
Чем отличается глубокое копирование от поверхностного?
18
Теория
Как можно реализовать глубокое копирование нативно?
structuredClone, рекурсивная функция, lodash.
19
Теория
Как копирует конструкция JSON.parse(JSON.stringify())?
Глубокое копирование, но теряет undefined/функции.
20
Теория
Использовал ли throttle или debounce? Чем они отличаются?
21
Поведенческий
Где на практике ты использовал debounce и throttle?
Debounce — input, throttle — scroll.
22
Теория
В чём разница между throttle и debounce одним предложением?
23
Теория
На какой технологии/конструкции JavaScript построены throttle и debounce?
Ответ — замыкание.
24
Теория
Что такое замыкание и как оно работает?
25
Теория
Когда можно использовать замыкание в React (где использовал на практике)?
Кастомные хуки, setState через колбэк.
26
Теория
В чём разница между function expression и function declaration?
Синтаксис, область видимости, hoisting.
27
Теория
Чем отличаются обычные и стрелочные функции?
Главное различие — в this (splice/this binding).
28
Теория
Расскажи про Event Loop — что это и как работает?
Очереди микротасок и макротасок, приоритет микротасок, call stack, Web API.
29
Теория
Какие есть примеры макро- и микрозадач?
Микро: промисы, queueMicrotask, MutationObserver. Макро: setTimeout, setInterval.
30
Теория
Есть div-контейнер с onClick, который переходит на localhost1, внутри него лежит ссылка <a> с href на localhost2. Куда ты попадёшь при клике на ссылку и почему?
Откроется вторая ссылка, но из-за всплытия сработает onClick дива и перекинет на первую.
31
Теория
Что такое событийная модель в JavaScript и как она работает (фазы события)?
Фаза погружения, целевая фаза, фаза всплытия; capture через третий аргумент addEventListener.
32
Теория
Можно ли как-то остановить всплытие события?
event.stopPropagation().
33
Теория
Как отменить дефолтное поведение события?
event.preventDefault().
34
Теория
Чем отличаются stopPropagation и preventDefault?
35
Теория
Знаешь ли какие-нибудь шаблоны проектирования?
Синглтон, фабрика, KISS.
36
Теория
Что такое KISS и как он помогает в React?
37
Теория
Что такое прототипы в JavaScript?
38
Теория
Что такое прототипная цепочка и как идёт поиск свойства?
39
Теория
Назови все хуки React, которые ты использовал.
useState, useEffect, useRef, useContext, useMemo, useCallback, useId, useDeferredValue, useTransition, useReducer.
40
Теория
Зачем нужен useLayoutEffect и чем он отличается от useEffect?
useLayoutEffect синхронный, до отрисовки браузером; useEffect после отрисовки.
41
Теория
Как работает массив зависимостей в useEffect?
Нет массива — на каждый рендер; пустой — при монтировании; с элементами — при изменении зависимостей.
42
Теория
setState асинхронный или синхронный?
43
Теория
Что такое батчинг (batching) в React?
Группировка нескольких обновлений состояния в один рендер.
44
Теория
Почему с учётом батчинга setState всё-таки асинхронный?
Накапливает изменения и объединяет в один рендер.
45
Теория
Что такое reconciliation в React?
Сравнение текущей и предыдущей версии virtual DOM, вычисление разницы.
46
Теория
Какой это алгоритм (название/сложность) и на каких предположениях он основан?
Эвристический алгоритм diffing: разные типы → новое дерево; стабильность через ключи.
47
Теория
Когда нужно использовать useCallback на практике?
Когда передаём функцию в компонент в React.memo или в зависимости другим хукам.
48
Теория
Как перенести жизненный цикл с функциональных компонентов на классовые и наоборот? Какие аналоги методов жизненного цикла в функциональных компонентах?
componentDidMount → useEffect с []; componentWillUnmount → return-функция useEffect; конструктор → useState; render.
49
Теория
Есть родительский компонент с useEffect (пустые зависимости) и console.log(1), внутри дочерний компонент с таким же useEffect и console.log(2). В каком порядке выведутся логи и почему?
Сначала console.log(2) (дочерний), потом console.log(1): эффекты выполняются снизу вверх.
50
Теория
Что такое Redux и как он работает?
Flux-паттерн, store, actions, dispatch, reducers (чистые функции).