Kenali Fitur-Fitur React.js Versi 19 yang Baru Dirilis

Hai Sobat BWA!🙌

React.js 19 merupakan versi terbaru dari framework React JavaScript yang baru dirilis. React.js adalah salah satu framework JavaScript dalam dunia Front-End Development yang populer digunakan oleh banyak developer. React.js versi 19 hadir dengan fitur-fitur terbarunya seperti React Compiler, Asset Loading, Ehanced Hooks, dan lainnya yang akan kita bahas pada artikel ini. Pasti kalian penasaran kan, apa saja fitur-fitur terbaru dari React.js versi 19?

Simak artikel berikut ini sampai habis ya!

1. React Compiler

React Compiler bekerja dengan cara mengubah kode react menjadi JavaScript biasa sehingga secara cepat meningkatkan kecepatan kinerja hingga dua kali lebih cepat. Manfaat dari adanya fitur ini adalah kita tidak perlu lagi melakukan re-render atau pe-render-an ulang secara manual. React.js versi sebelumnya tidak secara otomatis me-render ulang jika terjadi perubahan status. Cara untuk mengoptimalkan pe-render-an ulang pada React.js versi sebelumnya adalah dengan menggunakan useMemo() , useCallback(), dan memo API secara manual. Dengan adanya “React Compiler”, maka rendering akan dilakukan secara otomatis. React Compiler akan mengelola rendering ulang dan akan memutuskan secara otomatis bagaimana dan kapan status diubah dan UI diperbarui.

2. Server Components

3(6).jpg

Server component merupakan salah satu perkembangan paling menarik pada React.js dan Next.js. Saat ini, server component hanya dijalankan pada sisi klien. Namun, pada pembaruan React.js kali ini memungkinkan kita untuk menjalankan komponen di sisi server sebelum mengirimnya pada halaman pengguna. Pada React.js versi ke 19, komponen server diintegrasikan langsung dengan React. Hal ini memberikan banyak manfaat seperti:

  • Peningkatan SEO yang optimal
  • Peningkatan kinerja website menjadi lebih baik
  • Mempercepat page loading pada aplikasi website

Cara untuk menggunakan server component ini cukup mudah. Kita hanya perlu mengimpor requestUsername komponen React apapun pada sebuah proyek. Setelah mengimpor komponen server ke dalam komponen React, kita dapat menggunakan fitur “Action” yang tersedia untuk melakukan tugas tertentu.

3. Action

2(6).jpg

Simpelnya, action adalah sebuah fitur untuk mengelola hal-hal seperti formulir pada sebuah website. Fitur ini dapat digunakan untuk mengirim data dari sisi klien ke sisi server, contohnya dalam melakukan perubahan database (create, read, update, delete) dan mengimplementasikan elemen form seperti login form. Dengan memisahkan komponen UI dari manipulasi data, Action memudahkan alur kerja para developer. Dan manfaat lainnya adalah user experience yang dinamis dan interakitf dapat diciptakan dengan mudah.

4. Asset Loading

React.js 19 memperkenalkan seamless asset loading, di mana beberapa asset yang mungkin kita gunakan seperti gambar atau scripts akan dimuat pada latar belakang saat pengguna masih melihat halaman sebelumnya. Contohnya saja, jika sekarang kita berada pada halaman dashboard suatu e-commerce dan selanjutnya kita ingin berpindah pada halaman produk, maka data seperti gambar dan file lain yang ada pada halaman produk akan dimuat terlebih dahulu jika kita menggunakan Asset Loading.

Dengan menggunakan pre-loading assets, halaman yang akan dimuat akan ditampilkan lebih optimal tanpa menunggu waktu yang lama. Selain meningkatkan kinerja aplikasi, pengoptimalan ini juga berkontribusi pada user experience yang lebih bagus dan menyenangkan.

5. Document Metadata

Dengan menggunakan komponen baru yang disebut <DocumentHead> , dengan mudah kita bisa menambahkan dan mengelola judul atau meta tag ke halaman web. Fitur ini dapat membantu meningkatkan SEO (Search Engine Optimization) dan memastika aksebilitas. Pada React.js 19, kita dapat menggunakan tag title dan meta secara langsung pada komponen React kita. Contohnya seperti berikut:

Const HomePage = () => {
  return (
    <>
      <title>BuildWithAngga</title>
      <meta name="description" content="BuildWithAngga Blogs" />
      // Page content
    </>
  );
}

6. Web Component Support

6(5).jpg

Pada React.js versi sebelumnya, mengintegrasikan web component ke dalam React tidaklah mudah. Kita perlu mengonversi web component tersebut menjadi komponen React atau meng-install extra packages dan menulis kode tambahan agar web component dalam React bisa digunakan.

Pada versi terbarunya yaitu React.js 19, sudah mendukung penggunaan web component dan membantu kita untuk mengintegrasikan web component ke dalam kode React dengan mudah. Ketika kita menggunakan web component yang sangat berguna, kita dapat dengan mudah menggunakannya dalam project React.js tanpa harus mengubahnya menjadi kode React.

7. Enhanced Hooks

Hooks pada React.js 19 lebih baik dari sebelumnya. Dengan leluasa kita dapat mengontrol kapan suatu kode akan dijalankan dan diperbarui. Hal ini memudahkan situs web berjalan lancar dan penulisan kode yang bersih. Fitur ini juga menjadi salah satu fitur yang paling disukai dan diperkenalkan dalam library React. Pada React 19, cara menggunakan useMemo, forwardRef, useEffect, dan useContext akan berubah. Penggunan useMemo()tidak diperlukan lagi karena sudah ada fitur React Compiler yang akan membuat memo dengan sendirinya. Di versi terbarunya ini, React akan memperkenalkan hook baru yaitu use() yang akan menyederhanakan penggunaan promises, async code, dan context.

Kesimpulan

React.js menghadirkan beberapa fitur baru untuk menyederhanakan proses web development dan meningkatkan kinerja aplikasi web. React juga memperkenalkan fitur-fitur yang membuat aplikasi berjalan lebih lancar, cepat, efisien, serta meningkatkan user experience yang lebih bagus. Berikut adalah ringkasan mengenai fitur-fitur terbaru React 19:

  • React Compiler: Tidak perlu lagi melakukan re-render atau pe-render-an ulang secara manual ketika terjadi perubahan status
  • Server Component: Menjalankan komponen di sisi server sebelum mengirimnya pada halaman pengguna
  • Action: Penanganan formulir yang lebih baik menggunakan useFormStatus(), useStatusForm(), dan useOptimistic()
  • Document Metadata: Dapat menambahkan dan mengelola judul atau meta tag ke halaman web dan meningkatkan SEO
  • Asset Loading: Meningkatkan user experience dengan memungkinkan asset loading yang dimuat di latar belakang
  • Web Component Support: Integrasi dengan web component sudah dapat dilakukan pada versi ini
  • Enhanced Hooks: Memungkinkan kita untuk mengontrol kapan suatu kode akan dijalankan dan diperbarui

Semoga artikel ini dapat bermanfaat ya! Dan bagi kalian yang tertarik untuk mempelajari lebih lanjut tentang React.js, kalian bisa mempelajarinya secara gratis melalui BuildWithAngga loh! Jangan lupa kepoin kelas-kelasnya ya! Sampai jumpa di artikel selanjutnya🙌