Чем отличаются состояния React компонента и какие переходы между ними возможны?

У React-компонента можно выделить состояния двух планов: фазы жизненного цикла (где компонент находится во времени) и состояния данных/UI (что он сейчас показывает).

Фазы жизненного цикла и переходы

• Не смонтирован → монтирование: первый рендер, коммит в DOM, эффекты (useEffect(fn, [])).
• Смонтирован → обновление: изменение state/props/контекста → рендер → дифф → точечный коммит → перезапуск эффектов с изменившимися deps. Может повторяться много раз.
• Смонтирован → размонтирование: удаление из дерева, cleanup всех эффектов, потеря state.
• Размонтирован → снова монтирование: если элемент вернулся в дерево — это уже новый экземпляр с чистым state (или тот же тип, но со сброшенным key).

Особый переход — пересоздание: смена key или типа элемента размонтирует старый экземпляр и смонтирует новый (сброс состояния).

Состояния данных/UI

Для компонента, работающего с данными, типичен конечный набор:

• idle (ничего не запрошено) → loading → success | error;
• из success/error возможен переход в refetching (обновление в фоне).

const { status, data, error } = useQuery(...); // 'pending' | 'success' | 'error'
if (status === 'pending') return <Spinner />;
if (status === 'error') return <Alert error={error} />;
return <List items={data} />;

Практика: моделировать такие состояния явно (одно поле-статус), а не набором независимых булевых флагов isLoading/isError/isEmpty, которые могут противоречить друг другу.

Коротко для собеседования

Фазы: монтирование → обновления (много раз) → размонтирование; смена key/типа пересоздаёт экземпляр со сбросом state. Отдельно — состояния данных: idle → loading → success/error (+ refetching), которые стоит моделировать одним статусом, а не набором булевых флагов.