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