Wydajne UI w React: poznaj <Activity>

9 lutego 2026 4 min. czytania 823 słów

Co to Activity w React?

W nowoczesnych aplikacjach frontendowych wydajność interfejsu ma bezpośredni wpływ na doświadczenie użytkownika. Każde opóźnienie przy przełączaniu widoków, reset stanu formularzy czy ponowne renderowanie ciężkich komponentów (tabele, wykresy, raporty) obniża płynność działania aplikacji.

<Activity> pozwala zachować komponenty w pamięci bez ich aktywnego renderowania. Zamiast unmount --> mount, React może je “uśpić”, a następnie przywrócić w dokładnie tym samym stanie.

Dzięki temu zyskujemy:

brak utraty stanu komponentu,
brak kosztownego ponownego renderowania,
natychmiastowe przełączanie widoków.

Można traktować to jak cache dla UI.

Różnica między Activity a display: none;

Często można spotkać się z opinią, że <Activity> to po prostu alternatywa dla ukrywania elementów za pomocą CSS. To nieporozumienie, różnica dotyczy całej architektury renderowania.

display: none;

element znika wizualnie
React nadal traktuje go jako aktywny
komponent nadal bierze udział w re-renderach
hooki (useEffect, useLayoutEffect) nadal działają
niepotrzebne zużycie CPU i pamięci

Activity

komponent jest ukryty logicznie, nie tylko wizualnie
React obniża jego priorytet w schedulerze
renderowanie i aktualizacje są wstrzymane
efekty i hooki nie są wykonywane
stan pozostaje zachowany w pamięci

To fundamentalna różnica: CSS ukrywa tylko wygląd, Activity zatrzymuje pracę komponentu.

Jak działa Activity?

Activity przyjmuje właściwość mode:

visible - normalne renderowanie
hidden - komponent zostaje “zamrożony”

W trybie hidden React:

wstrzymuje efekty
nie wykonuje aktualizacji
nie przelicza renderu
zachowuje stan, DOM i pozycję scrolla

Dzięki temu powrót do widoku jest praktycznie natychmiastowy.

Activity a cykl życia komponentu

Cleanup: Wywoływane są funkcje czyszczące z useEffect, ale komponent nie jest odmontowywany.
State: Stan komponentu jest zachowany
Re-mount: Gdy tryb zmieni się na visible, efekty są ponownie uruchamiane, ale bez resetowania stanu.

Dzięki temu nie musisz się martwić, że “uśpiony” komponent w tle będzie nadal utrzymywał otwarte połączenie WebSocket czy niepotrzebny timer.

Gdzie to ma sens?

Dashboardy i panele administracyjne (tabele, wykresy)
Formularze wieloetapowe (zachowanie wpisanych danych)
Nawigacja typu taby (szybkie przełączanie)
Widoki prerenderowane w tle (przygotowanie ciężkiego komponentu zanim użytkownik go zobaczy)

Przykład użycia

Dashboard Aktywności

Przełączaj widoki bez utraty stanu renderowania.

Raport Sprzedaży

LIVE

import { Activity, useState, useEffect } from "react";
 
const TABS = [
   { id: "sales", label: "Sprzedaż", icon: "💰" },
   { id: "inventory", label: "Magazyn", icon: "📦" },
];
 
