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

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

Что вызывает обновление компонента?

Обновление компонента вызывают изменение состояния и изменение пропсов. В классовых компонентах еще есть forceUpdate (следует использовать только в крайних случаях). Изменение состояния не будет приводить к обновлениям, если новое значение состояния не изменилось. Если мутировать состояние напрямую это тоже не приведет к повторному рендеру В функциональных компонентах встроенного аналога функции forceUpdate нет. Но можно написать свой.

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
  forceUpdate();
}

Когда родительский компонент рендерится, дочерние компоненты рекурсивно тоже будут ререндериться. Скорее всего некоторые компоненты в этой цепочке вернут тот же самый результат, т.е. не изменятся. Поэтому они не будут перерисованы в DOM. Но React все равно должен сделать рендер, чтобы определить эти различия, сравнить и определить нужна перерисовка или нет.

Virtual DOM

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

setState синхронный или асинхронный?

setState - асинхронный. setState говорит React запустить следующую итерацию рендера. Однако React также может оптимизировать это процесс и несколько вызовов setState - приведут к одному рендеру.

Что такое JSX

JSX - это дополнение к синтаксису JS, который позволяет писать HTML в React компонентах. JSX — синтаксический сахар для функции React.createElement(component, props, ...children). Этот JSX-код:

return <Component />

…конвертируется в:

return React.createElement(SomeComponent, {a: 42, b: "testing"}, "Text Here")

…и результатом будет объект:

{
  type: SomeComponent,
  props: {a: 42, b: "testing"},
  children: ["Text Here"]
}

За правильный парсинг и дальнейшую обработку отвечает babel. Если название типа элемента начинается с маленькой буквы, он ссылается на встроенный компонент, например, <div> или <span>, что в результате приведет к тому, что в React.createElement будет передана строка 'div' или 'span'. Типы, начинающиеся с заглавной буквы, такие как <SomeComponent />, компилируются в React.createElement(SomeComponent) и соответствуют компоненту, который был объявлен или импортирован в JavaScript-файле. React можно использовать без JSX. Это особенно удобно, когда нет необходимости настраивать транспиляцию в процессе сборки.

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

memo — это компонент высшего порядка. Он нужен для повышения производительности и подходит для случаев, когда компонент рендерит одинаковый результат при одних и тех же значениях пропсов. В этом случае результат будет мемоизирован. Это значит, что React будет использовать результат последнего рендера, избегая повторного рендеринга. При использовании memo пропсы по умолчанию сравниваются поверхностно. Можно передать свою функцию сравнения в качестве второго аргумента (если нужно контролировать сравнение). useMemo - это хук, который возвращает мемоизированное значение функции, которая делает долгие вычисления. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере. useMemo будет повторно вычислять мемоизированное значение только тогда, когда значение какой-либо из зависимостей изменилось.

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

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

Для классовых компонентов

shouldComponentUpdate - необязательный метод жизненного цикла. Если этот метод возвращает false, React пропустит рендеринг компонента. Он может содержать любую логику сравнения пропосв и состояния с их предыдущими значениями. React.PureComponent может быть использован вместо Component + shouldComponentUpdate.

Для функциональных и для классовых компонентов

React.memo() - компонент высшего порядка. В качестве первого аргумента получает компонент и возвращает новый компонент. По умолчанию сравнение происходит поверхностное. Однако, вторым аргументом можно передать свой кастомный компаратор - функцию сравнения (arePropsEqual()) Поверхностное сравнение происходит при помощи оператора ===.

Вопросы о стэйт менеджерах

Отличия mobx и react

• Redux использует JS-объект в качестве структуры данных для хранения данных состояния. И отслеживание изменений происходит явно вручную. MobX использует observables, и чтобы следить за изменениями используются неявные подписки.
• Redux использует чистые функции - очевидные изменения состояния. В MobX сложнее отследить изменения и сложнее дебажить.
• В Mobx меньше бойлерплейт кода.
• В Mobx может быть больше одного стора, в Redux один большой стор.
• и т.д.

Особенности использования Context API + useReducer вместо Redux

