Практика React-собеседований: вопросы, которые отделяют джуна от мидла

React-собеседования на удивление предсказуемы. Везде всплывают одни и те же восемь-девять тем, и разница между офером джуну и мидлу почти никогда не в количестве известных API — она в умении объяснить, почему React ведёт себя так, а не иначе. Разбираем, что спрашивают и как звучит сильный ответ.

Ментальная модель: почему это перерисовалось?

Самый показательный React-вопрос — «что вызывает ре-рендер компонента?». Изменение состояния, ре-рендер родителя или изменение значения контекста — и, что критично, ре-рендер родителя перерисовывает детей даже при идентичных пропсах, если ребёнок не мемоизирован. Добавьте ловушку, которую большинство упускает: инлайновый объект или стрелочная функция в пропсах создают новую ссылку на каждом рендере и тихо обнуляют React.memo.

Если вы ещё объясните реконсиляцию и зачем нужны ключи — что индекс как ключ ломается при переупорядочивании списка, потому что React сопоставляет элементы по ключу, а не по позиции, — вы уже отвечаете выше джуна.

Хуки в том порядке, в каком их спрашивают

• useState — батчинг и зачем нужен функциональный апдейтер, когда следующее значение зависит от предыдущего.
• useEffect — массив зависимостей, функция очистки и гонки, когда запрос завершается после того, как компонент уехал дальше. Скажите «отменить запрос или проигнорировать устаревший ответ в cleanup» — и вопрос закрыт.
• useMemo и useCallback — не только что экономят, но и чего стоят. Зрелый ответ: «я не оборачиваю всё подряд; мемоизирую, когда профилирование показывает реальную стоимость или когда ссылка идёт в мемоизированного ребёнка».
• useRef — мутабельные значения, которые переживают рендеры, не вызывая их.
• Кастомные хуки — ждите, что один попросят написать вживую: обычно фетчинг или debounce.

Управление состоянием без догм

Вопрос редко звучит как «Redux или Zustand?» и почти всегда как «где должно жить это состояние?». Хороший ответ начинается с локального, поднимает выше только когда двум компонентам оно правда нужно, использует контекст для редко меняющихся глобальных значений вроде темы или пользователя и берёт библиотеку серверного кеша вроде TanStack Query для всего, что приходит из API, — потому что серверные данные это кеш, а не состояние приложения. Произнесите эту фразу — и вы закрыли большую часть ожидаемого.

Современный React: серверные компоненты и Suspense

В 2026-м команды на Next.js ждут, что вы объясните границу сервер/клиент: серверные компоненты рендерятся на сервере и не отправляют JavaScript в браузер, клиентские отвечают за интерактивность и состояние, а "use client" помечает границу, а не один файл. Знайте, почему через эту границу нельзя передать функцию пропсом, что делает Suspense, пока ждёт, и примерно для чего useTransition. Даже если команда ещё не на App Router, это читается как актуальность.

Лайв-кодинг

Типовые задачи: поле поиска с debounce, список с пагинацией и состояниями загрузки и ошибки, контролируемая форма с валидацией или небольшой рефакторинг компонента. Комментируйте по ходу, обрабатывайте пустое состояние и ошибку без напоминания — одно это поднимает многих кандидатов на уровень выше — и чистите эффекты. Закончили раньше — скажите, что бы вы протестировали.

Как тренироваться по-настоящему

Объяснить ре-рендеры вслух сложнее, чем узнать правильное объяснение в статье. Поставьте таймер и ответьте на «что вызывает ре-рендер?» за шестьдесят секунд без подсказок, потом то же самое про эффекты и мемоизацию. Полное мок-интервью фронтендера на языке реального собеседования превращает эти объяснения в то, что вы выдаёте под давлением, а не в то, о чём вы знаете, что знаете.