React 19.2: компонент Activity, хук useEffectEvent і статычная рэндарызацыя

React 19.2 тыха ўзнімае пытанне, якое разработчыкі западзялі гады: знишчэнне і паўторная стварэння компанентоў у кожны момент паказу/схову ніколі не было справжньям эконамічным рашэнням.

Уявіце звычную ситуацыю: корыстнік переходзіць між двумя вкладкамі у вашай аплікацыі. Спіс знову запрашае своі даны. Форма апускаецца до стану пачатковага. Пазіцыя прасування пераключаецца на верх. Гэта відбываецца ў кожны момент змены стану, таму што React постаўляе і паўторна стварае UI, які на самай працэ ня быў неабходны для знішчэння.

Гэта не тое, што вы самі зламалі у своем коде. Гэта проста спосаб, яким React паводзіўся з самых першых версый. З React 19.2 фреймворк нарэшце прымае актыўныя заходы ў зв’язку з гэтым.

Проблема, пра якую ніхто не говорыць

Большая частка парадыгм павышэння каркаснасці апоўнюецца тымі ж проблемамі: занадто часта рэалізацыя эфектаў, зайвыя запыты да сеті чыста-такі ж забывчына аб абгортаванні значэння ў useMemo. Гэтыя прычыны дзейсна маюць значэнне. Але існуе ўжо адна тыхая, рэдка калі праменаваемая проблема — додатковыя витраты на паўтарную установку і адмонтаванне компонентаў.

Падумайце пра панелі керування з вкладкамі, структуру навігацыі у стыле мобайля чыста-такі ж модальныя вікна, якія паўтараюцься ў адной сесыі. Кожны раз, калі вы хаваеце ўсё гэта за дапамогою умовнага выраза, такога як {isVisible && <Component />}, React не настаўляе паузу ў роботе гэтай часткі інтерфейсу — ён проста абрынае яе цэлым. Стан вычышваецца. Эфекты руйнуюцься і зноў ствараюцца з нуля. Калі контэнт з’яўляецца знову, DOM трэба перзбудаваць, як бы яго ніколі не існавало.

Для маленькіх, простых компонентав такі витыкаецца непазначальны. Але для дашбордаў з великым об’ёмам дадзэнняў, вбудованых плеераў відзеікаў чы будзь-чаго, што абгортае важкі трэці-сторонні віджет, такая паўтарная дэструкцыя і реканструкцыя стае справжнім паглыбленнем працэсу выканання.

Рашэнне самэй гэтай проблемы было адной з цэльных метаў React 19.2, нароўна з двумя іншымі паслабленнямі, якіх прасілі разработчыкі.

1. Компонент — Зупініцеся перш чым знищыць

Гэта галоўныя новацыя ў гэтым выласку, і яна прадстаўляе сабою абоўсцю новы падход да таго, як React караце схованы UI.

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

import { unstable_Activity as Activity } from 'react';

function Dashboard({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'analytics' ? 'visible' : 'hidden'}>
        <AnalyticsPanel />
      </Activity>

      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPanel />
      </Activity>
    </>
  );
}

За дапамою гэтага патэрану, AnalyticsPanel, які знаходзится ў відокне на фоне, не перзапрашвае свае даны і не втрачае пазіцыю прасування, калі вы перайходзите з яго і праз яго знову — ён проста заставаліся недзейным увесь час. Функцыя Activity у React 19.2 працюе ў двух режымах: у режыме hidden дзецяві элементы візуальна схованы, але не выкарыстоўваны — ўсія іх эфекты заставаюцца актыванымі, але всі запланаваныя апдэты відкладаюцца пакуль справаў, якія трэба обрабаваць, не стануць болей няпрыемнымі; у режыме visible дзецяві элементы атрыбутуюцца звычайна, без жадных перакосаў у процэсе обрабоцкі апдэтаў. Корыстны парадукт такога дзяйства — гэта можлівасць прадзейнацкі відакон, на якія корыстнік ўсё ўжо не клацнуў.

