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
Pregled: React 2026 primitives i mentalni model ere compilera
?ira arhitekturna slika: ?to se promijenilo i gdje svaki primitive stvarno pripada.
02
Dubinski vodi? za useActionState: mutation flows, optimistic UI i integration patterns
Kada useActionState smanjuje boilerplate, a kada data layer i dalje ostaje pravi vlasnik problema.
03
React <Activity />: zadr?i state, pauziraj Effects i renderiraj u pozadini
Stvarni obrasci, performance trade-offovi i pitfalls za tabs, drawers i shell UI.
04
Dubinski vodi? za useEffectEvent: dizajn Effecta, subscriptions i analitika
Linter-friendly granice Effecta bez stale closures i reconnect churna.
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:
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]
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]
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]
skriven
React skriva djecu preko display: none dok je hidden.[1]
sačuvan
React čuva state da bi se UI brzo vratio u visible.[1]
de-prioritizirani
Djeca mogu re-renderati na propse s nižim prioritetom.[1]
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-modelMinimalna 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]
“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).
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.
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.
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”.
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>
</>
);
}hidden je izostavljen
Reference navodi da UI unutar mode="hidden" nije uključen u SSR response.[1]
prioritet je bitan
Reference opisuje scheduling/hydration implikacije oko visibility i prioritizacije.[1]
advanced paneli
Drži non-critical UI izvan initial HTML-a da smanjiš payload i poboljšaš perceived load.
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).
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.
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.
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]
• React Reference: <Activity> (DOM hiding, Effects cleanup, low-priority re-renders, SSR notes)
• React Learn: Preserving and Resetting State (baseline mental model for conditional rendering)
• LogRocket: React 19.2 is here (Activity + useEffectEvent overview and practical framing)
• This Week In React #252 (context roundup: React 19.2, Activity, useEffectEvent)
• deck.gl issue: Activity compatibility bug (state resets after hide/show)
• Prior art: React keep-alive patterns (state preservation, caching, eviction strategies)
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 />: zadr?i state, pauziraj Effects i renderiraj u pozadini
Povezani članci
AI SEO / GEO u 2026: vaši sljedeći kupci nisu ljudi — nego agenti
Pretraživanje se pomiče s klikova na odgovore. Botovi i AI agenti pretražuju, citiraju, preporučuju i sve češće kupuju. Saznajte što znači AI SEO / GEO, zašto klasični SEO više nije dovoljan i kako PAS7 Studio pomaže brendovima pobijediti u agentičkom webu.
Najmoćniji Apple čip? M5 Pro i M5 Max ruše rekorde
Analiza Apple M5 Pro i M5 Max čipova u ožujku 2026. Objašnjavamo zašto se ovi čipovi mogu smatrati najjačim profesionalnim laptop SoC-ovima koje je Apple dosad napravio, kako izgledaju protiv M4 Pro, M4 Max, M1 Pro, M1 Max i što pokazuju u usporedbi s aktualnim Intel i AMD konkurentima.
Automatsko označavanje i pretraga spremljenih linkova
Integracija s GDrive/S3/Notion za automatsko označavanje i brzu pretragu putem search API-ja
Razvoj botova i usluge automatizacije
Profesionalni razvoj Telegram botova i automatizacija poslovnih procesa: chatbotovi, AI asistenti, CRM integracije, automatizacija radnih tijekova.
Profesionalni razvoj za vaše poslovanje
Kreiramo moderne web rješenja i botove za poduzeća. Saznajte kako vam možemo pomoći u postizanju ciljeva.