Техпрогон
ВойтиНачать бесплатно
Ответ вслух Middle React 18-19: Suspense, transitions, RSC обновлено

Конкурентный рендер

Вопрос

Объясни, что такое конкурентный рендер в React и какие инструменты он даёт разработчику.

Попробуйте сами

Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.

Показать ответ и разбор

Коротко

До React 18 рендер был непрерывным: начал, значит досчитает до конца, даже если пользователь уже печатает. Конкурентный рендер позволяет React готовить новый интерфейс в памяти и прерывать эту работу, если пришло срочное обновление.

Что должно прозвучать в ответе

  • Рендер прерываемый: React готовит новую версию в памяти и может её бросить

  • Обновления делятся на срочные (ввод) и несрочные (transitions)

  • `useTransition`/`startTransition`: пометить обновление несрочным, получить `isPending`

  • `useDeferredValue`: отстающая копия значения, не debounce

  • Suspense не показывает fallback для уже видимого контента при переходе

  • Включается через `createRoot`, плюс автоматический батчинг везде

Что могут спросить следом

  • Почему значение поля ввода нельзя обновлять в transition?
  • Когда выбрать useDeferredValue, а когда useTransition?
  • Что меняется в transitions в React 19?

Разбор

До React 18 рендер был непрерывным: начал, значит досчитает до конца, даже если пользователь уже печатает. Конкурентный рендер позволяет React готовить новый интерфейс в памяти и прерывать эту работу, если пришло срочное обновление. В DOM попадает только законченный результат.

Для этого обновления делятся на срочные и несрочные. Срочное: символ в поле, клик. Несрочное я помечаю через startTransition, например переключение вкладки с тяжёлым содержимым. Пока переход идёт, старый экран остаётся живым, а isPending позволяет показать индикатор. Если внутри перехода что-то приостановилось, React не заменит видимый контент на спиннер.

Если значение приходит сверху и я не управляю его setState, использую useDeferredValue: тяжёлая часть рендерится со старым значением, а новое догоняет в фоне. Это не debounce, фиксированной задержки нет.

В React 19 в startTransition можно передать async-функцию, на этом построены actions и useActionState.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Потренироваться бесплатно

Предыдущий вопрос

SSR и гидратация

Следующий вопрос

Серверные компоненты

Урок по теме

React 18-19: Suspense, transitions, RSC, компилятор

Термины по теме

'use client'Hydration mismatchTransition в React

Ещё по теме «React 18-19: Suspense, transitions, RSC»

Все вопросы модуля