Frontend собеседование: React, Vue, Angular — что спрашивают в 2026

1. Что такое замыкание (closure) и зачем оно нужно?

Замыкание — это функция, которая «запоминает» переменные из внешнего лексического окружения, даже когда внешняя функция уже завершилась. Это основа приватности данных в JS.

Пример: фабричная функция createCounter() возвращает функцию-инкремент, которая хранит count в замыкании. Извне переменная недоступна — только через возвращённую функцию.

💡 Совет: Приведите практический пример — каррирование, debounce/throttle или модульный паттерн.

2. В чём разница между Promise, async/await и callback?

Callback — функция, передаваемая аргументом. Проблема: callback hell при вложенности. Promise — объект-обёртка для асинхронной операции с состояниями pending/fulfilled/rejected. Позволяет цепочки через .then(). async/await — синтаксический сахар над Promise, делает асинхронный код похожим на синхронный.

💡 Совет: Упомяните Promise.all(), Promise.allSettled() и обработку ошибок через try/catch.

3. Что такое Event Loop и как он работает?

Event Loop — механизм, который позволяет JS быть однопоточным, но неблокирующим. Он постоянно проверяет call stack и task queue. Когда стек пуст — берёт следующую задачу из очереди. Микрозадачи (Promise, queueMicrotask) выполняются до макрозадач (setTimeout, setInterval).

💡 Совет: Нарисуйте схему: Call Stack → Microtask Queue → Macrotask Queue. Это покажет глубину понимания.

4. Как работает Virtual DOM в React?

Virtual DOM — лёгкая JavaScript-копия реального DOM. При изменении состояния React создаёт новое виртуальное дерево, сравнивает его со старым (diffing через алгоритм reconciliation) и применяет минимальный набор изменений к реальному DOM. Это быстрее прямых манипуляций, потому что batch-обновления и минимизация reflow/repaint.

💡 Совет: Упомяните React Fiber — архитектуру, позволяющую прерывать рендеринг и приоритизировать обновления.

5. В чём разница между useState, useReducer и useRef?

useState — для простого локального состояния, вызывает ре-рендер. useReducer — для сложной логики с несколькими связанными переменными (аналог Redux-паттерна). useRef — хранит мутабельное значение, которое не вызывает ре-рендер при изменении. Часто используется для ссылок на DOM-элементы и хранения предыдущих значений.

💡 Совет: Покажите, когда useReducer лучше useState — например, форма с 5+ полями или состояние с зависимыми переходами.

6. Как предотвратить лишние ре-рендеры в React?

Основные инструменты: React.memo — мемоизация компонента (пропускает ре-рендер, если пропсы не изменились). useMemo — мемоизация вычислений. useCallback — мемоизация функций-колбеков. Также важно: правильная структура стейта, разделение контекстов, и не создавать объекты/массивы inline в JSX.

💡 Совет: Упомяните React DevTools Profiler для поиска узких мест и React Compiler (React 19+), который автоматизирует мемоизацию.

7. Как работает реактивность в Vue 3?

Vue 3 использует Proxy (вместо Object.defineProperty из Vue 2) для отслеживания зависимостей. Когда вы обращаетесь к реактивному свойству в шаблоне или computed — Vue запоминает эту зависимость (track). При изменении свойства вызывается trigger, который перезапускает эффекты и обновляет DOM.

💡 Совет: Объясните разницу между ref() (оборачивает примитив в объект с .value) и reactive() (делает объект реактивным целиком).

8. Composition API vs Options API — когда что использовать?

Options API — классический подход с data(), methods, computed, watch. Хорош для простых компонентов и новичков. Composition API — функциональный подход через setup() или <script setup>. Позволяет группировать логику по фичам, а не по типу опции. Идеален для переиспользования через composables.

💡 Совет: Приведите пример composable — например, useAuth() или useFetch() — и объясните, почему это лучше миксинов.

9. Что такое Pinia и чем она лучше Vuex?

Pinia — официальный стейт-менеджер Vue 3. В отличие от Vuex: нет мутаций (только actions), полная поддержка TypeScript из коробки, модульная архитектура без вложенных модулей, поддержка Composition API. Код проще и компактнее. Vuex фактически deprecated для новых проектов.

💡 Совет: Покажите, что знаете структуру store в Pinia: state, getters, actions — и как использовать storeToRefs().

10. В чём разница между interface и type в TypeScript?

interface — описывает форму объекта, поддерживает declaration merging (можно объявить дважды — свойства объединятся) и extends. type — более гибкий: может описывать union, intersection, mapped types, conditional types и примитивы. Для объектов и классов — предпочтительнее interface. Для сложных типов и утилит — type.

💡 Совет: Покажите практический пример: type Status = 'loading' | 'error' | 'success' — это невозможно с interface.

11. Что такое Generics и зачем они нужны?

Generics позволяют создавать переиспользуемые компоненты, которые работают с разными типами, сохраняя типобезопасность. Например, function identity<T>(arg: T): T — функция, которая принимает и возвращает значение одного типа. Без дженериков пришлось бы использовать any, теряя проверку типов.

