25 популярных вопросов для собеседования по React

Окей, представьте: вы заходите в Zoom-колл, видите три лица в камере и один черный квадрат с надписью «Senior React Developer». Сердце уже где-то в пятках, руки влажные, а в голове крутится только «пожалуйста, только не спрашивайте про reconciliation».

Спойлер: спросят. Но после этой статьи вы будете готовы как Тони Старк перед финальной битвой.

🔥 Основы (которые почему-то забывают все)

1. В чём разница между Real DOM и Virtual DOM?

Сложность: Легче, чем понять, почему Array.sort() мутирует массив

Краткий ответ: Real DOM — это то, что реально отображается в браузере. Тяжёлый, медленный, как утреннее пробуждение. Virtual DOM — это JavaScript-копия, лёгкая и быстрая. React сравнивает их через diffing и обновляет только то, что изменилось.

Что сказать на собесе: "Virtual DOM позволяет React батчить обновления и минимизировать дорогие операции с Real DOM, используя алгоритм reconciliation. Это как использовать Git — сначала коммитишь локально, потом пушишь все изменения разом."

2. Что такое JSX и почему мы пишем HTML в JavaScript?

Сложность: Как объяснить бабушке, что такое мем

JSX — это синтаксический сахар над React.createElement(). Без JSX ваш код выглядел бы как JSON из ада.

// С JSX (красиво, эстетично)
<div className="hot">
  <h1>Привет, мир!</h1>
</div>

// Без JSX (добро пожаловать в 2013-й)
React.createElement('div', {className: 'hot'},
  React.createElement('h1', null, 'Привет, мир!')
)

3. Functional vs Class Components — есть ли ещё смысл в классах?

Сложность: Как спорить, что лучше — пиццу или шаурму

Функциональные компоненты с хуками победили. Классы остались как динозавры в легаси-проектах. Но на собесе могут спросить про componentDidMount — будьте готовы.

4. Объясните useState — но так, чтобы было интересно

const [coffee, setCoffee] = useState('нету 😭');

// Через пару строк кода...
setCoffee('есть! ☕');

Это как коробка с котом Шрёдингера, но вы всегда знаете, что внутри.

5. useEffect — зачем нужен массив зависимостей?

Сложность: Понять, почему ваш эффект запускается 1000 раз

Классика жанра: "У меня бесконечный цикл в useEffect, помогите!"

// ❌ Бесконечный ад
useEffect(() => {
  setCount(count + 1); // Ещё один билет в бесконечность
});

// ✅ Контролируемый хаос
useEffect(() => {
  fetchData();
}, []); // Пустой массив = один раз при монтировании

Правило: Если используете переменную внутри useEffect — добавьте её в зависимости. ESLint не зря ругается.

6. useMemo vs useCallback — в чём разница?

Сложность: Как выбрать между двумя одинаковыми футболками

• useMemo мемоизирует значение (результат вычислений)

• useCallback мемоизирует функцию

const expensiveValue = useMemo(() => {
  return calculatePi(1000000); // вычисляем один раз
}, []);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]); // функция пересоздаётся только при изменении id

7. useRef — не только для доступа к DOM

Это как карман в куртке, куда можно положить что угодно, и это не вызовет ре-рендер.

const renderCount = useRef(0);

useEffect(() => {
  renderCount.current += 1; // Не вызовет ре-рендер!
});

8. Можно ли вызывать хуки условно?

НЕТ. НИКОГДА. ЗАБУДЬТЕ.

// ❌ Это путь к багам
if (condition) {
  useState(0); // React: "Am I a joke to you?"
}

// ✅ Правильно
const [state, setState] = useState(0);
if (condition) {
  // используем state здесь
}

🎭 Продвинутые концепции (где начинается боль)

9. Что такое reconciliation и как работает Fiber?

Сложность: Объяснить квантовую физику через мемы

Reconciliation — это процесс сравнения Virtual DOM. Fiber — новая реализация этого процесса с React 16+, которая позволяет прерывать и возобновлять работу (как сохранение в игре).

10. Keys в списках — почему index это плохо?

// ❌ Интервьюер качает головой
{items.map((item, index) => 
  <div key={index}>{item}</div>
)}

// ✅ Интервьюер кивает с уважением
{items.map(item => 
  <div key={item.id}>{item}</div>
)}

