Что такое рендеринг компонента в React?

Рендеринг в React — это вызов функции компонента (или метода render) для получения нового описания UI. Рендер означает вычисление, экран при этом ещё не обновляется.

Две фазы обновления

• Render-фаза: React вызывает компоненты и строит новое виртуальное дерево, затем сравнивает его со старым (reconciliation). Эта работа чистая, её можно прервать (конкурентный рендеринг).
• Commit-фаза: вычисленные отличия применяются к реальному DOM, затем выполняются эффекты (useLayoutEffect синхронно, useEffect после отрисовки).

триггер (setState) → render: вызов компонентов + дифф → commit: правки DOM → эффекты

Когда происходит рендер

• Первичный рендер — createRoot(...).render(<App />).
• Обновление state (useState/useReducer), рендер родителя, изменение контекста, обновление подписанного стора.

Свойства рендера

• Чистота: функция компонента не должна иметь побочных эффектов — она может вызываться чаще, чем коммитится (StrictMode в dev вызывает её дважды именно для проверки).
• Рендер ≠ изменение DOM: компонент может отрендериться, а DOM не изменится вовсе, если дифф не нашёл отличий.
• Каскад: рендер компонента по умолчанию рендерит всех его детей.
• Каждый рендер имеет свои props, state и замыкания — «снимок» на момент вызова.

Пример

const Price = ({ value }) => {
  console.log('render'); // вызов функции = рендер
  return <span>{format(value)}</span>;
};
// 'render' в консоли не означает, что DOM обновился

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

Рендеринг — вызов компонентов для построения нового виртуального дерева (render-фаза), после чего React диффом находит отличия и применяет их к DOM (commit-фаза). Рендер — чистое вычисление: он может происходить часто и не обязательно приводит к изменениям DOM.