💡 Совет: Упомяните constraints (extends), утилитарные типы (Partial, Pick, Omit) и keyof.

12. Как типизировать компоненты React/Vue с TypeScript?

React: FC<Props> или просто типизация аргументов. Для хуков: useState<string>(''). Vue 3: defineProps<{ title: string }>() в <script setup lang="ts">. Для emit: defineEmits<{ (e: 'update', value: string): void }>(). TypeScript ловит ошибки на этапе компиляции, до рантайма.

💡 Совет: Знайте разницу между runtime и compile-time валидацией пропсов.

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

Flexbox — одномерная раскладка (строка ИЛИ колонка). Идеален для навигации, карточек в ряд, выравнивания элементов. CSS Grid — двумерная раскладка (строки И колонки одновременно). Идеален для полных макетов страниц, сложных сеток, dashboard'ов. На практике их часто комбинируют: Grid для макета страницы, Flexbox для компонентов внутри.

💡 Совет: Знайте grid-template-areas — это упрощает понимание макета в коде.

14. Как реализовать адаптивный дизайн?

Основные подходы: Media queries (@media (max-width: 768px)), относительные единицы (rem, em, vw, vh, %), CSS Container Queries (стилизация по размеру родителя, а не viewport), clamp() для флюидной типографики. Mobile-first подход: начинайте с мобильной версии, расширяйте через min-width.

💡 Совет: Упомяните Container Queries — это горячая тема в 2026. Покажите, что следите за современными стандартами.

15. Что такое BEM и зачем нужны CSS-методологии?

BEM (Block, Element, Modifier) — соглашение об именовании: .card__title--active. Решает проблему коллизий имён и повышает читаемость. Альтернативы: CSS Modules (локальная область видимости автоматически), Tailwind CSS (utility-first), CSS-in-JS (styled-components, Emotion). В 2026 Tailwind и CSS Modules доминируют в production-проектах.

💡 Совет: Знайте плюсы и минусы каждого подхода. Часто спрашивают: «Почему вы выбрали X, а не Y?»

16. Что такое Critical Rendering Path?

CRP — последовательность шагов браузера для отображения страницы: 1) Парсинг HTML → DOM. 2) Парсинг CSS → CSSOM. 3) Объединение в Render Tree. 4) Layout (расчёт размеров и позиций). 5) Paint (отрисовка пикселей). 6) Composite (слои). Блокирующие ресурсы (CSS, синхронный JS) задерживают рендеринг.

💡 Совет: Упомяните оптимизации: async/defer для скриптов, preload для критических ресурсов, инлайн critical CSS.

17. Какие Core Web Vitals вы знаете и как их улучшить?

LCP (Largest Contentful Paint) — скорость загрузки главного контента (<2.5с). Улучшаем: оптимизация изображений, preload, CDN. INP (Interaction to Next Paint) — отзывчивость на ввод (<200мс). Улучшаем: разбивка тяжёлых задач, requestIdleCallback. CLS (Cumulative Layout Shift) — визуальная стабильность (<0.1). Улучшаем: явные размеры для img/video, font-display: swap.

💡 Совет: INP заменил FID в 2024 — убедитесь, что знаете актуальные метрики. Используйте Lighthouse и Chrome DevTools Performance.

18. Как оптимизировать загрузку JavaScript-приложения?

Ключевые техники: Code splitting — разбивка бандла на чанки (lazy loading маршрутов). Tree shaking — удаление неиспользуемого кода. Compression — Brotli/gzip. Caching — правильные заголовки, Service Worker. Lazy loading — изображения, компоненты. Prefetch/Preload — для критических ресурсов. Бандл-анализ через webpack-bundle-analyzer или rollup-plugin-visualizer.

💡 Совет: Назовите конкретные цифры: «мы уменьшили бандл с 500KB до 180KB через code splitting» — это впечатляет интервьюера.

19. Webpack vs Vite — в чём ключевые различия?

Webpack — бандлит всё перед запуском dev-сервера. Мощная экосистема плагинов, но медленный cold start на крупных проектах. Vite — использует нативные ES-модули браузера в dev-режиме (мгновенный запуск) и Rollup для production-сборки. HMR в Vite работает в разы быстрее. В 2026 Vite — стандарт для новых проектов (Vue, React, Svelte).

💡 Совет: Если у вас опыт с обоими — расскажите, при каких условиях Webpack всё ещё актуален (legacy-проекты, сложные кастомные конфигурации).

20. Зачем нужны ESLint и Prettier, и как они работают вместе?

ESLint — линтер, находит ошибки и проблемы в коде (неиспользуемые переменные, потенциальные баги, нарушение конвенций). Prettier — форматтер, отвечает только за стиль (отступы, кавычки, точки с запятой). Вместе: ESLint проверяет качество, Prettier форматирует. Конфигурация: eslint-config-prettier отключает конфликтующие правила ESLint.

💡 Совет: Упомяните husky + lint-staged для pre-commit хуков — это показывает зрелость ваших процессов разработки.