Конкурентный React
Вопрос
Что дал конкурентный режим: useTransition, Suspense, автоматический батчинг?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
рендер стал прерываемым - срочное обновление обгоняет несрочное
useTransition помечает обновление как некритичное
useDeferredValue откладывает значение, оставляя ввод отзывчивым
Suspense показывает запасной интерфейс, пока данные или код грузятся
в React 18 батчинг работает и в промисах, и в таймерах
рендер может быть прерван и запущен заново - он должен быть чистым
Что могут спросить следом
- Чем useTransition отличается от debounce
- Почему Suspense не заменяет обработку ошибок
- Что сломается, если писать в ref прямо в теле компонента
Разбор
Конкурентный React сделал рендер прерываемым: срочное обновление (ввод в поле) может прервать долгий рендер списка.
useTransition помечает обновление несрочным - ввод остаётся отзывчивым, пока тяжёлый
список догоняет. useDeferredValue делает то же со значением, когда источник обновления
чужой. Suspense объявляет границу с запасным интерфейсом на время загрузки кода
или данных.
В React 18 батчинг стал автоматическим везде: раньше два setState в промисе давали два
рендера, теперь один.
Важное следствие: рендер могут прервать и запустить заново, поэтому побочные эффекты в теле компонента стали не «плохим стилем», а настоящей ошибкой.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «React 18-19: Suspense, transitions, RSC»
- Автоматический батчинг
- useDeferredValue и debounce
- Что делает React Compiler
- Функция из серверного компонента в клиентский
- RSC и SSR
- Что запускает Suspense
- Transition для значения поля
- use в условии