72 вопроса для собеседования frontend-разработчика: junior и middle

В 2026 году фронтенд-собеседования в российских IT-компаниях превратились в что-то среднее между экзаменом по квантовой физике и игрой "Кто хочет стать миллионером". Только вместо звонка другу у тебя есть 5 секунд, чтобы объяснить, чем useEffect отличается от useLayoutEffect, и почему это вообще кого-то должно волновать.

🎯 Категория: "Базовый уровень" (aka "это должны знать все, но половина не знает")

1. Что такое фронтенд разработка вообще?

Зачем спрашивают: Проверяют, понимаете ли вы масштаб своей профессии или думаете, что это просто "делать кнопочки красивыми".

Нормальный ответ: Фронтенд - это всё, что видит и с чем взаимодействует пользователь. HTML, CSS, JavaScript, фреймворки, производительность, доступность, адаптивность... и да, иногда даже "кнопочки красивые".

Реальность 2026: Фронтенд давно перестал быть просто версткой. Теперь это целая архитектура с SSR, edge computing, AI-интеграциями и микрофронтендами. В общем, "просто кнопочки" - это было в 2015.

2. В чем разница между == и ===?

Зачем спрашивают: Классика жанра. Если не знаешь - иди учить основы.

Короткий ответ:

• == сравнивает значения с приведением типов (может привести "5" к 5)

• === строгое сравнение (типы должны совпадать)

Мем-комментарий: Использование == в 2026 - это как носить кроксы на собеседование. Технически можно, но зачем?

3. Что такое DOM?

Зачем спрашивают: Без этого знания во фронтенде делать нечего.

Ответ: Document Object Model - древовидная структура представления HTML-документа. JavaScript манипулирует DOM, чтобы изменять страницу динамически.

Актуально в 2026: Теперь еще спрашивают про Virtual DOM (React), Signals (Solid/Angular), и как это всё оптимизирует рендеринг. Потому что просто DOM - это слишком просто.

4. Объясните позиционирование в CSS: relative, absolute, fixed, sticky

Зачем спрашивают: Проверяют, понимаете ли вы, как элементы ведут себя на странице.

Быстрая шпаргалка:

• relative - сдвигается от своей обычной позиции, но место резервируется

• absolute - выдергивается из потока, позиционируется относительно ближайшего positioned родителя

• fixed - прилипает к окну браузера, не скроллится

• sticky - гибрид: ведёт себя как relative, пока не достигнет точки прилипания, тогда становится fixed

Фишка 2026: В эпоху CSS Container Queries и CSS Grid, position: absolute используется всё реже. Но его всё равно спрашивают 🤷‍♂️

🔥 Категория: "JavaScript - язык, который всех бесит, но все используют"

5. Что такое замыкание (closure)?

Зачем спрашивают: Потому что это фундаментальная концепция JS, и без неё никуда.

Объяснение для людей: Функция "запоминает" переменные из внешней области видимости, даже когда эта область уже завершилась.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  }
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Где используется в реале: Приватные переменные, обработчики событий, хуки React... везде.

6. В чем разница между null и undefined?

Быстро:

• undefined - переменная объявлена, но значение не присвоено

• null - программист явно указал "здесь ничего нет"

Философский вопрос 2026: Почему typeof null === 'object'? Ответ: баг в JavaScript, который теперь исторический и его уже не исправить 😅

7. Что такое Event Loop?

Зачем спрашивают: Проверяют понимание асинхронности в JavaScript.

Объяснение без боли:

JavaScript однопоточный. Event Loop - это механизм, который позволяет выполнять асинхронный код:

1. Call Stack выполняет синхронный код

2. Асинхронные операции (setTimeout, fetch) отправляются в Web APIs

3. Когда готовы - попадают в очередь (Task Queue)

4. Event Loop проверяет: Call Stack пустой? → Берёт из очереди и выполняет

Тренд 2026: Теперь еще нужно знать про microtasks (Promises) vs macrotasks (setTimeout). Потому что одного event loop уже мало 🙃

8. var, let, const - в чём разница?

Коротко и ясно:

• var - старая школа, function scope, hoisting, проблемы

• let - block scope, можно переприсвоить

• const - block scope, нельзя переприсвоить (но объект можно мутировать!)

Правило 2026: Используй const по умолчанию, let когда нужно, var не используй вообще.

⚛️ Категория: "React - потому что без него никуда в 2026"

