Ingin mencoba coding dengan React? Berikut adalah beberapa fitur baru utama untuk dicoba di React 18.

React adalah pustaka JavaScript sumber terbuka yang sangat populer yang dibuat oleh Facebook pada tahun 2013. Karena fleksibilitasnya, banyak pengembang memanfaatkan beberapa fiturnya dalam membangun komponen antarmuka pengguna (UI) yang cepat, efisien, dan dapat digunakan kembali.

Pada bulan Maret 2022, tim meluncurkan versi pustaka React terbaru dan yang dinantikan, React 18, yang menyertakan fitur-fitur baru yang berfokus pada peningkatan kinerja aplikasi.

Fitur Baru di React 18

React 18 terdiri dari beberapa fitur baru yang bermanfaat yang ditambahkan ke perpustakaan JavaScript sumber terbuka. Banyak dari perubahan ini tidak ada di versi sebelumnya sementara fitur lainnya diperbaiki. Beberapa fitur tersebut antara lain; root API baru, Automatic Batching, Transition API, Suspense API dan rilis Hooks baru.

API Akar Baru

Root API di React melacak bagaimana komponen tingkat atas dirender di pohon. Di versi React sebelumnya, file

memberikan metode ini digunakan untuk mengeksekusi rendering yang sekarang disebut API akar warisan.

Namun, React 18 hadir dengan API root baru yang membuat root menggunakan buatRoot metode dan kemudian merender komponen Bereaksi ke root yang dibuat menggunakan memberikan metode.

Root API baru ini akan memberi Anda akses ke fitur-fitur di versi terbaru ini seperti fitur API transisi yang akan dibahas nanti. Meskipun cara lama masih akan berfungsi di React 18, cara ini mungkin akan dihapus di masa mendatang.

Cuplikan di bawah menunjukkan bagaimana root API disusun dengan cara lama dan baru.

API Root Lama

impor ReactDOM dari'reaksi-dom';
impor Aplikasi dari'./Aplikasi';
ReactDOM.render(<Aplikasi />, dokumen.getElementById('aplikasi'))

API Akar Baru

impor ReactDOM dari'reaksi-dom/klien';
impor Aplikasi dari'./Aplikasi';
const root = ReactDOM.createRoot(dokumen.getElementById('aplikasi'));
root.render(<Aplikasi />)

Pengelompokan Otomatis

Batching di React melibatkan banyak pembaruan status dalam satu render ulang pada setiap acara browser, misalnya a klik acara. Perubahan status apa pun yang terjadi di luar peristiwa seperti janji atau panggilan balik tidak akan digabungkan.

Dengan React 18, pembaruan status batching dilakukan secara otomatis di mana pun pembaruan ini terjadi. Fitur ini memberikan peningkatan langsung pada kinerja dan waktu rendering. Namun, jika Anda memiliki status komponen yang tidak ingin dikelompokkan, Anda dapat menyisih darinya menggunakan flushSync metode. Di bawah ini adalah cuplikan contoh tentang cara melakukannya;

impor { siramSync } dari'reaksi-dom';
fungsihandleClick() {
 sinkronisasi siram(() => {
 set Hitung(menghitung => menghitung + 1);
]});
 sinkronisasi siram(() => {
 setStore(toko => !toko);
});
}

API Transisi

Di React, pembaruan yang dibuat di UI dapat dikategorikan sebagai pembaruan mendesak dan transisi juga disebut tidak mendesak. Contoh pembaruan mendesak dapat berupa kasus memasukkan teks ke dalam bidang sedangkan pembaruan transisi dapat berupa fungsi pemfilteran pencarian.

Sekarang, jika pembaruan tersebut terjadi secara bersamaan, ini dapat disebut sebagai operasi berat dan dapat menyebabkan pembekuan aplikasi Anda. Untuk mengatasi masalah ini, di sinilah API transisi disebut startTransition datang untuk bermain. Fitur baru ini memberi tahu React pembaruan apa yang harus ditandai sebagai "transisi" yang pada gilirannya meningkatkan interaksi pengguna. Berikut adalah contoh kode cara kerjanya;

impor { mulai Transisi } dari"reaksi";
mulai Transisi(() => {
 setSearch (masukan);
});

Ketegangan

Saat aplikasi dirender di server, file HTML statis dikembalikan ke browser yang memungkinkan pengguna untuk melihat tampilan aplikasi saat JavaScript dimuat. Saat file dimuat, HTML menjadi dinamis dengan apa yang dikenal sebagai hidrasi. Kekurangannya di sini adalah, jika semua ini tidak ada, aplikasi Anda tidak akan menjadi interaktif.

Untuk mengatasi masalah ini, React 18 menyediakan dua fitur server side rendering (SSR) baru menggunakan Ketegangan komponen;

  • Streaming HTML memungkinkan potongan komponen dikirim saat dirender.
  • Hidrasi selektif memprioritaskan interaktivitas komponen yang dipilih oleh pengguna.

Kait Baru

Satu titik balik besar untuk React adalah pengenalan kait di Bereaksi versi 16 yang memungkinkan komponen fungsi mengakses status dan fitur React lainnya tanpa menulis kelas. React 18 dikirimkan dengan lima kait baru untuk meningkatkan pengalaman pengembang;

  • useId: Hook ini memungkinkan kita membuat pengidentifikasi (ID) unik di aplikasi kita baik di server maupun klien.
  • useTransition: Digunakan bersama startTransition untuk membuat pembaruan status baru yang dapat disebut tidak mendesak.
  • useDefferedValue: Ini memungkinkan penangguhan pembaruan yang kurang mendesak.
  • useSyncExternalStore: Pengait ini berguna saat mengimplementasikan langganan ke sumber data eksternal.
  • useInsertionEffect: Pengait ini terbatas pada penulis pustaka CSS-in-JS untuk menyuntikkan gaya ke dalam DOM.

Cara Memperbarui ke Bereaksi 18

Untuk melakukan pembaruan, manajer paket npm atau benang dapat digunakan dengan menjalankan perintah berikut di terminal.

npm Install bereaksi react-dom

atau

benang tambahkan react react-dom

Kemudian, Anda harus melakukan perubahan pada index.js file di direktori root folder proyek dari API lama ke API root baru seperti yang ditunjukkan sebelumnya.

Cara Menyiapkan Proyek React 18 Baru

Untuk menyiapkan proyek React 18 baru, paket create-react-app diinstal dengan npm atau benang di terminal;

npx membuat-react-app my-react-app

atau

penambahan benang membuat-react-app my-react-app

Tingkatkan Performa Aplikasi Anda dengan React 18

Sekarang Anda tahu tentang beberapa fitur baru di React 18 seperti API root baru, Suspense, Transition, atau Batching Otomatis, dan cara memutakhirkan ke versi baru ini dan mengaturnya dari awal.

Perubahan terbaru pada React ini siap untuk Anda alami sekarang.