React v18 yang telah lama ditunggu-tunggu akhirnya dirilis beberapa bulan yang lalu. Meskipun tidak ada perubahan besar, ada beberapa fitur menarik yang ditambahkan yang layak untuk disimak. Artikel ini akan membahas beberapa tambahan baru dan cara meningkatkan ke React v18.

Cara Upgrade ke React 18

Untuk menginstal versi terbaru dari React, jalankan perintah ini di terminal:

npm Install reaksi reaksi-dom

Atau jika Anda menggunakan benang:

benang tambahkan reaksi reaksi-dom

Setelah Anda menginstal versi terbaru, Anda dapat mulai memanfaatkan fitur-fitur barunya.

Ada beberapa tambahan di React 18; berikut adalah empat yang paling penting.

1. Modus Ketat

StrictMode adalah fitur yang dapat Anda gunakan untuk menyoroti potensi masalah dalam suatu aplikasi. Pemeriksaan mode ketat hanya berjalan dalam mode pengembangan dan tidak akan memengaruhi build produksi. Namun, mereka bisa sangat berguna dalam mengidentifikasi potensi masalah dalam kode Anda.

Anda dapat mengaktifkan mode ketat untuk bagian mana pun dari aplikasi Anda. Misalnya, Anda dapat mengaktifkannya untuk semua komponen Anda, atau hanya untuk beberapa di antaranya.

instagram viewer

impor Reaksi dari 'reaksi';

fungsiDemoContoh() {
kembali (
<div>
<Komponen Pertama />
<Reaksi. Mode Ketat>
<Komponen Kedua />
<Komponen Ketiga />
</React.StrictMode>
<Komponen Keempat />
</div>
);
}

Dalam kode di atas, keempat komponen akan diperiksa untuk kemungkinan masalah. Namun, pemeriksaan mode ketat hanya akan berlaku untuk dan .

StrictMode juga membantu dengan cara lain, seperti:

  • Mengidentifikasi komponen dengan siklus hidup yang tidak aman: Jika komponen memiliki metode siklus hidup yang ditandai sebagai tidak aman, mode ketat akan memperingatkan Anda tentang hal itu.
  • Peringatan tentang penggunaan API referensi string lama: Jika Anda menggunakan API ref string warisan, mode ketat akan memperingatkan Anda tentang penggunaannya.
  • Peringatan tentang penggunaan findDOMNode yang tidak digunakan lagi: Jika Anda menggunakan API findDOMNode yang tidak digunakan lagi, mode ketat akan memperingatkan Anda tentang hal itu.
  • Mendeteksi efek samping yang tidak terduga: Jika komponen memicu efek samping (seperti setState) di tempat yang tidak terduga, mode ketat akan memperingatkan Anda tentang hal itu.
  • Mendeteksi API konteks lama: Jika Anda menggunakan API konteks lama (yang sekarang tidak digunakan lagi), mode ketat akan memperingatkan Anda tentang hal itu.
  • Memastikan status yang dapat digunakan kembali: Jika Anda memiliki status yang digunakan oleh beberapa komponen, mode ketat akan membantu memastikan bahwa itu disinkronkan dengan benar.

Secara keseluruhan, mode ketat dapat menjadi fitur yang berguna dalam pengembangan untuk membantu mengidentifikasi potensi masalah dalam kode Anda.

2. Transisi

Transisi memungkinkan Anda menandai pembaruan UI tertentu sebagai tidak mendesak. Ini berarti React dapat memprioritaskan pembaruan lain yang lebih penting.

Misalnya, jika Anda memiliki dua bidang teks—satu untuk kueri penelusuran dan satu lagi untuk hasilnya—Anda ingin menandai bidang teks hasil penelusuran sebagai transisi. Dengan begitu, React tahu bahwa ia tidak perlu segera merender ulang bidang teks itu setiap kali pengguna mengetik sesuatu di bidang teks kueri penelusuran.

Anda dapat menggunakan fungsi startTransition untuk menandai pembaruan UI sebagai transisi. Berikut ini contohnya:

impor { mulaiTransisi } dari 'reaksi';

mulaiTransisi(() => {
// Tandai pembaruan status tidak mendesak di dalam sebagai transisi
});

Kode ini akan menandai semua pembaruan status di dalam fungsi startTransition sebagai transisi. Dengan begitu, React dapat fokus pada pembaruan UI lain yang lebih penting.

3. Batching Otomatis

React menyediakan fitur bermanfaat yang disebut batching yang mengurangi jumlah rendering ulang yang terjadi saat keadaan berubah. Ini bisa sangat membantu dalam mengoptimalkan kinerja, terutama ketika bekerja dengan kode asinkron.

Sebelumnya, jika Anda memiliki janji atau melakukan panggilan jaringan, pembaruan status tidak akan di-batch, dan React harus merender ulang beberapa kali. Namun, dengan pengelompokan otomatis di React 18, semua pembaruan status dikelompokkan, bahkan dalam janji, setTimeouts, dan panggilan balik acara. Ini secara signifikan mengurangi pekerjaan yang harus dilakukan React di latar belakang.

Anda dapat mengelompokkan pembaruan status secara manual dengan menggunakan fungsi flushSync, tetapi pada React 18, proses ini sekarang otomatis. Ini menghasilkan kinerja yang jauh lebih baik, karena React akan menunggu tugas mikro selesai sebelum dirender ulang.

4. Kait Baru

Versi 18 memperkenalkan banyak yang baru Kait reaksi, termasuk useId, useTransition, dan useDeferredValue. Hooks baru ini menyediakan cara yang bagus untuk menambahkan fungsionalitas ekstra ke aplikasi React Anda dengan sedikit usaha.

React 18 Memberikan Peningkatan Kinerja Aplikasi

React 18 ada di sini, dan itu membawa beberapa peningkatan besar pada kinerja aplikasi web. Dengan React versi baru, Anda dapat dengan mudah membuat aplikasi web yang lebih responsif dan berkinerja lebih baik secara keseluruhan. Jadi, jika Anda ingin membuat aplikasi web yang berjalan dengan lancar dan tampak hebat, pastikan untuk memeriksa React 18.