Использование индекса как key может привести к багам при перестановке элементов. React подумает, что это те же элементы, просто с новыми данными.

11. Context API — когда использовать, а когда бежать к Redux?

Context для простых вещей (тема, язык, юзер). Если у вас сложная логика состояния — Redux или Zustand вам в помощь.

12. Higher-Order Components (HOC) — живы ли они?

Технически да, но хуки их практически похоронили. Знать надо, использовать — уже нет.

// Олдскул, но могут спросить
const withAuth = (Component) => {
  return (props) => {
    const isAuth = useAuth();
    return isAuth ? <Component {...props} /> : <Login />;
  };
};

13. Render Props — что это и зачем?

Паттерн, который тоже почти вымер с приходом хуков.

<DataProvider render={data => (
  <h1>Привет, {data.name}</h1>
)} />

⚡ Оптимизация (чтобы всё не тормозило)

14. React.memo — когда применять?

Мемоизация компонента. Предотвращает ненужные ре-рендеры.

const ExpensiveComponent = React.memo(({ data }) => {
  // рендерится только если data изменилась
  return <div>{/* тяжёлые вычисления */}</div>;
});

15. Lazy loading и React.Suspense

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

<Suspense fallback={<Spinner />}>
  <HeavyComponent />
</Suspense>

Юзер счастлив, bundle меньше, вы — молодец.

16. Code splitting — почему важен?

Никто не хочет грузить 5MB JavaScript при первом заходе на сайт. Разделяй и властвуй.

🔄 Состояние и управление данными

17. Controlled vs Uncontrolled компоненты

Controlled: React контролирует состояние инпута (через useState)
Uncontrolled: DOM сам управляет значением (через ref)

// Controlled (правильный путь)
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Uncontrolled (для ленивых)
const inputRef = useRef();
<input ref={inputRef} />

18. Prop drilling — проблема и решения

Когда пробрасываете пропсы через 5 уровней компонентов. Решения: Context API, Redux, composition.

19. Lifting State Up — что это?

Подъём состояния на уровень выше, чтобы несколько компонентов могли его использовать.

20. Redux vs MobX vs Zustand — что выбрать?

• Redux: если любите boilerplate и строгую архитектуру

• MobX: если любите магию и реактивность

• Zustand: если любите простоту и минимализм

В 2025 году Zustand побеждает по популярности в новых проектах.

🧪 Тестирование

21. React Testing Library vs Enzyme

Enzyme устарел. Используйте React Testing Library.

import { render, screen } from '@testing-library/react';

test('кнопка существует', () => {
  render(<Button />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

22. Что такое snapshot-тестирование?

Сохраняете "снимок" компонента и сравниваете при изменениях. Полезно, но не переоценивайте.

🚀 React 18+ и будущее

23. Concurrent Rendering — что изменилось?

React может прерывать рендеринг и возобновлять его. Больше никаких фризов интерфейса.

24. Automatic Batching — зачем нужен?

React 18 батчит все обновления состояния автоматически, даже в промисах и таймаутах.

25. useTransition и useDeferredValue — для чего?

Позволяют помечать обновления как не срочные, давая приоритет более важным.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input); // Не блокирует ввод пользователя
});

🎓 Готовы к собесу? А к реальной практике?

Выучить теорию — это как прочитать инструкцию к IKEA. Реальный скилл приходит, когда собираешь мебель (пишешь код) своими руками.

Именно для этого мы создали Кодик — приложение, где можно не просто читать про React, а сразу практиковаться. Каждый урок — это мини-проект, который можно сделать прямо в браузере. От useState до production-ready приложений.

Фишка в том, что теория сразу закрепляется практикой. Не нужно переключаться между вкладками, искать, где запустить код, настраивать окружение. Открыл Кодик — и вперёд кодить.

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

Идеально для повторения материала в метро, перед сном или в обеденный перерыв. Программирование должно быть удобным!

Помните: на собеседовании важно не только знать ответы, но и уметь рассуждать. Если не знаете — так и скажите, но покажите, как бы искали ответ. Интервьюеры ценят честность и способность учиться больше, чем знание всех API наизусть.

Удачи на собесах! Пусть ваши компоненты всегда ре-рендерятся эффективно, а баги находятся до продакшена 🚀