Самые популярные вопросы по React на собеседовании: разбор с примерами

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

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

React — это JavaScript-библиотека с открытым исходным кодом для создания пользовательских интерфейсов. Разработана и поддерживается Facebook. Основные особенности:

• Компонентный подход — UI разбивается на независимые, переиспользуемые компоненты.
• Декларативность — вы описываете, как UI должен выглядеть для каждого состояния, а React заботится об обновлениях.
• Virtual DOM — для оптимизации обновлений реального DOM.
• Однонаправленный поток данных — от родительских компонентов к дочерним через props.

2. Что такое Virtual DOM и как он работает?

Virtual DOM — это легковесное представление реального DOM в памяти в виде JavaScript-объектов. Когда состояние компонента меняется:

1. Создается новый Virtual DOM.
2. React сравнивает новый Virtual DOM со старым с помощью алгоритма diffing.
3. React вычисляет минимальный набор изменений (патчей) для реального DOM.
4. React применяет эти изменения (reconciliation).

Это позволяет минимизировать прямые манипуляции с DOM, которые являются дорогими операциями.

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

JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript. JSX не является обязательным, но делает код более читаемым. Браузеры не понимают JSX, поэтому код транспилируется (обычно Babel) в вызовы React.createElement().

// JSX
const element = <h1>Hello, world!</h1>;

// Транспилированный код
const element = React.createElement('h1', null, 'Hello, world!');

4. Чем отличаются функциональные компоненты от классовых?

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

5. Что такое состояние (state) и пропсы (props)?

• props (свойства) — данные, которые передаются от родительского компонента дочернему. Они неизменяемы (immutable) внутри дочернего компонента.
• state (состояние) — данные, управляемые внутри компонента. Могут изменяться (mutable) с помощью setState (в классах) или useState (в функциях). При изменении state компонент перерендеривается.

6. Что такое жизненный цикл компонента?

Жизненный цикл классового компонента состоит из трех фаз:

• Монтирование (Mounting): constructor, static getDerivedStateFromProps, render, componentDidMount.
• Обновление (Updating): static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate.
• Размонтирование (Unmounting): componentWillUnmount.

В функциональных компонентах жизненный цикл эмулируется с помощью хука useEffect.

7. Что такое хуки (Hooks)?

Хуки — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Они были добавлены в React 16.8. Основные хуки:

• useState — для управления состоянием.
• useEffect — для побочных эффектов (аналоги жизненного цикла).
• useContext — для работы с контекстом.
• useReducer — для сложной логики состояния.
• useMemo/useCallback — для мемоизации.
• useRef — для ссылок на DOM элементы и хранения мутируемых значений.

8. Как работает хук useState?

useState возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления. При вызове функции обновления компонент перерендеривается.

const [count, setCount] = useState(0);

const increment = () => setCount(count + 1);
// Или с функциональным обновлением:
const increment = () => setCount(prev => prev + 1);

9. Как работает хук useEffect?

useEffect выполняет побочные эффекты в функциональных компонентах (запросы к API, подписки, таймеры). Он принимает функцию и массив зависимостей.

// Выполняется после каждого рендера
useEffect(() => {
    document.title = `Счет: ${count}`;
});

// Выполняется один раз после монтирования
useEffect(() => {
    fetchData();
}, []);

// Выполняется при изменении count
useEffect(() => {
    console.log(count);
}, [count]);

// Очистка (аналог componentWillUnmount)
useEffect(() => {
    const subscription = source.subscribe();
    return () => subscription.unsubscribe();
}, []);

10. Как работает хук useContext?

useContext позволяет использовать значение контекста в функциональном компоненте. Принимает объект контекста (созданный через React.createContext) и возвращает текущее значение контекста.

const ThemeContext = React.createContext('light');

function ThemedComponent() {
    const theme = useContext(ThemeContext);
    return <div>Тема: {theme}</div>;
}

11. Как работает хук useReducer?

useReducer — альтернатива useState для сложной логики состояния, когда следующее состояние зависит от предыдущего или когда нужно обрабатывать несколько действий. Основан на паттерне Redux.

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'increment': return { count: state.count + 1 };
        case 'decrement': return { count: state.count - 1 };
        default: return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <>
            {state.count}
            <button onClick={() => dispatch({type: 'increment'})}>+</button>
        </>
    );
}

12. Как работает хук useMemo?

useMemo мемоизирует результат вычислений и пересчитывает его только при изменении зависимостей. Используется для оптимизации дорогих вычислений.

const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b);
}, [a, b]);

13. Как работает хук useCallback?

useCallback возвращает мемоизированную версию функции, которая изменяется только при изменении зависимостей. Полезен для передачи колбэков в оптимизированные дочерние компоненты, чтобы избежать лишних рендеров.

const handleClick = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

14. Как работает хук useRef?

useRef возвращает мутируемый ref-объект, свойство .current которого инициализируется переданным аргументом. Значение сохраняется между рендерами и не вызывает перерендер при изменении.

• Для доступа к DOM-элементам: <div ref={myRef}>
• Для хранения любых мутируемых значений (например, предыдущее значение, таймеры).

15. Какие правила использования хуков?

1. Вызывайте хуки только на верхнем уровне (не внутри циклов, условий или вложенных функций).
2. Вызывайте хуки только из React-функций (функциональных компонентов или пользовательских хуков).
3. Для проверки этих правил используйте плагин ESLint eslint-plugin-react-hooks.

16. Что такое компоненты высшего порядка (HOC)?

Компонент высшего порядка (Higher-Order Component) — это функция, которая принимает компонент и возвращает новый компонент с расширенной функциональностью. Паттерн используется для переиспользования логики между компонентами.

