Вы месяцами изучали React.
Вы можете создавать компоненты, управлять состоянием и строить красивые интерфейсы. Но когда интервьюер спрашивает "Объясните архитектуру React Fiber" или "Как бы вы оптимизировали компонент, который ре-рендерится 1000 раз?" — ваш разум пустеет.
Это руководство даёт вам 50+ реальных вопросов собеседования React с экспертными ответами, которые задают в компаниях типа Meta, Airbnb, Netflix.
Почему React Собеседования Отличаются
Собеседования React оценивают больше, чем просто знание синтаксиса:
- Как React работает под капотом (reconciliation, Virtual DOM, fiber)
- Оптимизация производительности (когда и почему компоненты ре-рендерятся)
- Паттерны управления состоянием (локальное vs глобальное)
- Решение реальных проблем (edge cases, debugging)
Фундаментальные Вопросы React
1. Что такое Virtual DOM и как React его использует?
Ответ:
Virtual DOM — это легковесное JavaScript представление реального DOM. Когда состояние меняется:
- React создаёт новое дерево Virtual DOM
- Сравнивает (diff) с предыдущим Virtual DOM
- Вычисляет минимальный набор изменений
- Применяет только эти изменения к реальному DOM
Почему важно: Прямая манипуляция DOM затратна. Virtual DOM позволяет React группировать обновления.
2. Объясните разницу между контролируемыми и неконтролируемыми компонентами
Контролируемые компоненты: Данные формы управляются состоянием React.
function ControlledInput() {
const [value, setValue] = useState('');
return <input value={value} onChange={e => setValue(e.target.value)} />;
}
Неконтролируемые компоненты: Данные формы управляются самим DOM.
function UncontrolledInput() {
const inputRef = useRef();
return <input ref={inputRef} />;
}
3. Что такое keys в React и почему они важны?
Keys помогают React идентифицировать какие элементы в списке изменились.
Плохая практика:
items.map((item, index) => <Item key={index} {...item} />)
Хорошая практика:
items.map(item => <Item key={item.id} {...item} />)
Вопросы о React Hooks
4. Объясните правила hooks и почему они существуют
Два правила:
- Вызывайте hooks только на верхнем уровне
- Вызывайте hooks только из React функций
Почему: React полагается на порядок вызовов hooks для поддержания состояния между рендерами.
5. Разница между useEffect, useLayoutEffect и useInsertionEffect?
| Hook | Когда выполняется | Случай использования |
|---|---|---|
useEffect |
После отрисовки (async) | Загрузка данных, подписки |
useLayoutEffect |
До отрисовки (sync) | Измерения DOM, scroll |
useInsertionEffect |
До мутаций DOM | CSS-in-JS библиотеки |
6. Как работает useCallback?
useCallback возвращает мемоизированную версию callback.
Когда использовать:
- Передача callbacks в оптимизированные дочерние компоненты
- Зависимости других hooks
Когда НЕ использовать: Не оборачивайте каждую функцию. Мемоизация имеет overhead.
7. Объясните useMemo vs useCallback
// useMemo - мемоизирует ЗНАЧЕНИЕ
const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
// useCallback - мемоизирует ФУНКЦИЮ
const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);
Управление Состоянием
8. Когда использовать useReducer вместо useState?
Используйте useReducer когда:
- Логика состояния сложная
- Следующее состояние зависит от предыдущего
- Хотите предсказуемые переходы состояний
9. Объясните React Context и влияние на производительность
Context позволяет передавать данные без prop drilling.
Проблема производительности: При изменении значения context ВСЕ потребители ре-рендерятся.
Решения:
- Разделите contexts по частоте обновления
- Мемоизируйте значение context
- Разделите state и dispatch
Оптимизация Производительности
10. Компонент ре-рендерится 1000 раз в секунду. Как отладить?
Шаг 1: Определите причину с React DevTools Profiler
Шаг 2: Частые причины:
- Новые ссылки на объект/массив в props:
// ПЛОХО
<Child items={data.filter(x => x.active)} />
// ХОРОШО
const activeItems = useMemo(() => data.filter(x => x.active), [data]);
- Inline function handlers:
// ПЛОХО
<Child onClick={() => handleClick(id)} />
// ХОРОШО
const handleChildClick = useCallback(() => handleClick(id), [id]);
11. Объясните React.memo
React.memo мемоизирует выход рендера. Ре-рендерит только если props изменились.
Когда помогает:
- Компонент часто рендерится с теми же props
- Рендеринг дорогой
Когда вредит:
- Props всегда меняются
- Компонент дешёвый для рендера
Продвинутые Вопросы
12. Объясните архитектуру React Fiber
Fiber — движок reconciliation React 16+. Позволяет:
- Инкрементальный рендеринг
- Приоритизацию работы
- Конкурентность
Две фазы:
- Фаза рендера (прерываемая)
- Фаза commit (непрерываемая)
13. Что такое React Server Components?
| Аспект | SSR | Server Components |
|---|---|---|
| Где рендерится | Сервер, затем гидратация | Только сервер |
| JavaScript | Полный код компонента | Только сериализованный вывод |
| Интерактивность | Полная после гидратации | Требуется Client Components |
Практикуйте с ИИ
Чтение — первый шаг. Практика вслух — как вы становитесь уверенными.
Interview Whisper позволяет:
- Получать реальные вопросы от ИИ интервьюера
- Практиковать объяснение концепций
- Получать мгновенный feedback
Начните Практиковать Вопросы React с ИИ
Связанные Статьи
Мастерство в собеседованиях React приходит с практикой. Начните сегодня.
