Flazzo memiliki fokus utama untuk menambah nilai bisnis Anda.

Blog

Manfaat React V18: Panduan Lengkap

16828198-thumb.jpg
Blog

Manfaat React V18: Panduan Lengkap


React v18 akhirnya keluar setelah ramai diperbincangkan sejak tahun 2021. React v18 menghadirkan beberapa fitur baru yang menarik untuk meningkatkan performa dan pengalaman pengguna. Fokus utama dari rilis ini adalah pengenalan mode konkuren, kait baru, dan peningkatan API mode ketat React.

Informasi dalam artikel ini disusun berdasarkan tabel yang disajikan oleh Shruti Kapoor di Reactathon 2022 konferensi. Ini akan mencakup tiga fitur utama React v18: pengelompokan otomatis, transisi, dan ketegangan di server. Ini juga akan membahas konsep konkurensi dan API baru yang diperkenalkan di React DOM Client and Server. Terakhir, ini juga akan memperkenalkan hook baru yang tersedia di React v18, termasuk useId dan useTransition.

Fitur

Dengan versi baru React, kami memiliki akses ke fitur-fitur seperti pengelompokan otomatis, yang menggabungkan beberapa pembaruan status menjadi satu render, transisi, yang membedakan antara pembaruan mendesak dan tidak mendesak, mendesak, dan ketegangan di server, yang meningkatkan kinerja bahkan untuk komponen yang dirender dengan lambat.

Pengelompokan otomatis – Performa yang dioptimalkan dengan rendering ulang minimal

Shruti Kapoor menggunakan contoh toko kelontong untuk mengilustrasikan konsep “automatic batching” di React. Ini berarti membuat daftar semua barang yang Anda butuhkan untuk memasak dan mendapatkan semuanya dalam satu perjalanan ke toko bahan makanan daripada beberapa kali perjalanan. Dalam React, pengelompokan mengacu pada pengurangan jumlah render ulang (perjalanan) yang terjadi ketika banyak status berubah.

Sebelumnya, pembaruan status yang terjadi di luar event handler, seperti panggilan API atau promise, tidak dikelompokkan. Namun, dengan React v18, semua pembaruan status dapat digabungkan secara otomatis, termasuk promise, setTimeout, dan event callback. Ini menghasilkan pengurangan yang signifikan dalam jumlah pekerjaan yang harus dilakukan React di latar belakang.

Pengelompokan otomatis

Pemrosesan batch otomatis hanya tersedia jika Anda menggunakan createRoot alih-alih metode render saat memasang aplikasi Anda. Jika Anda memilih untuk tidak menggunakan pemrosesan batch otomatis, Anda dapat memilih untuk tidak menggunakan flushSync.

Transisi – Peningkatan pengalaman pengguna dengan pemuatan lambat

React memiliki konsep baru yang disebut “transisi”, yang membedakan antara pembaruan mendesak dan tidak mendesak. Pembaruan transisi mengubah antarmuka pengguna saat pengguna beralih dari satu tampilan ke tampilan lain dengan cara non-darurat, sedangkan pembaruan mendesak adalah respons instan untuk mengarahkan interaksi pengguna (klik, ketuk, dll.)

Kait useTransition atau metode startTransition memulai transisi, dan ini dianggap pembaruan dengan prioritas rendah. Mereka akan terganggu jika terjadi pembaruan yang lebih mendesak, seperti mengklik atau menekan tombol. Jika pengguna menghentikan transisi, misalnya, dengan mengetikkan beberapa karakter secara berurutan dengan cepat, React hanya akan merender pembaruan terbaru dan memutar kembali pekerjaan rendering sebelumnya yang belum selesai.

Transisi

Transisi dapat digunakan dalam situasi di mana rendering lambat atau jaringan lambat. Dalam kasus rendering yang lambat, React melakukan banyak pekerjaan, dan menandai pembaruan sebagai transisi dapat membantu mengoptimalkan proses. Dalam kasus jaringan yang lambat, React dapat menunggu data jaringan tanpa membekukan UI, sehingga meningkatkan pengalaman pengguna.

Ketegangan sisi server – Memanfaatkan ketegangan untuk pemuatan data sisi server

React v18 memperkenalkan “on-server suspense”, yang meningkatkan kinerja dan pengalaman pengguna dari rendering sisi server. Pemecahan kode dengan keteganganyang memungkinkan pengembang untuk membagi komponen mereka menjadi bagian yang lebih kecil dan memuatnya secara mandiri, memungkinkan waktu pemuatan awal yang lebih cepat dan mengurangi penggunaan sumber daya di server dan klien. Streaming server mengirimkan kode HTML awal ke klien segera setelah tersedia daripada menunggu seluruh halaman selesai dirender. Ini menghasilkan pengalaman pengguna yang lebih cepat dan lancar karena pengguna melihat konten halaman awal lebih cepat.