9. Что такое React Hooks и зачем они нужны?

Контекст: До хуков были классовые компоненты. Они работали, но код был многословным.

Хуки в 2026: Стандарт индустрии. Основные:

• useState - локальное состояние

• useEffect - побочные эффекты (API, подписки, DOM)

• useContext - доступ к контексту

• useRef - ссылки на DOM или сохранение значений

• useMemo / useCallback - оптимизация

• useReducer - сложная логика состояния

Новинка 2026: React Compiler (React Forget) автоматически оптимизирует код, так что ручная мемоизация нужна реже. Но на собесах про неё всё равно спрашивают!

10. Правила использования хуков

Два железных правила:

1. Вызывай хуки только на верхнем уровне (не в циклах, условиях, вложенных функциях)

2. Вызывай хуки только в React-компонентах или кастомных хуках

Почему: React отслеживает порядок вызова хуков. Если он меняется - всё ломается.

11. useEffect vs useLayoutEffect - в чем разница?

Вопрос-ловушка 2026:

• useEffect выполняется после рендера (асинхронно)

• useLayoutEffect выполняется до отрисовки в браузере (синхронно)

Когда использовать useLayoutEffect: Когда нужно измерить DOM или сделать изменения до того, как пользователь что-то увидит (чтобы не было "мерцания").

В 99% случаев: Нужен обычный useEffect.

12. Что такое Virtual DOM?

Простыми словами: Легковесная копия реального DOM в памяти. React сравнивает (diff) старый Virtual DOM с новым, вычисляет минимальные изменения и обновляет только их в реальном DOM.

Почему это важно: Прямая работа с DOM медленная. Virtual DOM ускоряет процесс.

Альтернативы в 2026: Svelte компилирует всё в vanilla JS без Virtual DOM, Solid.js использует fine-grained reactivity (Signals). Но React пока доминирует в России.

13. Как работает useState?

Базово:

const [count, setCount] = useState(0);

Что происходит:

1. useState(0) инициализирует состояние

2. Возвращает массив: [текущее значение, функция обновления]

3. При вызове setCount компонент перерендеривается

Нюанс: Обновление состояния асинхронно! setCount(count + 1) не сразу меняет count.

Functional update (важно!):

setCount(prev => prev + 1); // Надёжнее

14. Что такое Context API?

Проблема: Пробрасывать props через 10 уровней компонентов - боль.

Решение: Context API позволяет "телепортировать" данные напрямую потребителям.

Когда использовать: Темы, авторизация, язык интерфейса.

Когда НЕ использовать: Для всего состояния приложения. Для сложной логики лучше Redux Toolkit, Zustand или Jotai.

15. Объясните lifecycle компонента

В классовых компонентах: componentDidMount, componentDidUpdate, componentWillUnmount

В функциональных компонентах с хуками:

useEffect(() => {
  // componentDidMount + componentDidUpdate
  
  return () => {
    // componentWillUnmount (cleanup)
  };
}, [deps]); // Зависимости определяют, когда запускать

Пустой массив зависимостей []: Сработает только при монтировании (аналог componentDidMount).

🎨 Категория: "CSS - потому что центрировать div всё еще сложно"

16. Flexbox vs Grid - когда что использовать?

Flexbox: Одномерные лейауты (строки или столбцы)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid: Двумерные лейауты (строки И столбцы одновременно)

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Правило 2026: Используй Grid для структуры страницы, Flexbox для компонентов внутри.

17. Что такое CSS Variables (Custom Properties)?

Суть: Переменные в CSS, которые можно переиспользовать.

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

Преимущества в 2026:

• Легко менять темы (dark mode)

• Можно манипулировать через JavaScript

• Нативная поддержка браузеров

18. Как оптимизировать производительность CSS?

Актуальные советы 2026:

1. Critical CSS: Инлайнить критичный CSS в <head>, остальное грузить асинхронно

2. Минификация и сжатие

3. Avoid CSS in JS в runtime: Используй решения с compile-time (StyleX от Meta, Tailwind)

4. Container Queries: Вместо медиазапросов для адаптива компонентов

⚡ Категория: "Производительность - или как не сделать сайт тормозом"

19. Что такое Core Web Vitals?

Google в 2026 еще строже к производительности:

• LCP (Largest Contentful Paint): Время загрузки основного контента (цель: < 2.5с)

