React Lists & Keys: Cara Rendering Data Array yang Benar

Halo, Teman Ngoding! 👋

Kalau kamu sudah ngulik React lebih dari lima menit, pasti pernah lihat warning merah yang cukup bawel ini di console browser:

Warning: Each child in a list should have a unique “key” prop.

Ngaku deh, pertama kali lihat ini pasti panik atau malah dicuekin karena “ah, aplikasinya jalan-jalan aja kok”. Atau mungkin kamu pakai jurus “tempel key={index}” biar warning-nya hilang.

Nah, santai dulu, ambil kopi ☕. Hari ini saya mau jelasin kenapa warning itu muncul dan kenapa “nambal” pakai index bisa bikin masalah besar di kemudian hari.

Rendering List di React

Di zaman vanilla JS dulu, kita biasa nge-loop array terus append string HTML ke DOM manual. Di React, caranya lebih elegan. Kita perlakukan array data seperti variabel biasa.

Cara standar buat ubah array data jadi elemen UI adalah pakai fungsi .map().

// Array buah-buahan sederhana
const fruits = ["Apel", "Pisang", "Jeruk"];

const FruitList = () => {
  return (
    <ul>
      {fruits.map((fruit) => (
        // ❌ Ini bakal memicu warning!
        <li>{fruit}</li>
      ))}
    </ul>
  );
};

React bakal lihat kode ini dan mikir: “Oke, saya lihat ada daftar item. Tapi kalau nanti daftarnya berubah, gimana saya tahu item mana yang mana?”

Peran Penting ‘Key’ Prop

key prop itu cara React ngenalin identitas setiap item di dalam list.

Bayangin kayak absen di kelas. Kalau semua murid angkat tangan dan guru bilang “Hei kamu, bicara!”, pasti bingung. Tapi kalau guru bilang “Budi, bicara!”, jelas tujuannya.

React pakai key buat tahu item mana yang berubah, ditambah, atau dihapus. Ini penting banget buat proses Reconciliation (algoritma diffing-nya React).

Tanpa key, kalau kamu nambah item di awal list, React mungkin bakal nge-render ulang semua item karena dia kira urutannya berubah total. Dengan key, React tahu: “Oh, ‘Apel’ tetap ‘Apel’, cuma geser ke bawah aja. Gak perlu render ulang isinya.”

Jebakan “Index sebagai Key”

Ini kesalahan yang paling sering dilakukan pemula (bahkan kadang senior yang lagi khilaf).

// ⚠️ HINDARI INI kalau list-nya bisa berubah!
{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))}

”Tapi warning-nya hilang kan?” Iya, hilang. Tapi itu solusi palsu.

Menggunakan index array (0, 1, 2...) sebagai key itu berbahaya kalau list kamu bisa diurutkan ulang, difilter, atau disisipi item baru.

Kenapa? Bayangin kamu punya list input form.

1. Item A (Key: 0) -> Nilai input: “A”
2. Item B (Key: 1) -> Nilai input: “B”

Kalau kamu hapus Item A, Item B sekarang jadi Key 0. React melihat Key 0 masih ada, dan dia mungkin bakal mempertahankan state (Nilai input “A”) buat item yang sekarang isinya Item B. Hasilnya: User lihat tulisan “A” di input punya Item B. Bug yang bikin pusing! 💥

Solusi: Gunakan ID Unik

Key terbaik adalah ID unik yang datang dari data kamu (ID database, UUID, dsb).

const users = [
  { id: 101, name: "Alice" },
  { id: 102, name: "Bob" },
  { id: 103, name: "Charlie" },
];

const UserList = () => {
  return (
    <ul>
      {users.map((user) => (
        // ✅ Benar! Stabil dan unik.
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Gimana kalau datanya gak punya ID?

1. Minta backend developer buat nambahin.
2. Generate ID sekali saat data dimuat (pakai crypto.randomUUID() atau library nanoid). Jangan generate ID di dalam render method, nanti berubah terus setiap render!

Penutup

Jadi, warning itu ada bukan buat iseng. Itu mekanisme React buat ngelindungin aplikasi kamu dari bug performa dan state yang berantakan.

• Selalu pakai key untuk list.
• Gunakan ID unik dari data.
• Hindari pakai index kecuali kamu 100% yakin list-nya statis (gak bakal berubah urutan atau jumlahnya).

Kalau kita tertib pakai key, React bakal bikin UI kita tetap ngebut dan bebas bug aneh.

Selamat ngoding! 🚀