Ketegangan di server

Di React v18, Suspense untuk pengambilan data dapat digunakan oleh framework cerdas seperti Relay, Next.js, Hydrogen, atau Remix. Namun, penggunaan Frameworkless Suspense Data Recovery saat ini tidak disarankan. Saat React mengeksplorasi kemungkinan menyediakan alat lain di masa mendatang untuk mengakses data dengan Suspense, diyakini bahwa pustaka dan kerangka kerja akan terus memainkan peran penting.

Konsep

Persaingan – Optimalisasi kinerja dan pengalaman pengguna

“Concurrent React”, sebuah mekanisme baru yang memungkinkan penyusunan beberapa versi antarmuka pengguna secara bersamaan. Concurrency bukanlah fitur itu sendiri, tetapi detail implementasi di balik layar yang memungkinkan fitur baru (seperti Suspense dan startTransition() dan useDeferredValue() API baru, dll.

Sebelum React v18, transaksi render selalu tunggal, tidak terputus, dan sinkron, sehingga tidak mungkin menghentikan proses. Dengan fitur baru ini, React dapat menjeda, melanjutkan, membatalkan, atau bahkan membatalkan render sesuai kebutuhan. Ini persaingan; jika suatu tugas panjang, Anda dapat menjedanya, beralih ke tugas lain, menyelesaikannya, lalu melanjutkan. Hal ini memungkinkan pengalaman yang lebih responsif bagi pengguna, bahkan saat React berada di tengah pekerjaan rendering yang kompleks.

Lebah

Bereaksi terhadap Klien DOM

API baru berikut telah diperkenalkan di react-dom/client:

buatRoot

Metode baru untuk membuat root untuk rendering atau unmount. Itu harus digunakan sebagai pengganti ReactDOM.render dan mengaktifkan fitur bersamaan dari React v18.

hidratRoot

Ini adalah cara baru untuk menghidrasi aplikasi yang dirender di server. Itu harus digunakan bersamaan dengan React DOM Server APIs yang baru, bukan ReactDOM.hydrate.

Bereaksi terhadap Server DOM

ITU API renderToPipeableStream dirancang khusus untuk digunakan di Node lingkungan, sementara API renderToReadableStream dioptimalkan untuk runtime Edge modern seperti Deno Dan Pekerja Cloudflare. Tradisional renderToString Metode ini tetap berfungsi, tetapi penggunaannya tidak dianjurkan.

Kait

ID penggunaan

UseId adalah pengait baru yang menghasilkan ID unik pada klien dan server sambil menghindari kebutuhan untuk mengelola nilai ID secara manual dan memastikan konsistensi di seluruh render.

useTransition

Kait useTransition dan startTransition di React v18 mengklasifikasikan pembaruan status menjadi dua kategori: mendesak dan tidak mendesak. Secara default, pembaruan status dianggap mendesak, tetapi pengait ini memungkinkan Anda menandai pembaruan status tertentu sebagai tidak mendesak. Ini berarti bahwa React akan memprioritaskan dan mengizinkan pembaruan penting, seperti memperbarui masukan teks, untuk menginterupsi yang kurang mendesak, seperti merender daftar hasil pencarian.

useDeferredValue

Kait useDeferredValue memungkinkan Anda untuk menunda rendering ulang komponen yang tidak penting. Tidak seperti debounce atau throttling, tidak ada set delay, yang berarti React akan mencoba deferred rendering segera setelah render pertama muncul di layar.

Kesimpulan

Kesimpulannya, React v18.0 menghadirkan banyak peningkatan menarik untuk meningkatkan kinerja dan pengalaman pengguna. Dengan diperkenalkannya mode konkurensi, konsep konkurensi memungkinkan React menjadi lebih responsif dan ramah pengguna. Selain itu, batching, transisi, dan suspense berbasis server otomatis adalah fitur utama yang memungkinkan React mengoptimalkan kinerja dan juga memungkinkan beberapa versi UI disiapkan pada saat yang sama, mengaktifkan fitur baru seperti Suspense dan API baru. Dengan diperkenalkannya React v18, pengembang dapat menikmati rendering yang lebih cepat, kinerja yang dioptimalkan, dan pengalaman pengguna yang lebih baik.