10 вопросов на собеседовании React

Недавно, один разработчик собрал в репозитории 500 вопросов на собеседовании по React (https://github.com/sudheerj/reactjs-interview-questions). Некоторые из них мне показались весьма занятными, а для некоторых, как я считаю, места в современном мире веб-разработки уже нет. В этой статье разберём 10 самых интересных из них, узнаем правильные ответы, а так же, я поделюсь личным мнением о каждом из них

1. Что такое стэйт и пропс в React ?

Стэйт (state) - это объект, который хранит информацию о текущем состоянии компонента. В нём может быть заключена любая информация, которую разработчик хочет использовать для корректной работы компонента. Любое изменение стэйта влечет за собой ререндер компонента.

Пропс (props) - по своей сущности, это любой параметр, с которым может быть вызван компонент. Существуют зарезервированные пропсы (children) и пользовательские пропсы - любое значение, которое разработчик передает в компонент.

Я считаю, что данный вопрос актуален ТОЛЬКО для собеседования разработчиков уровня Junior. Любой разработчик у которого есть хотя бы месяц опыта работы на коммерции с React.js легко объяснит эти два термина, поэтому, нет смысла спрашивать такие примитивные вещи у более опытных кандидатов.

2. Зачем использовать callback в setState() ?

Использование callback в setState() позволяет обращаться к актуальному состоянию стэйта при его обновлении. Данный код не сработает так, как нужно, пока мы не будем использовать callback:

// Прибавить число 6 к переменной стэйта

const add = () => {
  setState(counter + 1)
  setState(counter + 2)
  setState(counter + 3)
}  // не сработает, всегда будет прибавляться 3 ввиду асинхронности setState

const add = () => {
  setState(counter => counter + 1)
  setState(counter => counter + 2)
  setState(counter => counter + 3)
} // будет работать корректно

Конечно, пример в реальных кейсах не встречается, однако, он прекрасно демонстрирует использование коллбэк-функций в setState.

На моей практике, не так много разработчиков уделяют должное внимание данному подходу. Лично встречал ребят, которые оценивали себя как Middle/Middle+ разработчики и не знали о данном подходе. Хороший вопрос, однако, лучше всего его задавать на примере задачи (к примеру, код выше можно преобразовать в задачку и попросить кандидата исправить его).

3. Что такое VDOM ?

VDOM (Virtual Document Object Model) - основная сущность, с которой работает React. VDOM является полной копией DOM-дерева и необходим для того, чтобы проверять необходимость изменения реального DOM. Так как рендер - самая затратная операция для браузера, концепция React с использованием VDOM для регистрации изменения существенно ускоряет работу веб-приложения.

Данный вопрос очень и очень актуален, т.к. существует огромное количество разработчиков-практиков - ребят, которые неплохо пишут код, но абсолютно не знают, как он работает "под капотом". В общих чертах, любой джун должен уметь объяснить, что такое VDOM и для чего он нужен. Более глубокие познания в данном вопросе можно начинать требовать с кандидатов уровня Middle/Middle+.

4. Что такое HOC (High-Order Components) ?

HOC - это компонент высшего порядка, целью которого является использование специального пропа children и манипуляция с ним. Данный тип компонента в основном используется для добавления какой-нибудь кастомной логики к дочерним компонентам. Любой Provider из популярных библиотек (redux, react-context, styled-components и др.) является HOC.

Соглашусь, что данный вопрос имеет место быть в собеседовании, однако, требовать полного и академичного ответа на него не стоит. Я бы лично перефразировал данный вопрос в нечто такое: "Приведи пример любого High Order Components". Если кандидат способен без долгих раздумий ответить, значит он точно знает и использует данный подход для организации своих компонентов.

5. Почему React использует className, а не class?

Так как JSX является расширением Javascript, а в Javascript есть ключевое слово class, разработчики данного синтаксиса решили использовать className.

Не вижу особого смысла в данном вопросе. Максимум, что он сможет показать, так это уровень саморазвития и/или любопытства разработчика. Если он знает про такие мелочи, значит человек действительно или любознателен от природы, или горит своим делом настолько, что хочет знать всё и обо всём.

6. Что такое key в React ?

key - специальный проп, добавляемый к компоненту, который служит его уникальным идентификатором в процессе пересчёта (Reconciliation). Основные требования к key: уникальность и стабильность, иначе говоря, key не должен меняться в зависимости от перерендера компонента.

Важный вопрос. В зависимости от уровня кандидата этот кейс можно расширить дополнительными вопросами:

можно ли использовать Index в качестве key ?
как React проставляет key по дефолту ?
существует ли случай, когда key нужен ВНЕ циклического рендера ?

Данный вопрос раскроет уровень понимания кандидатом общего механизма работы React и является одним из основных, которые задаю на собеседованиях я сам.

7. Что может вызвать rerender компонента ?

Для ререндера компонента в React существует всего 4 причины:

Изменение стэйта
Изменение пропсов
Ререндер родителя
forceUpdate

К данному вопросу моё отношение 50/50. С одной стороны - важно понимать, что кандидат знает, почему компонент может перерендериться. С другой стороны - формулировка достаточно простая и актуальна только для кандидатов уровня Junior/Junior+, для более опытных ребят это будет слишком просто.

8. Как использовать <label> в React ?

Синтаксис label в JSX отличается от аналогичного синтаксиса в HTML ввиду того, что "for" является ключевым словом в Javascript, поэтому необходимо использовать htmlFor.

Данный вопрос - лучший аналог вопроса №5. Если кандидат знает про такие нюансы использования тэгов в JSX, значит он как минимум сталкивался с такими кейсами и понимает, почему "for" не работает для <label> в JSX. Вопрос не является основным, но задать его после определения термина JSX будет неплохой добивкой для блока.

9. Что такое renderProp в React ?

renderProp - механизм делегирования логики рендера родительскому компоненту. Данный подход позволяет не описывать логику работы тупых компонентов в отдельном файле, а вынести её в компонент-родитель.

<DataProvider render={(data) => <h1>{`Hello ${data.target}`}</h1>} />

Вопрос неплохой, однако, я бы дополнил его вопросом о плюсах и минусах данного подхода. Если кандидат способен конструктивно изложить свои мысли по поводу использования данного механизма, к примеру, почему он старается избегать данных кейсов - значит перед нами весьма и весьма перспективный разработчик.

10. Почему нельзя изменять пропсы из дочернего компонента?

Ввиду философии React, пропсы должны быть иммутабельными. Простыми словами, дочерний компонент не имеет возможности воздействовать на родительских путём прямого изменения его состояния. Если вдруг это всё таки необходимо - хорошим решением является дополнительный проп-callback, который выполняет определённую логику изменения пропсов, заложенную родительским компонентом.

Вопрос нацелен так же на понимание философии React. Одним из основных принципов является Top-Down - пропсы регулируют поведение дочернего компонента, а не дочерний компонент диктует поведение пропсов. Вопрос может быть задан кандидатам любого уровня, а развернутость ответа укажет на уровень кандидата.

Заключение

Я разобрал для тебя вопросы, которые мне показались наиболее интересными из списка. В следующей статье на эту тему мы продолжит разбирать вопросы с собесов и пообщаемся на тему дополнительных библиотек в React, таких как React Router, Redux и др.
Подписывайся на канал, ставь лайки - так статьи будут выходить ещё чаще!