Какая ключевая особенность в React render?

Ключевые особенности render в React

Что такое render?

Рендеринг в React — это процесс, при котором React вызывает компоненты и получает от них описание UI в виде дерева React-элементов (JSX → React.createElement → VDOM). Затем это дерево сравнивается с предыдущим (reconciliation) и вносятся минимальные изменения в реальный DOM.

1. Render должен быть чистой функцией (Pure)

Это главная особенность. render (или тело функционального компонента) не должен иметь побочных эффектов:

• Не изменять глобальные переменные
• Не делать HTTP-запросы
• Не мутировать props или state напрямую
• При одинаковых входных данных всегда возвращать одинаковый результат

// Плохо — мутация внешнего состояния в render
let count = 0;
function Counter() {
  count++; // побочный эффект!
  return <div>{count}</div>;
}

// Хорошо — чистая функция
function Counter({ value }) {
  return <div>{value}</div>;
}

Реact в StrictMode специально вызывает render дважды (в development), чтобы поймать нечистые функции.

2. Render не обновляет DOM напрямую

Реакт не трогает реальный DOM при каждом вызове render. Вместо этого:

1. React вызывает компонент → получает виртуальное дерево (VDOM)
2. Сравнивает новое дерево со старым (алгоритм diffing/reconciliation)
3. Вычисляет минимальный набор изменений
4. Применяет только нужные изменения к реальному DOM (commit phase)

Это делает обновления эффективными.

3. Render вызывается при каждом изменении state или props

Любой вызов setState / useState setter или изменение props инициирует повторный рендер компонента и всех его дочерних компонентов по умолчанию.

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <Child value={count} /> {/* Child рендерится при каждом клике */}
    </div>
  );
}

4. Пакетирование обновлений (Batching)

React 18 автоматически батчит (группирует) несколько вызовов setState в один рендер, даже внутри промисов и setTimeout (Automatic Batching):

function handleClick() {
  setA(1); // не вызывает рендер сразу
  setB(2); // не вызывает рендер сразу
  // React сделает ОДИН рендер для обоих обновлений
}

До React 18 батчинг работал только внутри React event handlers.

5. Рендер не всегда приводит к обновлению DOM

Если результат render совпадает с предыдущим (например, вернулся тот же JSX), React пропустит обновление DOM. Также:

• React.memo позволяет пропустить рендер, если props не изменились
• useMemo / useCallback помогают сохранять ссылочную стабильность

const Child = React.memo(function Child({ value }) {
  console.log("render Child");
  return <div>{value}</div>;
});
// Child не перерендерится, если value не изменился

6. Две фазы рендеринга

• Render phase (может быть прервана): React вызывает компоненты, строит VDOM, вычисляет diff. Может выполняться асинхронно (Concurrent Mode).
• Commit phase (синхронная): применяет изменения к DOM, вызывает useLayoutEffect, затем useEffect.

7. StrictMode — двойной render

В React.StrictMode в development-режиме каждый компонент рендерится дважды, чтобы выявить нечистые функции. В production этого не происходит.

Итог

Главная особенность render — чистота функции: детерминированность, отсутствие побочных эффектов, только описание UI на основе входных данных. Всё остальное (VDOM, batching, reconciliation) строится вокруг этого принципа.