Вышел React 18 — долгожданный релиз с множеством изменений

React 18 уже сегодня можно скачать через npm. Большая часть изменений создавалась поверх нового параллельного рендеринга, который включается автоматически при использовании параллелизма в коде.

Автоматическая пакетная обработка (batching). В этом режиме React группирует несколько обновлений состояния в один повторный рендеринг для повышения производительности. Без неё фреймворк группировал обновления только внутри обработчиков событий, а, например, внутри промисов и setTimeout они не группировались вообще. Теперь всё доступно автоматически:

// Раньше: обрабатывались только React-события
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
	// Это будет зарендерено дважды: по разу на каждое обновление состояния
}, 1000);

// После: обновления внутри таймаутов, промисов и других событий
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React отрендерит это лишь один раз в конце
}, 1000);

Переходы. Это новый концепт, который позволяет определять срочные и несрочные обновления:

• срочные обновления — это прямое взаимодействие (например, ввод с клавиатуры или клик мыши), и они должны обрабатываться моментально;
• несрочные обновления, или переходы, — это переход от одного UI к другому, их обновления можно отложить, если есть более важные.

Разработчики добавили в React 18 хук и метод класса для переходов:

• useTransition — хук для старта перехода, который содержит значение для отслеживания текущего состояния;
• startTransition — метод для начала перехода, когда хук useTransition нельзя вызвать.

В примере ниже показано, что код, обёрнутый в хук startTranstion, — это несрочный код, который исполнится, если не произойдут более важные события — например, клик мыши или нажатие клавиши:

import {startTransition} from 'react';

// Срочно: Показать, что было введено
setInputValue(input);

// Отмечайте любые изменения состояния внутри переходов
startTransition(() => {
  // Переход: Показать результат
  setSearchQuery(input);
});

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

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

Новые API для клиентского и серверного рендеринга. Разработчики переделали API для рендеринга:

• React DOM Client — добавили методы createRoot и hydrateRoot, которые заменяют ReactDOM.render и ReactDOM.hydrate;

• React DOM Server — добавили метод renderToPipeableStream для стриминга в Node-средах и renderToReadableStream для современных сред, таких как Deno- или Cloudflare-воркеров.

Строгий режим. Этот режим позволит автоматически размонтировать и перемонтировать компоненты, когда они монтируются в первый раз. А после — восстанавливать предыдущее состояние компонентов.

Новые хуки. В React 18 добавили 5 новых хуков:

• useId — генерирует уникальные идентификаторы на клиенте и сервере;
• useTransition и startTransition — помечают, какие обновления состояний срочные, а какие нет;
• useDeferredValue — позволяет откладывать перерендеринг несрочной части React-дерева;
• useSyncExternalStore — добавляет поддержку параллельного чтения для внешних хранилищ;
• useInsertionEffect — решает проблемы производительности при инъекции стилей в рендеринге для CSS-in-JS-библиотек.

Инструкция по обновлению проектов под React 18 можно найти в гайде от разработчиков React. А подробнее прочитать о React 18 — в блоге React.