React 19.3 — стабильные View Transitions и Fragment Refs, Trusted Types и новый browser API

React 19.3 был выпущен 9 сентября 2026 года и уже доступен в npm. В этом обновлении View Transitions и Fragment Refs перешли из экспериментального режима в стабильный, было добавлено API browser() для компонентов, функционирующих в зависимости от браузерной среды, внедрена поддержка Trusted Types и улучшена работа с Context в React Server Components.

View Transitions стали стабильной частью React

Главное изменение React 19.3 — стабилизация компонента <ViewTransition>, который связывает обновления React с браузерным View Transition API. Теперь разработчики могут анимировать появление, исчезновение, перемещение и изменение размеров элементов без самостоятельного управления снимками DOM и фазами перехода.

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

import { ViewTransition } from 'react';

{isShowing && (
  <ViewTransition>
    <Component />
  </ViewTransition>
)}

Анимация запускается не для любого обновления состояния. React связывает View Transitions именно с обновлениями, помеченными как Transition, включая startTransition, раскрытие границы <Suspense> и обновления через useDeferredValue.

React различает несколько сценариев переходов:

enter — <ViewTransition> появляется в дереве;
exit — компонент удаляется;
update — меняется содержимое или стиль дочерних элементов;
share — именованный View Transition исчезает в одной части интерфейса и появляется в другой.

Такой подход особенно полезен для SPA-интерфейсов, галерей, карточек, маршрутов и экранов, где требуется связанная анимация между состояниями приложения. При этом срочные обновления, которые не являются Transition, продолжают отображаться без ожидания анимации.

React 19.3 также улучшает взаимодействие View Transitions с Suspense. Границу загрузки можно обернуть в <ViewTransition> и анимировать переход от fallback-состояния к готовому содержимому, сохраняя отзывчивость интерфейса.

Подробности опубликованы в официальном анонсе React 19.3.

Fragment Refs позволяют работать с группой DOM-узлов без лишнего контейнера

В React 19.3 стабильным стал и механизм Fragment Refs. Он решает проблему компонентов, которые возвращают несколько соседних элементов без общего DOM-контейнера.

Раньше для получения ref часто приходилось добавлять дополнительный <div>, что могло влиять на CSS Grid, Flexbox, семантику или структуру документа. Теперь ref можно передать непосредственно в <Fragment>:

import { Fragment, useEffect, useRef } from 'react';

function Component() {
  const fragmentRef = useRef(null);

  useEffect(() => {
    fragmentRef.current.focus();
  }, []);

  return (
    <Fragment ref={fragmentRef}>
      <Heading />
      <Content />
    </Fragment>
  );
}

Такой ref возвращает FragmentInstance, который работает с DOM-потомками фрагмента как с группой, не добавляя новый элемент в разметку.

Доступны методы для нескольких типовых задач:

addEventListener, removeEventListener и dispatchEvent — работа с событиями;
focus, focusLast и blur — управление фокусом;
observeUsing и unobserveUsing — подключение IntersectionObserver или ResizeObserver;
getClientRects, getRootNode, compareDocumentPosition и scrollIntoView — измерение положения и прокрутка.

Практический эффект особенно заметен при разработке библиотек компонентов. Поведение можно добавить к группе дочерних узлов, не заставляя вложенные компоненты самостоятельно пробрасывать ref и не меняя создаваемую ими DOM-структуру.

browser() даёт штатный способ отказаться от SSR для отдельного компонента

React DOM 19.3 получил новый API browser(). Он предназначен для компонентов, которые не могут корректно сформировать содержимое на сервере, например из-за зависимости от localStorage, локального часового пояса или другого браузерного API.

Вместо ручной проверки typeof window !== 'undefined' или установки флага mounted через useEffect теперь можно использовать:

import { use } from 'react';
import { browser } from 'react-dom';

function Component() {
  use(browser());

  // Код, который должен выполняться только в браузере
}

На сервере вызов use(browser()) приостанавливает рендеринг компонента. В итоговый HTML попадает fallback ближайшей границы <Suspense>. После гидратации в браузере browser() больше не приостанавливает выполнение, и компонент рендерится обычным образом.

