Загрузка…
Загрузка…
frontend / middle / tech_screening
Формат
online
Стадия
tech_screening
Когда
within_quarter
Длительность
—
01
Теория
Что такое семантика в HTML, какие проблемы она решает?
02
Теория
Назови пару семантических тегов, которые ты использовал.
03
Теория
В списке (ul) какой элемент разрешено вставлять первым child'ом?
04
Теория
Каким свойством задаются внешние отступы элемента?
05
Теория
Два блока идут вертикально друг под другом: у верхнего нижний margin 10px, у нижнего верхний margin 20px. Какое итоговое расстояние между ними будет?
Заметки
Собеседование на frontend-разработчика (React). Кандидат — Михаил, около 4 лет опыта на JavaScript. Структура: сначала теория (HTML/CSS, JavaScript, TypeScript, React, Redux), затем практика — рубрика «Что не так?» с дебагом четырёх React-компонентов (Counter, color picker, Timer, resize/утечка) и задача на event loop. Видео сопровождается рекламой сообщества Criminal IT (помощь с трудоустройством), не является работодателем.
Подготовка
Повторить: области видимости в JS (их пять, включая лексическую), отличия function declaration/expression и hoisting, this в стрелочных функциях (ищет ближайший контекст), event loop с разбором микро-/макротасков и подвохом setTimeout внутри Promise, правила ререндера в React (своё состояние или ререндер родителя), useMemo/useRef/useState, reselect/createSelector для мемоизации селекторов, поиск утечек памяти и лишних event listener'ов через DevTools.
Стиль интервьюера
Дружелюбный, на «ты». Активно подсказывает и направляет, поправляет неточности мягко (this у стрелочных, setTimeout/макротаски). Идёт от простого к сложному, не мучает кандидата при пробелах («о'кей, не буду мучить»). В практике даёт навигацию по экрану, при нехватке времени ускоряется и предлагает дочитать тему «на досуге».
Follow-up: а если у родителя поставить display:flex — что произойдёт со схлопыванием?
06
Теория
Если у родителя двух блоков поставить display:flex, что произойдёт со схлопыванием отступов?
07
Теория
В чём главное отличие flexbox от grid?
08
Теория
Делал адаптив? Какое основное правило используется для задавания стилей под разные экраны (media queries)?
09
Теория
Чем отличается var от let/const?
10
Теория
Какие бывают области видимости в JavaScript?
Интервьюер отметил, что областей видимости пять.
11
Теория
Чем отличаются function expression и function declaration в поведении?
Follow-up: как называется явление, позволяющее вызвать function declaration до объявления?
12
Теория
Как называется явление использования переменных/функций до их объявления (hoisting)?
13
Теория
Чем стрелочные функции отличаются от обычных (помимо синтаксиса, поведение this)?
Интервьюер поправил: this у стрелочной ищет ближайший контекст, а не глобальный.
14
Теория
Что такое замыкание? Расскажи своими словами.
15
Теория
Что такое prototype в JavaScript?
16
Теория
Какие есть нативные методы поиска элементов в DOM?
17
Теория
В каких состояниях бывает промис (Promise)?
18
Теория
Что такое Event loop? Как он управляет задачами в JavaScript?
Follow-up: setTimeout возвращает промис, а ты говоришь, что он в макротаске? Что обычно находится в макротасках?
19
Теория
Сколько типов данных в JavaScript?
Follow-up: а сколько из них примитивных (основных)? Интервьюер уточнил, что всего 8 типов.
20
Теория
Перечисли шесть основных (примитивных) типов в JavaScript.
21
Теория
Как переменные передаются в JavaScript — по ссылке или по значению?
22
Теория
Расскажи про жизненный цикл компонентов в React и как мы используем его на практике (useEffect).
Follow-up: где это пригождается на практике (useEffect, массив зависимостей, cleanup при размонтировании).
23
Теория
В каких случаях рендерится компонент в React?
Follow-up: в каком случае могут обновиться пропсы?
24
Теория
В каком случае у компонента могут обновиться пропсы?
25
Теория
Если внутри компонента есть тяжёлые вычисления, как сделать, чтобы они не выполнялись при каждом рендере (useMemo)?
26
Теория
На какой архитектуре основан Redux (Flux)?
27
Теория
Какие четыре сущности есть в Redux/Flux?
28
Теория
Опиши один цикл движения данных во Flux-архитектуре: с чего начинается и где заканчивается.
29
Теория
Что мы делаем в компоненте, чтобы вызвать изменение состояния в Redux (dispatch)?
30
Теория
При каких условиях будет вызываться селектор, переданный в useSelector?
31
Теория
Слышал про мемоизацию селекторов? Как замемоизировать тяжёлые вычисления в селекторе (reselect/createSelector)?
32
Код
Рубрика «Что не так?»: счётчик (Counter) — при нажатии «увеличить»/«сбросить» ничего не происходит. Найди баг и исправь, чтобы счётчик работал.
Счётчик хранится в useRef, поэтому не вызывается повторный рендер; нужно использовать useState. RenderCount (счётчик рендеров) трогать нельзя.
33
Код
Рубрика «Что не так?»: компонент выбора цвета (color picker) — технически работает, но с кодом что-то не так. Что бы ты сделал по-другому?
Лишнее второе состояние и лишний useEffect — нужно обновлять цвет напрямую в обработчике, useEffect убрать.
34
Код
Рубрика «Что не так?»: таймер (Timer) — кнопки старт/стоп не работают. Исправь.
Нужно вызвать clearInterval и возвращать функцию очистки при размонтировании; передать корректный id интервала (TypeScript подсказывал ошибку типа).
35
Код
Рубрика «Что не так?»: компонент с обработчиком ресайза окна — технически работает, но есть скрытый баг (утечка). Найди его и покажи через инструменты разработчика.
Не удаляется обработчик события (нужен removeEventListener в cleanup). Пустой массив зависимостей проблему не решает; кнопка Unmount и event listeners в DevTools помогают доказать утечку.
36
Код
Упражнение на event loop и переопределение переменных: дан код с new Promise, setTimeout, .then и console.log — скажи, в каком порядке и какие значения выведутся.
Подвох: внутри new Promise setTimeout — микротаска (.then) регистрируется из макротаски. Тело промиса выполняется синхронно. Ожидаемый порядок значений: 5, 25, 30.