export function ActivityDemo() {
   const [activeTab, setActiveTab] = useState("sales");
 
   const [salesData, setSalesData] = useState([80, 45, 60]);
 
   useEffect(() => {
      const interval = setInterval(() => {
         setSalesData(salesData.map(() => Math.floor(Math.random() * 100)));
      }, 2000);
      return () => clearInterval(interval);
   }, [salesData]);
 
   return (
      <section className="flex flex-col py-4 gap-8 items-center bg-background text-foreground min-h-[500px]">
         <div className="text-center flex flex-col gap-2">
            <h2 className="text-xl font-bold tracking-tight">Dashboard Aktywności</h2>
            <p className="text-sm text-foreground-secondary">
               Przełączaj widoki bez utraty stanu renderowania.
            </p>
         </div>
 
         <nav className="flex bg-background-secondary p-1.5 rounded-xl border border-border shadow-2xl">
            {TABS.map((tab) => {
               const isActive = activeTab === tab.id;
               return (
                  <button
                     key={tab.id}
                     type="button"
                     onClick={() => setActiveTab(tab.id)}
                     className={`
                relative flex items-center gap-2 px-8 py-2.5 rounded-lg text-sm font-medium transition-all duration-300
                ${
                   isActive
                      ? "bg-background text-accent shadow-accent-sm ring-1 ring-border"
                      : "text-foreground-secondary hover:text-foreground hover:bg-background-secondary/70"
                }
              `}
                  >
                     <span>{tab.icon}</span>
                     {tab.label}
                     {isActive && (
                        <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1/2 h-px bg-accent/70" />
                     )}
                  </button>
               );
            })}
         </nav>
 
         <div className="w-full max-w-3xl px-6">
            <Activity mode={activeTab === "sales" ? "visible" : "hidden"}>
               <div className="group relative overflow-hidden p-8 bg-background-secondary border border-border rounded-3xl min-h-[320px]">
                  <div className="flex justify-between items-start mb-8">
                     <h3 className="text-lg font-medium text-foreground">Raport Sprzedaży</h3>
                     <span className="text-xs font-mono text-accent bg-accent/10 px-2 py-1 rounded">
                        LIVE
                     </span>
                  </div>
 
                  <div className="space-y-4">
                     {salesData.map((width, i) => (
                        <div key={i} className="h-3 bg-background rounded-full overflow-hidden">
                           <div
                              className="h-full bg-accent/40 transition-all duration-1000"
                              style={{ width: `${width}%` }}
                           />
                        </div>
                     ))}
                  </div>
               </div>
            </Activity>
 
            <Activity mode={activeTab === "inventory" ? "visible" : "hidden"}>
               <div className="p-8 bg-background-secondary border border-border rounded-3xl min-h-[320px] flex flex-col">
                  <h3 className="text-lg font-medium text-foreground mb-6">Status Magazynowy</h3>
 
                  <div className="grid grid-cols-4 gap-3">
                     {Array.from({ length: 12 }).map((_, i) => (
                        <div
                           key={i}
                           className="aspect-square bg-background border border-border rounded-xl hover:border-foreground-secondary transition-colors cursor-crosshair"
                        />
                     ))}
                  </div>
               </div>
            </Activity>
         </div>
      </section>
   );
}

Efekt: brak zbędnego renderowania, zachowany stan i błyskawiczne przełączanie.

💡 Ważna uwaga: Każdy komponent w <Activity mode="hidden"> nadal zajmuje pamięć RAM. Stosuj to rozwiązanie dla kluczowych elementów interfejsu, a nie dla każdego komponentu w aplikacji.

Prerenderowanie w tle

<Activity> w połączeniu z <Suspense> pozwala na renderowanie widoków w tle. Możesz załadować dane i wyrenderować ciężki komponent w trybie hidden. Gdy użytkownik kliknie przycisk, komponent jest już “rozgrzany” i gotowy do natychmiastowego wyświetlenia bez żadnych spinnerów ładowania.

Podsumowanie

<Activity> pozwala utrzymywać widoki w pamięci i kontrolować ich aktywność zamiast montować je od nowa. To prosta optymalizacja, która znacząco poprawia responsywność aplikacji, szczególnie w dashboardach i rozbudowanych interfejsach.

Należy pamiętać, że <Activity> to nie tylko ukrywanie elementów, ale przede wszystkim zarządzanie ich cyklem życia i wydajnością. Warto eksperymentować z tym API, aby znaleźć najlepsze zastosowania w swoich projektach.

Moim zdaniem warto zacząć się tym interesować już teraz, ponieważ w przyszłości, gdy zostaną dodane kolejne funkcjonalności, będzie to kluczowy element optymalizacji interfejsów.