Головна / Статті / Впровадження React 19.2: функції для інтерфейсів з вкладками та перелік кроків для оновлення

ReactReact 19ActivityPerformanceSecurity

Впровадження React 19.2: функції для інтерфейсів з вкладками та перелік кроків для оновлення

Як функція Activity у React 19.2 підтримує активні вкладки у робочому стані, де застосовуються useEffectEvent та попереднє відтворення, і як вирішити, чи варто зараз оновлювати та підтримувати додатки RSC.

904 слів

Вкладки, магістралі та списки поза екраном мають одну спільну проблему: якщо сховати панель за допомогою умовного відображення, вона видаляється разом із позицією прокрутки, наполовину заповненими формами та отриманими даними. 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, створюєте інтерфейси з багатьма вкладками чи кроками, або постійно боретеся з проблемами залежностей ефектів.
  • Оновіться обережно, якщо ви підтримуєте велику базу коду старої версії: спочатку перевірте суворіші правила lint для hooks на окремій гілці та виправте те, що вони виявлять.
  • Оновіться негайно, незалежно від функцій, якщо ви використовуєте Server Components та ще не застосували патчі безпеки.

Підсумок

19.2 — це тихе оновлення, яке приносить користь у повсякденній роботі: Activity змінює підхід до роботи зі збереженим станом, useEffectEvent усуває певний тип хаків залежностей, а попередня обробка зменшує різницю між статичними та динамічними сторінками. Спробуйте їх на одному екрані з вкладками, перш ніж поширювати їх широко.

Пов’язана література

Усі статтіНадіслати бриф