function withLogger(WrappedComponent) {
    return function(props) {
        useEffect(() => {
            console.log('Component mounted');
        }, []);
        return <WrappedComponent {...props} />;
    };
}

17. Что такое render props?

Render props — это техника, где компонент получает функцию в качестве пропа, которая возвращает React-элемент. Это позволяет компоненту делегировать рендеринг и переиспользовать логику.

<DataFetcher url="api/data" render={(data) => (<div>{data}</div>)} />

18. Что такое Context API?

Context API — это механизм React для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне (пропс-дриллинг). Состоит из:

• React.createContext — создает объект контекста.
• Context.Provider — компонент, который предоставляет значение контекста.
• Context.Consumer или useContext — для доступа к значению контекста.

19. Что такое порталы (Portals)?

Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится вне иерархии родительского компонента. Используются для модальных окон, всплывающих подсказок, тултипов.

ReactDOM.createPortal(
    <div>Модальное окно</div>,
    document.getElementById('portal-root')
);

20. Что такое ref и зачем он нужен?

Ref (reference) — это способ получить прямой доступ к DOM-элементу или экземпляру классового компонента. Используется для:

• Управления фокусом, выделением текста.
• Интеграции со сторонними DOM-библиотеками.
• Вызова методов дочернего компонента.

В функциональных компонентах используется useRef, в классовых — React.createRef().

21. Что такое ключи (keys) в React?

Keys (ключи) — это специальные строковые атрибуты, которые помогают React идентифицировать, какие элементы в списке были изменены, добавлены или удалены. Они должны быть уникальными среди соседних элементов. Обычно используются при рендере массивов.

{items.map(item => <li key={item.id}>{item.name}</li>)}

22. Что такое контролируемые и неконтролируемые компоненты?

• Контролируемые компоненты: значение элемента формы управляется состоянием React. Изменения обрабатываются через обработчики событий. React — единственный источник правды.
• Неконтролируемые компоненты: значение хранится в самом DOM. Для доступа к значению используется ref. Подходят для простых форм или интеграции с ненативным кодом.

23. Что такое поднятие состояния (lifting state up)?

Это паттерн, когда общее состояние нескольких компонентов поднимается до их ближайшего общего предка. Родитель хранит состояние и передает его и обработчики изменений дочерним компонентам через props. Обеспечивает синхронизацию данных.

24. Что такое композиция против наследования?

React использует композицию вместо наследования. Для переиспользования кода между компонентами рекомендуется:

• Использовать props.children для передачи дочерних элементов.
• Использовать пропсы для конфигурации.
• Использовать HOC или render props для переиспользования логики.

25. Что такое PropTypes и зачем они нужны?

PropTypes — это механизм проверки типов пропсов во время выполнения. Помогает отлавливать ошибки, связанные с неверными типами данных. В продакшене проверки отключаются для производительности.

import PropTypes from 'prop-types';

function User({ name, age }) {
    return <div>{name}, {age}</div>;
}

User.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number
};

26. Что такое StrictMode?

StrictMode — это инструмент для обнаружения потенциальных проблем в приложении. Он не рендерит видимый UI, но активирует дополнительные проверки и предупреждения в development-режиме (например, проверка на использование устаревших методов, обнаружение побочных эффектов).

27. Что такое фрагменты (Fragments)?

Фрагменты позволяют группировать несколько дочерних элементов без добавления лишних узлов в DOM (например, без лишнего <div>). Используются как <React.Fragment></React.Fragment> или сокращенно <></>.

28. Что такое Suspense и ленивая загрузка?

Suspense — компонент, который позволяет показать запасной UI (например, спиннер загрузки) пока дочерние компоненты загружаются. Чаще всего используется с ленивой загрузкой компонентов через React.lazy().

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={<div>Загрузка...</div>}>
    <LazyComponent />
</Suspense>

29. Что такое границы ошибок (Error Boundaries)?

Границы ошибок — это компоненты, которые отлавливают ошибки JavaScript в любом месте дерева дочерних компонентов и показывают запасной UI вместо упавшего дерева. Могут быть только классовыми компонентами с методами static getDerivedStateFromError() и componentDidCatch().

30. Как работает двусторонний binding в React?

В React нет встроенного двустороннего binding как в Angular или Vue. Вместо этого используется однонаправленный поток данных и явная обработка изменений. Для имитации двустороннего binding с полями ввода:

<input 
    value={value} 
    onChange={(e) => setValue(e.target.value)} 
/>

31. Как тестировать React-компоненты?

Основные инструменты для тестирования:

• Jest — тест-раннер и фреймворк для assertion'ов.
• React Testing Library — для рендера компонентов и взаимодействия с ними (фокусируется на поведении, а не на деталях реализации).
• Enzyme — альтернатива (но сейчас менее популярна).

Тесты могут быть юнит-тестами, интеграционными и e2e.

32. Какие способы оптимизации производительности в React?

• React.memo для мемоизации компонентов.
• useMemo и useCallback для мемоизации значений и функций.
• Виртуализация длинных списков (react-window, react-virtualized).
• Ленивая загрузка компонентов (React.lazy).
• Избегание анонимных функций и объектов в пропсах (если это вызывает лишние рендеры).
• Правильное использование ключей в списках.
• shouldComponentUpdate или PureComponent в классах.

33. Что такое React.memo?

React.memo — это компонент высшего порядка, который мемоизирует функциональный компонент. Если пропсы не изменились (поверхностное сравнение), React пропускает рендер компонента и использует последний результат.

const MemoizedComponent = React.memo(MyComponent);

34. Что такое синтетические события (Synthetic Events)?

SyntheticEvent — это кросc-браузерная обертка над нативными событиями браузера. React нормализует события, чтобы они имели одинаковые свойства во всех браузерах. Синтетические события пуллируются (переиспользуются) для оптимизации производительности.