7 Perubahan Utama di React Versi 19 yang Perlu Anda Ketahui
Pengembangan web adalah terus berkembang sampai saat ini. Seluruh ekosistem terdiri dari berbagai library dan teknologi. React adalah salah satu library yang paling banyak digunakan dalam pengembangan web.
Ada banyak rilis kecil dari waktu ke waktu. Namun, tahun ini, tim React telah membuat pengumuman signifikan dengan memperkenalkan versi baru, React 19. Pada 25 April 2024, React secara resmi merilis versi beta dari React 19 ke publik.
1. Penambahan Compiler di React
Perubahan terbesar di React 19 adalah penambahan compiler. Selama ini, React hanya berjalan di browser tanpa langkah kompilasi sama sekali. Framework lain seperti Astro dan Svelte telah menambahkan langkah kompilasi mereka sendiri, yang menangani banyak hal di belakang layar sehingga tidak perlu menulis kode tambahan untuk itu. Dengan adanya compiler, React akan secara otomatis menambahkan memoisasi untuk hal-hal seperti useMemo, useCallback, dan fungsi memo, sehingga tidak perlu menggunakan hook atau fungsi tersebut lagi.
Manfaat dari Penambahan Compiler
- Kode Lebih Sederhana: tidak perlu lagi memikirkan memoization.
- Performa Lebih Cepat: Compiler biasanya lebih baik dalam menemukan tempat yang memerlukan memoization dibandingkan dengan manual.
2. Fitur Actions dan Direktif use client / use server
Actions
Jika sudah bekerja dengan Next.js, mungkin sudah familiar dengan konsep actions. Di React 19, fitur ini menjadi stabil dan dapat bekerja di aplikasi klien atau server. Actions memungkinkan untuk mengelola form dan data secara lebih efisien dengan hook seperti useFormStatus dan useFormState.
Direktif use client dan use server
Dengan React 19, direktif ini menjadi fitur stabil yang bisa digunakan di luar Next.js, memungkinkan framework lain untuk memanfaatkannya.
3. Metadata Dokumen
React 19 memungkinkan untuk menempatkan tag seperti <title>, <meta>, atau <link> yang berhubungan dengan metadata di mana saja dalam komponen React. Ini akan secara otomatis memastikan bahwa tag tersebut dipindahkan ke lokasi yang benar dalam dokumen HTML.
4. Peningkatan Suspense
Suspense di React 18 memungkinkan untuk melakukan streaming data. Di React 19, Suspense akan memastikan bahwa semua tag gaya, link, dan skrip sudah dimuat sebelum halaman ditampilkan, sehingga tidak ada kasus di mana halaman dirender tanpa CSS yang telah diunduh.
5. Dukungan yang Lebih Baik untuk Komponen Web
React 19 meningkatkan dukungan untuk komponen web, membuatnya lebih mudah untuk diimplementasikan dalam proyek React.
6. Penghapusan forwardRef
tidak perlu lagi menggunakan forwardRef karena properti ref sekarang akan secara otomatis diteruskan ke setiap komponen di React.
7. Hook use
Hook use baru di React memungkinkan untuk memuat hal-hal secara asinkron seperti file JavaScript, menjalankan promise, atau bahkan menjalankan context. Ini adalah hook yang kompleks yang melanggar semua aturan dari hook normal.