Собеседование React смешивает специфику фреймворка — хуки, рендеринг, состояние — с основами JavaScript, по которым видно, понимаете ли вы, что React делает под капотом. Ниже — самые частые вопросы с эталонными ответами. Junior: базовая теория, определения и простые практические кейсы.
Он говорит React, какие значения читает эффект, чтобы эффект перезапускался только при их изменении. Пустой массив означает один запуск после монтирования; отсутствие массива вообще — запуск после каждого рендера, и именно так начинаются бесконечные циклы. Пропустить используемое значение — вторая ошибка: эффект замыкается на устаревшем значении и пользуется им вечно.
Key говорит React, какой элемент нового списка соответствует какому в старом, чтобы можно было переместить узел, а не пересобрать его. Индекс это ломает, как только список меняет порядок или элемент удаляют: React сопоставляет по позиции, и нужное состояние остаётся у ненужного компонента — отмеченный чекбокс перескакивает на другую строку.
Props приходят от родителя и в получающем компоненте доступны только на чтение. State принадлежит компоненту, и его изменение вызывает перерисовку. Если одно значение нужно двум компонентам, его место — в ближайшем общем родителе, откуда оно спускается пропсами; это и называется поднятием состояния.
React решает, перерисовывать ли, сравнивая старое значение с новым по ссылке. Push в массив ссылку не меняет, поэтому React делает вывод, что ничего не произошло, и пропускает рендер — данные обновились, экран нет. Вместо мутации значение заменяют: новый массив, новый объект.
У контролируемого поля значение задаётся состоянием React, а onChange пишет обратно, поэтому состояние — единственный источник истины. У неконтролируемого значение живёт в DOM и читается через ref. Контролируемый берут по умолчанию, потому что валидация, форматирование и условная блокировка требуют значения во время рендера; неконтролируемый нужен там, где перерисовка на каждое нажатие расточительна.
React различает хуки по порядку вызова, а не по имени — первый useState в компоненте это всегда одна и та же ячейка состояния. Хук внутри if меняет этот порядок между рендерами, и React отдаёт не то состояние не тому хуку. Отсюда правило: вызывать безусловно на верхнем уровне, а условие переносить внутрь хука.
Он выходит досрочно: если новое значение идентично текущему по Object.is, перерисовки не будет. Поэтому установка примитива в то же число бесплатна, а установка объекта в структурно такой же, но заново созданный — нет: ссылка другая, и React перерисует, хотя визуально ничего не изменилось.
На собеседовании ты говоришь вслух под давлением. Кем задаст эти же вопросы, оценит каждый ответ и покажет, что именно подтянуть.
Пройти интервью Junior React Frontend →