Что нового в React v18?

React 18 (март 2022) — релиз конкурентного рендеринга: React научился прерывать и приоритизировать работу над обновлениями.

Вход в новый режим: createRoot

import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);

Старый ReactDOM.render — легаси-режим без новых возможностей.

Автоматический батчинг

Раньше обновления батчились только в обработчиках React; теперь — везде: в промисах, setTimeout, нативных обработчиках. Несколько setState в любом асинхронном коде = один ререндер.

Конкурентные возможности

useTransition — пометить обновление несрочным:

const [isPending, startTransition] = useTransition();
startTransition(() => setFilter(query)); // ввод не блокируется тяжёлой фильтрацией

useDeferredValue — «отстающая» версия значения для тяжёлых поддеревьев.

Срочные обновления (ввод, клик) прерывают несрочные — интерфейс не «замерзает».

Suspense и SSR

• Стриминговый SSR: HTML отдаётся частями (renderToPipeableStream), медленные блоки в Suspense приходят позже.
• Селективная гидратация: интерактивность появляется по частям, начиная с того, с чем взаимодействует пользователь.

Новые хуки и StrictMode

• useId — стабильные id для SSR/доступности;
• useSyncExternalStore — корректные подписки на внешние сторы (для библиотек);
• useInsertionEffect — для CSS-in-JS;
• StrictMode: двойное монтирование в dev — проверка cleanup'ов эффектов.

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

React 18: createRoot и конкурентный рендеринг (прерываемые несрочные обновления), useTransition/useDeferredValue, автоматический батчинг везде, стриминговый SSR с Suspense и селективной гидратацией, useId/useSyncExternalStore, двойное монтирование StrictMode.