> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Pengenal unik render (key)

> Pelajari cara menggunakan pengenal unik render (key) pada halaman kustom YiDA — konfigurasikan, jalur pengaturan, dan penerapannya saat beralih antar komponen sejenis untuk mencegah error data akibat reuse komponen.

| **Fitur**      | **Paket Luang** | **Edisi Basic** | **Edisi Professional** | **Edisi Dedicated** |
| -------------- | --------------- | --------------- | ---------------------- | ------------------- |
| Halaman kustom | Tidak didukung  | Tidak didukung  | Didukung               | Didukung            |

## 1. Pengantar dan jalur konfigurasi

Pengenal unik render (key) bekerja dengan prinsip yang sama seperti atribut key pada komponen di React — keduanya mengidentifikasi komponen secara unik saat proses rendering atau peralihan komponen.

**Jalur**: Pada halaman kustom, klik komponen mana pun >> **Premium** di sisi kanan >> **Apakah dirender** >> **Pengenal unik render**.

Konfigurasi ini umumnya digunakan bersama fitur **Apakah dirender** dan **Loop**.

Halaman kustom

## 2. Kasus penggunaan

### 2.1 Beralih antar komponen sejenis

Pada skenario berikut, ketika **Hobi** diatur ke **Games**, **Game favorit** ditampilkan; ketika **Hobi** diatur ke **Olahraga**, **Olahraga favorit** ditampilkan.

Konfigurasikan sebagai berikut:

1. Tambahkan sumber data variabel: `hobby`.
2. Atur pengenal formulir **Game favorit** menjadi `game`, lalu ikat **Apakah dirender** ke variabel `state.hobby === 'Games'`.
3. Atur pengenal formulir **Olahraga favorit** menjadi `sport`, lalu ikat **Apakah dirender** ke variabel `state.hobby === 'Sports'`.
4. Konfigurasikan tindakan `onChange` untuk **Hobi**.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onChagne({ value, actionType, item }) {
  this.setState({
  	hobby: value,
  });
}
```

5. Ikat tindakan `onClick` ke tombol **Kirim**.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function submit() {
	console.log(this.$('form').getValue());
}
```

Dengan konfigurasi di atas (tanpa mengatur pengenal unik render), mengganti hobi memang akan menukar Kotak Teks di bawahnya. Namun, saat data dikirim, bidang `sport` justru berisi nilai dari **Game favorit** meskipun **Olahraga** yang dipilih.

Alasan: **Saat beralih antar komponen Kotak Teks, tanpa key yang diatur, framework di baliknya akan "menggunakan ulang" komponen dari sebelum peralihan.**

Untuk mengatasinya, konfigurasikan **Pengenal unik render** untuk kedua komponen.