React

React строит UI из компонентов — функций (или классов), возвращающих описание разметки. Главная идея — декларативность: вы описываете, каким UI должен быть при данном state, а не как менять его пошагово. React сам вычисляет разницу между «было» и «стало» и вносит минимальные правки в реальный DOM.

Всё остальное — следствия этой модели. State нельзя мутировать напрямую — его меняют через сеттер, который планирует перерендер. Перерендер идёт сверху вниз: рендер родителя перерендеривает всех детей. Хуки узнают свой state по порядку вызова, а не по имени — отсюда Правила хуков. Классические ловушки раздела — эффект без массива зависимостей (бесконечный цикл), key={Math.random()} (потеря state) и мутация props. Полная карта — в слоях ниже.

Карта темы

• Компоненты, props и state — из чего состоит компонент и чем read-only props отличаются от локального state.
• Контейнерные и презентационные компоненты — разделение «как работает» и «как выглядит» ради переиспользования.
• Рендеринг и виртуальный DOM — дерево в памяти, согласование и минимальные правки реального DOM.
• Обновления состояния и батчинг — почему setState откладывается, батчинг и форма с функцией-апдейтером.
• Хуки — useState/useEffect/useContext, устройство изнутри и Правила хуков.
• Хуки эффектов — useEffect против useLayoutEffect, useMemo и useCallback.
• Жизненный цикл — фазы классового компонента и где грузить данные.
• Управляемые поля ввода — state как источник истины против чтения из DOM через ref.
• Ключи — key как идентичность инстанса, а не украшение.

Частые ошибки и ловушки

Значение для собеседований

React спрашивают как проверку того, понимаете ли вы модель обновления, а не знаете ли API. Кандидат, который объясняет перерендер через «state меняется, родитель рендерится или меняется контекст», а key — через «идентичность инстанса между рендерами», сразу опережает того, кто заучил названия хуков.

Что обычно проверяют:

• Чем props отличаются от state и почему props read-only.
• Что такое виртуальный DOM и согласование, зачем спискам key.
• Почему setState «асинхронен», что такое батчинг и когда нужна форма с функцией.
• Как хуки хранят state и почему их нельзя вызывать условно.
• Разницу useEffect и useLayoutEffect, назначение useMemo/useCallback.
• Управляемое поле против неуправляемого.

Типичный неверный ответ: «виртуальный DOM быстрее реального». На деле он не быстрее — это слой сравнения в памяти, который позволяет применить к реальному DOM минимальный набор правок вместо перерисовки всего поддерева.