Собеседование React смешивает специфику фреймворка — хуки, рендеринг, состояние — с основами JavaScript, по которым видно, понимаете ли вы, что React делает под капотом. Ниже — самые частые вопросы с эталонными ответами. Middle: более глубокое понимание, оптимизацию и реальные рабочие ситуации.
Хуки должны вызываться на верхнем уровне компонента или кастомного хука и в одинаковом порядке на каждом рендере. React хранит состояние хуков в массиве, индексируемом порядком вызова, поэтому условный хук сдвигает все последующие индексы, и компонент начинает читать состояние чужого хука. Именно поэтому существует правило линтера — падение здесь тихое и крайне запутанное.
useMemo кеширует вычисленное значение, useCallback кеширует идентичность функции, а React.memo пропускает повторный рендер компонента, если пропсы поверхностно равны. Они работают в связке: мемоизировать колбэк бессмысленно, если ребёнок не обёрнут в React.memo. Все три стоят памяти и времени на сравнение, поэтому применять их надо к измеренным проблемам, а не по умолчанию.
Замыкание — это функция вместе с областью видимости, в которой она была создана, поэтому она сохраняет доступ к тем переменным и после выхода из внешней функции. В React этим объясняется устаревшее состояние: эффект или колбэк захватывает значение состояния из того рендера, в котором был создан, и заведённый один раз интервал продолжает читать начальное значение. Лечится функциональным обновлением состояния или добавлением зависимости в эффект.
Стек вызовов выполняет синхронный код до конца, затем event loop полностью вычерпывает очередь микрозадач — колбэки промисов и queueMicrotask — и только потом берёт одну макрозадачу вроде таймера или I/O-колбэка. Поэтому цепочка промисов разрешается раньше, чем setTimeout с нулевой задержкой. Этим же объясняется, почему бесконечный поток микрозадач замораживает отрисовку, а цепочка таймеров — нет.
Ключи позволяют React сопоставить детей между рендерами, чтобы перемещать узлы DOM, а не пересоздавать их, сохраняя состояние и фокус. Индекс массива ломает это при переупорядочивании или вставке, потому что индекс 0 теперь указывает на другой элемент — React переиспользует не тот узел DOM, и состояние компонента оказывается не в той строке. Правильный ключ — стабильный идентификатор из данных.
Управляемый инпут берёт значение из состояния React и обновляется через onChange, поэтому состояние остаётся единственным источником правды, а валидация и форматирование делаются прямолинейно. Неуправляемый хранит значение в DOM, и вы читаете его через ref по необходимости. Управляемый — выбор по умолчанию; неуправляемый подходит для файловых инпутов, интеграции с не-React кодом и очень больших форм, где рендер на каждое нажатие клавиши слишком дорог.
useEffect выполняется после того, как рендер закоммичен на экран, и перезапускается, когда меняется значение в массиве зависимостей. Возврат функции из него регистрирует очистку, которую React вызывает перед следующим запуском и при размонтировании — там отменяют подписки, таймеры и незавершённые запросы. Отсутствие очистки — типичная причина утечек памяти и обновлений состояния у размонтированного компонента.
Prop drilling — это передача данных через компоненты, которые их не используют, только чтобы добраться до глубокого потомка. Context решает проблему для значений, действительно глобальных для поддерева: тема, локаль, текущий пользователь. Для часто меняющихся данных лучше подходит стейт-библиотека или композиция — передача элементов через children, потому что context перерисовывает всех потребителей при каждом изменении.
На собеседовании ты говоришь вслух под давлением. Кем задаст эти же вопросы, оценит каждый ответ и покажет, что именно подтянуть.
Пройти интервью Middle React Frontend →