React: Membangun Antarmuka Pengguna · 5/9

Rendering, list, dan key

Bagaimana React menentukan apa yang berubah, dan kenapa key yang salah merusak list-mu.

Baca 28 menit

Setelah pelajaran ini kamu bisa

Menjelaskan apa yang terjadi antara perubahan state dan layar yang diperbarui
Menjelaskan apa yang dibandingkan reconciliation
Menjelaskan fungsi key, dan kenapa indeks biasanya salah
Mendiagnosis state yang menempel ke item list yang salah

Perubahan state tidak menyentuh DOM secara langsung. Tiga hal terjadi berurutan, dan mengetahui namanya membuat perilaku React bisa diprediksi.

Trigger. Sebuah setter dipanggil, jadi React menjadwalkan pekerjaan untuk component ini.
Render. React memanggil function component-mu untuk mendapatkan deskripsi baru. Belum ada apa pun di layar, dan langkah ini harus pure.
Commit. React membandingkan deskripsi baru dengan yang lama lalu menerapkan hanya selisihnya ke DOM sungguhan.

Bagaimana reconciliation membandingkan

Type sama di posisi sama? Pertahankan node DOM-nya, perbarui hanya atribut yang berubah, dan pertahankan state-nya.
Type berbeda? Hancurkan subtree itu dan bangun yang baru. Semua state di dalamnya hilang.
Sebuah list? Cocokkan anak-anaknya berdasarkan key. Tanpa key, cocokkan berdasarkan posisi.

Key

Sebuah key memberi tahu React item mana di dalam list yang mana, antar render. Itulah cara React tahu sebuah item berpindah alih-alih berubah.

Coba sendiri

Hapus item pertama dari sebuah list, dicocokkan dua cara. Kolom state adalah yang dilihat pengguna di kotak input mereka.

// Three inputs, each holding what its user typed.
const before = [
  { id: "a", label: "Ana",   typed: "note about Ana" },
  { id: "b", label: "Budi",  typed: "note about Budi" },
  { id: "c", label: "Citra", typed: "note about Citra" },
];

// Ana is removed.
const after = before.slice(1);

// --- matched by INDEX: position 0 is "the same component" as before ---
function reconcileByIndex(before, after) {
  return after.map((item, index) => ({
    label: item.label,
    // React keeps the DOM node that was at this index, and its state with it.
    keptState: before[index] ? before[index].typed : "(new, empty)",
  }));
}

// --- matched by KEY: identity travels with the item ---
function reconcileByKey(before, after) {
  const previous = new Map(before.map((i) => [i.id, i]));
  return after.map((item) => ({
    label: item.label,
    keptState: previous.has(item.id) ? previous.get(item.id).typed : "(new, empty)",
  }));
}

console.log("after removing Ana, using key={index}:");
for (const row of reconcileByIndex(before, after)) {
  console.log("   " + row.label.padEnd(7) + "shows: " + row.keptState);
}
console.log("");
console.log("after removing Ana, using key={item.id}:");
for (const row of reconcileByKey(before, after)) {
  console.log("   " + row.label.padEnd(7) + "shows: " + row.keptState);
}
console.log("");
console.log("With index keys, Budi now displays Ana's text and Citra displays Budi's.");
console.log("Nothing errors. The data is simply attached to the wrong rows.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Key	Penilaian
`key={item.id}`	Benar — stabil dan unik
`key={item.slug}`	Benar, kalau slug-nya unik dan stabil
`key={index}`	Hanya kalau list-nya tidak pernah diurut ulang, difilter, atau dihapus
`key={Math.random()}`	Jangan pernah — key baru setiap render menghancurkan semuanya, setiap kali
Tanpa key	Sama dengan indeks, plus peringatan di console

Tugas praktik

Bangun bug-nya dengan sengaja. Render tiga input teks dari sebuah array memakai key={index}, ketik sesuatu yang berbeda di masing-masingnya, lalu hapus item pertamanya. Lihat teksnya bergeser naik satu baris. Ubah key-nya jadi id yang stabil lalu ulangi — sekarang teksnya ikut hilang bersama barisnya sendiri. Melakukan ini sekali berarti kamu akan selalu mengenalinya.

Hasil yang diharapkan

Teksnya terlihat bergeser baris dengan key indeks, dan tetap di tempatnya dengan key id.

Cek pemahaman

Sebuah list input teks memakai key={index}. Kamu menghapus item pertama. Apa yang dilihat pengguna?

Sebuah peringatan React di consoleSetiap baris yang tersisa menampilkan teks yang tadinya milik baris di atasnyaSemua input jadi kosong, karena list-nya berubahTidak ada masalah — key indeks aman untuk list

Pilih jawaban dulu