Junior React собеседование: разбор ключевых вопросов с развернутыми ответами

Если вы готовитесь к собеседованию на Junior React разработчика, важно не просто выучить определения, а уметь объяснить, как концепты работают в реальном коде. Ниже собрана структурированная статья по вашим вопросам: от базовых концептов React до JavaScript, верстки, API, Git, тестов и soft-skills.

Для отдельной проработки темы ререндеров и механики обновлений посмотрите React rendering: когда компонент перерисовывается.

1. React: базовые концепты

Что такое JSX и чем он отличается от обычного JavaScript

JSX - это синтаксис, который позволяет писать разметку внутри JavaScript. Он похож на HTML, но не является HTML: на этапе сборки JSX преобразуется в вызовы функций React. Отличие от обычного JavaScript в том, что JSX делает описание UI декларативным: вы описываете, что хотите видеть, а не вручную манипулируете DOM-узлами.

Что такое компоненты в React, какие бывают (функциональные и классовые), в чем разница

Компонент - это переиспользуемый блок интерфейса. Функциональные компоненты сегодня основной стандарт: они проще, используют хуки и легче читаются. Классовые компоненты встречаются в legacy-коде и работают через this, lifecycle-методы и this.state. На junior-уровне важно понимать оба подхода, но писать уверенно на функциональных.

Что такое props и state, в чем разница, где что хранить

props - это входные данные, которые компонент получает от родителя и не должен менять. state - внутреннее состояние компонента, которое меняется во времени. В props передают данные, которые приходят извне, а в state хранят локальную динамику: поля формы, переключатели, UI-состояния loading/error.

Зачем нужны ключи (key) при рендеринге списков и что будет, если их не ставить или ставить индекс

key нужен React для правильного сопоставления элементов списка между рендерами. Без key React выдаст предупреждение и может некорректно переиспользовать DOM-узлы. Если ставить индекс массива как ключ в изменяемом списке, возможны баги: перепутанные инпуты, скачущее состояние, неверные анимации.

Что такое Virtual DOM, зачем он нужен, как примерно работает reconciliation

Virtual DOM - представление интерфейса в памяти. После изменения состояния React строит новое дерево, сравнивает его с предыдущим и вычисляет минимальные изменения для реального DOM. Этот процесс называется reconciliation. Цель не в том, чтобы "не трогать DOM совсем", а в том, чтобы делать меньше дорогих операций.

Почему нельзя напрямую мутировать state (this.state / useState) и как правильно обновлять

Прямая мутация ломает предсказуемость рендера и может не вызвать обновление интерфейса. React ожидает новую ссылку на объект/массив. Правильно: использовать сеттер и возвращать новую структуру, например через spread, map, filter, а когда новое значение зависит от старого - функциональный апдейт setValue(prev => ...).

Для чего используются refs, примеры использования

ref применяют, когда нужен доступ к DOM-элементу или хранение изменяемого значения без ререндера. Примеры: фокус на инпут при открытии модалки, сохранение id таймера, хранение предыдущего значения, интеграция со сторонней библиотекой графиков.

Почему имена компонентов должны начинаться с заглавной буквы

React различает HTML-теги и пользовательские компоненты по имени. Строки в нижнем регистре (div, button) считаются встроенными элементами, а имя с заглавной (UserCard) - пользовательским компонентом. Если назвать компонент с маленькой буквы, React воспримет это как неизвестный HTML-тег.

2. React Hooks и жизненный цикл

useState: как работает, как обновлять по предыдущему значению, какие ошибки джуны часто делают

useState возвращает массив: текущее значение и функцию обновления. Если новое состояние вычисляется из старого, используйте форму setCount(prev => prev + 1). Частые ошибки junior: мутация объекта в state, ожидание синхронного обновления сразу после setState, дублирование состояния, которое можно вычислить из props.

useEffect: когда он вызывается, зависимости, что такое бесконечный ререндер и как его избежать

useEffect запускается после рендера. Без массива зависимостей - после каждого рендера, с пустым массивом - один раз после монтирования, с зависимостями - при их изменении. Бесконечный ререндер возникает, когда effect обновляет state, который снова запускает тот же effect без ограничений. Избегают это корректным списком зависимостей, выносом вычислений и проверкой условий перед setState.

Разница между useEffect и useLayoutEffect на практическом уровне

useEffect выполняется после отрисовки, не блокируя paint. useLayoutEffect выполняется синхронно после изменения DOM, но до отрисовки кадра. Практически: useLayoutEffect нужен редко, обычно для измерений DOM и предотвращения визуального "скачка" интерфейса.

