React 19.2 пояснено: Activity, useEffectEvent та статичне відображення

React 19.2 тихо підтверджує те, у що розробники підозрювали протягом багатьох років: знищення та повторна створення компонентів під час кожного циклу „приховати/показати“ ніколи не було справді ефективним.

React 19.2 фреймворк нарешті прямо береться за вирішення цієї проблеми.

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

Більшість порад щодо покращення продуктивності стосуються одних і тих самих проблем: занадто часте виконання ефектів, зайві мережеві запити чи забування обгорнути значення функцією useMemo. Ці проблеми справді існують. Але є ще один, менш помітний фактор, про який рідко говорять: додаткові витрати на постійне створення та знищення компонентів.

Уявіть собі панель керування з вкладками, навігаційну структуру у стилі мобільних пристроїв чи модальне вікно, яке неодноразово відкривається та закривається протягом однієї сесії. Кожного разу, коли ви ховаєте щось за допомогою умовного виразу на кшталт {isVisible && <Component />}, React не призупиняє роботу цієї частини інтерфейсу — він повністю її видаляє. Стан компонента скидається, ефекти розбираються та знову створюються з нуля. Коли контент знову з’являється, DOM доводиться перебудовувати, ніби його ніколи не існувало.

Для невеликих, простих компонентів ця витрата залишається непомітною. Але для панелей керування з великою кількістю даних, вбудованих плеєрів відео чи будь-чого, що використовує важкі сторонні компоненти, це постійне знищення та відновлення стає справжньою причиною зниження продуктивності.

Вирішення саме цієї проблеми було однією з основних мет React 19.2, наряду з двома іншими покращеннями, про які просили розробники.

1. Компонент — зупиніться перед знищенням

Це головне нововведення цієї версії, яке відкриває справді новий підхід до обробки прихованого інтерфейсу в React.

Тепер ви можете позначити частину свого інтерфейсу як видиму або приховану, не знімаючи її повністю, за допомогою нового компонента 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 — пояснення — Дізнайтеся, як новий компонент Activity, cacheSignal та функція часткової попередньої обробки React 19.2 надають розробникам прямий контроль над продуктивністю серверної обробки.

Пропозиції TC39 у 2026 році: пояснення концепцій Decorators, Temporal та Signals — практичний огляд трьох пропозицій TC39 — нативних Decorators, API Temporal та Signals — та їхнього значення для розробників JavaScript та TypeScript у повноцінних фреймворках.