Tim React resmi merilis React 19.3 pada 9 September 2026. Ini rilis yang layak dicatat oleh setiap developer frontend: dua API yang setahun lalu masih berstatus eksperimental — View Transitions dan Fragment Refs — kini stabil dan siap dipakai di produksi. Ada juga API baru browser() di react-dom, dukungan Trusted Types, dan penyederhanaan Context untuk Server Components.

View Transitions: animasi tanpa pustaka tambahan

Cukup bungkus bagian UI dengan <ViewTransition>, maka React akan menganimasikan elemen tersebut saat muncul (enter), hilang (exit), berubah gaya atau isi (update), maupun berpindah posisi (share). Animasi ini memanfaatkan View Transition API bawaan browser, jadi tidak perlu menambah pustaka animasi apa pun.

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

function Panel() {
  const [tampil, setTampil] = useState(false);

  return (
    <>
      <button onClick={() => startTransition(() => setTampil(v => !v))}>
        Tampilkan
      </button>
      {tampil && (
        <ViewTransition>
          <Konten />
        </ViewTransition>
      )}
    </>
  );
}

Satu hal penting: animasi hanya dipicu oleh update yang ditandai sebagai Transition — misalnya lewat startTransition, reveal dari <Suspense>, atau useDeferredValue. Update biasa yang bersifat mendesak tetap tampil instan tanpa animasi. Animasi bawaannya cross-fade halus; Anda bisa mengustomisasinya lewat class CSS khusus atau Web Animations API melalui event props onEnter, onExit, onShare, dan onUpdate. Saat ini View Transition baru berjalan di DOM, dukungan React Native masih dalam pengerjaan.

addTransitionType: animasi sesuai arah navigasi

Contoh kasus umum: carousel. Tombol "berikutnya" dan "sebelumnya" mengubah state yang sama, tetapi butuh arah animasi berbeda. Solusinya, panggil addTransitionType() di dalam transition untuk memberi tahu React penyebab perubahannya:

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

Lalu tentukan animasi per tipe pada komponen ViewTransition:

<ViewTransition
  enter={{ 'next': 'from-right', 'previous': 'from-left' }}
  exit={{ 'next': 'to-left', 'previous': 'to-right' }}
>
  <Slide />
</ViewTransition>

React juga meneruskan tipe transition ke elemen sebagai view transition type, sehingga Anda bisa membatasi animasi di CSS dengan selector :active-view-transition-type(next).

Integrasi dengan Suspense

View Transition terintegrasi mulus dengan <Suspense>: bungkus boundary-nya dengan ViewTransition, dan React akan menganimasikan peralihan dari fallback ke konten final saat data selesai dimuat. Prinsip UX yang disarankan tim React: fallback muncul segera tanpa animasi, peralihan fallback ke konten final memakai animasi, dan konten yang sudah ter-cache tampil instan. Untuk itu tersedia opsi seperti update="auto" dan default="none" agar hanya peralihan konten yang dianimasikan. Gambar dan font juga bisa diikutsertakan: bila dibungkus ViewTransition, keduanya memicu Suspense selama dimuat sehingga urutan tampil lebih terkontrol.

Fragment Refs: ref untuk deretan elemen tanpa pembungkus

Kasus yang dulu sulit: sebuah komponen merender sekelompok elemen bersaudara tanpa satu induk DOM, atau komponen pihak ketiga yang tidak meneruskan prop ref. Solusi lama biasanya menambah <div> pembungkus yang bisa mengganggu layout. Mulai 19.3, cukup berikan ref langsung ke <Fragment>:

function Daftar({ posts }) {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.focus(); // fokuskan anak pertama
  }, []);

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

Ref tersebut menghasilkan FragmentInstance yang bekerja pada anak-anak DOM sebagai satu grup tanpa mengubah strukturnya: addEventListener, removeEventListener, dan dispatchEvent untuk event anak level pertama; focus, focusLast, dan blur untuk navigasi fokus; observeUsing dan unobserveUsing untuk IntersectionObserver atau ResizeObserver; serta getClientRects, getRootNode, compareDocumentPosition, dan scrollIntoView untuk mengukur dan menggulir elemen.

Fitur lain yang perlu diketahui

• browser() — API baru react-dom. Komponen yang tidak bermakna dirender di server (misalnya bergantung pada localStorage atau zona waktu browser) bisa memanggil use(browser()) untuk melewati server rendering: HTML awal menampilkan fallback Suspense, lalu komponen dirender normal begitu sampai di browser.
• Dukungan Trusted Types — bila situs memakai CSP require-trusted-types-for 'script', React kini meneruskan objek TrustedHTML/TrustedScript apa adanya tanpa diubah menjadi string, sehingga kebijakan sanitasi Anda berfungsi dan risiko XSS berbasis DOM berkurang.
• Context di Server Components — Server Component kini bisa langsung merender Context yang diimpor dari modul 'use client', tanpa perlu komponen Provider pembungkus.
• Transitions independen — transisi yang lambat tidak lagi menahan transisi lain yang tidak berhubungan, plus sejumlah perbaikan bug (Fast Refresh, useDeferredValue, hingga crash ViewTransition di Mobile Safari).

Cara upgrade

1. Perbarui paket: npm install [email protected] [email protected].
2. Jalankan test dan CI Anda — ada perubahan kecil pada pesan error (useActionState kini menulis "action state") dan perilaku defaultValue untuk input bertipe number yang disamakan dengan tipe input lain.
3. Mulai adopsi View Transition di halaman interaktif seperti galeri, wizard, atau daftar berita, dan Fragment Refs untuk membungkus komponen dari library. Ingat dua catatan: animasi hanya berjalan di dalam Transitions, dan View Transition saat ini khusus DOM.

Sumber: React 19.3 — Blog resmi React; CHANGELOG React di GitHub.