useRef: чем отличается от state, типичные кейсы (DOM-элемент, мутируемое значение)

Изменение ref.current не вызывает ререндер, а изменение state - вызывает. Поэтому ref подходит для технических данных, которые не должны влиять на UI напрямую. Типичные кейсы: ссылка на элемент, счетчик рендеров, id интервала, отмена предыдущего запроса.

Правила хуков: вызывать только на верхнем уровне и только внутри компонентов/кастомных хуков, почему так

React привязывает состояние хуков к порядку вызова. Если вызывать хук в if, цикле или после раннего return, порядок ломается, и состояние "съезжает" между вызовами. Поэтому хуки вызывают только на верхнем уровне функции компонента или кастомного хука и всегда в одинаковом порядке.

Основные методы жизненного цикла классового компонента и их соответствие useEffect

В классах обычно обсуждают componentDidMount, componentDidUpdate, componentWillUnmount. В функциональном подходе это объединяется через useEffect: эффект после монтирования/обновления и cleanup при размонтировании. Полного one-to-one соответствия нет, но концептуально useEffect покрывает эти сценарии.

3. React архитектура и экосистема (уровень Junior)

Когда достаточно локального state, когда нужен контекст или стейт-менеджер

Локальный state подходит, когда данные используются внутри одного-двух близких компонентов. Context нужен, если значения требуются многим уровням дерева (тема, язык, auth). Стейт-менеджер (Redux/Zustand) нужен, когда логика состояния становится сложной: много источников данных, кэш, бизнес-правила, синхронизация между экранами.

Какие библиотеки управления состоянием знаешь (Redux, Zustand, RTK Query), базовое понимание store/action/reducer

store - централизованное хранилище состояния, action - объект с описанием события, reducer - чистая функция, которая на основе action возвращает новое состояние. Redux дает строгую архитектуру, Zustand проще и легче по API, RTK Query закрывает кэширование и загрузку данных с API.

Что такое SPA, ее плюсы и минусы по сравнению с классическим MPA

SPA - одно приложение с клиентским роутингом и переходами без полной перезагрузки страницы. Плюсы: быстрые переходы, богатый UX. Минусы: тяжелее initial load, сложнее SEO без SSR/SSG, больше ответственности на клиенте. MPA проще для классического SEO и серверной генерации каждой страницы.

Базовое понимание маршрутизации: React Router и Next.js Router, client-side routing vs server-side

Client-side routing меняет URL и контент в браузере без перезагрузки документа. Server-side routing формирует новую страницу на сервере для каждого запроса. React Router чаще используют в SPA, а в Next.js маршрутизация встроена и может совмещать SSR, SSG и клиентскую навигацию.

Как подходишь к оптимизации производительности React-приложения

Подход: сначала измерить (DevTools/Profiler), потом оптимизировать узкие места. Инструменты: React.memo для тяжелых дочерних компонентов, useMemo/useCallback при реальных проблемах с перерендерами, code splitting и lazy loading для снижения стартового бандла. Важен баланс: чрезмерная оптимизация усложняет код.

4. JavaScript для React-джуна

Типы данных в JS, отличия == и ===, что такое NaN, undefined, null

JS имеет примитивы и объекты. === сравнивает и значение, и тип, поэтому его используют по умолчанию. == делает неявные преобразования и может дать неожиданный результат. undefined - значение "не присвоено", null - "намеренно пусто", NaN - специальное значение "не число" после некорректных числовых операций.

Области видимости, замыкания, this в разных контекстах

Область видимости определяет, где переменная доступна. Замыкание - функция "помнит" переменные внешней функции даже после ее завершения. this зависит от способа вызова: в обычной функции и методе объекта ведет себя по-разному, в стрелочной функции this берется из внешнего контекста.

Promise, async/await, обработка ошибок, event loop, микротаски и макротаски

Promise описывает отложенный результат асинхронной операции. async/await делает асинхронный код читаемым. Ошибки обрабатывают через try/catch или .catch. Event loop управляет очередями задач: микротаски (например, Promise.then) выполняются раньше следующей макротаски (setTimeout), поэтому порядок логов может удивлять новичков.

Работа с массивами: map, filter, reduce, some, every

map преобразует каждый элемент, filter оставляет подходящие, reduce агрегирует в одно значение, some проверяет, что хотя бы один элемент подходит, every - что подходят все. Эти методы часто применяются в React для рендера списков, фильтрации, вычисления производных данных.

