Setelah sekitar setahun berstatus eksperimental, dua API yang paling ditunggu developer React akhirnya naik kelas. React 19.3 resmi dirilis ke npm dan menstabilkan View Transitions serta Fragment Refs — dua fitur yang dulu hanya bisa dicoba lewat kanal eksperimental. Bagi tim yang membangun aplikasi pemerintah desa, dashboard sekolah, atau panel admin UMKM dengan React, rilis ini menghilangkan ketergantungan pada library animasi tambahan dan trik DOM yang rawan patah.

Selain dua fitur utama itu, React 19.3 juga membawa API browser dari react-dom, dukungan Trusted Types, dan kemampuan merender <Context> langsung di Server Component. Berikut ringkasan praktisnya, plus contoh kode yang bisa langsung dicoba.

1. View Transitions: animasi antar tampilan tanpa library

Komponen baru <ViewTransition> memakai View Transition API bawaan browser untuk menganimasikan elemen saat masuk, keluar, berpindah, atau berubah ukuran. Cukup bungkus bagian UI yang ingin dianimasikan:

import { ViewTransition } from 'react';

{isShowing && (
  <ViewTransition>
    <Component />
  </ViewTransition>
)}

React memilih jenis animasi berdasarkan perubahan pohon komponen: enter saat komponen ditambahkan, exit saat dihapus, update saat isi atau style anaknya berubah, dan share saat komponen bernama yang sama dipindah dari satu tempat ke tempat lain. Animasi default-nya cross-fade halus, dan bisa dikustomisasi lewat CSS view transition class atau Web Animations API melalui props onEnter, onExit, onShare, dan onUpdate.

Satu hal yang sering menjebak: animasi hanya terpicu oleh update yang ditandai sebagai Transition, misalnya di dalam startTransition, saat <Suspense> menampilkan konten, atau update dari useDeferredValue. Update biasa yang dianggap urgent tidak dianimasikan — ini memang desain React agar UI tetap responsif.

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

export default function Component() {
  const [showItem, setShowItem] = useState(false);

  return (
    <>
      <button onClick={() => {
        startTransition(() => setShowItem(prev => !prev));
      }}>
        {showItem ? '➖' : '➕'}
      </button>

      {showItem && (
        <ViewTransition>
          <Video video={videos[0]} />
        </ViewTransition>
      )}
    </>
  );
}

Untuk kebutuhan seperti carousel, fungsi addTransitionType memberi tahu React penyebab transisi, sehingga arah animasi bisa berbeda meski state akhirnya sama:

function nextSlide() {
  startTransition(() => {
    addTransitionType('next');
    setCurrentSlide(c => c + 1);
  });
}

Satu catatan penting bagi tim yang memakai Suspense: bungkus fallback dengan benar agar UI terasa cepat. Pola yang disarankan React adalah fallback muncul tanpa animasi, lalu pergantian dari fallback ke konten final dianimasikan. Trik praktisnya, matikan animasi selain update:

<ViewTransition update="auto" default="none">
  <Suspense fallback={<Fallback />}>
    <Component />
  </Suspense>
</ViewTransition>

Perlu diingat, saat ini <ViewTransition> baru bekerja di DOM; dukungan React Native masih dalam pengerjaan.

2. Fragment Refs: pegang banyak elemen tanpa wrapper div

Masalah lama: sebuah komponen merender beberapa sibling tanpa satu induk, atau komponen pihak ketiga tidak meneruskan props ref. Solusi umumnya menambah <div> pembungkus yang kadang merusak layout, atau memodifikasi komponen yang bukan milik kita. Di React 19.3, ref bisa dipasang langsung ke <Fragment> dan menghasilkan FragmentInstance:

const fragmentRef = useRef(null);

useEffect(() => {
  fragmentRef.current.focus();
}, []);

return (
  <Fragment ref={fragmentRef}>
    {posts.map(post => <Heading key={post.id}>{post.title}</Heading>)}
  </Fragment>
);

FragmentInstance bekerja pada anak-anak DOM sebagai satu grup tanpa mengubah struktur HTML. Method yang tersedia antara lain addEventListener / removeEventListener / dispatchEvent untuk anak tingkat pertama, focus / focusLast / blur yang menelusuri anak secara depth-first, observeUsing / unobserveUsing untuk memasang IntersectionObserver atau ResizeObserver, serta getClientRects, getRootNode, compareDocumentPosition, dan scrollIntoView. Pola ini berguna untuk komponen seperti InView yang memberi perilaku tambahan ke anak-anaknya tanpa menyentuh internal komponen tersebut.

3. Tiga perubahan lain yang perlu dicek tim

• use(browser()) dari react-dom — cara resmi mengeluarkan komponen dari proses server rendering. Cocok untuk komponen yang bergantung pada localStorage atau zona waktu perangkat. Di server, Suspense boundary terdekat menampilkan fallback; setelah hidrasi di klien, komponen langsung render normal. Ini menggantikan pola mounted state atau cek typeof window.
• Trusted Types — React tidak lagi memaksa nilai menjadi string sebelum dikirim ke DOM API, sehingga objek TrustedHTML, TrustedScript, dan TrustedScriptURL bisa divalidasi browser saat situs memakai header Content-Security-Policy: require-trusted-types-for 'script'. Relevan bagi situs layanan publik yang sudah menerapkan CSP ketat.
• <Context> di Server Component — Server Component kini bisa merender Context yang diimpor dari modul 'use client', tanpa perlu membuat komponen Provider khusus.

Langkah upgrade yang aman

1. Perbarui dependensi: npm install [email protected] [email protected] (sesuaikan dengan versi yang tersedia di registry internal Anda bila memakai mirror).
2. Jalankan build dan test suite seperti biasa. API lama tetap berjalan; kedua fitur baru bersifat opt-in, jadi tidak ada perubahan wajib pada kode.
3. Mulai dari satu halaman berdampak tinggi — misalnya transisi daftar ke detail — lalu bungkus dengan <ViewTransition> dan pastikan update-nya berjalan di dalam startTransition.
4. Uji di browser tanpa dukungan View Transition untuk memastikan navigasi tetap normal, karena fitur ini dirancang sebagai progressive enhancement.

Kesimpulannya, React 19.3 bukan rilis yang mengubah cara menulis komponen, tetapi menghapus dua sumber kerumitan lama: animasi yang selama ini bergantung library pihak ketiga, dan kebutuhan wrapper DOM hanya untuk memegang ref. Untuk tim kecil yang mengelola banyak situs klien sekaligus, mengurangi satu dependensi animasi berarti satu titik pemeliharaan lebih sedikit.

Sumber: React 19.3 — React Blog, MDN — View Transition API.