Внедрение React 19.2: функция для интерфейсов с вкладками и чек-лист для обновления

Вкладки, мастера и списки за пределами экрана имеют одну общую проблему: при скрытии панели с использованием условной отрисовки она удаляется вместе с позицией прокрутки, незавершёнными формами и загруженными данными. React 19.2 решает эту проблему с помощью компонента Activity. В этом руководстве Activity применяется к лейауту с вкладками, затем рассматриваются остальные нововведения версии и чек-лист для определения момента обновления.

Что пытается исправить версия 19.2

Теперь React выпускается несколько раз в год, и 19.2 — это не полная переработка. Она направлена на решение старых проблем: потеря состояния при удаляении компонента, сложности с зависимостями эффектов и необходимость выбора между быстрыми статическими страницами и свежими данными.

Activity: скрытие интерфейса без его уничтожения

Рассматривайте Activity как более умную альтернативу {condition && <Panel />}. Он принимает свойство mode с двумя значениями:

• hidden скрывает дочерние элементы, отключает их эффекты и откладывает любые обновления до тех пор, пока у React не останутся задачи более высокого приоритета.
• visible показывает дочерние элементы, снова включает их эффекты и обрабатывает обновления в обычном режиме.

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

В приведённом ниже примере панели настроек и панели оплаты помещены в собственные границы Activity, причём свойство activeTab определяет, какая из них видима. Обе панели сохраняют своё положение прокрутки и данные ввода формы при смене активной панели.

// Preserve a tab's scroll position and form state
// even when the user switches away from it
import { unstable_Activity as Activity } from 'react';

function ProfileTabs({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPanel />
      </Activity>
      <Activity mode={activeTab === 'billing' ? 'visible' : 'hidden'}>
        <BillingPanel />
      </Activity>
    </>
  );
}

Одно ограничение: в этом фрагменте импортируется unstable_Activity, название, используемое в предварительных версиях. В стабильной версии 19.2 этот компонент экспортируется как Activity, поэтому при обновлении необходимо проверять актуальную документацию и импортировать его под этим именем.

Поскольку при каждой смене ничего не удаляется и не пересоздается заново, навигация кажется более быстрой. Однако это сопряжено с расходом памяти: каждая скрытая панель остается активной, поэтому следует использовать Activity для экранов, к которым пользователи склонны возвращаться, а не оборачивать каждый маршрут.

useEffectEvent: новые значения без повторной обработки эффектов

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

Здесь значение theme считывается внутри функции onConnected, поэтому подключение зависит только от roomId.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // always fresh theme
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    return () => connection.disconnect();
  }, [roomId]); // theme intentionally left out — and that's fine now
}

Обратите внимание, что в этом фрагменте отсутствует вызов connection.connect(), который в реальной реализации был бы необходим перед возвратом результатов очистки.

Частичная предварительная отрисовка в React DOM

Частичная предварительная отрисовка возникла как экспериментальная функция Next.js 14, а с версией 19.2 эта возможность стала частью библиотеки react-dom. React заранее предварительно отрисовывает статическую структуру страницы, оставляя места для динамических границ Suspense, которые затем заполняются по мере запросов. Таким образом достигается скорость, близкая к статической генерации, при сохранении свежести контента, получаемой за счёт серверной отрисовки. В нашем более подробном обзоре примитивов SSR React 19.2, cacheSignal и PPR подробно рассматриваются соответствующие API.

Небольшие нововведения, о которых стоит знать

• В Chrome DevTools появились специальные показатели производительности для React, которые позволяют увидеть, какие операции React относит к блокирующим, а какие — к переходным и т. д.
• cacheSignal для React Server Components помогает избежать избыточных операций, связанных с кэшированными вычислениями.
• Улучшения в потоковой обработке SSR направлены на сокращение времени до появления интерактивности.

Безопасность: сначала обновите приложения с RSC

Критические уязвимости в React Server Components были обнаружены в декабре 2025 года. Приложения на React 19.0.0 до 19.2.2, использующие RSC, включая стандартную настройку create-next-app, были уязвимы к удаленной выполнению кода. Если вы используете Server Components, немедленно обновитесь до исправленной версии; точные версии с устранением ошибок указаны в официальных объявлениях React и Next.js, поскольку были опубликованы дополнительные патчи.

Стоит ли вашей команде обновиться сейчас?

• Обновите как можно скорее, если вы разрабатываете сложные приложения SSR, создаете интерфейсы с большим количеством вкладок или шагов, или постоянно боретесь с ошибками зависимостей эффектов.
• Обновляйте осторожно, если вы поддерживаете большую базу устаревшего кода: сначала протестируйте более строгие правила проверки hooks на отдельной ветке и устраните выявленные проблемы.
• Обновите немедленно, независимо от наличия функций, если вы используете Server Components и ещё не применили патчи безопасности.

Заключение

19.2 — это незаметное обновление, которое приносит пользу в повседневной работе: Activity меняет подход к управлению сохраняемым состоянием, useEffectEvent устраняет определённый класс хаков с зависимостями, а предварительная отрисовка сокращает разницу между статическими и динамическими страницами. Попробуйте их на одном экране с вкладками перед тем, как внедрять широко.

Связанные материалы

• Основы SSR в React 19.2: Activity, cacheSignal и PPR — подробное объяснение — Узнайте, как новый компонент Activity, функция cacheSignal и технология частичной предварительной обработки в React 19.2 дают разработчикам прямой контроль над производительностью серверной обработки.
• Анализ трекеров производительности React в Chrome DevTools для выявления медленной отрисовки — Узнайте, как трекеры Scheduler, Components и Server, добавленные в React 19.2, показывают, где тратится время на медленные операции, а также как использовать работу в режиме record-fix-record для устранения проблем.