Найти тему

ТОП 10 вопросов на собеседовании ReactJS

Оглавление

Вопросы на собеседовании на позицию Фронтенд разработчика могут быть самые разные. Обычно интервьюер имеет утвержденный список вопросов, стандартный для собеседований в конкретную компанию. Но может задать и дополнительные вопросы. Это могут быть вопросы, связанные с его крайней задачей, или ему захотелось узнать ваше мнение. Или это может быть стандартный вопрос, чтобы узнать действительно ли вы знаете React? и примерно определить на каком уровне. Могут быть вопросы о third-party библиотеках - redux, mobx, saga, thunk. Может быть что-то и про JavaScript.

Очевидно, что интервью для junior/midddle/senior будут различаться. Практически любой вопрос можно задать кандидату любого уровня, а вот ответ может отличаться по глубине, по деталям, более опытный может привести примеры corner case’ов и т.д.

React развивается. Сейчас вряд ли будут спрашивать много про классовые компоненты. Если только это не легаси проект. Либо могут быть специфичные вопросы, которые только немного касаются темы классовых компонентов.

Virtual DOM

Виртуальный DOM (VDOM) — это подход для при котором "виртуальное" представление пользовательского интерфейса хранится в памяти. И этот виртуальный DOM синхронизируется с "настоящим" DOM. В React для этого используется библиотеки (react-dom). Сам этот процесс называется согласованием (reconciliation).

Также React использует внутренние объекты, называемые "волокнами" (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации "виртуального DOM" в React.

Fiber - это JS объект который содержит информацию о компоненте его входные параметры и результат.

В чем разница memo и useMemo

memo — это компонент высшего порядка.

Он нужен для повышения производительности и подходит для случаев, когда компонент рендерит одинаковый результат при одних и тех же значениях пропсов. В этом случае результат будет мемоизирован. Это значит, что React будет использовать результат последнего рендера, избегая повторного рендеринга.

При использовании memo пропсы по умолчанию сравниваются поверхностно. Можно передать свою функцию сравнения в качестве второго аргумента (если нужно контролировать сравнение).

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

Pure Components (Чистые компоненты)

Компонент является чистым, если он гарантированно возвращает один и тот же результат при одинаковых пропсах и состоянии.

Для чего нужны чистые компоненты и чем они лучше? Чистые компоненты имеют улучшенную производительность за счет поверхностного сравнения пропсов и состояния.

Разборы следующих вопросов с примерами кода