React Key: Kenapa List Ceklis Tugasmu Suka Salah Centang Pas Satu Item Dihapus?

Bayangin Siti Menghapus Tugas Nomor 2 dari 5 Tugas...

Bayangin Siti membuat daftar tugas di React, masing-masing punya checkbox selesai/belum. Kodenya me-render list seperti ini:

{tasks.map((task, index) => (
  <TaskItem key={index} task={task} />
))}

Siti mencentang tugas nomor 4 sebagai selesai. Lalu dia menghapus tugas nomor 2. Anehnya, setelah tugas nomor 2 hilang, checkbox yang tercentang berpindah ke tugas nomor 3 (yang sekarang menempati posisi keempat), bukan mengikuti tugas nomor 4 yang tadi memang dicentang Siti!

Masalahnya: React Mencocokkan Elemen Berdasarkan 'key', Bukan Berdasarkan Datanya

React memakai key untuk mengetahui "komponen mana yang sama dengan render sebelumnya, dan mana yang benar-benar baru." Kalau key yang dipakai adalah index array (0, 1, 2, 3, ...), begitu satu item di tengah dihapus, seluruh index di bawahnya ikut bergeser naik satu. Bagi React, ini terlihat seperti: "key=2 sekarang datanya berubah", bukan "item dengan key=2 telah dihapus." React pun mempertahankan state internal komponen (seperti status checkbox yang dicentang secara lokal) di posisi index yang sama, padahal data yang sebenarnya ditampilkan di posisi itu sudah berbeda — checkbox jadi "nyangkut" di posisi, bukan mengikuti datanya.

Nah, Di Sinilah 'key' yang Benar Masuk!

Solusinya sederhana: gunakan identitas unik dan stabil milik data itu sendiri (seperti id dari database), bukan posisi urutannya di array.

{tasks.map((task) => (
  <TaskItem key={task.id} task={task} />
))}

Dengan key={task.id}, React tahu persis: "task dengan id 'xyz' ini tetap task yang sama, di manapun dia sekarang berada dalam daftar." Saat sebuah task dihapus, React akan benar-benar membongkar (unmount) komponen milik task itu saja — bukan menggeser state semua komponen di bawahnya seolah-olah datanya yang berubah.

Intinya: Pakai index array sebagai key hanya kalau daftarnya benar-benar statis (tidak pernah ditambah, dihapus, difilter, atau diurutkan ulang). Begitu ada kemungkinan urutan berubah, selalu pakai id unik dari datanya — kalau tidak, bug-nya sering tidak error, cuma diam-diam salah tampil seperti kasus Siti di atas.