Безусловно, useReducer() позволяет обрабатывать обновления состояния с помощью редьюсеров без необходимости использования хранилища Redux, а useContext() позволяет передавать значения через дерево React без необходимости передавать их вниз через каждый уровень компонентов в качестве пропсов. Однако, как и в случае с самим Context API, хук useReducer() не имеет дополнительных возможностей, которые предоставляет Redux. Нет ни отладки с перемещением во времени, ни middleware, ни специальных DevTools Extension, позволяющего увидеть, как состояние менялось с течением времени.

Что такое Компонент высшего порядка (Higher-Order Component, HOC)?

Функция, которая получает компонент в качестве аргумента и возвращают модифицированный компонент - называется компонентом высшего порядка. Она применяется для повторного использования логики (помогает следовать принципу DRY). Хорошо подходит для инжектирования зависимостей. HOC - работает как фабрика компонентов. HOC может принимать конфигурации в качестве аргументов и возвращать компонент или семейство компонентов. Через HOC можно скрыть источник данных для компонентов, которые выглядят одинаково, однако обращаются к разным источникам данных.

Когда бы вы использовали классовый компонент вместо функционального?

Можно сформулировать этот вопрос иначе: "Что можно сделать с помощью хуков, а что нельзя?" Основные методы жизненного цикла можно имплементировать при помощи хуков. Однако пока есть функциональность, которую можно имплементировать только с помощью классовых компонентов, в будущем конечно это может измениться. Но пока не существует хуков, реализующих методы жизненного цикла getSnapshotBeforeUpdate, getDerivedStateFromError и componentDidCatch. В документации сказано, что разработчики планируют их добавить. getSnapshotBeforeUpdate вызывается прямо перед добавлением в DOM. На этом этапе некоторая информация из DOM уже доступна (например, положение прокрутки) getDerivedStateFromError вызывается после возникновения ошибки у компонента-потомка. Он получает ошибку в качестве параметра и возвращает значение для обновления состояния. Вызывается во время этапа рендера, поэтому здесь запрещены любые побочные эффекты. Можно использовать для рендеринга запасного UI в случае отлова ошибки. componentDidCatch вызывается после возникновения ошибки у компонента-потомка. Вызывается во время этапа фиксации, поэтому здесь можно использовать побочные эффекты. Можно использовать для логирования информации об отловленной ошибке.

Lazy loading, code splitting

Lazy loading - ленивая загрузка, для того чтобы загружать очередной бандл по требованию. Эта оптимизация полезна т.к. не все части приложения могут пригодится сразу же. Таким образом мы можем ускорить загрузку сайта за счет меньшего размера бандла. Бандлы - это результат работы работы сборщиков проекта (Webpack, Rollup). Сама сборка - это процесс выявления импортированных файлов и объединения их в один файл (часто называемый "bundle" или "бандл"). Этот бандл после подключения на веб-страницу загружает приложение. Однако нужно следить за размером бандла - любая подключенная библиотека добавляет лишний килобайты. И загрузка может занять слишком много времени. При помощи сборщиков проекта можно создавать несколько бандлов и загружать их по мере необходимости. Общий размер кода не уменьшится (он будет разделен на несколько частей) - однако начальная загрузка будет быстрее.

• React.lazy

const OtherComponent = React.lazy(() => import('./OtherComponent'))

Она автоматически загрузит бандл, содержащий OtherComponent, когда этот компонент будет впервые отрендерен. React.lazy принимает функцию, которая должна вызвать динамический import(). Результатом возвращённого Promise является модуль, который экспортирует по умолчанию React-компонент (export default).

• Suspense

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

• Предохранители (error boundary)

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

Как работает браузер?

Это один из самых популярных вопросов на собседовании на роль middle/senior разработчика. Обо всех шагах, которые совершает браузер при переходе на страницу вы можете найти в этом посте. Также по теме собеседований рекомендую прочитать:

• Собеседование ReactJS - вопросы и ответы
• Собеседование фронтенд разработчика. ТОП вопросов по HTTP и CORS
• Вопросы по React на собеседовании
• Полное руководство по React

• Вопросы и ответы ReactJS собеседования 2023 - Часть 1
• Вопросы и ответы ReactJS собеседования 2023 - Часть 2 (эта статья)
• Вопросы и ответы ReactJS собеседования 2023 - Часть 3

1. Что такое JSX?

• JSX — это расширение синтаксиса для JavaScript, обладающее всеми возможностями JavaScript.
• Вы можете внедрить любое выражение JavaScript в JSX, заключив его в фигурные скобки. После компиляции выражения JSX становятся обычными объектами JavaScript.
• Это означает, что вы можете использовать JSX внутри операторов if и циклов for, назначать его переменным, принимать в качестве аргументов и возвращать из функций.

