Собеседование React смешивает специфику фреймворка — хуки, рендеринг, состояние — с основами JavaScript, по которым видно, понимаете ли вы, что React делает под капотом. Ниже — самые частые вопросы с эталонными ответами.
К каждому вопросу — эталонный ответ, с которым можно сравнить свой.
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 кодом и очень больших форм, где рендер на каждое нажатие клавиши слишком дорог.
useEffect выполняется после того, как рендер закоммичен на экран, и перезапускается, когда меняется значение в массиве зависимостей. Возврат функции из него регистрирует очистку, которую React вызывает перед следующим запуском и при размонтировании — там отменяют подписки, таймеры и незавершённые запросы. Отсутствие очистки — типичная причина утечек памяти и обновлений состояния у размонтированного компонента.
Prop drilling — это передача данных через компоненты, которые их не используют, только чтобы добраться до глубокого потомка. Context решает проблему для значений, действительно глобальных для поддерева: тема, локаль, текущий пользователь. Для часто меняющихся данных лучше подходит стейт-библиотека или композиция — передача элементов через children, потому что context перерисовывает всех потребителей при каждом изменении.
=== сравнивает значение и тип без преобразований, а == сначала приводит операнды к общему типу, из-за чего null == undefined истинно, и [] == false тоже истинно. Coercion — это и есть неявное приведение, и правила его достаточно сложны, чтобы мало кто помнил их под давлением. Используйте === везде; единственное частое исключение — x == null, чтобы поймать сразу null и undefined.
На собеседовании ты говоришь вслух под давлением. Кем задаст эти же вопросы, оценит каждый ответ и покажет, что именно подтянуть.
Пройти интервью React Frontend →