Wprowadzanie React 19.2: Funkcje dla interfejsów z kartkami oraz lista kontrolna aktualizacji

Karty, asystenci i listy poza ekranem mają jeden wspólny problem: gdy ukryje się panel przy użyciu warunkowego renderowania, ten zostaje usunięty wraz z pozycją przewijania, niekompletnymi formularzami oraz pobraanymi danymi. React 19.2 rozwiązuje to problem za pomocą komponentu Activity. Niniejszy przewodnik stosuje Activity w układzie kart, a następnie omawia pozostałe nowości tej wersji oraz listę kontrolną pomagającą zdecydować, kiedy należy dokonać aktualizacji.

Czego próbuje naprawić wersja 19.2

React teraz wydaje kilka wersji rocznie, a 19.2 nie jest całkowitym przepisaniem kodu. Skupia się na starych problemach: utracie stanu po usunięciu komponentu, trudnościach związanych z zależnościami efektów oraz kompromisie pomiędzy szybkimi stronami statycznymi a aktualnymi danymi.

Activity: ukrywanie interfejsu bez jego niszczenia

Potraktuj Activity jako inteligentniejszą alternatywę dla {condition && <Panel />}. Przyjmuje on właściwość mode z dwiema wartościami:

• hidden ukrywa dzieci, dezmontuje ich efekty i odkłada wszelkie aktualizacje do chwili, gdy React nie będzie miał już zadań o wyższej priorytecie.
• visible pokazuje dzieci, ponownie montuje ich efekty i przetwarza aktualizacje w normalny sposób.

Ważnym elementem jest to, co zostaje zachowane. Stan komponentu oraz zrenderowana struktura są przechowywane, więc powrót do poprzedniego stanu następuje natychmiast, ale efekty są usuwane podczas stanu ukrycia. Dlatego subskrypcje, timerzy i pomiary przestają działać, co zazwyczaj jest pożądane w przypadku panelu, na który nikt nie patrzy.

Poniższy przykład otacza panel ustawień oraz panel fakturowania własnymi granicami Activity, a właściwość activeTab decyduje o tym, który z nich jest widoczny. Oba panele zachowują swoją pozycję przewijania oraz dane z formularzy, gdy użytkownik przechodzi do innego elementu.

// 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>
    </>
  );
}

Jedna uwaga: ten fragment importuje unstable_Activity, nazwę używaną w wersjach przedpremierowych. W stabilnej wersji 19.2 komponent jest eksportowany jako Activity, więc sprawdź aktualną dokumentację i importuj go pod tą nazwą po aktualizacji.

Ponieważ przy każdej zmianie nic nie jest usuwane i ponownie budowane, nawigacja wydaje się szybsza. Kosztem jest pamięć – każda ukryta karta pozostaje aktywna, więc przeznacz Activity na ekrany, do których użytkownicy prawdopodobnie będą wracać, zamiast otaczać każdą trasę takim rozwiązaniem.

useEffectEvent: nowe wartości bez ponownego uruchamiania efektów

Jeśli kiedykolwiek dodałeś wartość do tablicy zależności tylko po to, by zadowolić narzędzie do sprawdzania kodu, a potem zaobserwowałeś uruchomienie efektu w momencie, gdy nie powinien on zostać uruchomiony, to ten hook jest rozwiązaniem. Pozwala on efektowi odczytywać najnowsze właściwości i stan za pomocą oddzielnej funkcji, bez konieczności ponownego uruchamiania efektu z powodu tej wartości.

Tutaj theme jest odczytywany wewnątrz onConnected, więc połączenie zależy wyłącznie od 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
}

Należy zauważyć, że ten fragment pomija wywołanie connection.connect(), które w rzeczywistej implementacji byłoby konieczne przed zwróceniem informacji o czyszczeniu.

Częściowe wstępne renderowanie w React DOM

Częściowe wstępne renderowanie powstało jako eksperymentalna funkcja Next.js 14, a od wersji 19.2 ta możliwość stała się częścią react-dom. React z góry renderuje statyczną strukturę strony, pozostawiając puste miejsca tam, gdzie znajdują się dynamiczne granice Suspense, a te puste miejsca wypełnia na żądanie. Dzięki temu uzyskujemy prędkość zbliżoną do generowania treści statycznych przy jednoczesnej świeżości danych renderowanych na serwerze. Nasze bardziej szczegółowe omówienie zasad SSR w React 19.2, cacheSignal i PPR zawiera szczegółowy opis tych interfejsów.

Mniejsze ulepszenia, które warto znać

• Chrome DevTools otrzymało specjalne wskaźniki wydajności dla React, dzięki czemu można zobaczyć, które operacje React traktuje jako blokujące, a które jako przejściowe itp.
• cacheSignal w komponentach serwerowych React pomaga uniknąć zbędnego obliczania danych przechowywanych w pamięci cache.
• Ulepszenia w przepływie danych SSR mają na celu szybsze uzyskanie interaktywności.

Bезpieczeństwo: najpierw zaktualizuj aplikacje RSC

Krytyczne luki bezpieczeństwa w komponentach serwerowych React zostały ujawnione w grudniu 2025 roku. Aplikacje na React 19.0.0 do 19.2.2, które wykorzystują RSC, w tym te utworzone za pomocą domyślnej konfiguracji create-next-app, były narażone na zdalne wykonywanie kodu. Jeśli używasz komponentów serwerowych, natychmiast zaktualizuj się do wersji poprawionej; sprawdź dokładne wersje naprawione w oficjalnych komunikatach React i Next.js, ponieważ opublikowano dodatkowe poprawki.

Czy wasz zespół powinien teraz dokonać aktualizacji?

• Zaktualizujcie jak najszybciej, jeśli tworzycie złożone aplikacje SSR, wdrażacie interfejsy z wieloma kartami lub krokami lub ciągle walczycie z błędami związanymi z zależnościami efektów.
• Zaktualizujcie ostrożnie, jeśli utrzymujecie duży zasób kodu ze starszych wersji: najpierw wypróbowajcie surowsze zasady lintingu dla hooks na gałęzi i poprawcie to, co one wskazują.
• Zaktualizujcie natychmiast, niezależnie od funkcjonalności, jeśli polegacie na Server Components i nie zastosowaliście poprawek bezpieczeństwa.

Podsumowanie

Wersja 19.2 to cicha aktualizacja, która przynosi korzyści w codziennej pracy: Activity zmienia sposób myślenia o zachowywanej stanie, useEffectEvent eliminuje pewien typ trików związanych z zależnościami, a wstępne renderowanie zmniejsza różnicę między stronami statycznymi a dynamicznymi. Spróbujcie ich na jednym ekranie z kartami, zanim rozpowszechnicie je szeroko.

Pozycje pokrewne

• React 19.2 SSR Prymitywy: Activity, cacheSignal i PPR wyjaśnione — Dowiedz się, jak nowy komponent Activity, cacheSignal oraz Partial Pre-rendering w React 19.2 umożliwiają programistom bezpośrednią kontrolę nad wydajnością renderowania na serwerze.
• Czytanie wykresów wydajności React-u w Chrome DevTools w celu znalezienia wolnych procesów renderowania — Dowiedz się, jak wykresy Scheduler, Components i Server dodane w React 19.2 pokazują, gdzie traci czas wolna interakcja, oraz jak wykorzystać proces record-fix-record do podjęcia działań w tej sprawie.