2. Каков эквивалент следующего кода с использованием React.createElement?

const element = <h1 className="greeting">Hello, world!</h1>;

Эквивалент с использованием React.createElement будет выглядеть следующим образом:

const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);

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

• Основная идея redux заключается в том, что все состояние приложения хранится в одном хранилище. Store (хранилище) - это просто JavaScript объект.
• Единственный способ изменить состояние — отправить действие (action) из вашего приложения, а затем написать редьюсеры для этих действий, которые изменяют состояние.
• Весь переход состояния хранится внутри редьюсеров и не должен иметь никаких побочных эффектов.

Подробнее о Redux можно узнать в бесплатном видео-курсе о Redux.

4. Что такое store в Redux?

Store — это JavaScript объект, который содержит состояние приложения. Наряду с этим он также имеет следующие обязанности:

• Разрешает доступ к состоянию через getState().
• Позволяет обновлять состояние с помощью отправки действия dispatch(action).
• Регистрирует слушателей через subscribe(listener).
• Обрабатывает отмену регистрации слушателей с помощью функции, возвращаемой из subscribe(listener).

5. Разница между action и reducer.

• Action (действие) — это простые JavaScript объекты.
• Они должны иметь тип, указывающий тип выполняемого действия.
• По сути, действия — это некоторые данные, которые отправляются из вашего приложения в хранилище.
• Редьюсер — это просто чистая функция, которая принимает предыдущее состояние и действие и возвращает обновленное состояние.

6. Для чего используется Redux Thunk?

• Redux Thunk — это промежуточное программное обеспечение (middleware), которое позволяет вам писать создателей действий (action creator), которые возвращают функцию вместо действия (action). Что такое action creators?
• Затем thunk можно использовать для задержки отправки действия, если выполняется определенное условие. Это позволяет вам обрабатывать асинхронную диспетчеризацию действий.
• Подробнее о Redux Thunk можно узнать в полном видео-курсе о Redux Thunk.

7. Напишите кастомный хук, который можно использовать для debounce’а ввода.

// Хук useDebounce

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timeout);
    };
  }, [value]);

  return debouncedValue;
};

// Использование

const Counter = () => {
  const [value, setValue] = useState(0);
  const lastValue = useDebounce(value, 1000);

  return (
    <div>
      <p>
        Current Value: {value} | Debounced Value: {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
};

8. Напишите кастомный хук для копирования текста в буфер обмена.

// Хук useCopyToClipboard

function useCopyToClipboard(content) {
  const [isCopied, setIsCopied] = useState(false);

  const copy = useCallback(() => {
    navigator.clipboard
      .writeText(content)
      .then(() => setIsCopied(true))
      .then(() => setTimeout(() => setIsCopied(false), 1250))
      .catch((err) => alert(err));
  }, [content]);
  return [isCopied, copy];
}

// Использование
export default function App() {
  const [isCopied, copy] = useCopyToClipboard("Text to copy!");
  return <button onClick={copy}>{isCopied ? "Copied!" : "Copy"}</button>;
}

9. Как использовать хук useId для создания уникальных идентификаторов?

• useId не принимает никаких параметров.
• useId возвращает уникальную строку идентификатора, связанную с этим конкретным вызовом useId в этом конкретном компоненте.

// Использование

import { useId } from "react";

const App = () => {
  const id = useId();

  return (
    <form>
      <label htmlFor={`email-${id}`}>Email</label>
      <input type="text" id={`email-${id}`} name="email" />

      <label htmlFor={`password-${id}`}>Password</label>
      <input type="password" id={`password-${id}`} name="password" />
    </form>
  );
};

// Плохая практика - не стоит использовать в качестве key
const id = useId();

return posts.map((post) => <article key={id}>...</article>);

Подробности можно найти в статье Что за хук useId в React?.

10. Как проверить/валидировать пропсы в React?

Мы можем использовать пакет prop-types Раньше, до React v15.5, это было частью самого React.

import PropTypes from "prop-types";

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

MyComponent.propTypes = {
  name: PropTypes.string,
};

export default MyComponent;

Еще один вариант - это добавить к проекту TypeScript.

11. Приведите практический пример компонента высшего порядка в React.

• Напишем компонент высшего порядка (HOC) для отображения загрузки, пока компонент ожидает данные.
• Больше о компонентах высшего порядка можно узнать в видео Как использовать Компоненты высшего порядка React и Паттерн Render Props в ReactJS.

// Компонент высшего порядка
function WithLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return <Component {...props} />;
    return <p>Please wait, fetching your data in no time...</p>;
  };
}
export default WithLoading;

