React 19.3 Rilis: View Transitions dan Fragment Refs Resmi Stabil

Siapa bilang React tidak pernah istirahat? Tepat pada 9 September 2026, tim React mengumumkan React 19.3 — sebuah rilis minor yang justru membawa perubahan paling ditunggu bertahun-tahun oleh para developer frontend di seluruh dunia. Dua fitur yang sebelumnya masih berstatus eksperimental, View Transitions dan Fragment Refs, resmi dipindahkan ke jalur stabil. Tidak ada breaking change, tidak ada React 20 yang misterius — hanya pembaruan solid yang bisa langsung diadopsi ke dalam kode produksi.

View Transitions: Animasi Native Tanpa Library Tambahan

Mulai sekarang, membuat animasi masuk, keluar, perpindahan, atau perubahan ukuran elemen di React tidak lagi memerlukan library pihak ketiga seperti Framer Motion atau GSAP. Cukup gunakan komponen <ViewTransition> yang sekarang sudah stabil.

Komponen ini bekerja dengan memanfaatkan View Transition API bawaan browser — bukan runtime JavaScript. Artinya, tidak ada bundle tambahan yang membebani ukuran aplikasi. Untuk konteks saja: Framer Motion menambah sekitar 85KB ke bundle, GSAP sekitar 78KB. Dengan ViewTransition, biayanya nol.

Untuk mengaktifkan animasi, cukup bungkus elemen yang ingin dianimasikan:

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

function VideoPlayer() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => startTransition(() => setShow(s => !s))}>
        {show ? 'Sembunyikan' : 'Tampilkan'}
      </button>
      {show && <ViewTransition><Video /></ViewTransition>}
    </div>
  );
}

Yang perlu diperhatikan: animasi hanya berjalan ketika perubahan state dibungkus dalam startTransition, Suspense reveal, atau useDeferredValue. Perubahan state langsung menggunakan setState biasa tidak akan memicu animasi. Pembatasan ini sengaja dirancang agar React tidak memuntahkan animasi di setiap render ulang.

Satu fitur baru yang melengkapi View Transitions adalah addTransitionType. Fungsi ini memungkinkan developer menandai alasan sebuah transisi terjadi. Misalnya, dalam karousel, navigasi ke slide berikutnya harus animasi dari kiri ke kanan, sedangkan kembali ke slide sebelumnya harus dari kanan ke kiri. Meskipun sama-sama mengubah currentSlide, React bisa memilih animasi berbeda berdasarkan jenis transisinya.

Selain itu, View Transitions sekarang terintegrasi dengan Suspense. Jika kamu membungkus komponen yang memuat gambar atau font di dalam <ViewTransition> dengan atribut update="auto", React akan menganimasikan perpindahan dari tampilan fallback ke konten aktual secara otomatis — tanpa perlu menulis logika transisi secara manual untuk setiap status loading.

Fragment Refs: Goodbye Wrapper Div

Fragment Refs menyelesaikan masalah yang sudah mengganjal developer React sejak tujuh tahun lalu. Sebelum React 19.3, jika kamu ingin menempelkan ref ke sekelompok elemen sibling, satu-satunya cara adalah membungkusnya dalam sebuah <div> khusus. Tujuannya bukan untuk struktur DOM, tapi hanya untuk menjadi tempat bergantungnya sebuah ref.

Masalahnya, menambahkan wrapper <div> yang tidak diperlukan sering kali mengacaukan CSS grid atau flexbox yang sudah dirancang dengan rapi. Banyak desain sistem besar yang mengakumulasi div-wrapper semacam ini selama bertahun-tahun, dan hampir tidak ada yang berani menghapusnya karena takut merusuh tata letak.

Di React 19.3, kamu bisa menempelkan ref langsung ke fragment:

import { useRef, useEffect, Fragment } from 'react';

function PostList({ posts }) {
  const fragmentRef = useRef(null);
  useEffect(() => {
    fragmentRef.current.focus(); // Fokus ke elemen pertama dalam fragment
  }, []);
  return (
    <Fragment ref={fragmentRef}>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </Fragment>
  );
}

Ref yang dikembalikan bukan simpul DOM biasa, melainkan sebuah FragmentInstance — proxy yang mengekspos metode-metode mirip-DOM ke seluruh anak langsungnya. Ini mencakup focus, focusLast, blur, addEventListener, removeEventListener, observeUsing (untuk IntersectionObserver dan ResizeObserver), scrollIntoView, dan getClientRects. Untuk desain sistem yang dibangun dari komponen komposabel seperti accordion, daftar kartu, atau list item, Fragment Refs menghapus kebutuhan wrapper yang selama ini hanya ada demi sebuah ref.

Pembaruan Kecil yang Tidak Boleh dilewatkan

Selain dua fitur utama, React 19.3 juga membawa sejumlah peningkatan yang mungkin tidak seheboh View Transitions, tapi sangat membantu dalam praktik sehari-hari.

Pertama, browser() — fungsi baru dari react-dom yang menghapus kebutuhan pola mounted yang selama ini sering ditulis untuk komponen yang bergantung pada API browser. Cukup panggil use(browser()) dan React akan melewati proses server-side rendering untuk komponen tersebut, menampilkan Suspense fallback di server, lalu merender normal di klien — tanpa hydration mismatch atau siklus render tambahan.

Kedua, dukungan Trusted Types resmi diaktifkan. Trusted Types adalah mekanisme Content Security Policy yang mencegah XSS berbasis DOM dengan mewajibkan object tertentu melewati validasi browser sebelum disuntikkan ke halaman. Sebelum 19.3, React akan mengonversi objek TrustedHTML menjadi string biasa, yang bisa merusak kebijakan Trusted Types. Sekarang, React meneruskannya secara utuh.

Ketiga, Context kini bisa dirender langsung dari Server Component tanpa perlu membungkusnya dalam komponen wrapper. Sebelum perubahan ini, satu-satunya cara untuk menggunakan Context dari Server Component adalah membuat komponen client wrapper yang tugasnya hanya meng-export Provider. Kini, Server Component bisa mengimpor Context secara langsung dan merendernya tanpa perantara.

Haruskah Kamu Upgrade Sekarang?

React 19.3 adalah rilis minor tanpa breaking change, yang berarti meningkatkan dari React 19.x yang sudah kamu pakai sama amannya dengan memperbarui dependensi biasa. Tidak ada migrasi kode yang dipaksa — mengadopsi View Transitions atau Fragment Refs adalah keputusan terpisah dari proses upgrade itu sendiri.

Untuk tim yang sudah lama menunggu kedua fitur ini stabil, 19.3 adalah momen yang tepat untuk melakukan audit di basis kode: cari tempat-tempat di mana kamu masih menggunakan library animasi pihak ketiga untuk kasus sederhana, atau tempat di mana kamu menambahkan wrapper div hanya untuk menempelkan ref. Dua area itulah yang paling diuntungkan oleh rilis ini.

Yang tidak kalah penting: tidak ada React 20. Tim React secara eksplisit menekankan bahwa selama tidak ada breaking change, versi mayor tidak akan naik. Spekulasi tentang React 20 yang muncul setiap beberapa bulan sekali ternyata belum materialize — dan sepertinya belum akan datang dalam waktu dekat.

---

Sumber

• React Dev Team, “React 19.3”, react.dev, 9 September 2026 — https://react.dev/blog/2026/09/09/react-19-3
• Codyto, “React 19.3: View Transitions and Fragment Refs Are Stable”, codercops.com, 11 September 2026 — https://blog.codercops.com/blog/react-19-3-view-transitions-fragment-refs-2026
• Luke Olson, “React 19.3 Is Out and React 20 Is Not”, dev.to, 13 September 2026 — https://dev.to/lukeocodes/react-193-is-out-and-react-20-is-not-2gad
• Byteiota, “React 19.3: ViewTransitions Are Stable — Here’s What to Adopt Now”, byteiota.com, 10 September 2026 — https://byteiota.com/react-19-3-view-transitions-stable
• DevX Editorial, “What’s New in React 19.3: View Transitions and Fragment Refs Go Stable”, devx.com, 18 September 2026 — https://www.devx.com/coding/19-3-view-transitions-fragment-refs