Практычныя прыклады выкарыстоўвання:

• Формы, у якіх корыстнікі раз за разам перайходзяць туда-сюды між этапамі

Дорогі графікі або таблыцы дадзейнаў, якія знаходзяцца ў інтерфейсах з вкладкамі

Структуры экранаў, якія падобныя да шаблонаў навігацыі ў мобільных прыстроях, аналогічныя React Navigation

Прыготавленне наступнага экрана заздалегідь, калі корыстувач яшчэ знаходзіцца на текущам

2. useEffectEvent — Стабільная логіка адбывання запускоў унутроць эфектаў

Якщо вы калі-небудзь дадзілі функцыю ў масэвую зменную useEffect проста каб утамувалі інструменты перагляду кода, але пазналі, што запускі эфекта вяршаюцца набліжна частае, чым трэба, то гакі хук рашае самэ гэту проблему.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification(`Connected to ${roomId}`, theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // theme no longer needs to be here
}

У функцыі onConnected вы завжоды чытаеце найсвежэйшую значэнне theme, але сама толькі змена theme не спрыяе паўторнаму з’яўленню ў чат-кімнате. По суты, гэта ўсё тая ж офіцыйная версія альтернатыўнага рашэння, якое разработчыкі прыменялі за дапамогою useRef працоўна гады — тепер React дае яму назву і падтрымку першага класу.

3. Частковая статычная рэндарызація — статычныя сторункі з жывымі дадзеннямі

Гэта функцыя, якая ўвімкнулася за жаданням і прызначаная для команд, якія ствараюць аплікацыі з сервернай рэндарызацыёю. Незалежна ад таго, чы вы викорыстовваеце Next.js, Remix чы працуеце безпосередня з RSC, React 19.2 дазволяе празвантажыць статычную частку сторункі заздалегідь і падаць дынамічныя элементы, калі яны будуць гатовы.

Большая частка сторанкі прытаму адразу прадстаўляецца як незменны каркас. Усё, што залежыць ад сеансу падключэння да сеті, заполняецца пазней і адключаецца за дапамою стрімування, калі прыходзяць даны. Гэта значыць, што візітары момантальна бачаюць вашу паліцу навігацыі і главны раздзял, тады як всё персоналізавана паказваецца за калькі секунд, без неабяжнага показу індыкатора загрузкі всей сторанкі.

Асновны вывад

Ключовая ідея React 19.2 закладзена ў тым, што гэта не якісна перапісва фреймворку — це React, які выправляе падазры, закладзеныя ў його модэлы працыгод назад. Прыховванне чаго-небудзь не должна прымусваць вас адключаць гэты элемент. Напісанне эфектаў не должна значыць выбор между застарэлымі значениямі і непатрэбным паўтарным выкананнем. А швальнасць першага адрасавання зместу не должна завісіць ад найпамедлейшага адказу API.

Якщо ваша аплікацыя працуе повольна, і useMemo з React.memo не могу ця проблема ўсунуць, то гэты вылейка, верагодна, спрямованы саме на ўсуненне гэтага недастатку. Спробуйце застосаваць адны з гэтых падходаў у вікні з карточкамі у своем проекте ў гэты тыдзень — змяны незначныя, але ўплыв на відчуваемую працэздатнась цалкам значны.

Спадні матэрыялы

• React 19.2 SSR Primitives: Activity, cacheSignal, і PPR Explained — Дазнаецеся, як новыя компоненты React 19.2 – Activity, cacheSignal і Partial Pre-rendering – даюць разработчыкам прымусовы контроль над працэздатнасцю сервернага рендарування.

Працэўныя прыказы TC39 у 2026 годзе: декоратары, Temporal і Signals — адпаведныя пояснення — практычны аналіз трох працэўных прыказаў TC39 — натыўных декоратароў, API Temporal і Signals — і таго, што яны значаюць для разработчыкаў JavaScript і TypeScript з фул-стак-падходам.