• INP (Interaction to Next Paint): Заменил FID, измеряет отзывчивость (цель: < 200ms)

• CLS (Cumulative Layout Shift): Стабильность визуальной части (цель: < 0.1)

Почему важно: Влияет на SEO и конверсию.

20. Lazy Loading - что и как?

Изображения:

<img src="image.jpg" loading="lazy" alt="описание">

Компоненты React:

const HeavyComponent = lazy(() => import('./HeavyComponent'));

<Suspense fallback={<div>Загрузка...</div>}>
  <HeavyComponent />
</Suspense>

Тренд 2026: Next.js делает это автоматически для страниц и компонентов.

21. Code Splitting - как и зачем?

Проблема: Один огромный bundle грузится долго.

Решение: Разбить код на чанки, грузить по требованию.

Webpack/Vite делают это автоматически:

import('./module').then(module => {
  // используем модуль
});

React + Next.js 2026: Всё из коробки с app router и server components.

22. Мемоизация в React: useMemo, useCallback, React.memo

Когда использовать:

React.memo: Оборачивает компонент, предотвращает ререндер если props не изменились

const ExpensiveComponent = React.memo(function Component({ data }) {
  // ...
});

useMemo: Кэширует результат вычислений

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

useCallback: Кэширует функцию

const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Важно в 2026: Не оптимизируй преждевременно! React Compiler скоро всё это сделает автоматически.

🌐 Категория: "Современный стек - AI, TypeScript и серверные штуки"

23. TypeScript - зачем он нужен?

Короткий ответ: Статическая типизация для JavaScript. Меньше багов, лучше автодополнение, легче рефакторить.

Статистика 2026: TypeScript стал стандартом в российских IT-компаниях. 80%+ новых проектов используют TS.

На собесе могут спросить:

• Что такое interface vs type

• Как работают Generics

• Что такое Union Types и Type Guards

24. Server Components в React - что это?

Появились в React 18, стали стабильными в React 19, а в 2026 это уже рабочая практика:

• Компоненты рендерятся на сервере

• Меньше JavaScript отправляется клиенту

• Доступ к базе данных напрямую из компонента

Пример (Next.js App Router):

async function ProductPage({ id }) {
  const product = await db.products.findById(id); // прямо в компоненте!
  return <div>{product.name}</div>
}

Преимущества: Быстрее загрузка, меньше бандл, лучше SEO.

25. Edge Computing - что и зачем?

Идея: Выполнять код на edge-серверах (ближе к пользователю), а не на одном центральном сервере.

Преимущества:

• Меньше latency (задержка)

• Лучше для пользователей из разных регионов России

• Экономия ресурсов

Примеры: Cloudflare Workers, Vercel Edge Functions, Yandex Cloud Functions.

На собесе 2026: Спрашивают о понимании архитектуры и когда это нужно.

26. AI в разработке - как используете?

Реальность 2026: AI-инструменты стали частью workflow в российских компаниях.

Популярные инструменты:

• GitHub Copilot - автодополнение кода

• Cursor / Windsurf - AI IDE

• ChatGPT / Claude / Яндекс GPT - объяснение кода, отладка, генерация

• Различные российские AI-ассистенты

Что могут спросить:

• Как AI помогает в работе?

• Какие ограничения AI-кода видите?

• Как проверяете качество AI-генерированного кода?

Важно: AI - это инструмент, не замена понимания основ.

🔧 Категория: "Инструменты и экосистема"

27. npm vs yarn vs pnpm - разница?

Все - пакетные менеджеры:

• npm: Стандарт, идёт с Node.js

• yarn: Быстрее, лучше кэширование (Yarn 2+ ещё быстрее, но спорно)

• pnpm: Самый экономный по дискам (использует symlinks), супербыстрый

Тренд 2026: pnpm набирает популярность в монорепозиториях российских компаний.

28. Webpack vs Vite vs Turbopack - что выбрать?

Webpack: Старый добрый, гибкий, но медленный на больших проектах.

Vite: Использует ES modules для dev-режима → мгновенный запуск. esbuild для продакшена.

Turbopack: Новый сборщик от Vercel (Next.js), написан на Rust, ещё быстрее Vite.

Вывод 2026: Vite - стандарт для новых проектов. Turbopack набирает обороты.

29. Что такое monorepo и зачем он нужен?

Monorepo: Один репозиторий для нескольких пакетов/приложений.

Инструменты: Turborepo, Nx, Lerna.

