React 19.2: Activity, useEffectEvent і частковий пререндеринг

React 19.2 додає інструменти для збереження прихованого UI, відокремлення подій від Effects і часткового пререндерингу. Найпомітніші новинки — компонент <Activity>, Hook useEffectEvent, Performance Tracks і нові server APIs. Вони розв’язують реальні проблеми, але потребують розуміння життєвого циклу, а не механічної заміни старого коду.

Activity зберігає стан прихованої частини інтерфейсу

<Activity> у React 19.2 підтримує режими visible та hidden. У прихованому стані React ховає дочірній UI, демонтує Effects і відкладає оновлення до вільнішого моменту. Компонентне дерево при цьому можна зберегти, тому повернення на попередню вкладку або екран не обов’язково скидає введені дані й локальний стан.

Прихований UI не є безкоштовним

Збережене дерево продовжує займати пам’ять. Якщо обгорнути в Activity десятки важких сторінок, застосунок може отримати швидшу навігацію ціною більшого heap. Effects у режимі hidden демонтуються, тож підписки й ресурси мають коректно очищатися. Activity слід використовувати для конкретних маршрутів і панелей, де збереження стану справді покращує UX.

Для збірки React-проєкту корисно окремо оцінити перехід на Vite 8 і Rolldown, а продуктивність графічних інтерфейсів — у контексті міграції з WebGL на WebGPU.

useEffectEvent відокремлює подію від реактивного Effect

Типова проблема useEffect виникає, коли callback має бачити актуальну тему або локалізацію, але зміна цієї змінної не повинна перепідключати websocket. useEffectEvent дозволяє винести подієву частину: функція бачить нові props і state, але не стає залежністю Effect. Це зменшує потребу вимикати правило exhaustive-deps.

Новий Hook не призначений для приховування залежностей

React прямо застерігає: не потрібно обгортати в useEffectEvent будь-яку функцію лише для того, щоб linter перестав скаржитися. Effect Event має представляти подію, яку запускає зовнішня система всередині Effect. Логіка, що визначає саме підключення або синхронізацію, повинна залишатися реактивною.

eslint-plugin-react-hooks потрібно оновити

Актуальний linter розуміє, що Effect Events не додаються до dependency array, і перевіряє обмеження їх використання. Без оновлення команда може отримати неправильні автопідказки або почати масово вимикати правила. Оновлюйте React, React DOM, types і lint-плагін одним контрольованим набором.

Performance Tracks додають контекст у Chrome DevTools

React 19.2 записує спеціальні доріжки до Performance-профілю Chrome. Вони допомагають зіставляти роботу scheduler і component rendering із browser tasks. Це не замінює React Profiler або real-user monitoring, але спрощує аналіз довгих кадрів, повторних render-ів і конкуренції з іншими скриптами.

Partial Pre-rendering розділяє статичну й динамічну роботу

Нові API дозволяють попередньо створити статичну частину відповіді, зберегти postponed state, а згодом продовжити rendering динамічної частини. Це інфраструктурний механізм для framework-ів, а не готова кнопка в кожному SPA. Потрібно перевірити підтримку конкретного React-framework, кешу, runtime та платформи розгортання.

SSR отримав Web Streams, але Node Streams залишаються важливими

У Node.js стали доступні renderToReadableStream, prerender і resume APIs на Web Streams. Команда React водночас рекомендує Node Streams для Node-середовища через кращу продуктивність і звичну підтримку compression. Вибір API має базуватися на вимірюванні всього маршруту відповіді, а не лише render-функції.

Suspense у SSR змінює момент показу меж

React 19.2 коротко групує розкриття серверних Suspense boundaries, щоб поведінка краще відповідала клієнтському rendering. У тестах потрібно перевірити порядок появи контенту, loading states і метрики, які залежать від конкретного DOM-моменту. Snapshot-тест не завжди виявляє зміну сприйняття користувачем.

Чекліст міграції

• оновіть react і react-dom синхронно;
• перевірте types, eslint plugin і framework adapters;
• знайдіть Effects із вимкненим exhaustive-deps та класифікуйте причину;
• впроваджуйте Activity лише після вимірювання пам’яті;
• перевірте SSR, hydration і Suspense під навантаженням;
• перебудуйте performance baseline у Chrome DevTools і RUM;
• не використовуйте низькорівневі prerender APIs всупереч рекомендаціям framework-а;
• розгортайте поступово та стежте за client errors.

Висновок

React 19.2 не змушує переписувати застосунок. Його сильна сторона — точкові рішення для навігації зі збереженням стану, коректніших Effects і складного SSR. Починати варто з проблеми, яку команда вже виміряла, а не з бажання використати кожен новий API.

Типові помилки впровадження

Activity не слід використовувати як універсальний cache сторінок: приховані дерева накопичують пам’ять і можуть тримати великий state. Effect Event не повинен маскувати справжню dependency. У server rendering небезпечно переходити на низькорівневі resume APIs, якщо framework уже керує streaming і cache. Кожна новинка має починатися з одного ізольованого сценарію та вимірюваного очікуваного результату.

Що додати до регресійного набору

Перевірте повернення до прихованої форми, cleanup subscription після hidden mode, актуальність props усередині Effect Event і поведінку повільних Suspense boundaries. Для SSR порівняйте HTML, статус-коди, headers, compression та hydration errors. Профіль пам’яті після десяти циклів навігації корисніший за один красивий performance trace.

Першоджерело: офіційний огляд React 19.2.