Senior React Frontend — вопросы на собеседовании React разработчика

Что такое замыкание в JavaScript? Приведите пример.

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

Объясните event loop: как работают microtasks и macrotasks?

Стек вызовов выполняет синхронный код до конца, затем event loop полностью вычерпывает очередь микрозадач — колбэки промисов и queueMicrotask — и только потом берёт одну макрозадачу вроде таймера или I/O-колбэка. Поэтому цепочка промисов разрешается раньше, чем setTimeout с нулевой задержкой. Этим же объясняется, почему бесконечный поток микрозадач замораживает отрисовку, а цепочка таймеров — нет.

Зачем нужен key в списках? Почему не стоит использовать index?

Ключи позволяют React сопоставить детей между рендерами, чтобы перемещать узлы DOM, а не пересоздавать их, сохраняя состояние и фокус. Индекс массива ломает это при переупорядочивании или вставке, потому что индекс 0 теперь указывает на другой элемент — React переиспользует не тот узел DOM, и состояние компонента оказывается не в той строке. Правильный ключ — стабильный идентификатор из данных.

Что такое controlled и uncontrolled компоненты?

Управляемый инпут берёт значение из состояния React и обновляется через onChange, поэтому состояние остаётся единственным источником правды, а валидация и форматирование делаются прямолинейно. Неуправляемый хранит значение в DOM, и вы читаете его через ref по необходимости. Управляемый — выбор по умолчанию; неуправляемый подходит для файловых инпутов, интеграции с не-React кодом и очень больших форм, где рендер на каждое нажатие клавиши слишком дорог.

Как работает useEffect? Что такое cleanup-функция?

useEffect выполняется после того, как рендер закоммичен на экран, и перезапускается, когда меняется значение в массиве зависимостей. Возврат функции из него регистрирует очистку, которую React вызывает перед следующим запуском и при размонтировании — там отменяют подписки, таймеры и незавершённые запросы. Отсутствие очистки — типичная причина утечек памяти и обновлений состояния у размонтированного компонента.

Что такое prop drilling и как его избежать?

Prop drilling — это передача данных через компоненты, которые их не используют, только чтобы добраться до глубокого потомка. Context решает проблему для значений, действительно глобальных для поддерева: тема, локаль, текущий пользователь. Для часто меняющихся данных лучше подходит стейт-библиотека или композиция — передача элементов через children, потому что context перерисовывает всех потребителей при каждом изменении.

В чём разница между == и ===? Что такое coercion?

=== сравнивает значение и тип без преобразований, а == сначала приводит операнды к общему типу, из-за чего null == undefined истинно, и [] == false тоже истинно. Coercion — это и есть неявное приведение, и правила его достаточно сложны, чтобы мало кто помнил их под давлением. Используйте === везде; единственное частое исключение — x == null, чтобы поймать сразу null и undefined.