// Использование

import UserListComponent from "./UserListComponent.js"; // импорт компонента
import WithLoading from "./withLoading.js"; // импорт HOC

const ListWithLoading = WithLoading(UserListComponent); // обернем компонент в HOC

const App = () => {
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // запрос данных
    const dataFromApi = ["this is coming from API call", "don't show loader"];
    
    // в это время загрузчик будет показан в HOC
    // данные получены
    setUsers([...dataFromApi]);
    setLoading(false);
  }, []);

  return <ListWithLoading isLoading={loading} users={users} />;
};

12. Чем полезен хук useDeferredValue?

• useDeferredValue — это React хук, который позволяет вам отложить обновление части пользовательского интерфейса.
• По сути, это позволяет вам выполнять технику debounce с меньшим количеством кода.
• Подробный разбор хука useDeferredValue можно прочитать в статье Хуки useTransition и useDeferredValue в ReactJS 18.

// Использование

import { useState, useDeferredValue } from "react";
// Компонент userList получает searchText для запроса списка пользователей
import UserList from "./UserList.js";

export default function App() {
  const [searchText, setSearchText] = useState("");
  // отправить searchText по умолчанию
  const deferredQuery = useDeferredValue(searchText);

  return (
    <>
      <label>
        Search user:
        <input
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
        />
      </label>
      <div>
        <UserList searchText={deferredQuery} />
      </div>
    </>
  );
}

13. Как отследить клик за пределами компонента React?

export default function OutsideAlerter() {
  const clickMeDivRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!ref?.current?.contains(event.target)) {
        alert("You clicked outside of me!");
      }
    };

    // Добавим прослушивание событий
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      // Удалим прослушивание событий
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [clickMeDivRef]);

  return <div ref={clickMeDivRef}>Clicked me?</div>;
}

14. Почему имена компонентов React должны начинаться с заглавных букв?

В JSX имена тегов нижнего регистра считаются тегами HTML. Однако имена тегов в нижнем регистре с точкой (аксессор свойства) не являются таковыми.

• <person /> компилируется в React.createElement('person') (тег html)
• компилируется в React.createElement(Person)
• <obj.person /> компилируется в React.createElement(obj.person)

// Ошибка! Это компонент и должен начинаться с заглавной буквы
function person(props) {
  // Верно! Это использование <div> верно, т.к. div это валидный элемент
  return <div>{props.isLearning ? "Great!" : "Hello!"}</div>;
}

function App() {
  // Ошибка! React считает <person /> тэгом HTML, т.к. Не с заглавной буквы
  return <person isLearning={true} />;
}

// Верно! Это компонент и должен начинаться с заглавной буквы
function Person(props) {
  // Верно! Это использование <div> верно, т.к. div это валидный элемент
  return <div>{props.isLearning ? "Great!" : "Hello!"}</div>;
}

function App() {
  // Верно! React знает, что <Person /> - это компонент, с заглавной буквы
  return <Person isLearning={true} />;
}

15. В чем разница между npx и npm?

• npm — это менеджер пакетов, который можно использовать для установки пакетов node.js. npM - Manager.
• npx— это инструмент для выполнения пакетов node.js. npX - Execute.

Неважно, установили ли вы этот пакет глобально или локально. npx временно установит его и запустит. npm также может запускать пакеты, если вы настроите файл package.json. Поэтому, если вы хотите быстро проверить/запустить пакет без его установки - используйте npx. create-react-app — это npm пакет, который должен запускаться только один раз в жизненном цикле проекта. Следовательно, предпочтительнее использовать npx для установки и запуска за один шаг.

> npx create-react-app my-app

16. Как установить фокус на поле ввода после монтирования компонента в UI?

import React, { useEffect, useRef } from "react";

const SearchPage = () => {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, []);

  return (
    <div>
      <input ref={textInput} type="text" />
    </div>
  );
};

Еще больше вопросов с собеседований