Этап 4 из 12 · ≈ 6 ч

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

Основа с Middle

Когда компонент перерисовывается, как работает сравнение и как избежать лишней работы.

Компонент перерисовывается, когда меняется его состояние, контекст, на который он подписан, или перерисовался родитель — по умолчанию вместе с родителем перерисовываются все потомки, даже если их props не изменились.

Что важно знать

  • Перерисовка — это вызов функции и сравнение элементов, а не обязательно изменение DOM. Чаще всего она дешёвая.
  • React.memo пропускает перерисовку при тех же props; работает, только если props стабильны — объекты и функции создаются заново на каждом рендере, поэтому нужны useMemo/useCallback.
  • React Compiler автоматически запоминает значения и компоненты, снимая большую часть ручной мемоизации.
  • Опустить состояние ниже по дереву или передать тяжёлые части через children — часто лучше любой мемоизации.
  • Длинные списки — виртуализация (рендерить только видимое).
  • useTransition и useDeferredValue — несрочные обновления не мешают вводу.
  • Измерять до оптимизации: React DevTools Profiler.

Темы этапа

  • Suspense и ленивая загрузка Основа

    Разделение кода по компонентам и показ заглушки, пока что-то загружается.

  • Границы ошибок Основа

    Как не дать ошибке в одном компоненте уронить всё приложение.

  • Порталы Полезно знать

    Отрисовка модальных окон и подсказок вне родительского DOM-узла.

Критерии освоения

Middle ≈ 6 ч

  • Объясняет, когда компонент перерисовывается, и находит лишние рендеры в Profiler
  • Применяет memo, useMemo и useCallback там, где это измеримо помогает
  • Использует useTransition и виртуализацию для тяжёлых списков

Практика. Ускорить список на 5000 элементов с фильтром, измерив время рендера до и после.

Senior ≈ 4 ч

  • Объясняет архитектуру Fiber и конкурентный рендеринг на уровне идей

Практика. Подготовить для команды разбор, как работает React Compiler и какая ручная мемоизация становится не нужна.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Когда компонент React перерисовывается и как избежать лишних рендеров?Junior

Компонент перерисовывается, когда меняется его состояние, контекст, который он читает, или перерисовывается родитель (по умолчанию — все дети, даже с теми же props). React.memo пропускает рендер при неизменных props (сравнение по ссылке), useMemo запоминает…

Полный разбор
Что такое виртуальный DOM и зачем в списках нужен key?Junior

Компонент возвращает описание интерфейса (дерево React-элементов). При обновлении React сравнивает новое дерево со старым (reconciliation) и применяет к настоящему DOM минимальные изменения. key помогает сопоставить элементы списка между рендерами: по нему…

Полный разбор
Когда применять React.memo, useMemo и useCallback?Middle

React.memo пропускает перерисовку компонента, если props поверхностно равны прошлым. useMemo кэширует результат вычисления, useCallback — саму функцию между рендерами. Они работают в паре: memo-компонент бесполезен, если ему каждый раз передают новый объект…

Полный разбор
Как сделать интерфейс отзывчивым при тяжёлых обновлениях — useTransition и виртуализация?Middle

useTransition помечает обновление как несрочное: ввод в поле применяется сразу, а тяжёлая перерисовка результатов идёт в фоне и может прерываться; isPending показывает индикатор. useDeferredValue — то же для значения, пришедшего извне. Виртуализация (TanStack…

Полный разбор
Что такое Fiber и конкурентный рендеринг в React?Senior

Fiber — внутренняя структура React: каждый элемент дерева представлен узлом-«волокном» с ссылками на родителя, потомка и соседа. Это позволяет выполнять работу кусками, приостанавливать её, отдавать управление браузеру и отбрасывать устаревшую. Рендер делится…

Полный разбор
Почему не нужно хранить в state то, что можно вычислить из других данных?Middle

Если значение вычисляется из props или другого состояния (отфильтрованный список, сумма корзины, полное имя), его считают во время рендера, а не хранят в отдельном state. Дублирующее состояние нужно синхронизировать эффектами — это лишний рендер и источник…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования