Tehnologija

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.

17. velj 2026.· 18 min čitanja

Razgovaraj s PAS7 Studio o React nadogradnji

Metafora bilježnice: React primitivi i era compilera — ručno nacrtane komponente, async strelice i bilješke o performansama

Što dobivaš iz ovog članka

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]

Pravi pomak: React “proizvodi” patterne koji su prije bili folklor

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]

Actions: ideja je da async UI flow bude dosadan (u dobrom smislu)

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:

TSX

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]

<Activity />: “sakrij” postaje koncept prve klase

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:

TSX

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]

useEffectEvent: prestani se reconnectati samo zato što se promijenila tema

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:

TSX

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]

Performance Tracks: React scheduling postaje vidljiv (i debuggable)

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]

Zašto je bitno

manje nagađanja

Umjesto “React je spor”, vidiš što je React radio i kada — posebno oko interakcija i schedulinga. [5]

Gdje najviše pomaže

interaction jank

Idealno za spore klikove, input lag, suspense reveale i duge commitove, jer je rad označen u timelineu. [5]

Arhitekturni efekt

bolje granice

Timovi obično grade čišće boundaryje (transitions, suspense, async flowovi) kad mogu direktno mjeriti učinak. [2][5]

Performance Tracks u akciji: Reactov rad se vidi kao dedicated trackovi u Performance timelineu. [2][5]

Overview: timeline odvaja Scheduler, Components i ključne faze (blocking, transitions, suspense). [5]

Scheduler track: vidiš timing eventa i faze poput update, render, commit i waiting for paint. [5]

Close-up: pomaže pinpointati koja faza dominira sporom interakcijom. [5]

React 19.2 SSR: batched Suspense reveal smanjuje “progresivni kaos”

React 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]

Efekt za korisnika

čišći reveal

Manje “jedan dio iskoči, pa drugi, pa treći” kad boundaryji završe u isto vrijeme. [2]

Efekt za developere

manje iznenađenja

SSR streaming postaje bliži client ponašanju, što pojednostavljuje mentalni model i debugging. [2]

Arhitekturni signal

dizajniraj boundaryje

Suspense boundaryji su dio UX dizajna. Grupiraj što treba doći zajedno, razdvoji što može doći kasnije. [2]

Prije: SSR Suspense boundaryji se mogu otkrivati u manjim, neravnomjernim koracima. [2]

Nakon: povezani boundaryji koji završe zajedno mogu se otkriti kao jedan batch, s čišćom progresijom. [2]

React Compiler 1.0: memoizacija ide iz code reviewa u build time

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):

TSX

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: nova poluga za “statični shell + dinamičko popunjavanje”

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: stabilno, ali tretiraj ekosustav kao sustav

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.

Roadmap serije: sljedeći deep-dive članci (s pravim kodom i patternima)

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]

Izvori

Uključujemo samo izvore koji direktno podupiru tvrdnje i primjere iz ovog članka.

ČPP

Trebamo li odmah nadograditi na React 19.2?

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]

Zamjenjuju li Actions React Query / SWR?

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]

Koja je stvarna korist od useEffectEvent?

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]

Je li <Activity/> samo “keep mounted”?

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]

Znači li React Compiler da možemo pobrisati sav useMemo/useCallback?

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]

Jesu li React Server Components sada sigurni i stabilni?

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]

Trebaš pomoć s nadogradnjom bez regresija?

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.

Kontaktiraj PAS7 Studio Pročitaj React 19.2 release notes