Преимущества:

• Общий код между проектами

• Единая версионность

• Легче делать кросс-проектные изменения

Когда использовать: Большие команды (как в Яндексе, VK), микрофронтенды, дизайн-системы.

🧪 Категория: "Тестирование - потому что 'works on my machine' не работает"

30. Виды тестирования во фронтенде

Unit тесты: Тестируют отдельные функции/компоненты (Jest, Vitest)

Integration тесты: Тестируют взаимодействие между частями (React Testing Library)

E2E тесты: Тестируют весь флоу пользователя (Playwright, Cypress)

Тренд 2026: Playwright вытесняет Cypress. Vitest заменяет Jest в Vite-проектах.

31. React Testing Library - основные принципы

Философия: Тестируй так, как пользователь взаимодействует с приложением.

Плохо:

wrapper.find('.button').simulate('click'); // тестирование деталей реализации

Хорошо:

const button = screen.getByRole('button', { name: /submit/i });
fireEvent.click(button);

На собесе спросят: Как тестируешь хуки, асинхронный код, mocking API.

🎭 Категория: "Поведенческие вопросы и soft skills"

32. Расскажите о проекте, которым гордитесь

Что хотят услышать:

• Проблема, которую решали

• Технологии и подход

• Ваша роль

• Результат (метрики!)

Структура STAR: Situation → Task → Action → Result

Пример:

"Дашборд в CRM загружался 5 секунд. Я профилировал через Chrome DevTools, нашёл тяжёлые зависимости, сделал code splitting и lazy loading. Время загрузки упало до 2 секунд, engagement вырос на 18%."

33. Как вы остаетесь в курсе трендов?

Хорошие ответы 2026:

• Читаю обновления фреймворков (React blog, Next.js changelog)

• Смотрю доклады с конференций (HolyJS, FrontendConf, React Summit)

• Участвую в open-source

• Пробую новые технологии в pet-проектах

• Подписан на девблоги и рассылки

• Состою в Telegram-сообществах разработчиков

🚀 Кстати, о Telegram-сообществах!

Если вы хотите не просто читать статьи раз в месяц, а каждый день видеть полезный контент по программированию в своей ленте - присоединяйтесь к сообществу Кодик в Telegram!

Там выходят краткие посты, разборы задач, новости из мира фронтенда и бэкенда, а ещё есть общение с другими разработчиками. Это как витамины для мозга программиста - каждый день по чуть-чуть, но эффект накопительный 💪

34. Опишите сложную техническую проблему, которую решали

Что проверяют: Навыки решения проблем и техническую глубину.

Схема ответа:

1. Проблема: Что сломалось, симптомы

2. Диагностика: Как искали причину (инструменты, гипотезы)

3. Решение: Что сделали

4. Итог: Результат и что узнали

Бонус: Упомяните, что документировали решение для команды.

🚀 Категория: "Продвинутый уровень - вопросы для мидлов и сеньоров"

35. Микрофронтенды - что это и когда использовать?

Идея: Разбить фронтенд на независимые части, которые разрабатываются отдельными командами.

Подходы:

• Module Federation (Webpack 5)

• Iframe (старая школа, но работает)

• Web Components

Когда НЕ использовать: Маленькие команды, простые приложения.

Когда использовать: Большие команды (Яндекс, VK, Сбер), легаси-системы, нужна независимость деплоя.

Тренд 2026: Паттерн зреет в российских компаниях, но не для всех. Осторожно с хайпом!

36. Доступность (a11y) - что важно знать?

Основы:

• Семантичный HTML (используй правильные теги)

• ARIA-атрибуты когда нужно

• Клавиатурная навигация (всё должно работать без мыши)

• Контраст цветов (WCAG AA/AAA стандарты)

• Альт-тексты для изображений

Инструменты: Lighthouse, axe DevTools, WAVE.

Важно в России 2026: Для госпроектов и крупных компаний accessibility становится обязательным требованием.

37. Как бы вы спроектировали систему аутентификации?

Проверка: Архитектурное мышление.

Ключевые аспекты:

• JWT vs Session-based auth

• Refresh tokens

• Хранение токенов (httpOnly cookies vs localStorage)

• CSRF защита

• OAuth / Social login (ВКонтакте, Яндекс ID, Telegram)

Модный ответ 2026: NextAuth.js, Clerk, Supabase Auth - готовые решения вместо написания с нуля.