Иммутабельность: мутирующая vs немутирующая операция и почему это важно для React state

Мутирующие операции меняют исходный объект/массив (push, splice, прямое присваивание поля). Немутирующие создают новую структуру (concat, filter, spread). Для React важна иммутабельность, потому что сравнение ссылок помогает понимать, что именно изменилось.

5. Базовый HTML/CSS и верстка

Box model: content, padding, border, margin, как считается размер блока

Размер элемента строится из content + padding + border, а margin добавляет внешние отступы снаружи. При box-sizing: content-box ширина относится только к content. При box-sizing: border-box ширина включает padding и border, что обычно удобнее для адаптивной верстки.

Разница display: block / inline / inline-block / flex / grid

block занимает всю ширину строки, inline идет в потоке текста и не принимает ширину/высоту полноценно, inline-block сочетает поток inline и размеры блока. flex удобен для одномерных layout (строка/колонка), grid - для двумерных сеток (строки и колонки сразу).

Основы Flexbox и базовый Grid

У Flexbox ключевые свойства контейнера: display: flex, justify-content, align-items, gap, flex-wrap. Для элементов: flex-grow, flex-shrink, flex-basis, align-self. В Grid важны grid-template-columns, grid-template-rows, gap, grid-column, grid-row.

Позиционирование: static, relative, absolute, fixed, sticky

static - обычный поток, relative - сдвиг относительно своей позиции, absolute - позиционирование относительно ближайшего позиционированного предка, fixed - привязка к viewport, sticky - гибрид: до порога как обычный элемент, после - фиксируется в пределах контейнера.

Что такое семантический HTML и зачем правильные теги/атрибуты

Семантические теги (header, main, article, nav, button, label) улучшают доступность, SEO и читаемость кода. Например, button должен быть кнопкой, а не div с onClick; label связывает подпись с полем формы; alt у изображения нужен для screen reader и fallback-контента.

Основы адаптивной верстки: media queries, mobile-first, rem/em/vw/vh

Mobile-first означает сначала стили для маленьких экранов, затем расширение через media queries. rem удобен для масштабируемой типографики, em зависит от родителя, vw/vh полезны для размеров относительно окна. Главная цель адаптива - читаемость и удобство на любом экране.

6. HTTP, API, безопасность

Что такое HTTP-запрос, методы и коды ответов

HTTP-запрос - это обращение клиента к серверу. Базовые методы: GET (получить), POST (создать), PUT/PATCH (обновить), DELETE (удалить). Частые коды: 200 успех, 201 создано, 400 ошибка клиента, 401 не авторизован, 403 запрещено, 404 не найдено, 500 ошибка сервера.

Что такое REST API, JSON, как ходят за данными из React

REST API - стиль построения HTTP-интерфейсов вокруг ресурсов. JSON - основной формат обмена данными. В React запросы обычно делают через fetch или axios: либо в useEffect при монтировании, либо по действию пользователя (submit, click). Важно обрабатывать loading/error/success.

Что такое CORS и зачем он нужен, кто принимает решение

CORS - браузерная политика безопасности для кросс-доменных запросов. Браузер решает, разрешен ли ответ, на основе CORS-заголовков сервера. То есть контроль на стороне браузера, а разрешение задается сервером.

Cookies, localStorage, sessionStorage: отличия и где что использовать

Cookies автоматически отправляются на сервер с запросом и подходят для сессионных сценариев (часто с HttpOnly и Secure). localStorage хранится долго и доступен через JS, sessionStorage живет в рамках вкладки. Для чувствительных токенов обычно избегают хранения в открытом JS-хранилище без продуманной модели безопасности.

7. Инструменты: Git, сборка, тесты

Базовые команды Git и перенос изменений между ветками

clone, status, add, commit, push, pull, branch, checkout, merge, rebase - обязательная база junior-разработчика. Перенос изменений между ветками обычно делают через merge (с сохранением истории) или rebase (линейная история). Для одного-двух коммитов из другой ветки часто используют cherry-pick.

Что такое package.json, dependencies и devDependencies, npm vs yarn

package.json хранит метаданные проекта, зависимости и скрипты. dependencies нужны в runtime приложения, devDependencies - только для разработки и сборки. npm и yarn решают одну задачу, различаются поведением lock-файлов, скоростью и экосистемными привычками команды.

Что такое bundler (Webpack, Vite) и зачем он нужен

