React 19.3 sudah tersedia di npm sejak 9 September 2026 dan bulan ini kembali jadi bahan diskusi komunitas pengembang setelah pembahasan teknisnya naik ke berbagai kanal berita developer. Rilis ini bukan sekadar tambalan: dua API yang tahun lalu masih eksperimental kini berstatus stabil, plus satu API baru yang langsung menjawab keluhan lama soal server-side rendering (SSR).

View Transitions dan Fragment Refs resmi stabil

View Transitions memakai View Transition API bawaan browser untuk menganimasikan elemen saat masuk, keluar, berpindah, atau berubah ukuran — tanpa library animasi tambahan. Caranya cukup membungkus bagian UI dengan komponen <ViewTransition>:

import { ViewTransition, useState, startTransition } from 'react';

function Daftar() {
  const [tampil, setTampil] = useState(false);
  return (
    <>
      <button onClick={() => startTransition(() => setTampil(v => !v))}>
        {tampil ? 'minus' : 'plus'}
      </button>
      {tampil && (
        <ViewTransition>
          <Kartu />
        </ViewTransition>
      )}
    </>
  );
}

React menentukan animasi berdasarkan perubahan pohon komponen: enter (komponen ditambahkan), exit (dihapus), update (isi atau gaya berubah), dan share (elemen bernama sama pindah tempat). Animasi hanya dipicu update yang ditandai Transition — seperti pembungkus startTransition, reveal <Suspense>, atau update dari useDeferredValue — sedangkan update mendesak lain tetap tampil instan. Untuk mengatur arah animasi, misalnya carousel maju dan mundur, tambahkan addTransitionType('next') atau ('previous') di dalam startTransition, lalu petakan jenis animasinya melalui prop enter dan exit. Catatan penting: saat ini View Transitions hanya bekerja di DOM, dukungan React Native masih dikembangkan.

Fragment Refs melengkapi fitur ini. Kita bisa menempelkan ref ke sebuah Fragment dan menerima objek FragmentInstance dengan metode focus(), focusLast(), blur(), observeUsing() untuk IntersectionObserver atau ResizeObserver, hingga getClientRects() dan scrollIntoView(). Semuanya bekerja atas anak-anak DOM sebagai satu grup — tanpa mengubah struktur DOM dan tanpa memaksa komponen anak mengekspos prop ref.

browser(): cara resmi menonaktifkan SSR untuk satu komponen

Masalah klasik: komponen yang membaca localStorage, window, atau zona waktu perangkat tidak bisa menghasilkan HTML bermakna di server. Solusi lama hanya ada dua — flag mounted di dalam useEffect atau pengecekan typeof window !== 'undefined' — dan keduanya rawan hydration mismatch begitu hasil server dan render pertama di klien berbeda. React 19.3 menyediakan API kelas satu untuk ini:

import { use } from 'react';
import { browser } from 'react-dom';

function ZonaWaktu() {
  use(browser());
  const tz = new Intl.DateTimeFormat().resolvedOptions().timeZone;
  return <p>Zona waktu Anda: {tz}</p>;
}

Saat render di server, use(browser()) menahan komponen sehingga HTML awal berisi fallback dari Suspense boundary terdekat. Di browser, pemanggilan itu mengembalikan undefined, jadi komponen render normal setelah hydration. Karena mengikuti aturan use(), pemanggilannya boleh diletakkan di dalam kondisi atau setelah early return: komponen hanya menahan diri bila memang perlu — misalnya hook data yang tetap dirender di server selama loader menyuplai initialData, dan baru menahan diri bila data itu tidak ada.

Ada dua syarat keras: dipanggil dari Client Component dan berada di dalam Suspense boundary. Kalau tidak, render di server akan gagal. Perlu dicatat, dokumentasi referensi use() saat ini masih menandai browser() sebagai Canary, jadi pastikan kanal rilis proyek Anda sebelum memakainya di produksi. Dibandingkan next/dynamic dengan opsi ssr: false atau directive client:only di Astro, keunggulan browser() adalah ia hidup di React sendiri sehingga berlaku untuk setup SSR apa pun. React juga menambahkan callback onBrowserBailout dan argumen alasan, supaya tim bisa melacak di mana server rendering sengaja dilewati.

Trusted Types dan Context di Server Components

React 19.3 mulai menghormati Trusted Types API. Sebelumnya React selalu mengubah nilai menjadi string sebelum dilempar ke DOM API, sehingga objek TrustedHTML, TrustedScript, atau TrustedScriptURL hasil policy sanitasi berubah menjadi string biasa dan ditolak browser. Kini nilai tersebut diteruskan apa adanya, sehingga policy require-trusted-types-for 'script' berjalan sesuai rancangan. Selain itu, Server Component kini bisa mengimpor dan merender <Context> langsung dari modul 'use client' — tanpa perlu lagi komponen pembungkus Provider yang tugasnya hanya meneruskan prop.

Mencoba di proyek Anda

1. Perbarui paket: npm install [email protected] [email protected] — ikuti React 19 upgrade guide bila proyek masih di versi 18.
2. Ambil satu komponen yang bergantung pada API browser, lalu ganti hack mounted flag atau typeof window dengan use(browser()).
3. Pastikan komponen tersebut Client Component dan ada Suspense boundary di atasnya, agar HTML awal tetap terisi fallback.
4. Tambahkan onBrowserBailout untuk mencatat komponen mana yang server rendering-nya dilewati, sehingga mudah dipantau.
5. Uji View Transition pada satu alur navigasi kecil dulu sebelum diterapkan ke seluruh aplikasi.

Untuk tim yang membangun dashboard admin atau aplikasi internal instansi, fitur-fitur ini berarti lebih sedikit kode "akal-akalan" untuk kasus khusus klien dan perpindahan halaman yang terasa lebih halus — tanpa menambah dependensi animasi baru. Uji dulu di satu modul, ukur dampaknya, baru perluas.

Sumber: React 19.3 — React Blog, Referensi browser() — react.dev, InfoQ — React 19.3 Adds a browser() API, MDN — Trusted Types API.