38. State management в 2026 - что использовать?

Варианты:

• Redux Toolkit - всё еще мощный для сложных приложений

• Zustand - легковесный, простой API

• Jotai - atomic state

• TanStack Query (React Query) - для серверного состояния

• Context API - для простых случаев

Тренд: Разделяйте client state (UI) и server state (данные с API). Для второго используйте TanStack Query.

39. Что такое hydration в SSR/SSG?

SSR (Server-Side Rendering): Сервер отдаёт готовый HTML.

Hydration: React "оживляет" этот HTML на клиенте, прикрепляя обработчики событий.

Проблема: Если клиентский код не совпадает с серверным - hydration error.

Новинка 2026: Partial Hydration и Islands Architecture (Astro) - гидратация только интерактивных частей.

40. Performance Optimization - чек-лист

Checklist для собеседования:

• ✅ Lazy loading (изображения, компоненты, routes)

• ✅ Code splitting (динамические импорты)

• ✅ Tree shaking (удаление неиспользуемого кода)

• ✅ Мемоизация (React.memo, useMemo, useCallback)

• ✅ Debounce / Throttle (поиск, скролл)

• ✅ Виртуализация длинных списков (react-window, TanStack Virtual)

• ✅ Оптимизация изображений (WebP, AVIF, responsive images)

• ✅ CDN для статики

• ✅ HTTP/2, HTTP/3

• ✅ Prefetch / Preload критичных ресурсов

🎯 Категория: "Хитрые вопросы - ловушки и задачки"

41. Что выведет этот код?

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

Ответ: 1, 4, 3, 2

Почему:

1. Синхронный код выполняется первым: 1, 4

2. Microtasks (Promises) выполняются до macrotasks (setTimeout)

3. Поэтому: Promise (3), потом setTimeout (2)

Это классика для проверки понимания Event Loop.

42. В чем разница между map() и forEach()?

forEach: Просто итерирует, ничего не возвращает.

map: Создаёт новый массив на основе преобразования.

const numbers = [1, 2, 3];

numbers.forEach(n => console.log(n * 2)); // выводит, но не сохраняет

const doubled = numbers.map(n => n * 2); // [2, 4, 6]

Правило: Нужен новый массив → map. Просто сделать что-то с каждым элементом → forEach.

🎓 Подведём итоги

Фронтенд-собеседования в российских IT-компаниях в 2026 - это микс:

• Базовых знаний (HTML, CSS, JavaScript)

• Фреймворков (React доминирует, но знание альтернатив - плюс)

• Производительности и оптимизации

• Современных инструментов (TypeScript, Vite, AI-ассистенты)

• Архитектурного мышления (когда что использовать и почему)

• Soft skills (коммуникация, решение проблем, работа в команде)

📚 Как готовиться эффективно?

1. Понимай основы глубоко - без них никуда

2. Практикуй код - не просто читай, пиши

3. Делай pet-проекты - применяй знания на практике

4. Изучай реальные кодбейзы - читай код популярных библиотек

5. Mock interviews - тренируй формат собеседования

🚀 А хотите прокачивать фронтенд системно и с удовольствием?

Тогда вам точно нужно попробовать Кодик - приложение для изучения программирования с практикой прямо в телефоне!

Почему Кодик крут:

• ✅ Практика с первой минуты - не просто теория, а настоящие задачи

• ✅ Интерактивные уроки - прям в приложении пишешь код и сразу видишь результат

• ✅ Удобно везде - в метро, в очереди, на диване - учись где угодно

• ✅ Структурированная программа - от основ до продвинутых тем

• ✅ Сообщество - в Telegram-канале делятся опытом, разбирают задачи, обсуждают тренды

👉 Скачай Кодик и начни кодить уже сегодня!
👉 Подписывайся на Telegram-канал - каждый день полезные посты, которые помогут не забывать материал и держать руку на пульсе фронтенд-трендов!

P.S.

Помни: На собеседовании не обязательно знать всё. Важнее показать:

• Умение думать и решать проблемы

• Готовность учиться

• Понимание основ и способность их применять

• Умение объяснять свои мысли

Даже если не знаешь ответ - рассуждай вслух. Интервьюеры ценят процесс мышления, а не только финальный ответ.

Удачи на собесах! 🚀 И помни: каждое собеседование - это опыт. Даже если не прошёл - ты узнал, что учить дальше.