React 19.3: View Transitions, Fragment Refs и независимые рендеры

Вчерашний релиз React 19.3 — не про громкие breaking changes, а про точечные улучшения для сложных сценариев. Если вы не работаете с View Transitions или не проваливались в баги связанные с Suspense и SSR, возможно, обновление пройдет незаметно. Но для некоторых кейсов тут есть важные фиксы и API.

View Transitions на стероидах

Новый <ViewTransition /> — это не просто обертка над нативным API, а полноценная интеграция в React-дерево. На практике это значит, что теперь можно:

function Gallery() {
  return (
    <ViewTransition>
      {items.map(item => (
        <Image key={item.id} src={item.url} />
      ))}
    </ViewTransition>
  );
}

Что изменилось под капотом:

• Анимации больше не ломаются при конкурентном рендере
• Поддержка Suspense внутри перехода
• Фикс бага с “прыгающими” DOM-нодами при переходе

Но есть нюанс: если у вас кастомная реализация на document.startViewTransition(), придется мигрировать — API не совсем один в один.

Fragment Refs: когда просто <div> — не вариант

До 19.3 попытка навесить ref на <Fragment> приводила к неочевидному поведению. Теперь это легально и даже полезно для композитных компонентов:

const List = () => {
  const fragmentRef = useRef();

  useEffect(() => {
    // Теперь работает
    console.log(fragmentRef.current);
  }, []);

  return (
    <>
      <Fragment ref={fragmentRef}>
        {/* ... */}
      </Fragment>
    </>
  );
};

Из практических применений:

• Обход ограничений порталов
• Кастомные виртуализированные списки
• Интеграции с Canvas/WebGL

Но если вы не разрабатываете дизайн-систему или low-level UI-киты, вряд ли будете часто использовать.

Независимые рендеры для переходов

Одна из самых болезных проблем в Concurrent React — блокирующие переходы. Представьте:

1. Пользователь кликает на таб
2. Запускается “медленный” переход с лоадером
3. Параллельный “быстрый” переход ждет завершения первого

В 19.3 такие сценарии больше не блокируют друг друга благодаря изменению в механизме scheduling. На практике это выглядит как более отзывчивый интерфейс, особенно на слабых устройствах.

SSR и RSC: что поправили

Для тех, кто плотно работает с Server Components и SSR, есть несколько важных фиксов:

• Пофикшен баг с “зависанием” рендера на Deno (#35235)
• Добавлено отслеживание onBrowserBailout для анализа клиентских фоллбэков
• Улучшена обработка nonce атрибутов при гидратации

Особенно порадовал фикс для decodeReplyFromBusboy, который терял данные FormData при стриминге — кошмар для файловых загрузок через RSC.

Что пробовать в первую очередь

1. Если делаете SPA с анимациями — мигрируйте на <ViewTransition />
2. Для дизайн-систем — потестируйте Fragment Refs в композитных компонентах
3. При проблемах с Concurrent Mode — проверьте, не исчезли ли баги с независимыми рендерами

А вот если ваш стек — классический CSR без Suspense, можно не торопиться с обновлением. Самые сочные фичи здесь — для тех, кто уже глубоко в Concurrent React и Server Components.

Источник: https://github.com/react/react/releases/tag/v19.3.0