Jalan Pintas Berbahaya yang Dilakukan Setiap Pemula React.

Mengapa React Peduli Tentang Kunci?

Untuk memahami hal ini, kita harus melihat bagaimana React menangani layar. React menggunakan Virtual DOM untuk melacak apa yang sedang terlihat. Saat data Anda berubah, React tidak menghapus seluruh layar dan menggambar ulang dari awal — hal ini akan membuat aplikasi Anda sangat lambat.

Sebaliknya, ini membandingkan cuplikan lama aplikasi Anda dengan cuplikan baru dan hanya memperbarui elemen HTML persis yang berubah.

Dalam hal daftar, React menghadapi teka-teki besar. Jika Anda menambahkan sebuah item, menghapus sebuah item, atau menyusun ulang daftarnya, bagaimana React mengetahuinya yang elemen DOM tertentu cocok yang item dalam array JavaScript Anda?

Itu terlihat pada key. Kuncinya adalah paspor permanen dan unik untuk daftar spesifik tersebut.

Inilah Yang Terjadi Saat Daftar Bergeser

Jika daftar Anda benar-benar statis — artinya tidak pernah berubah, tidak pernah diurutkan, dan tidak pernah ada item yang ditambahkan atau dihapus — gunakan key={index} tidak akan merusak apa pun.

Namun saat daftar Anda menjadi dinamis, pintasan indeks gagal total.

Bayangkan Anda memiliki daftar tiga tugas:

• Indeks 0: Beli bahan makanan
• Indeks 1: Membersihkan ruangan
• Indeks 2: Pelajari React

Anda memutuskan untuk menghapus “Beli bahan makanan” (Indeks 0) dari bagian atas daftar. Inilah tepatnya bagaimana React melihat pembaruan di balik layar:

1. React memiliki tiga elemen yang dipetakan ke kunci 0, 1, dan 2.
2. Anda menghapus item pertama. Array sekarang hanya memiliki dua item: “Bersihkan ruangan” dan “Study React”. Karena Anda menggunakan indeks array sebagai kuncinya, “Bersihkan ruangan” secara otomatis menjadi Indeks 0, dan “Study React” menjadi Indeks 1.
3. React membandingkan daftar lama dengan daftar baru. Ia melihat bahwa kunci 0 masih ada (tetapi sekarang berisi teks berbeda), kunci 1 masih ada (dengan teks berbeda), dan kunci 2 hilang.
4. React mengira Anda baru saja mengedit teks item 0 dan 1, dan menghapus item 2. Jika item 0 memiliki status internal — seperti kotak centang yang dicentang atau kolom input aktif — status yang dicentang tersebut akan tetap menempel pada elemen di kunci 0. Kotak centang Anda sekarang dicentang pada tugas yang salah!

Karena indeksnya berubah, React memetakan status daftar internal yang lama ke item data yang sepenuhnya salah. Teks diperbarui, namun status tetap menempel pada indeks.

Cara Mengatasinya: Gunakan Pengidentifikasi yang Stabil dan Unik

Solusi untuk masalah ini sederhana saja: Kunci harus stabil, dapat diprediksi, dan unik. Mereka harus dimiliki secara langsung oleh objek data itu sendiri, bukan pada posisi array.

Perbaiki 1: Gunakan ID Basis Data

Jika data Anda berasal dari database (seperti MongoDB atau API publik), data tersebut hampir selalu dilengkapi dengan pengenal unik seperti id atau _id. Selalu default untuk ini.

// Safe, stable, and completely predictable
items.map((item) => (
<TodoItem key={item.id} todo={item} />
));

Meskipun Anda menghapus item pertama, “Bersihkan ruangan” tetap mempertahankan ID yang sama persis. React melihat ID yang cocok, menjaga status internalnya tetap utuh, dan memperbarui DOM secara akurat.

Perbaiki 2: Hasilkan ID Unik pada Pembuatan

Jika Anda membuat item secara lokal dalam status aplikasi Anda (seperti daftar tugas lokal), buatlah ID unik pada saat yang tepat item tersebut dibuattidak selama fase render.

const addTodo = (text) => {
const newTodo = {
id: crypto.randomUUID(), // Generates a unique string like "de305d54-75b4-431b-adb2..."
text: text
};
setTodos([...todos, newTodo]);
};

(Catatan: Hindari membuat kunci acak seperti key={Math.random()} langsung di dalam milikmu .map() fungsi. Melakukan hal itu akan memaksa React untuk menghasilkan kunci baru pada setiap render, menghapus seluruh status komponen dan memperlambat aplikasi Anda.)