Frontend React — техническое интервью
60 минут, middle → senior. React 18+, TypeScript, состояние, производительность, вёрстка.
- Questions
- 14
- Live coding
- 2
Разогрев: опыт и контекст
Опыт с React
Сколько работаете с 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
Reconciliation
Что происходит при 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 минуты.
Правила хуков
Почему хуки нельзя вызывать в условиях и циклах?
Scoring rubric (0–10)
3–5: «Так написано в доке». 6–8: Порядок вызовов фиксирован; React сопоставляет вызовы по индексу. 9–10: Связь с fiber; custom hooks; eslint-plugin-react-hooks. Красный флаг: предлагает хук внутри if как норму.
Interviewer notes
3 минуты.
useEffect и зависимости
Когда 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 мин.
Где держать state
Как решаете, поднимать 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 минуты.
Производительность
Какие инструменты и приёмы используете, чтобы найти лишние ререндеры?
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 минут.
Практика: живой код
useDebouncedValue
Напишите хук 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 минут.
Group by key
Реализуйте функцию 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 и доступность
Доступность
Как сделать модальное окно доступным с клавиатуры?
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 минуты.
Вёрстка
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 минуты.
Инженерная культура и вопросы
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