Mengapa Anda Membutuhkan React Key Prop

Anda melihat error ini di konsol Anda: "Each child in a list should have a unique 'key' prop."

Banyak pengembang mengabaikannya. Ini adalah sebuah kesalahan. Peringatan ini memberi tahu Anda tentang masalah performa dan potensi bug.

Apa itu key prop? Ini membantu React mengidentifikasi item tertentu dalam sebuah daftar. Ini memberi tahu React item mana yang berubah, berpindah, atau dihapus. Tanpa key, React akan me-render ulang seluruh daftar setiap kali ada perubahan. Hal ini memperlambat aplikasi Anda.

Bayangkan sebuah perpustakaan dengan 1000 buku. Jika Anda menambahkan buku baru di tengah-tengah, Anda harus memindahkan setiap buku lainnya untuk memberi ruang. Key bertindak seperti ID unik untuk setiap buku. Ini memungkinkan React menemukan posisi yang tepat tanpa harus memindahkan hal lainnya.

Proses Rekonsiliasi React menggunakan algoritma diffing untuk membandingkan Virtual DOM yang baru dengan yang lama.

  • State berubah.
  • React membangun tree baru.
  • React membandingkan tree menggunakan key.
  • React hanya memperbarui elemen yang berubah.

Kesalahan umum: Menggunakan array index sebagai key. Jangan pernah gunakan key={index} jika daftar Anda berubah. Jika Anda menambah atau menghapus item, index dari setiap item akan bergeser. React akan menjadi bingung dan me-render ulang item yang sebenarnya tidak berubah. Ini membuang-buang memori dan menyebabkan bug pada UI.

Cara memperbaikinya:

  • Gunakan ID yang stabil dari database Anda (seperti user.id).
  • Gunakan string unik seperti uuid jika data Anda tidak memiliki ID.
  • Hindari Math.random() untuk key. Ini membuat ID baru pada setiap render, yang memaksa komponen untuk re-mount dan menyebabkan UI berkedip (flickering).

Praktik terbaik:

  • Key harus stabil.
  • Key harus unik di antara siblings.
  • Gunakan ID database untuk performa terbaik.

Tabel Perbandingan Key: • Database ID: Direkomendasikan. Stabil dan cepat. • Array Index: Tidak direkomendasikan. Menyebabkan bug saat pengurutan (sorting) atau penyaringan (filtering). • Math.random(): Hindari. Menyebabkan re-mount yang tidak perlu.

Ringkasan untuk alur kerja Anda: Jika Anda melihat error tersebut, komponen Anda kekurangan pengenal (identifier) yang permanen. Periksa respons API Anda untuk mencari field unik seperti email atau ID. Perbaiki ini untuk menghemat 30-40% re-render yang tidak perlu.

Sumber: https://dev.to/banti_kevat_8e2d123bb7994/react-me-key-prop-kyun-zaroori-hai-warning-solve-in-hindi-49dk