Tehnologija
React <Activity /> deep dive: zadrži state, pauziraj Effects, render u pozadini — praktični obrasci, stvarni edge caseovi i rollout checklist
<Activity /> (React 19.2) je treća opcija između unmountanja UI-ja i CSS skrivanja: čuva state, skriva DOM, uništava Effects i spušta prioritet hidden updateova. Ovo poglavlje (dio React 2026 Primitives vodiča) pokriva stvarne obrasce za tabs/drawers/shell UI, pre-render sljedećeg screena, SSR/hydration implikacije, zamke ekosustava i checklist za production rollout.
React 2026 Primitives & Compiler Upgrade Guide
Fokusirano poglavlje o <Activity />. Prvo pročitaj overview, zatim usvajaj obrasce inkrementalno uz mjerljive guardraile.
Svi članci u ovom vodiču
01
Overview: React 2026 primitives and compiler-era mental model
Šira slika: što se promijenilo i gdje se koji primitiv uklapa.
02
useActionState deep dive: mutation flows, optimistic UI, and integration patterns
Kada useActionState smanjuje boilerplate, a kada data layer i dalje posjeduje problem.
03
React <Activity />: keep state, pause Effects, background render
Praktični obrasci, performance trade-offovi, zamke ekosustava i rollout checklist.
04
useEffectEvent deep dive: effect design, subscriptions, and analytics
Linter-friendly granice za effecte bez stale closures ili reconnect churn.
Dio React 2026 vodiča
U overviewu objašnjavamo kako Actions, <Activity />, useEffectEvent, Performance Tracks, SSR batching i Compiler tvore smjer (ne slučajan skup featurea).[2]
Ovo je poglavlje iz našeg React 2026 Primitives vodiča. Ako želiš prvo roadmapu, kreni s overviewem:
Što ćeš dobiti iz ovog poglavlja
Docs su jasni: u hidden modu React skriva djecu preko display: none, uništava Effects (cleanup subscriptiona), čuva state i djeca mogu re-renderati na nove propse (niži prioritet).[1]
<Activity /> je najbolje shvatiti kao kontrolu lifecycle-a + scheduling-a za hidden UI. Ovo poglavlje je o tome kako ga koristiti bez degradacije aplikacije.
• Stvarna semantika
mode="visible" | "hidden": DOM, state, Effects, prioritet updateova.[1][2]• Obrasci koji stvarno rade: tabs/drawers, “warm next screen”, teški paneli, SSR gating.[1][2]
• Kako učiniti hidden posao jeftinijim (kontrola prop churn-a) i izbjeći skupe updateove.[1]
• Edge caseovi ekosustava: što puca u third-party widgetima i kako se obraniti.[7]
• Production rollout checklist (feature flagovi + metrike + memory budget).
React 19.2: hidden skriva djecu, unmounta Effects, defera updateove i omogućuje background preparation.[2]
Zašto <Activity />: rupa između unmountanja i CSS-hide
Povijesno većina aplikacija koristi:
1) Conditional rendering: čist lifecycle, ali gubiš lokalni state kad se hidden UI unmounta (forme, scroll, UI state).
2) CSS hide: state ostaje, ali hidden subtree može držati subscriptione/timere i natjecati se za main-thread.
React 19.2 pozicionira Activity kao način da aplikaciju razbijemo na “activities” koje se mogu kontrolirati i prioritizirati. U hidden modu skriva djecu, unmounta Effects i defera updateove dok React nema ništa važnije.[2]
Mentalni model: što `hidden` radi (i što ne radi)
Najčešća greška: misliti da hidden znači “React ne rendera”. Može re-renderati — samo s nižim prioritetom.
React Labs pojašnjava namjeru: konceptualno “unmounted”, ali React sprema state. Preporučuju <StrictMode> da rano uloviš problematične Effecte, jer Activity radi mount/unmount Effects na toggle.[3]
React Reference: hidden skriva DOM, uništava Effects i de-prioritizira updateove; visible vraća prethodni state i recreira Effects.[1]
Snimka zaslona sekcije mental-modelAPI: osnovni obrazac
Minimalna upotreba:
import { Activity, useState } from "react";
export function SidebarShell() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen((v) => !v)}>
{open ? "Hide" : "Show"}
</button>
<Activity mode={open ? "visible" : "hidden"}>
<Sidebar />
</Activity>
</>
);
}Iz reference: u hidden modu Effects se uništavaju (cleanup), djeca se skrivaju preko display: none, i mogu re-renderati na propse s nižim prioritetom.[1]
Obrazac 1: Tabs / drawers koji čuvaju state bez hidden side-effectova
“Killer” use case: sačuvaj state (form input, scroll) bez aktivnih subscriptiona/timera dok je hidden.[1][2]
import { Activity } from "react";
export function SettingsTabs({ tab }: { tab: "profile" | "billing" }) {
return (
<>
<Activity mode={tab === "profile" ? "visible" : "hidden"}>
<ProfileTab />
</Activity>
<Activity mode={tab === "billing" ? "visible" : "hidden"}>
<BillingTab />
</Activity>
</>
);
}Ako tab treba kontinuirani background rad za ispravnost, nemoj skrivati “engine” unutar Activity boundary (vidi Obrazac 4).
Obrazac 2: “Warm next screen” na intent (hover/focus) bez blokiranja foregrounda
React 19.2 eksplicitno kaže da možeš pre-renderati i nastaviti renderati hidden dijelove bez utjecaja na vidljivu performance.[2] Trik: warmup na *intent* (hover/focus).
import { Activity, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
export function ContinueButton({ nextHref }: { nextHref: string }) {
const router = useRouter();
const [armed, setArmed] = useState(false);
useEffect(() => {
if (!armed) return;
router.prefetch(nextHref);
}, [armed, nextHref, router]);
return (
<>
<button onMouseEnter={() => setArmed(true)} onFocus={() => setArmed(true)}>
Continue
</button>
<Activity mode={"hidden"}>
<NextStepShell />
</Activity>
</>
);
}Ovaj obrazac je namjerno konzervativan: priprema subtree u pozadini, ali ga ne prikazuje do navigacije. To je scheduling hint, ne UI trik.
Obrazac 3: Učini hidden rendere jeftinima kontrolom prop churn-a na boundaryju
import { Activity, useMemo } from "react";
type Filters = { key: string; q: string; sort: "new" | "top" };
export function HeavyPanelHost(props: {
visible: boolean;
filters: Filters;
liveTick: number;
}) {
const stableFilters = useMemo(() => props.filters, [props.filters.key]);
return (
<Activity mode={props.visible ? "visible" : "hidden"}>
<HeavyPanel filters={stableFilters} />
</Activity>
);
}Hidden djeca mogu re-renderati na promjene propsa.[1] U praksi najveći trošak je kad stalno šalješ promjenjive propse u hidden tree.
• Ne prosljeđuj high-frequency vrijednosti (
now, streaming stats, scroll position) u hidden tree.• Stabiliziraj propse koji ne moraju mijenjati u hidden (memoize po stable key).
• Ako treba live vrijednost: drži je u malom stable engineu i šalji snapshot u hidden subtree.
Obrazac 4: Ne skrivaj data engine unutar Activity
Najčešći production footgun: Activity uništava Effects dok je hidden.[1][2] Ako ispravnost ovisi o kontinuiranim subscriptionima/pollingu, premjesti engine van Activity i proslijedi podatke unutra.
import { Activity, useEffect, useState } from "react";
type Live = { count: number };
declare function subscribeLive(onValue: (v: Live) => void): () => void;
function LiveEngine({ onValue }: { onValue: (v: Live) => void }) {
useEffect(() => subscribeLive(onValue), [onValue]);
return null;
}
export function ScreenWithPanel({ open }: { open: boolean }) {
const [live, setLive] = useState<Live>({ count: 0 });
return (
<>
<LiveEngine onValue={setLive} />
<Activity mode={open ? "visible" : "hidden"}>
<Panel live={live} />
</Activity>
</>
);
}Ovaj dizajn drži ispravnost neovisnom o visibility panela i uklanja bugove tipa “u hidden modu prestane se ažurirati”.
SSR / hydration (ovdje Activity postaje arhitekturni alat)
Activity nije samo za state retention. To je i SSR poluga: što ide u početni HTML, a što svjesno deferaš.
Praktičan SSR gating primjer:
import { Activity, useState } from "react";
export function Page() {
const [advanced, setAdvanced] = useState(false);
return (
<>
<PrimaryContent />
<button onClick={() => setAdvanced((v) => !v)}>Advanced</button>
<Activity mode={advanced ? "visible" : "hidden"}>
<AdvancedPanel />
</Activity>
</>
);
}SSR response
Reference navodi da UI unutar mode="hidden" nije uključen u SSR response.[1]
Hydration
Reference opisuje scheduling/hydration implikacije oko visibility i prioritizacije.[1]
Use case
Drži non-critical UI izvan initial HTML-a da smanjiš payload i poboljšaš perceived load.
ViewTransition: Activity show/hide može okinuti animacije
Activity reference ima caveat: ako je Activity unutar ViewTransition, show/hide može aktivirati enter/exit animacije ovisno o tome kako se update odradi.[1]
Ako gradiš navigation shell s transitions, testiraj Activity toggles posebno pod startTransition i tvojim ViewTransition patternom (timing i granice su bitne).
Stvarni edge caseovi ekosustava: što puca i kako se obraniti
Ako third-party komponenta drži interaktivni state interno ali se re-inicijalizira na mount, Activity toggles to mogu razotkriti. Tada obično treba: (a) izvući state van (controlled props), (b) patch/upgrade biblioteke, ili (c) izbjegavati Activity oko tog subtreeja.
Najbrži način da izgubiš povjerenje: omotati Activity oko third-party komponenti koje nisu dizajnirane za ovu lifecycle semantiku.
• deck.gl: issue report — Activity hide/show može resetirati view state nakon ponovnog prikaza.[7]
• Keep-alive prior art pomaže razmišljati o evictionu, cache budgetima i što zapravo treba očuvati.[8]
• Siguran rollout: kreni s owned UI (tabs/drawers/forms), pa tek onda third-party heavy widgete nakon testova state restorationa.
Production rollout checklist (kako to radimo na klijentskim projektima)
Brza KPI tablica za PR opis:
| Metric | Baseline | After Activity | Notes |
|---|---:|---:|---|
| INP (p75) | | | toggle tabs/drawer |
| Long tasks > 50ms | | | navigation + warmup |
| JS heap after 5 toggles | | | memory budget check |
| CPU time during toggle | | | prop churn detection |Activity ima smisla ako poboljša UX bez skrivenih memory/CPU regresija. Tretiraj kao rollout, ne kao refactor.
• Feature flag za novu boundary + postupan rollout (per route / per segment).
• Mjeri: INP, long tasks, rast memorije (posebno s puno hidden activities).
• U dev/staging uključi
<StrictMode>da uhvatiš pogrešne pretpostavke o Effectima.[3]• Definiraj memory budget: koliko hidden “screens” dopuštaš istovremeno.
• Testiraj Activity toggles s: Suspense boundaries, navigation transitions i third-party widgetima.
ČPP
Ne. Activity reference eksplicitno kaže da djeca mogu re-renderati na nove propse, ali s nižim prioritetom od vidljivog sadržaja.[1]
Ne. Kad Activity postane hidden, React uništava Effects (cleanup) i ponovno ih mounta kad Activity postane visible.[1][2]
Ne. Virtualizacija smanjuje DOM/render rad za velike liste. Activity je lifecycle/scheduling za cijele UI subtreeve kao tabs, drawers i screens.[1][2]
Da, kao namjerni lever: reference navodi da UI unutar `mode="hidden"` nije uključen u SSR response, što može smanjiti initial HTML za non-critical panele.[1]
Sakriti subtree koji sadrži “data engine” kroz Effects (subscription/polling). Hidden uništava Effects, pa se ispravnost može pokvariti ako engine ne premjestiš izvan Activity boundaryja.[1][2]
Shipped je u Reactu 19.2 i ima dokumentirano ponašanje i službenu reference stranicu.[1][2] React Labs preporučuje StrictMode tijekom adoptiona da bi se uhvatili neočekivani side effectovi kada se Effects mount/unmount kroz Activity toggle.[3]
Izvori
• React Reference: <Activity> (DOM hiding, Effects cleanup, low-priority re-renders, SSR notes) Pročitaj izvor ↗
• React 19.2 (official): Activity semantics and goals Pročitaj izvor ↗
• React Labs: View Transitions, Activity, and more (StrictMode guidance; concept: unmounted but state preserved) Pročitaj izvor ↗
• React Learn: Preserving and Resetting State (baseline mental model for conditional rendering) Pročitaj izvor ↗
• LogRocket: React 19.2 is here (Activity + useEffectEvent overview and practical framing) Pročitaj izvor ↗
• This Week In React #252 (context roundup: React 19.2, Activity, useEffectEvent) Pročitaj izvor ↗
• deck.gl issue: Activity compatibility bug (state resets after hide/show) Pročitaj izvor ↗
• Prior art: React keep-alive patterns (state preservation, caching, eviction strategies) Pročitaj izvor ↗
Želiš usvojiti Activity bez regresija?
PAS7 Studio pomaže timovima sigurno usvojiti React 19.2 primitive: Activity, Suspense, transitions i Next.js prefetch obrasce — s mjerljivim metrikama prije/poslije.
Dobit ćeš konkretan rollout plan: gdje Activity pomaže, gdje odmaže i kako držati memoriju + CPU pod kontrolom.
React <Activity />: keep state, pause Effects, background render
Vi ste ovdje: 03/04
React <Activity />: keep state, pause Effects, background render