React 18, versi React yang paling ditunggu-tunggu telah dirilis dengan fitur-fitur menarik seperti pengelompokan otomatis, a API baru –mulaiTransisi, dan streaming rendering sisi server Dengan dukungan untuk Ketegangan. Yang istimewa dari versi terbaru ini adalah keunikannya”rendering bersamaan" metode. Di versi React sebelumnya, proses rendering berlangsung sinkron dan non-interruptible di mana UI akan mengunci selama proses render yang lama dan tidak langsung merespon input pengguna. Menggunakan React 18, proses rendering dapat dibuat asinkron dan dapat diinterupsi, dijeda, dilanjutkan, dan bahkan ditinggalkan, memungkinkan pengembang untuk menciptakan pengalaman pengguna yang lebih lancar.

Bagaimana cara memperbarui dari React 17 ke React 18?

React 18 saat ini dirilis dalam versi alfa dan dapat diunduh menggunakan perintah 

Sebuah komponen biasanya dirender seperti ini

Namun, untuk memanfaatkan fitur terbaru, komponen perlu dirender seperti ini:

Apa yang ada di React 18?

Batching Otomatis

Batching Otomatis adalah rendering yang terjadi pada saat yang sama setiap kali dipicu untuk memperbarui dengan beberapa status sekaligus. Versi React sebelumnya hanya dapat melakukan batch update di dalam event handler React. Jika beberapa pembaruan status dipicu oleh janji atau panggilan balik, responsnya tidak diberikan pada saat yang sama. Tetapi dengan React 18, semua render di-batch, artinya mereka akan terjadi pada saat yang sama, terlepas dari pemicunya.

Berikut ini contoh dengan janji:

Ketegangan

Dengan Ketegangan, React 18 membuat peningkatan kinerja utama pada SSR dengan membuat bagian penyajian dari aplikasi menjadi mungkin secara asinkron. Suspense membantu dalam menentukan apa yang harus ditampilkan React ketika bagian dari pohon belum siap untuk dirender. Misalnya, jika ada empat komponen: Header, Sidebar, komponen Banner, dan komponen Utama. Jika keempatnya ditumpuk satu sama lain seperti ini 

Kemudian, server akan mencoba merendernya sekaligus, memperlambat seluruh halaman. Jika Header, Sidebar, dan Main lebih penting bagi pembaca, seseorang dapat memprioritaskan ini di atas Banner dengan membungkus Spanduk komponen dalam Ketegangan tag:

Akibatnya, server pertama-tama akan melayani komponen Header, Side Bar, dan Main, dan kemudian spinner akan ditampilkan sementara Banner menunggu untuk dimuat.

Transisi

Aplikasi React bersifat interaktif, namun, untuk membuat pembaruan aplikasi itu sendiri saat orang berinteraksi dengannya, pembaruan terus-menerus dapat menyebabkan aplikasi melambat secara signifikan dan memberikan pengalaman pengguna yang buruk. Transisi adalah fitur Bereaksi baru yang membedakan antara pembaruan mendesak dan tidak mendesak. Pembaruan transisi mengubah UI dari satu tampilan ke tampilan berikutnya.

• Pembaruan mendesak adalah interaksi langsung seperti mengetik, mengklik, menekan, dll., yang membutuhkan respons segera untuk mencocokkan intuisi seseorang tentang bagaimana objek fisik berperilaku. Jika tidak, mereka merasa "salah". Namun, transisi berbeda karena pengguna tidak berharap untuk melihat setiap nilai perantara di layar. 

Masukan pengguna tunggal biasanya menghasilkan pembaruan yang mendesak dan tidak mendesak untuk pengalaman pengguna terbaik. StartTransition API dapat digunakan di dalam event input untuk memberi tahu React pembaruan mana yang mendesak dan mana yang "transisi".

• Pembaruan yang tidak mendesak dibungkus dalam 'startTransition' dan akan terganggu jika pembaruan yang lebih mendesak, seperti klik atau penekanan tombol, muncul. Jika pengguna menginterupsi transisi (misalnya, dengan mengetik beberapa karakter dalam satu baris), React akan membuang semua pekerjaan rendering basi dan hanya merender pembaruan terbaru.

Kait Baru

1. GunakanId

useId adalah pengait baru untuk membuat ID unik pada klien dan server sambil menghindari ketidakcocokan hidrasi. Ini paling bermanfaat untuk pustaka komponen yang perlu diintegrasikan dengan API aksesibilitas yang memerlukan ID unik. Ini mengatasi masalah utama yang ada di React 17 dan di versi sebelumnya, tetapi bahkan lebih kritis di React 18 karena bagaimana perender server streaming baru memberikan HTML yang tidak berurutan.

 

2. gunakanTransisi

'useTransition' dan 'startTransition' akan memungkinkan menandai beberapa pembaruan status sebagai tidak mendesak. Secara default, pembaruan status lainnya dianggap mendesak. Bereaksi akan memungkinkan pembaruan status mendesak (misalnya, memperbarui input teks) untuk mengganggu pembaruan status tidak mendesak (misalnya, menghitung hasil).

 

3. gunakanSyncExternalStore

'useSyncExternalStore' adalah pengait baru yang memungkinkan penyimpanan eksternal mendukung pembacaan serentak dengan memaksa pembaruan ke penyimpanan menjadi sinkron. Ini menghilangkan kebutuhan untuk useEffect saat mengimplementasikan langganan ke sumber data eksternal, dan direkomendasikan untuk pustaka apa pun yang terintegrasi dengan status eksternal ke React.

 

4. gunakanDeferredValue

'useDeferredValue' membantu menunda rendering ulang bagian pohon yang tidak mendesak. Ini bekerja dengan cara yang sama seperti debouncing, meskipun menawarkan beberapa keuntungan. React akan mencoba render yang ditangguhkan secara langsung setelah render awal ditampilkan di layar karena tidak ada penundaan waktu yang telah ditentukan. Render yang ditangguhkan dapat diinterupsi dan tidak memblokir input pengguna.

 

 

5. gunakanInsertionEffect

'useInsertionEffect' adalah pengait baru yang memungkinkan pustaka CSS-in-JS untuk mengatasi kesulitan kinerja dalam menyuntikkan gaya dalam render. Kecuali Anda telah membuat pustaka CSS-in-JS, kami tidak mengharapkan Anda untuk menggunakan ini. Kait ini akan aktif setelah DOM dimutasi, tetapi sebelum efek tata letak membaca tata letak baru. useInsertionEffect bahkan lebih penting dalam React 18 karena React memberikan hasil ke browser selama rendering bersamaan, memberikannya kesempatan untuk menghitung ulang tata letak.

Kesimpulan

Dengan diperkenalkannya React 18, telah terjadi perubahan drastis dalam dunia aplikasi web karena penawaran uniknya seperti mode bersamaan dan rendering sisi server. Fitur terbaru akan mempermudah pengembangan dan pemeliharaan kode serta membuat aplikasi lebih cepat dan lebih responsif terhadap interaksi pengguna.

Tentang Penulis:

Manikandan adalah Pimpinan Teknis di Mantra Labs yang sedang mengerjakan Proyek terkait React/Angular. Dia tertarik untuk belajar tentang algoritma perdagangan analis saham, dan di waktu luangnya, dia suka berenang, memasak, dan bermain kriket dan catur.

Pengetahuan itu layak disampaikan di kotak masuk Anda