React 19.3: что реально поменялось и почему это важно

Если следить за React только по крупным релизам, легко пропустить момент, когда библиотека тихо меняет направление. React 19.3 — как раз такой случай. Сам релиз вышел 9 сентября 2026 года. И я хочу поделиться парой моментов из этого обновления. Рассмотрим пару хуков это ViewTransition и Fragment Refs. Еще, что я могу выделить, это новые возможности для SSR, Server Components и работы с браузерными API. Самое интересное тут даже не в том, сколько новых API добавили. Просто React постепенно перетягивает на себя задачи, которыми раньше занимался сам разработчик: переходные анимации, работу с несколькими DOM‑узлами без лишних обёрток, нюансы SSR и взаимодействие с браузерными API. Давайте разберем это более по‑подробнее.

ViewTransition: анимации переезжают внутрь React

Одна из самых заметных новинок — стабильный компонент <ViewTransition>. Раньше View Transitions существовали только как эксперимент. Теперь это стабильный API, и анимации можно описывать прямо в React‑компонентах.

import { ViewTransition, useState, startTransition } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    startTransition(() => {
      setIsOpen(value => !value);
    });
  };

  return (
    <>
      <button onClick={toggle}>
        {isOpen ? 'Закрыть' : 'Открыть'}
      </button>

      {isOpen && (
        <ViewTransition>
          <div className="card">
            Контент
          </div>
        </ViewTransition>
      )}
    </>
  );
}

При изменении состояния внутри startTransition, React может сам запускать анимацию для компонента.

Сам React может различать несколько исходов:

• enter — это когда элемент появился;

• exit — это когда элемент исчез;

• update — это когда содержимое или стили изменились;

• share — это когда один элемент исчез и появился в другом месте.

По дефолту React использует cross‑fade, но также можно задать свои классы и сделать свою CSS‑анимации.

Раньше для таких анимаций мы использовали:

• CSS transitions или animations

• framer‑motion;

• свою систему анимаций;

• Или ручное управление состояниями в компоненте isVisible или isMounted.

Теперь часть этого выполняется самим React‑ом. Рассмотрим пример:

<ViewTransition>
  <Suspense fallback={<Loading />}>
    <Profile />
  </Suspense>
</ViewTransition>

React также теперь анимирует переход от fallback к самому контенту. Не смотря на это ребята из команды React‑а предупреждают, что лучше использовать анимацию для перехода от загрузки к готовому экрану. То есть в идеале нужно чтобы сам fallback появлялся быстро. Если это рассматривать на практике, то можно сказать, что React начинает лучше связывать рендеринг, загрузку данных и визуальный переход.

Fragment Refs: наконец можно работать с группой DOM‑узлов

Еще одно новововедение это — Freagment Refs.

Возьмем всем нам знакомую ситуацию. Наш компонент должен вернуть несколько элементов разом:

<> 
  <Card />
  <Card />
  <Card />
</>

Ранее, чтобы отслеживать всю группу нам надо было оборачивать всю эту конструкцию в div‑контейнер и вешать на него ref:

<div ref={ref}>
  <Card />
  <Card />
  <Card />
</div>

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

• CSS;

• accessibility;

• размер элементов и компонентов;

• структуру DOM-дерева.

В React 19.3 же, можно не вешать не на div а напрямую на Fragment. То есть если смотреть на примере:

const ref = useRef(null);
return (
  <Fragment ref={ref}>
    <Card />
    <Card />
    <Card />
  </Fragment>
);

Но при этом сам ref дает на возможность работать и с дочерними DOM‑элементами.

Например:

fragmentRef.current?.focus();

Или можем подключить наблюдателей:

fragmentRef.current?.observeUsing(observer);

Также нам доступны операции с событиями, фокусом, позиционированием и DOM‑структурой. На мой взгляд же, эта штука очень полезна при написании своих UI‑компонентов. Например, мы можем написать компонент InView, который будет отвечать за несколько элементов, лежащих в нем:

<InView>
  <Card />
  <Card />
  <Card />
</InView>

И при этом мы можем не создавать лишний контейнер вокруг элементов. Для небольшого приложения это нововведение может быть вообще не заметно. Но если рассматривать, в каком‑то более‑менее, крупной дизайн‑системе или кастомном UI‑kit, то возможность использовать ее выглядит очень даже практично.

browser(): более явный контроль над SSR

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

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

На сервере такого окружения нет. Раньше такую ситуацию можно было решить вот так:

const [mounted, setMounted] = useState(false);

useEffect(() => {
  setMounted(true);
}, []);

if (!mounted) {
  return null;
}

Или, например, через проверки:

if (typeof window === 'undefined') {
  return null;
}

В React 19.3 появился отдельный API browser():

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

function TimeZone() {
  use(browser());
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  return <p>{timezone}</p>;
}

Этот компонент прямо и говорит React‑у:

«Данный кусок интерфейса имеет смысл только в браузере!»

Уже на сервере он будет приостановлен через Suspense, а далее после гидратации продолжит свою работу на клиенте. Даже эта небольшая деталь, является показательно. Потому что React постепенно дает нам специальные механизмы, которые ранее приходилось решать набором обходных паттернов.

React 19.3 — это вам не «несколько хуков»)

Если посмотреть на все изменения вместе, становиться понятно, куда React развивается. ViewTransition работает с переходами интерфейса. Fragment Refs дают более низкоуровневый контроль над DOM‑элементами без лишнего мусора. browser() помогает понятно описать границу между сервером и браузером. A Server Components получают дополнительные возможности с Context. То есть React постепенно становится не просто либой для декларативного описания UI. Он со временем начинает учитывать все больше аспектов приложения:

• рендеринг

• сервер

• браузер

• загрузка

• переходы

• DOM

• пользовательский интерфейс

И именно поэтому React 19.3 стал намного интереснее с развитием своей экосистемы.