В какой компании ты работал и что приходилось там делать?
Как проходил код-ревью на прошлом месте работы?
Сколько людей было в команде?
На каком стеке работали?
Как вы делали задачи?
Расскажи про свой опыт?
Расскажи, какие самые сложные или интересные задачи ты выполнял?
Работал ли ты с iframe?
Нужен ли БЭМ в 2025 году?
Что такое flex и flex-shrink?
В чём разница между display: none и visibility: hidden?
Как работает z-index?
Разница между async и defer для script
Что такое CSS-переменные и чем они отличаются от переменных препроцессоров?
Для чего нужны медиазапросы (@media)?
Что такое accessibility?
Что такое this?
Что такое bind, apply, call и чем они отличаются?
Разница между обычной и стрелочной функцией?
Что такое Promise и какие методы он имеет?
Можно ли создать свой Promise без использования встроенного Promise?
Зачем нужен async/await?
Разница между var, let и const?
Какие типы данных существуют в JS?
Что такое хэш?
Что такое HTTP и из чего состоит HTTP-запрос?
Основные принципы ООП?
Какие методы заморозки объекта существуют?
Что такое наследование?
Какие паттерны программирования ты знаешь?
Что такое иммутабельность?
Когда применять debounce и throttle?
Разница между localStorage, cookies и sessionStorage?
Какие методы массива не мутируют оригинальный массив?
Что такое прототипы?
Что стоит в начале цепочки прототипов?
Что такое Event Loop и зачем он нужен?
Что такое дженерики?
Разница между type и interface?
Какие утилитарные типы ты знаешь?
Что такое enum?
Зачем нужен extends?
Что такое кортежи?
Что такое infer и где применяется?
В чём плюсы TypeScript? Нужен ли он в проектах?
Разница между any и unknown, void и never?
Что такое Type Guard?
Чем тебе нравится React?
Плюсы и минусы React?
Что такое Virtual DOM и чем он отличается от реального DOM?
Разница между функциональными и классовыми компонентами?
Какие хуки ты знаешь?
Что такое мемоизация (memo)?
Разница между useCallback и useMemo?
Что такое useEffect и чем он отличается от useLayoutEffect?
Разница между props и state?
Работал ли ты с порталами? Что можешь рассказать?
Что такое prop drilling?
Что такое Context?
Этапы жизненного цикла компонента?
Что вызывает ререндер компонента?
Что такое Error Boundaries?
Что такое Lazy Loading?
Что такое гидратация (Hydration)?
К��кие виды рендеринга существуют (SSR, SSG, ISR, CSR)?
Разница между серверными и клиентскими компонентами? Для чего use server и use client?
Зачем нужны компоненты кэша (use cache)?
Разница между Pages Router и App Router?
Что такое Server Actions и зачем они нужны?
Какие встроенные компоненты Next.js ты знаешь?
Вводные вопросы
В какой компании ты работал и что приходилось там делать?
Опиши компании, в которых работал, технологии и обязанности.
Как проходил код-ревью на прошлом месте работы?
Расскажи о процессе, используемых инструментах и стиле общения в команде.
Сколько людей было в команде?
Укажи размер команды и твою роль в ней.
На каком стеке работали?
Опиши фронтенд, бэкенд, базы данных и инструменты, которые использовались.
Как вы делали задачи?
Опиши workflow, Agile/Scrum практики, распределение задач.
Расскажи про свой опыт?
Кратко о проектах, технологиях, сложностях и достижениях.
Расскажи, какие самые сложные или интересные задачи ты выполнял?
Приведи примеры сложных решений, архитектурных решений, интересных проектов.
HTML / CSS
Работал ли ты с ifram?
iframe - это окно внутри сайта, в котором можно показать другой сайт.
Нужен ли БЭМ в 2025 году?
БЭМ в 2025 году особо и не нужен, но если вы используете чистый CSS или SCSS(без CSS-in-JS) или старую кодовую базу, в которой уже внедрен БЭМ, то нужен.
Что такое flex и flex-shrink?
flex-shrink — это свойство, которое говорит элементу, насколько сильно он может сжиматься, если не хватает места в контейнере.
flex — это сокращённая запись трёх свойств, которые управляют поведением flex-элемента:
flex-grow — насколько элемент может увеличиваться, если есть свободное место.
flex-shrink — насколько элемент может сжиматься, если места не хватает.
flex-basis — начальный размер элемента до распределения свободного места.
В чём разница между display: none и visibility: hidden?
display: none полностью убирает элемент со страницы, а visibility: hidden лишь скрывает элемент, но место под него остаётся.
Как работает z-index?
z-index — это CSS-свойство, которое определяет, какой элемент будет “сверху”, если они перекрываются на странице.
Разница между async и defer для script
async - это атрибут тега script, который загружает скрипт параллельно с HTML
defer делает тоже самое, но скрипт выполняется только посл�� того, как весь HTML будет загружен и разобран.
Что такое CSS-переменные и чем они отличаются от переменных препроцессоров?
CSS-переменные (или custom properties) — это переменные, определённые прямо в CSS,
которые можно менять в реальном времени через стили, JS или каскад.
Отличаются они от переменных в препроцессерах тем, что css-переменные работают в браузере, во время выполнения, а переменные в препроцессерах до браузера.
CSS-переменные можно менять как и в CSS, так и в JS, а переменные в препроцессерах менять нельзя, поскольку у них значения фиксированные.
Для чего нужны медиазапросы (@media)?
@media(...) запросы (или медиа-запросы) — это механизм в CSS,
который позволяет изменять стили в зависимости от устройства, экрана или других условий.
Проще говоря, @media(...) нужны, чтобы сайт выглядел хорошо на разных устройствах — телефоне, планшете, ноутбуке и т.д.
Что такое accessibility?
Accessibility — это про то, чтобы любой пользователь,
независимо от устройства или особенностей, мог понять, увидеть и использовать сайт.
JAVASCRIPT
Что такое this?
this —это контекст выполнения функции, то есть на что указывает функция в момент вызова.
Что такое bind, apply, call и чем они отличаются?
Все три метода позволяют явно задать контекст (this) при вызове функции.
call(thisArg, arg1, arg2, ...) - вызывает функцию сразу, передавая аргументы через запятую.
apply(thisArg, [args]) - вызывает функцию сразу, передавая аргументы массивом
bind(thisArg) - не вызывает, а создаёт новую функцию с закреплённым this
Разница между обычной и стрелочной функцией?
Обычная функция имеет свой this и arguments, её можно вызвать с new.
Стрелочная функция не имеет своего this, arguments и не может быть вызвана с new.
Что такое Promise и какие методы он имеет?
Promise — это метод для работы с асинхронным кодом. Он имеет 3 статуса выполнения:
pending(ожидание)
fulfilled(выполнено)
rejected(отклонено)
Так же, у него есть методы + статические методы:
then()— вызывается при успешном выполнении,catch()— вызывается при ошибке,finally()— в любом случае.Promise.all()– ждёт завершения всех промисов, если хоть один отклонится – весь отклоняется.Promise.race()– возвращает результат первого завершившегося промиса (успешного или откл��нённого).Promise.allSettled()– ждёт завершения всех промисов, возвращает массив с результатами успех/ошибка каждого.Promise.any()– ждёт первого успешного промиса, игнорирует ошибки остальных; если все промисы отклонены – возвращает ошибку.
Можно ли создать свой Promise без использования встроенного Promise?
Да, можно реализовать аналог промиса через колбэки и состояния (pending, fulfilled, rejected), но вручную — это сложно и нужно только для понимания внутренней работы Promise.
Зачем нужен async/await?
async нужен для того, чтобы сделать функцию асинхронной, это значит, что если даже функция возвращает "ничего", то благодаря async, функция в любом случае вернет промис
awaitуже нужен для того, чтобы поставить приоритет какой-то строчке функции и до тех пор, пока эта строчка не выполнится, другой код функции выполняться не будет.
Разница между var, let и const?
var — функциональная область видимости, можно менять.
let — блочная область видимости, можно менять.
const — блочная область видимости, нельзя менять.
Какие типы данных существуют в JS?
Есть примитивные и непримитивные типы данных.
Примитивные: string, number, boolean, null, undefined, Symbol, bigInt.
Непримитивные: Object, array, function, map, set.
Что такое хэш?
Хэш — это результат работы хэш-функции, которая преобразует данные в короткую строку.
Он применяется для хранения паролей, проверки целостности данных и сравнения.
Что такое HTTP и из чего состоит HTTP-запрос?
HTTP (HyperText Transfer Protocol) — это протокол, по которому браузер и сервер обмениваются данными.
Работает по схеме “запрос–ответ” и использует методы: GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD, TRACE.
Основные принципы ООП
Инкапсуляция — скрытие внутренних деталей объекта, которые ты можешь изменить лишь через публичные методы или свойства объекта, но напрямую изменить эти детали ты не можешь.
Наследование — возможность создавать новые классы на основе существующих.
Полиморфизм — разные объекты могут использовать один интерфейс по-разному.
Абстракция — возможность видеть лишь важные свойства и методы, но не видеть скрытые детали реализации.
Какие методы заморозки объекта существуют?
Object.freeze(obj)— полная заморозка.Object.seal(obj)— запрещает добавление/удаление свойств, но позволяет менять сущ��ствующие.Object.preventExtensions(obj)— запрещает добавление новых свойств.
Что такое наследование?
Наследование - это создание новых классов на основе существующих, чтобы переиспользовать код, расширять и изменять его поведение без дублирования.
Какие паттерны программирования ты знаешь?
— SOLID:
— S(Single Responsibility Principle) - класс должен иметь только одну причину для изменения.
— O(Open/Closed Principle) - классы должны быть открыты для расширения, но закрыты для изменения.
— L(Liskov Substitution Principle) - дочерний класс может добавлять новые методы и свойства, но не должен изменять методы и свойства базового класса(от которого наследуется дочерний).
— I(Interface Segregation Principle) - сущности не должны зависеть от интерфейсов, которые они не используют.
— D(Dependency Inversion Principle) - модули высшего уровня не должны зависеть от модулей низшего модуля.
Остальные принципы:
— DRY - заключается в том, чтобы избегать дублирования кода.
— KISS - заключается в том, что код должен быть максимально простыми и читабельным.
— YAGNI - заключается в том, чтобы не создавать ненужные функции и т.п, которые ты не используешь
Что такое иммутабельность?
Иммутабельность - это значит, что свойства данных нельзя изменять после их создания.
Когда применять debounce и throttle?
debounce — задержка выполнения функции, например при вводе в поиск.
throttle — ограничение частоты выполнения функции, например при скролле.
Разница между localStorage, cookies и sessionStorage?
— localStorage хранит данные во вкладке до тех пор, пока мы не закроем весь браузер и даже если мы откроем эту страницу в новой вкладке, то они все равно останутся.
— sessionStorage хранит данные во вкладке до тех пор, пока мы не закроем ее и если открыть эту страницу в новой вкладке, их там не будет.
— cookies такой же, как и localStorage, только он отправляет данные на сервер с каждым запросом.
Какие методы массива не мутируют оригинальный массив?
Методы массива, которые не мутируют сам массив:
— map
— filter
— include
— sort
— split
— reduce
Что такое прототипы?
Прототипы - это объект, от которого другие объекты наследуют свойства и методы.
Что стоит в начале цепочки прототипов?
В самом начале всех прототипов (точнее, в корне всей цепочки) находится Object.prototype. Он — "родитель всех родителей". После него идёт null, что означает конец цепочки.
Что такое Event Loop и зачем он нужен?
Event Loop - это механизм в JavaScript, который следит за очередью задач и решает, когда выполнять код, когда обработчики событий и когда таймеры. Он нужен для того, чтобы делать JS асинхронным, не многопоточным.
Зачем придумали:
— Чтобы не блокировать интерфейс.
— Чтобы обрабатывать события пользователя, запросы к серверу, таймеры в одном потоке.
— Чтобы можно было писать асинхронный код с колбэками, промисами и async/await.
TypeScript
Что такое дженерики?
Простыми словами, дженерики - это все, что мы прописываем в угловых скобках, допустим когда мы типизируем useState<string>("").
Разница между type и interface?
type — описывает любые типы данных, объединяется через & или |.
interface — описывает объект, можно расширять и объединять одинаковые имена.
Какие утилитарные типы ты знаешь?
— Pick - Оставляет в типе только те свойства, которые мы передали в него 2 параметром.
— Omit - Оставляет в типе только те свойства, которые мы не передали в него 2 параметром.
— Partial - делает все свойства необязательными.
— Required - делает все свойства обязательными.
— Readonly - делает все свойства только для чтения(нельзя изменить).
— Exclude - исключает из T все типы, которые также присутствуют в U.
— Extract - противоположность Exclude. Извлекает только совпадающие типы.
— ReturnType - возвращает тип ответа, который приходит из функции.
— Record - принимает первым параметром ключи объекта, а вторым — тип значения.
— Parameters - возвращает тип параметров функции в виде кортежа(массива).
— NonNullable - удаляет из типа null и undefined.
Что такое enum?
enum - это список постоянных значений с именами. Он нужен, чтобы вместо непонятных чисел или строк использовать понятные слова.
Зачем нужен extends?
extends - это ключевое слово, которое означает «наследуется от» или «расширяет». Простыми словами, он нужен для того, чтобы мы могли унаследовать базовый класс, тип и т.д в других места.
Что такое кортежи?
Кортежи - это массив, в котором мы явно указываем, сколько элементов и какого типа они будут.
Что такое infer и где применяется?
infer - это ключевое слово, которое используется в условных типах для того, чтобы вывести тип из другого типа. Проще говоря, он нужен для того, чтоб из какого-то типа достать ЧТО-ТО и вывести то самое ЧТО-ТО в случае того, если условие возвращает true.
В чём плюсы TypeScript? Нужен ли он в проектах?
Плюсы TS в том, что мы можем не бояться за то, что передаем.
Например, пропсы не того типа и за это вообще не нужно бояться(конечно если ты правильно все типизировал), поскольку нам вернется ошибка, если пропс не того типа, поэтому я считаю, что TS нужен почти во всех проектах.
JS отличается от TS тем, что он малотипизированный, а TS сильно типизированный. JS проверяет ошибки только во время runtime(выполнения кода), а TS во время компиляции(во время кодинга).
Разница между any и unknown, void и never?
any — любой тип без проверки.
unknown — безопасный any, нужно проверить тип перед использованием.
void — функция ничего не возвращает (или undefined).
never — функция никогда не возвращает результат.
Что такое Type Guard?
Type guard - это функция или выражение в TypeScript, которое проверяет тип переменной и, в случае успеха, сообщает компилятору, что в данном блоке кода тип переменной можно сузить до более конкретного.
React
Чем тебе нравится React?
Мне нравится React тем, что у него есть JSX, как по мне, очень полезная штука.
Так же мне нравятся его функциональные компоненты, хуки, VDOM и то, что на основе React-а создали много других и крутых библиотек.
Плюсы и минусы React
Плюсы:
— Компонентный подход
— Virtual DOM
— Хуки
— Порталы
— JSX
Минусы:
— React решает только отображение. Маршрутизация, состояние, работа с API — всё нужно подключать сторонними библиотеками.
— SEO-проблемы без SSR. По умолчанию React рендерится на клиенте, что плохо для SEO. Нужно использовать Next.js или другой SSR.
— Производительность при неправильном использовании.
Что такое Virtual DOM и чем он отличается от реального DOM?
VDOM(Virtual DOM) - это копия настоящего DOM. Отличается от от обычного DOM тем, что вместо того, чтобы вносить изменения в СТАРЫЙ DOM, он создает НОВУЮ копию DOM и уже туда добавляет изменения DOM
Разница между функциональными и классовыми компонентами?
— Синтаксис.
— Хуки только у функциональных компонентов.
— У классовых есть свой контекст this, а у функциональных — нет.
— Жизненные циклы есть только у классовых компонентов.
Какие хуки ты знаешь?
Хуки, которые я знаю(основные хуки):
— useState() - хук для хранения состояния компонента.
— useEffect() - хук для побочных эффектов: запросы к API, подписки, таймеры и т.д.
— useLayoutEffect() - похож на useEffect, но вызывается синхронно после всех изменений DOM, до того, как браузер успеет отрисовать изменения.
— useMemo() - хук для мемоизации значений. Помогает избежать лишних вычислений.
— useCallback() - хук для мемоизации функций. Используется, чтобы не пересоздавать функции при каждом рендере.
— useContext() - хук для получения значения из React Context.
— useRef() - хук для хранения мутабельного значения, которое не вызывает ререндер при изменении, или для доступа к DOM.
— memo() - это мемоизация целого компонента, которая нужна для предотвращения лишних ререндеров, если пропсы не изменились.
Что такое мемоизация (memo)?
Мемоизация - это способ запоминать результаты вычислений, чтобы не выполнять их заново при каждом рендере.
Разница между useCallback и useMemo?
useCallback() запоминает ссылку функции, чтобы потом не происходил лишний ререндер, а useMemo() запоминает значение, которое возвращает функция.
Что такое useEffect и чем он отличается от useLayoutEffect?
useEffect() запускает код после того, как загрузился браузер и отобразилась страница, а useLayoutEffect() — синхронно с браузером.
Разница между props и state?
state изменяемый, находиться локально в компоненте, используется для хранения и изменения состояния.
props неизменяемый, прокидывается через компоненты, используется для передачи данных.
Работал ли ты с порталами? Что можешь рассказать?
Порталы позволяют рендерить дочерние элементы в другой DOM-узел, например для модальных окон.
Что такое prop drilling?
Prop drilling — это ситуация, когда пропсы передаются через несколько промежуточных компо��ентов, которые сами их не используют, а просто прокидывают дальше.
Что такое Context?
Context — это механизм React, который позволяет передавать данные по компонентам без необходимости прокидывать пропсы через каждый компонент.
Этапы жизненного цикла компонента?
Жизненный цикл компонента делится на три этапа:
componentDidMount (монтирование) — когда компонент создается и добавляется в DOM.
componentDidUpdate (обновление) — когда компонент обновляется из-за изменения props или state.
componentWillUnmount (размонтирование) — когда компонент удаляется из DOM.
Что вызывает ререндер компонента?
Ререндер компонента вызывают:
Изменение state;
Изменение props;
Изменение контекста (если используется Context API);
Родительский ререндер (если не используется мемоизация через React.memo, useMemo, useCallback).
Что такое Error Boundaries?
Error Boundaries — это компоненты-ловушки ошибок, которые перехватывают ошибки в дочерних компонентах во время рендера, в методах жизненного цикла и в конструкторах.
Они нужны, чтобы не «падало» всё приложение, если где-то произошла ошибка.
Создаются как классовые компоненты, реализующие методы componentDidCatch(error, info) и static getDerivedStateFromError(error).
Их особенность в том, что они не ловят ошибки внутри себя и не работают с ошибками в асинхронных коллбеках или обработчиках событий.
Что такое Lazy Loading?
Lazy loading (ленивая загрузка) — это техника оптимизации, при которой ресурсы (например, изображения, скрипты или компоненты) загружаются только тогда, когда они реально нужны, а не сразу при загрузке страницы или приложения.
Next.js
Что такое гидратация (Hydration)?
Гидратация - это процесс, когда React превращает серверный HTML в интерактивное приложение, подключая JavaScript, события и состояние.
Какие виды рендеринга существуют (SSR, SSG, ISR, CSR)?
Виды рендеринга, которые я знаю:
— SSR - HTML страницы генерируется на сервере при каждом запросе. Клиент получает уже сформированную страницу.
— SSG - HTML страницы генерируется во время сборки проекта и при запросе какой-то страницы, она сразу же отобразится.
— ISR - Это тот же SSG, но с возможностью задать параметр revalidate, благодаря которому страница будет автоматически пересобираться на сервере через определённый интервал или при первом запросе после истечения тайм-аута.
— CSR - рендеринг на клиенте(браузере), для него используют обычные запросы через fetch или axios.
Разница между серверными и клиентскими компонентами? Для чего use server и use client?
Серверные — выполняются на сервере, lightweight, не имеют state и браузерных API.
Клиентские — выполняются в браузере, могут использовать state и эффекты.
Зачем нужны компоненты кэша (use cache)?
Компоненты кэша нужны для кэширования данных на сервере и оптимизации производительности.
Разница между Pages Router и App Router?
Pages Router — старый подход, файловая маршрутизация через pages/.
App Router — новый подход, поддержка серверных компонентов и layouts.
Что такое Server Actions и зачем они нужны?
Позволяют выполнять действия на сервере из компонентов без создания API-роутов.
Какие встроенные компоненты Next.js ты знаешь?
Link – подключение внешних ресурсов (CSS, шрифты, фавикон).
Image – отображение изображений на странице.
Script – подключение и выполнение JavaScript-кода.
Head – секция документа с метаинформацией (теги
<title>,<meta>,<link>и т.д.).Metadata – данные о странице (описание, ключевые слова, автор, viewport и т.д.).
Suspense – React-компонент для ленивой загрузки других компонентов с fallback UI.
