PassFront
  1. PassFront
  2. База знаний
  3. Рендеринг и производительность

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

Рендеринг и производительность

Render в React означает чистое вычисление описания UI, а не рисование. Из этого следуют все остальные свойства рендера.

Render — вычисление, не эффект

Функция компонента (метод render) возвращает React-элементы — «что должно быть на экране». Она обязана быть чистой:

  • те же props/state → тот же результат;
  • никаких побочных действий в теле: запросов, подписок, мутаций, записи в DOM.

Почему это критично: React вправе вызывать рендер сколько угодно раз и когда угодно — дважды в StrictMode (проверка чистоты), повторно при конкурентном рендеринге (начатый рендер может быть отброшен ради срочного обновления). Побочные эффекты в теле выполнялись бы непредсказуемое число раз — их место в useEffect (после коммита).

Следствия

  • Render ≠ обновление DOM: после вычисления идёт дифф; если отличий нет — DOM не тронут. Вызов функции компонента — дёшев по сравнению с DOM-операциями.
  • Снимки состояния: каждый рендер замыкает свои props/state; setState не меняет переменные текущего рендера, а запрашивает следующий.
  • Каскад по умолчанию: рендер компонента рендерит его детей (без сравнения props) — управляется React.memo и структурой состояния.
  • Прерываемость: чистоту рендера React 18 конвертирует в возможность прерывать/возобновлять работу с приоритетами.

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

Главное: render — чистая функция «состояние → описание UI», без побочных эффектов; React может вызывать её многократно (StrictMode, конкурентность) и не обязан после неё менять DOM (дифф решает). Отсюда: эффекты только в useEffect, каждый рендер — снимок значений, каскад вниз, прерываемый рендеринг React 18.

Другие вопросы раздела