Kuasai List dan Keys di React
Merender list di React itu sederhana, tetapi melakukannya dengan benar itu sulit.
Banyak pengembang menggunakan indeks array sebagai key. Ini adalah sebuah kesalahan. Hal ini menyebabkan bug dan performa yang lambat.
Berikut adalah cara Anda seharusnya menangani data dinamis di React.
Bagaimana React Menggunakan List
React menggunakan metode map() untuk mengubah array menjadi elemen UI. Saat Anda menggunakan map(), React mengubah setiap bagian data menjadi sebuah komponen.
Peran Keys React menggunakan Virtual DOM. Saat data berubah, React membandingkan data baru dengan data lama. Proses ini disebut rekonsiliasi (reconciliation).
Keys bertindak sebagai pengenal unik. Mereka memberi tahu React secara tepat item mana yang berubah, berpindah, atau dihapus.
Mengapa Menggunakan Indeks sebagai Key itu Berbahaya Menggunakan indeks (0, 1, 2...) sebagai key menyebabkan tiga masalah utama:
- Kesalahan State Komponen: Jika Anda mengurutkan list, kolom input atau checkbox mungkin menampilkan data dari item yang salah.
- Penurunan Performa: React tidak dapat melacak item mana yang mana. React sering kali merender ulang seluruh list alih-alih hanya satu item saja.
- Bug Visual: UI Anda mungkin terlihat benar, tetapi logika internal akan gagal saat item berpindah posisi.
Cara yang Benar Menggunakan Keys Agar aplikasi Anda tetap cepat dan stabil, ikuti aturan berikut:
- Gunakan ID Unik: Selalu gunakan ID dari database Anda (seperti UUID atau primary key).
- Jangan Pernah Gunakan
Math.random(): Menghasilkan key saat proses render menyebabkan React membuat ulang setiap elemen pada setiap pembaruan. Ini akan merusak performa. - Jaga Key Tetap Stabil: Sebuah key harus tetap sama untuk data yang sama selama seluruh siklus hidupnya (lifecycle).
Perbandingan Sekilas
Fitur: Stabilitas Menggunakan Indeks: Tidak Stabil Menggunakan ID Unik: Sangat Stabil
Fitur: Performa Menggunakan Indeks: Buruk Menggunakan ID Unik: Optimal
Fitur: Keamanan State Menggunakan Indeks: Tidak Aman Menggunakan ID Unik: 100% Aman
Ringkasan untuk Pengembang
Gunakan metode map(). Berikan ID yang unik dan stabil ke prop key. Hindari penggunaan indeks array untuk list apa pun yang dapat berubah, diurutkan, atau difilter.