React u 2026.: novi primitivi (Actions, Activity, useEffectEvent) i era Compilera
React 19 → 19.2 nije samo dodao feature-e — promijenio je kako strukturiramo aplikacije. Ovaj vodič objašnjava ideje iza Actions, <Activity/>, useEffectEvent, Performance Tracks, SSR Suspense batchinga, Partial Pre-renderinga i React Compiler 1.0 — uz praktične arhitekturne smjernice i stvarne izvore.
React 2026 Primitives & Compiler Upgrade Guide
Ovaj ?lanak je pregledno poglavlje. Vodi? je podijeljen na fokusirane nastavke o useActionState, Activity i useEffectEvent kako bi timovi mogli uvoditi promjene postupno i bez regresija.
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.
Ovo nije kopija changeloga. Ovo je mentalni model: što se promijenilo, zašto postoji i kako utječe na arhitekturu.
• “Zašto” iza novih React primitva (manje glue koda, više službenih patterna). [1][2][3]
• Kada su Actions, <Activity/> i useEffectEvent pravi alat (a kada nisu). [1][2][6][8]
• Kako Performance Tracks mijenja debugging i razgovore o performansama. [2][5]
• Što React 19.2 mijenja u SSR streamingu sa Suspense boundaryjima (batching). [2]
• Kako React Compiler 1.0 mijenja priču o memoizaciji (bez magije). [3]
• Roadmap deep-dive članaka koje ćemo objaviti za svaki koncept (s pravim kodom i patternima). [1][2][3]
React je dugo bio kao LEGO bez uputa: mogao si složiti bilo što, ali svaki tim je izmišljao svoj “ispravan način” za async mutacije, zadržavanje statea kroz ekrane ili izbjegavanje bugova s ovisnostima u effectima.
React 19 i 19.2 zvuče drugačije. Core tim pretvara česte patterne u primitive: Actions za async UI state, <Activity/> za “sakrij, ali zadrži state”, useEffectEvent za odvajanje event-like logike od effecta i službene Performance Tracks za razumijevanje schedulinga. [1][2][5]
A onda je tu React Compiler 1.0: velika oklada da ručna memoizacija ne bi trebala biti svakodnevni posao. [3]
Ako tvoj UI radi mutacije (spremi profil, checkout, komentar, upload), vjerojatno si već deset puta složio isti state machine: idle → pending → success/error → optimistični UI → rollback → toastovi → redirect.
Actions smjer u Reactu 19 pokušava standardizirati taj flow s primitivima poput useActionState, <form action={...}> i useFormStatus, te učiniti optimistične updateove manje nezgrapnima s useOptimistic. [1][8]
Mali primjer koji pokazuje “oblik” ovog pristupa:
import { useActionState } from "react";
type SaveState = { ok: true } | { ok: false; error: string };
async function saveDisplayName(
_prev: SaveState,
formData: FormData,
): Promise<SaveState> {
const name = String(formData.get("name") ?? "").trim();
if (name.length < 2) return { ok: false, error: "Name is too short." };
const res = await fetch("/api/profile/name", {
method: "POST",
body: JSON.stringify({ name }),
headers: { "content-type": "application/json" },
});
if (!res.ok) return { ok: false, error: "Failed to save." };
return { ok: true };
}
export function DisplayNameForm({ initialName }: { initialName: string }) {
const [state, action, isPending] = useActionState<SaveState, FormData>(
saveDisplayName,
{ ok: true },
);
return (
<form action={action} className="space-y-2">
<input name="name" defaultValue={initialName} />
<button type="submit" disabled={isPending}>
{isPending ? "Saving…" : "Save"}
</button>
{state.ok ? null : <p role="alert">{state.error}</p>}
</form>
);
}Arhitekturni signal: Actions je odličan kad je mutation flow “UI-owned” i želiš standardni pending/result handshake bez izmišljanja dodatnog apstraktnog sloja. Ako ti trebaju caching, retry, offline queue ili cross-screen sinkronizacija, data layer (React Query, SWR, custom event bus) često je bolji izbor. Actions smanjuje boilerplate na rubovima — ne zamjenjuje sistemsku data arhitekturu. [1][8]
Tabbed UI, side paneli, wizardi i multi-step flowovi imaju klasičan trade-off:
- unmount kad je skriveno → manje memorije, ali gubiš state i rušiš subscriptione
- ostavi montirano → čuvaš state, ali ručno implementiraš “skriveno, ali živo” patterne
React 19.2 uvodi <Activity mode="visible|hidden"> kao alternativu conditional renderingu. U 19.2 podržava visible i hidden. [2]
Mali primjer “keep alive” taba:
import { Activity } from "react";
export function SettingsTabs({ tab }: { tab: "profile" | "billing" }) {
return (
<div>
<Activity mode={tab === "profile" ? "visible" : "hidden"}>
<ProfileTab />
</Activity>
<Activity mode={tab === "billing" ? "visible" : "hidden"}>
<BillingTab />
</Activity>
</div>
);
}Arhitekturni signal: koristi <Activity/> kad želiš predvidljivo zadržavanje statea kod togglanja vidljivosti (tabovi, drawer, navigation shell). <Activity/> čini namjeru eksplicitnom; ne zaustavlja automatski skupe timere/subscriptione u skrivenom UI-ju — i dalje moraš dizajnirati gdje taj posao živi. [2]
Effecti imaju poznatu tenziju: želiš ispravan dependency array, ali ponekad želiš i da handler vidi najnovije vrijednosti bez ponovnog pokretanja effecta.
U Reactu 19.2, useEffectEvent formalizira taj pattern. U React 19.2 postu postoji chat primjer: promjena theme ne bi trebala reconnectati chat, ali notifikacija bi trebala koristiti najnoviji theme. useEffectEvent izdvaja “event-like” logiku iz effecta. [2][6]
Praktičan primjer (analytics/logging) koji ostaje linter-friendly:
import { useEffect, useEffectEvent } from "react";
type Props = { userId: string; plan: "free" | "pro" };
declare function subscribeToBillingEvents(
userId: string,
onEvent: (name: string) => void,
): () => void;
declare function track(event: string, props: Record<string, string>): void;
export function BillingWatcher({ userId, plan }: Props) {
const onBillingEvent = useEffectEvent((name: string) => {
track("billing_event", { name, plan });
});
useEffect(() => {
return subscribeToBillingEvents(userId, (name) => onBillingEvent(name));
}, [userId]);
return null;
}Arhitekturni signal: useEffectEvent je veliki win ako danas gasiš hooks linter samo da izbjegneš rerun effecta. Ali nemoj wrapati sve: React eksplicitno upozorava da ga ne koristiš samo za “utišavanje” lintera. Koristi ga kad je logika konceptualno event, a ne dio reaktivnog “syncaj ovaj sustav” effecta. [2][6]
Prije je performance debugging često bio nagađanje: “zašto je ovaj update spor?”. Performance Tracks čini Reactov rad jasno vidljivim u timelineu.
Performance Tracks ne ubrzava aplikacije magično. Ali performance rad čini poštenijim: manje “vibesa”, više dokaza. [5]
manje nagađanja
Umjesto “React je spor”, vidiš što je React radio i kada — posebno oko interakcija i schedulinga. [5]
interaction jank
Idealno za spore klikove, input lag, suspense reveale i duge commitove, jer je rad označen u timelineu. [5]
Performance Tracks u akciji: Reactov rad se vidi kao dedicated trackovi u Performance timelineu. [2][5]
Snimka zaslona sekcije performance-tracksOverview: timeline odvaja Scheduler, Components i ključne faze (blocking, transitions, suspense). [5]
Snimka zaslona sekcije performance-tracksScheduler track: vidiš timing eventa i faze poput update, render, commit i waiting for paint. [5]
Snimka zaslona sekcije performance-tracksClose-up: pomaže pinpointati koja faza dominira sporom interakcijom. [5]
Snimka zaslona sekcije performance-tracksReact 19.2 mijenja kako se SSR Suspense boundaryji otkrivaju: boundaryji koji završe u isto vrijeme mogu se batchati. Cilj je da SSR streaming bude bliži client ponašanju i da se smanje čudni, previše fragmentirani revealovi. [2]
Ovo je dobar primjer React smjera u 2026.: učiniti reveal predvidljivijim i manje ovisnim o timing slučajnostima. [2]
čišći reveal
Manje “jedan dio iskoči, pa drugi, pa treći” kad boundaryji završe u isto vrijeme. [2]
manje iznenađenja
SSR streaming postaje bliži client ponašanju, što pojednostavljuje mentalni model i debugging. [2]
dizajniraj boundaryje
Suspense boundaryji su dio UX dizajna. Grupiraj što treba doći zajedno, razdvoji što može doći kasnije. [2]
React Compiler 1.0 je stabilan i spreman za produkciju. To je build-time alat koji optimizira komponente i hookove kroz automatsku memoizaciju, uz compiler-powered lint pravila kroz eslint-plugin-react-hooks presete. [3]
Ideja nije “React je spor bez compilera”. Ideja je: ručna memoizacija je error-prone, nekonzistentna među timovima i često postane cargo-cult useMemo/useCallback posvuda.
Reactov savjet je pragmatičan: oslanjaj se na compiler po defaultu, a useMemo/useCallback drži kao escape hatch kad treba precizna kontrola (često oko effect dependencyja). I testiraj pažljivo prije uklanjanja postojeće memoizacije jer može promijeniti output kompilacije. [3]
Mali primjer što se mijenja arhitekturno (manje ručne optimizacije):
type Props = { items: Array<{ id: string; price: number }>; taxRate: number };
declare function expensiveTotal(items: Props["items"], taxRate: number): number;
declare function CheckoutSummary(props: { total: number }): JSX.Element;
export function Cart({ items, taxRate }: Props) {
const total = expensiveTotal(items, taxRate);
return <CheckoutSummary total={total} />;
}S compilerom često možeš ostaviti kod deklarativnim i prepustiti alatu da odluči što je sigurno memoizirati — dok god poštuješ Rules of React i dobro testiraš. [3]
Partial Pre-rendering (React DOM, 19.2) je ideja da se statični dijelovi pre-renderiraju unaprijed (CDN-friendly), a zatim kasnije “resume” da se popuni dinamički sadržaj. React 19.2 post pokazuje flow prerender() → spremi postponed state → resume(). [2]
Arhitekturni signal: za content-heavy siteove gdje je shell većinom statičan, ali personalizacija/podaci su dinamični, PPR je moćan. Trade-off je operativan: to nije “samo React”, nego rendering pipeline i odluka o integraciji frameworka/bundlera. [2]
React Server Components (RSC) su stabilni na razini Reacta u Reactu 19, ali docs eksplicitno upozoravaju: underlying API-je koje bundleri/frameworkovi koriste mogu pucati između React 19.x minora i ne prate semver. Za implementere se preporučuje pinning na specifičnu React verziju ili korištenje Canary. [4]
Također: prati security advisoryje. React tim je objavio RSC ranjivosti koje pogađaju react-server-dom-* pakete i preporučio upgrade na fixane verzije. [7]
Arhitekturni signal: ako koristiš RSC, tretiraj React verziju, framework/bundler integraciju i react-server-dom-* pakete kao jednu upgrade jedinicu — uz disciplinu oko patchiranja.
Ovaj post je overview. Zatim idemo duboko — koncept po koncept — s realnim primjerima i arhitekturnim trade-offovima.
• Actions u pravim aplikacijama: forme, optimistični UI, oblikovanje errora i integracija s React Query/SWR. [1][8]
• <Activity/> u praksi: tab shellovi, drawer, route-like patterni i kako izbjeći leakove u hidden subtreeju. [2]
• useEffectEvent patterni: analytics, subscriptioni, real-time socketi i effect dizajn koji se slaže s linterom. [2][6]
• Performance Tracks playbook: što gledati, uobičajeni patterni i kako tumačiti faze u stvarnim appovima. [5]
• SSR Suspense boundary dizajn: implikacije batchinga i boundary arhitektura za čiste reveale. [2]
• React Compiler adoption: inkrementalni rollout, strategija testiranja i kada zadržati ručnu memoizaciju. [3]
• Partial Pre-rendering arhitektura: što pre-renderirati, gdje resume i CDN/edge implikacije. [2]
• RSC hardening checklist: pinning, patch cadence i playbook za reakciju na advisoryje. [4][7]
Ako si već na Reactu 19, 19.2 je praktična nadogradnja zbog novih primitva i poboljšanja devtoolsa. Ako koristiš React Server Components, prati i Reactove security advisoryje te osiguraj da su pogođeni paketi nadograđeni na fixane verzije. [2][7]
Ne. Actions smanjuje UI boilerplate za mutacije i forme. Data libraryji i dalje briljiraju za caching, retry, background refresh, offline ponašanje i cross-screen konzistenciju. U mnogim aplikacijama kombinirat ćeš ih namjerno. [1][8]
Pomaže ti držati effect dependencyje ispravnima bez reconnectanja/ponovnog pokretanja effecta samo zato što handler treba najnovije vrijednosti. Posebno korisno ako danas gasiš hooks linter da izbjegneš rerun. [2][6]
Konceptualno da, ali bitno je da namjera postane eksplicitna i da React dobije pravi primitiv za “hidden but alive” UI. Ta jasnoća pomaže arhitekturi i omogućava buduća poboljšanja schedulinga/prioritizacije. [2]
Ne automatski. Reactov savjet je: oslanjaj se na compiler po defaultu, memo hookove drži kao escape hatch kad treba precizna kontrola (često oko effect dependencyja). I pažljivo testiraj prije uklanjanja postojeće memoizacije. [3]
RSC je stabilan na React razini u Reactu 19, ali integracija ekosustava (bundler/framework) je sistemska tema. Slijedi pinning guidance gdje je relevantno i prati security advisoryje za `react-server-dom-*`. [4][7]
Uključujemo samo izvore koji direktno podupiru tvrdnje i primjere iz ovog članka.
• 1. React v19 (službeno): Actions, useActionState, <form> Actions, useFormStatus, useOptimistic
• 6. Separating Events from Effects (službeno): mentalni model iza useEffectEvent
• 7. RSC security advisory (službeno): DoS i source code exposure; upute za upgrade
• 8. useActionState reference (službeno): definicija API-ja i detalji korištenja
Reactovi novi primitivi su moćni — ali sigurna adopcija i dalje traži inženjersku higijenu: testovi, lint i jasan arhitekturni plan.
Ako planiraš React upgrade (ili želiš uvesti Compiler/Actions/RSC bez rušenja produkcije), PAS7 Studio može pomoći audit-first pristupom i rollout strategijom prilagođenom tvom stacku.
Pregled: React 2026 primitives i mentalni model ere compilera
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.