Вопросы с собеседований
Вопросы на собеседовании: Frontend
JavaScript, event loop и промисы, браузер и DOM, CSS, React и TypeScript.
140вопросов
91Junior
40Middle
9Senior
Основы JavaScript
10- Какие методы массивов меняют исходный массив, а какие возвращают новый?Junior
- Что такое замыкание в JavaScript и где оно применяется?Junior
- Как скопировать объект в JavaScript и чем поверхностная копия отличается от глубокой?Junior
- Чем == отличается от === в JavaScript?Junior
- Чем ES-модули отличаются от CommonJS?Junior
- Как работают ES-модули — import и export?Junior
- Какие типы данных есть в JavaScript?Junior
- Как работает прототипное наследование и что такое class в JavaScript?Junior
- Как определяется this в JavaScript и чем стрелочные функции отличаются от обычных?Junior
- Чем var отличается от let и const?Junior
Асинхронность и event loop
5- Как работают async и await и как правильно обрабатывать в них ошибки?Junior
- Чем debounce отличается от throttle?Junior
- Как работает event loop в JavaScript — макрозадачи и микрозадачи?Junior
- Что такое Promise и чем отличаются Promise.all, allSettled, race и any?Junior
- Как в Angular используются RxJS и Observable?Middle
Браузер и DOM
15- Что такое доступность веб-интерфейса и с чего её начинать?Junior
- Как обеспечить работу интерфейса с клавиатуры и управление фокусом?Junior
- Что такое всплытие и перехват событий и как работает делегирование?Junior
- Как найти и изменить элементы DOM на JavaScript?Junior
- Как сделать HTTP-запрос через fetch и правильно обработать ошибки?Junior
- Как валидировать формы на фронтенде?Junior
- Как правильно сверстать форму?Junior
- Что такое семантическая разметка HTML и зачем она нужна?Junior
- Какие браузерные API полезны фронтенд-разработчику — IntersectionObserver, ResizeObserver, Storage, History?Junior
- Какие мета-теги нужны странице — title, description, Open Graph?Junior
- Как браузер отрисовывает страницу и чем reflow отличается от repaint?Junior
- Чем отличаются атрибуты async и defer у тега script?Junior
- Что фронтенд-разработчику нужно знать про SEO?Junior
- Зачем нужны robots.txt и sitemap.xml?Junior
- Что такое ARIA и когда её использовать?Middle
Вёрстка и CSS
14- Что такое БЭМ и зачем методологии именования CSS?Junior
- Что такое блочная модель CSS и чем content-box отличается от border-box?Junior
- Какие CSS-свойства наследуются и как работают inherit, initial и unset?Junior
- Как сделать анимацию через @keyframes?Junior
- Что такое CSS Modules и чем они отличаются от CSS-in-JS?Junior
- Чем отличаются значения position — static, relative, absolute, fixed, sticky?Junior
- Как работают каскад и специфичность в CSS?Junior
- Как сделать плавное изменение стиля через CSS transition?Junior
- Какие единицы измерения есть в CSS и когда какие использовать?Junior
- Чем Flexbox отличается от Grid и когда что использовать?Junior
- Как стилизовать компоненты React — CSS Modules, Tailwind, clsx?Junior
- Зачем учитывать prefers-reduced-motion?Junior
- Как сделать адаптивную вёрстку?Junior
- Что такое утилитарный CSS (Tailwind) и какие у него плюсы и минусы?Junior
React
45- Чем контролируемый компонент формы отличается от неконтролируемого?Junior
- Как строить обёртки через children и слоты?Junior
- Как сделать условный рендеринг в React и в чём ловушка с && и нулём?Junior
- Что такое Context в React и когда его использовать?Junior
- Как обрабатывать события в React и передавать колбэки дочерним компонентам?Junior
- Как сделать простую форму в React?Junior
- Какие правила хуков в React и почему их нельзя вызывать в условиях?Junior
- Что такое JSX и как вставлять в него выражения и фрагменты?Junior
- Как поделиться состоянием между соседними компонентами — что значит «поднять состояние»?Junior
- Что такое виртуальный DOM и зачем в списках нужен key?Junior
- Чем useRef отличается от useState?Junior
- Когда компонент React перерисовывается и как избежать лишних рендеров?Junior
- Как настроить маршруты и вложенные раскладки в React Router?Junior
- Как читать параметры пути и строки запроса в React Router?Junior
- Почему обработчик видит «старое» значение состояния?Junior
- Почему в React нельзя изменять состояние напрямую?Junior
- Как управлять состоянием в React-приложении — Context, Redux, Zustand, серверное состояние?Junior
- Чем state отличается от props в React?Junior
- Как работает useEffect и что такое массив зависимостей?Junior
- Как получить доступ к DOM-элементу через useRef?Junior
- Как работает useState?Junior
- Как создать React-проект и почему React перерисовывает интерфейс при изменении состояния?Junior
- Как React защищает от XSS при выводе строк и когда эта защита не работает?Junior
- Как создать хранилище Zustand и подписаться на его часть?Junior
- Что такое составные компоненты (compound components)?Middle
- Как избежать лишних перерисовок при использовании Context и почему Context — не менеджер состояния?Middle
- Как писать пользовательские хуки?Middle
- Почему не нужно хранить в state то, что можно вычислить из других данных?Middle
- Что такое границы ошибок в React и что они не ловят?Middle
- Как передать ref в свой компонент и открыть его методы?Middle
- Как строить сложные формы на React Hook Form со схемой Zod?Middle
- Почему пользовательские хуки вытеснили HOC и render props?Middle
- Чем разработка на React Native отличается от веба?Middle
- Как устроен App Router в Next.js — маршруты, раскладки, загрузка данных?Middle
- Какие задачи не нужно решать через useEffect?Middle
- Как сделать оптимистичное обновление интерфейса с откатом при ошибке?Middle
- Что такое порталы в React и как сделать на них модальное окно?Middle
- Как устроен Redux Toolkit — слайсы, селекторы, middleware?Middle
- Как загружать данные до показа страницы в React Router?Middle
- Что такое Server Actions и как с ними делать формы?Middle
- Чем серверные компоненты отличаются от клиентских и от SSR?Middle
- Как работать с серверными данными через TanStack Query?Middle
- Как тестировать пользовательские хуки?Middle
- Когда использовать useReducer вместо useState?Middle
- Что такое Fiber и конкурентный рендеринг в React?Senior
TypeScript
7- Как типизировать обработчики событий в React с TypeScript?Junior
- Как типизировать props и состояние React-компонента в TypeScript?Junior
- Что такое дженерики в TypeScript и зачем они нужны?Junior
- Что такое сужение типов в TypeScript?Junior
- Зачем нужен TypeScript и чем any отличается от unknown?Junior
- Чем interface отличается от type в TypeScript и что такое утилитарные типы?Junior
- Как написать дженерик-компонент и типизировать контекст с проверкой провайдера?Middle
Производительность
8- Как оптимизировать изображения на сайте?Junior
- Что такое разделение кода (code splitting) и ленивая загрузка?Middle
- Что такое Core Web Vitals и как их улучшить?Middle
- Когда применять React.memo, useMemo и useCallback?Middle
- Что такое SSR и гидратация и откуда берутся ошибки гидратации?Middle
- Как разделить код по маршрутам через lazy и Suspense?Middle
- Как сделать интерфейс отзывчивым при тяжёлых обновлениях — useTransition и виртуализация?Middle
- Как держать производительность большого фронтенд-приложения под контролем?Senior
Архитектура фронтенда
20- Как устроено приложение на Angular?Junior
- Как работает внедрение зависимостей в Angular?Junior
- Зачем нужен Storybook?Junior
- Чем Svelte отличается от React и Vue?Junior
- Как делить состояние между компонентами в Svelte?Junior
- Как устроен компонент Vue?Junior
- Как компоненты Vue обмениваются данными — props, emits, слоты?Junior
- Как работает реактивность во Vue — ref, reactive, computed, watch?Junior
- Чем отличаются CSR, SSR, SSG и ISR?Middle
- Что такое дизайн-токены?Middle
- Что такое гидратация и какие с ней бывают проблемы?Middle
- Какое состояние стоит хранить в URL и как защищать маршруты?Middle
- Когда фронтенду нужен REST, GraphQL или WebSocket?Middle
- Как построить дизайн-систему и библиотеку компонентов для нескольких продуктов?Senior
- Спроектируйте компонент поиска с автодополнением.Senior
- Как постепенно переписать большое legacy-приложение на новый стек?Senior
- Что такое микрофронтенды и когда они оправданы?Senior
- Зачем фронтенду монорепозиторий и как его организовать?Senior
- Как организовать архитектуру большого фронтенд-приложения?Senior
- Как спроектировать кэширование и стратегии рендеринга страниц в Next.js?Senior
Выкатка и эксплуатация
16- Зачем нужен сборщик (Vite, webpack) и что он делает?Junior
- Зачем нужны ESLint и Prettier и как их подключить к проекту?Junior
- Зачем нужен lock-файл (package-lock.json, pnpm-lock.yaml) и чем npm install отличается от npm ci?Junior
- Что такое npm-скрипты и npx?Junior
- Чем отличаются getBy, queryBy и findBy в Testing Library?Junior
- Как тестировать React-компоненты через Testing Library и user-event?Junior
- Что тестировать во фронтенд-приложении на React?Junior
- Что означают версии ^1.2.3 и ~1.2.3 и как обновлять зависимости?Junior
- Как тестировать компоненты с Testing Library?Junior
- Как писать юнит-тесты на фронтенде (Vitest, Jest)?Junior
- Что делать с нестабильными (flaky) тестами?Middle
- Как устроить сборку и выкатку фронтенда?Middle
- Как мониторить ошибки и производительность фронтенда в продакшене?Middle
- Как писать сквозные (e2e) тесты на Playwright?Middle
- Как тестировать компоненты, которые ходят в сеть и используют провайдеры?Middle
- Что такое source maps и как их использовать в продакшене?Middle
Партнёр платформы
Разбор собеседования
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.