Bundler собирает модули проекта в оптимизированные файлы для браузера. Он решает трансформацию кода, обработку ассетов, tree-shaking, минификацию, code splitting. Vite обычно быстрее в dev-режиме за счет современной архитектуры, Webpack гибче в сложных legacy-конфигурациях.

Базовое понимание unit/интеграционных тестов во frontend

Unit-тест проверяет маленький изолированный кусок логики. Интеграционный тест проверяет взаимодействие нескольких частей интерфейса. В React чаще используют Jest + React Testing Library и принцип "тестируй как пользователь": клики, ввод, ожидаемое поведение на экране, а не внутренние детали реализации.

8. Практические задания для Junior React

Задание 1: счетчик +1/-1 на useState

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount((prev) => prev - 1)}>-1</button>
      <span>{count}</span>
      <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
    </div>
  );
}

Что проверяют: понимание state, обработчиков событий и функционального обновления.

Задание 2: поле ввода с дебаунсом поиска

Идея: хранить введенный текст в state, а запрос запускать с задержкой через setTimeout внутри useEffect, очищая таймер в cleanup. Проверяют понимание useEffect, зависимостей и оптимизации запросов.

Задание 3: исправить бесконечный ререндер в useEffect

Типичный баг: effect зависит от состояния, которое сам же обновляет без условия. Решение: корректные зависимости, guard-условие, вынос вычислений или использование функционального апдейта.

Задание 4: список с фильтрацией и сортировкой по нескольким полям

Проверяют работу с массивами (filter, sort, map), разделение данных и UI-состояния, аккуратную обработку edge-cases (пустой список, null-значения, регистр строк).

Задание 5: адаптивный layout header/sidebar/content на Flexbox/Grid

Смотрят на структуру layout, поведение на мобильных и desktop-экранах, корректные отступы, перенос блоков и доступность элементов навигации.

9. Soft-skills и общие вопросы

Расскажите о проекте, которым гордитесь: структура STAR

Отвечайте по схеме STAR:

• Situation: контекст проекта и ограничений.
• Task: ваша зона ответственности.
• Action: какие решения вы приняли и почему.
• Result: измеримый результат (скорость, качество, конверсия, снижение багов).

Такой формат делает ответ конкретным и профессиональным.

Как учитесь, как подходите к новой технологии, как реагируете на фидбек

Сильный ответ: ставлю цель, изучаю базу по официальной документации, делаю мини-проект, закрепляю через код-ревью и практику. Фидбек воспринимаю как инструмент роста: уточняю ожидания, исправляю, фиксирую выводы в личный чеклист.

Как используете AI-инструменты и как проверяете качество сгенерированного кода

AI полезен для ускорения рутины: шаблоны, черновики, альтернативные подходы, генерация тест-кейсов. Но качество всегда проверяется разработчиком: ревью логики, запуск тестов, линт, ручная проверка edge-cases, контроль безопасности и производительности.

Частые ошибки кандидатов

• Отвечают определениями без практического примера.
• Путают props и state в реальных задачах.
• Неверно задают зависимости в useEffect.
• Ставят index как key в динамических списках.
• Плохо объясняют асинхронность (Promise, event loop).
• Игнорируют семантику HTML и доступность.

Как отвечать на React-собеседовании уверенно

1. Стройте ответ по модели: что это -> зачем -> пример из кода.
2. Если не знаете глубину, честно обозначьте рамку и покажите базу.
3. Говорите про компромиссы: производительность, поддерживаемость, простота.
4. Привязывайте теорию к задачам проекта, а не к абстракциям.
5. Завершайте ответ коротким выводом, чтобы интервьюер видел структуру мышления.

FAQ

Сколько времени нужно на подготовку Junior React к первому офферу?

Обычно 4-8 недель плотной практики: теория + задачи + пробные интервью. Срок зависит от текущей базы JavaScript и количества часов в неделю.

Что важнее на собеседовании: алгоритмы или прикладной React?

Для типичного Junior React чаще решают прикладные задачи: компоненты, хуки, API, верстка, базовый JS. Но базовая алгоритмическая грамотность и умение мыслить структурно всегда дает плюс.

Итоги

Эта статья закрывает ключевые вопросы для Junior React собеседования по всем базовым блокам: React core, hooks, архитектура, JavaScript, HTML/CSS, HTTP/API, Git и практика. Используйте материал как чеклист: пройдите каждый раздел, проговорите ответы вслух и закрепите на мини-задачах. Чтобы закрепить навык на реальном формате интервью, тренируйтесь на нашей платформе.