Это делает поведение компонентов с browser-only зависимостями более явным и лучше интегрирует их с Suspense. Вызов можно использовать условно — например, пропускать его, если необходимые начальные данные уже были переданы сервером.

Trusted Types усиливают совместимость React с жёсткой CSP

React 19.3 добавляет поддержку браузерного Trusted Types API, который применяется для защиты от DOM-based XSS и может включаться через Content Security Policy.

До этого React преобразовывал передаваемые значения в обычные строки перед отправкой в некоторые DOM API. Такое преобразование разрушало объекты TrustedHTML, TrustedScript и TrustedScriptURL, из-за чего браузер отклонял их при политике require-trusted-types-for 'script'.

В React 19.3 Trusted Types-объекты передаются без принудительного преобразования в строку. В результате браузер может проверить их согласно настроенным политикам безопасности.

Для проектов с усиленной CSP это снимает одно из ограничений интеграции React с Trusted Types и упрощает внедрение более строгой защиты от DOM-инъекций.

Server Components получили более прямую работу с Context

React Server Components в версии 19.3 могут напрямую рендерить Context, импортированный из клиентского модуля с директивой 'use client'.

Раньше для такого сценария обычно требовался дополнительный компонент-провайдер, который лишь принимал значение и передавал его в Context. Теперь промежуточная обёртка не обязательна:

// user-context.js
'use client';

import { createContext } from 'react';

export const UserContext = createContext(null);

// server-component.js
import { UserContext } from './user-context';

export async function Layout({ children }) {
  const currentUser = await getCurrentUser();

  return (
    <UserContext value={currentUser}>
      {children}
    </UserContext>
  );
}

Server Components по-прежнему не создают Context самостоятельно, но могут импортировать его из клиентского модуля и использовать непосредственно в серверном дереве. Это уменьшает количество технических обёрток в приложениях, где Context нужен для передачи серверных данных в клиентскую часть.

Что ещё изменилось в React 19.3

Помимо новых стабильных API, команда React внесла ряд изменений в поведение react, react-dom и серверной инфраструктуры.

Изменение	Практический эффект
Независимый рендеринг Transitions	Медленный Transition больше не должен задерживать несвязанные переходы
Strict Mode при гидратации	Effects теперь дважды вызываются при гидратации, как и в клиентских корнях
Предупреждение для некорректного условного `use`	Ошибочные схемы использования API проще выявлять во время разработки
`onFullscreenChange` и `onFullscreenError`	React DOM напрямую поддерживает события полноэкранного режима
`fetchPriority` для module resources	Появляется больше контроля над приоритетом загрузки модульных ресурсов
`submitter` в событиях `submit`	Обработчик формы может определить, какой элемент инициировал отправку
`credentialless` для `iframe`	Атрибут распознаётся React DOM как булевый
Передача `Error.cause` и `AggregateError.errors`	Ошибки из серверного слоя несут больше диагностической информации на клиент

Отдельного внимания заслуживает изменение Strict Mode: Effects во время гидратации теперь могут вызываться повторно. Код с побочными эффектами должен оставаться идемпотентным и корректно выполнять очистку, иначе после обновления могут проявиться проблемы, которые раньше не были заметны.

Обновление до версии 19.3

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

Разработчики интерфейсов теперь могут рассчитывать на стабильные View Transitions и Fragment Refs, вместо того чтобы использовать экспериментальные решения. SSR-приложения смогут заменить часть собственных проверок браузерной среды с помощью функции browser(), а проекты с жёсткой Content Security Policy — применять Trusted Types без необходимости преобразования объектов в строки, как это было раньше.

В приложениях на Server Components уменьшается объём вспомогательного кода, окружающего Context. Рекомендуется также провести проверку тестов и эффектов, которые могут быть чувствительны к повторным вызовам Strict Mode в процессе гидратации.

Версия react 19.3.0 и соответствующий react-dom 19.3.0 опубликованы в npm. Обновление можно выполнить стандартным способом:

npm install react@19.3.0 react-dom@19.3.0

Перед установкой в крупном проекте разумно проверить совместимость используемого фреймворка, библиотеки компонентов и SSR-инфраструктуры с React 19.3, особенно если приложение опирается на низкоуровневые особенности гидратации или экспериментальные React API.