Frontend React — техническое интервью

60 минут, middle → senior. React 18+, TypeScript, состояние, производительность, вёрстка.

Questions
14
Live coding
2

Разогрев: опыт и контекст

  1. Недавний проект

    BehavioralEasy

    Расскажите о недавнем проекте, где вы были ключевым разработчиком. Что делали вы лично?

    Scoring rubric (0–10)
    3–5: Описывает проект общими словами, свою роль называет расплывчато («участвовал в команде»).
    6–8: Конкретная задача, стек, результат; понятна личная зона ответственности.
    9–10: Контекст бизнеса, trade-offs, метрики успеха; честно говорит, что делали другие.
    Красный флаг: не может назвать ни одного решения, которое принимал сам.
    Interviewer notes
    Follow-up: что бы сделали иначе? 3–4 минуты.
  2. Мотивация смены

    BehavioralEasy

    Почему сейчас рассматриваете новые возможности? Что ищете в следующей роли?

    Scoring rubric (0–10)
    3–5: «Хочу роста / денег» без конкретики.
    6–8: Понятные критерии (стек, продукт, процессы); не toxic про текущего работодателя.
    9–10: Осознанный fit: что даст компания кандидату и наоборот.
    Красный флаг: только негатив про прошлые команды, обвиняет всех кроме себя.
    Interviewer notes
    Не давить — достаточно 2–3 минут.
  3. Опыт с React

    BehavioralEasy

    Сколько работаете с React? Какие версии и стейт-менеджеры использовали?

    Scoring rubric (0–10)
    3–5: «Пару лет React», без деталей про версии.
    6–8: React 16.8+ / 18, hooks; Redux/Zustand/React Query — что и зачем.
    9–10: Миграции (class → hooks, CRA → Vite); осознанный выбор стейт-слоя.
    Красный флаг: путает React с «просто JavaScript на фронте» на middle+.
    Interviewer notes
    2–3 минуты.

React и TypeScript

  1. Reconciliation

    TheoryMedium

    Что происходит при setState в React? Зачем нужны keys в списках?

    Scoring rubric (0–10)
    3–5: «React перерисовывает компонент».
    6–8: Virtual DOM diff; batching; keys помогают сопоставить элементы.
    9–10: Concurrent features на бытовом уровне; почему index as key ломает state.
    Красный флаг: «React всегда перерисовывает весь DOM».
    Interviewer notes
    4 минуты.
  2. Правила хуков

    TheoryMedium

    Почему хуки нельзя вызывать в условиях и циклах?

    Scoring rubric (0–10)
    3–5: «Так написано в доке».
    6–8: Порядок вызовов фиксирован; React сопоставляет вызовы по индексу.
    9–10: Связь с fiber; custom hooks; eslint-plugin-react-hooks.
    Красный флаг: предлагает хук внутри if как норму.
    Interviewer notes
    3 минуты.
  3. useEffect и зависимости

    TheoryMedium

    Когда useEffect срабатывает повторно? Что будет, если забыть массив зависимостей?

    Scoring rubric (0–10)
    3–5: «Когда deps меняются» без примеров.
    6–8: [] vs omit vs [a,b]; stale closure; cleanup.
    9–10: useLayoutEffect; когда fetch лучше в event handler / React Query.
    Красный флаг: «пустой массив = никогда не запускается».
    Interviewer notes
    Follow-up: infinite loop из-за object dep. 4 мин.
  4. Где держать state

    TheoryMedium

    Как решаете, поднимать state вверх или оставить локально? Когда Context, когда внешний store?

    Scoring rubric (0–10)
    3–5: «Поднимаем, если нужно нескольким».
    6–8: Colocation; prop drilling; Context для редко меняющихся данных.
    9–10: Zustand/Redux для cross-cutting; server state vs UI state.
    Красный флаг: «весь state в Redux всегда».
    Interviewer notes
    4 минуты.
  5. Производительность

    TheoryHard

    Какие инструменты и приёмы используете, чтобы найти лишние ререндеры?

    Scoring rubric (0–10)
    3–5: «React DevTools» без конкретики.
    6–8: Profiler; memo/useMemo/useCallback когда уместно; key stability.
    9–10: Virtualization; code splitting; измеряет before/after; знает про false sharing в memo.
    Красный флаг: memo на всё подряд «для скорости».
    Interviewer notes
    5 минут.

Практика: живой код

  1. useDebouncedValue

    Coding taskMediumCode

    Напишите хук useDebouncedValue(value, delayMs), который возвращает значение с задержкой.

    Scoring rubric (0–10)
    3–5: setTimeout без cleanup.
    6–8: useEffect + clearTimeout; корректные deps.
    9–10: Обсуждает leading/trailing edge; тестируемость.
    Красный флаг: busy loop или setInterval без clear.
    Interviewer notes
    15 минут.
  2. Group by key

    Coding taskEasyCode

    Реализуйте функцию groupBy(items, keyFn), возвращающую Record<string, T[]>.

    Scoring rubric (0–10)
    3–5: Работает только для string keys без edge cases.
    6–8: reduce + правильная типизация; пустой массив для нового ключа.
    9–10: Object.groupBy или Map; immutable vs mutable обсуждает.
    Красный флаг: мутирует входной массив.
    Interviewer notes
    10 минут.

UI и доступность

  1. Доступность

    TheoryMedium

    Как сделать модальное окно доступным с клавиатуры?

    Scoring rubric (0–10)
    3–5: «Добавить tabindex».
    6–8: focus trap, Esc, aria-modal, role=dialog, return focus.
    9–10: aria-labelledby; inert/portal; тест с screen reader.
    Красный флаг: div onClick без role/button.
    Interviewer notes
    4 минуты.
  2. Вёрстка

    TheoryEasy

    Flex vs Grid — когда что выбираете для типичного dashboard layout?

    Scoring rubric (0–10)
    3–5: «Grid для сеток» без nuance.
    6–8: Flex для 1D alignment; Grid для 2D; gap vs margin hacks.
    9–10: Subgrid/container queries; responsive без лишних breakpoints.
    Красный флаг: только float/table layout в 2026.
    Interviewer notes
    3 минуты.

Инженерная культура и вопросы

  1. Конфликт в команде

    BehavioralMedium

    Был ли случай технического или процессного конфликта в команде? Как разрешили?

    Scoring rubric (0–10)
    3–5: «Конфликтов не было» или история без своих действий.
    6–8: Описывает ситуацию, свою позицию, итог; без обвинений.
    9–10: Фокус на данных/компромиссе; что изменил в процессе после.
    Красный флаг: «я был прав, они нет» без рефлексии.
    Interviewer notes
    Follow-up: чему научились? 4 минуты.
  2. Вопросы к нам

    BehavioralEasy

    Какие вопросы у вас к нам про команду, продукт или процессы?

    Scoring rubric (0–10)
    3–5: «Нет вопросов» или только про отпуск/ЗП.
    6–8: 2–3 содержательных вопроса про продукт, команду, релизы.
    9–10: Вопросы показывают, что изучил компанию; уточняет ожидания от роли.
    Красный флаг: нулевой интерес к продукту на middle+.
    Interviewer notes
    Оставить 3–5 минут в конце интервью.

Run an interview with this template

Sign up free: copy the template to your org, schedule an interview, and run it in a room with live coding.

Get started in FlashTalk