React v19 - Actions, Server Components, peningkatan error hydration, dukungan Document Metadata, dan lainnya

API dan fitur baru

• Actions: Menangani perubahan data dan pembaruan state secara otomatis. Juga mengelola status menunggu, error, optimistic update, dan lainnya secara otomatis
• useActionState: Hook baru yang menyederhanakan penanganan kasus penggunaan umum untuk Actions
• use API: Dapat membaca promise dan context selama proses rendering
• useOptimistic: Memudahkan implementasi pembaruan UI optimistis selama permintaan asinkron
• ref as a prop: Bisa langsung menggunakan prop ref di function component (forwardRef tidak diperlukan)
• <Context> as a Provider: Dapat langsung menggunakan <Context> alih-alih <Context.Provider>

Pengelolaan dokumen dan resource

• Dukungan metadata: Tag <title>, <link>, dan <meta> dapat langsung digunakan di dalam komponen
• Dukungan stylesheet: Memuat stylesheet dan mengatur prioritasnya dari dalam komponen
• Dukungan script asinkron: Dapat merender script asinkron dari mana saja di dalam tree komponen
• Preloading resource: Menyediakan API prefetchDNS, preconnect, preload, dan preinit untuk optimisasi performa

Peningkatan

• Dukungan custom element: Menambahkan dukungan penuh untuk custom element
• Peningkatan penanganan error: Menghapus error duplikat dan menambahkan opsi penanganan error
• Kompatibilitas script/ekstensi pihak ketiga: Meningkatkan penanganan konten pihak ketiga selama proses hydration
• Peningkatan error hydration: Menyediakan pesan error dan informasi debugging yang lebih jelas

Server Components

• Server Components yang distabilkan: Semua fitur Server Components di kanal Canary kini disertakan dalam React 19
• Server Actions: Menyediakan kemampuan memanggil fungsi server dari client component

Lainnya

• Nilai awal useDeferredValue: Menambahkan opsi nilai awal ke useDeferredValue
• Fungsi cleanup ref: Callback ref kini dapat mengembalikan fungsi cleanup
• Static API baru: Menambahkan API prerender dan prerenderToNodeStream

[carnoxen]

Di versi 19 kali ini, perilaku <Suspense> yang sempat menuai perdebatan didefinisikan ulang. Sebelumnya, saat satu komponen di-Suspense, React akan merender hingga komponen Suspense berikutnya lalu membuat fallback, tetapi sekarang urutannya berubah: saat satu komponen di-Suspense, fallback dibuat lebih dulu lalu komponen Suspense berikutnya dirender.

Perbaikan pada Suspense

Singkatnya, ini bisa dianggap sebagai pengurangan waktu render awal. Syukurlah masalah ini terselesaikan dengan baik.