You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/useId.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -41,7 +41,7 @@ function PasswordField() {
41
41
42
42
#### Caveats {/*caveats*/}
43
43
44
-
* `useId` adalah sebuah Hook, jadi Anda hanya dapat memanggilnya **di tingkat atas komponen Anda** atau Hook Anda sendiri. Anda tidak dapat memanggilnya di dalam loop atau kondisi. Jika Anda membutuhkannya, ekstrak komponen baru dan pindahkan *state* ke dalamnya.
44
+
* `useId` adalah sebuah Hook, jadi Anda hanya dapat memanggilnya **di tingkat teratas komponen Anda** atau Hook Anda sendiri. Anda tidak dapat memanggilnya di dalam perulangan (*loop*) atau kondisi (*conditions*). Jika Anda membutuhkannya, ekstrak komponen baru dan pindahkan *state* ke dalamnya.
45
45
46
46
* `useId` **tidak boleh digunakan untuk menghasilkan *key*** dalam daftar. [*Key* harus dihasilkan dari data Anda.](/learn/rendering-lists#where-to-get-your-key)
47
47
@@ -78,7 +78,7 @@ Anda kemudian dapat meneruskan <CodeStep step={1}>ID yang dihasilkan</CodeStep>
78
78
79
79
**Mari telusuri contoh untuk melihat kapan ini berguna.**
80
80
81
-
[Atribut aksesibilitas HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) seperti [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) membiarkan Anda menentukan bahwa dua tag terkait satu sama lain. Misalnya, Anda dapat menentukan bahwa suatu elemen (seperti input) dijelaskan oleh elemen lain (seperti paragraf).
81
+
[Atribut aksesibilitas HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) seperti [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) membiarkan Anda menentukan bahwa dua *tag* terkait satu sama lain. Misalnya, Anda dapat menentukan bahwa suatu elemen (seperti sebuah masukan (`input`)) dijelaskan oleh elemen lain (seperti sebuah paragraf (`p`)).
82
82
83
83
Dalam HTML biasa, Anda akan menulisnya seperti ini:
84
84
@@ -95,7 +95,7 @@ Dalam HTML biasa, Anda akan menulisnya seperti ini:
95
95
</p>
96
96
```
97
97
98
-
Namun, memaksakan ID seperti ini bukanlah praktik yang baik di React. Sebuah komponen dapat dirender lebih dari sekali pada halaman—namun ID harus unik! Alih-alih melakukan pemaksaan ID, buat ID unik dengan `useId`:
98
+
Namun, menuliskan ID secara langsung di dalam kode (*hardcoding*) seperti ini bukanlah praktik yang baik di React. Sebuah komponen dapat dirender lebih dari sekali pada halaman—namun ID harus unik! Alih-alih melakukan pemaksaan ID, buat ID unik dengan `useId`:
99
99
100
100
```js {4,11,14}
101
101
import { useId } from'react';
@@ -119,7 +119,7 @@ function PasswordField() {
119
119
}
120
120
```
121
121
122
-
Now, even if `PasswordField`appears multiple times on the screen, the generated IDs won't clash.
122
+
Sekarang, meskipun `PasswordField`muncul beberapa kali di layar, ID yang dihasilkan tidak akan berbenturan.
123
123
124
124
<Sandpack>
125
125
@@ -178,7 +178,7 @@ Anda mungkin bertanya-tanya mengapa `useId` lebih baik daripada menambahkan vari
178
178
179
179
Manfaat utama `useId` adalah React memastikan bahwa ia bekerja dengan [rendering server.](/reference/react-dom/server) Selama rendering server, komponen Anda menghasilkan keluaran HTML. Kemudian, pada klien, [hidrasi](/reference/react-dom/client/hydrateRoot) melampirkan *event handler* Anda ke HTML yang dihasilkan. Agar hidrasi berfungsi, output klien harus cocok dengan HTML server.
180
180
181
-
Ini sangat sulit untuk menjamin dengan penghitung kenaikan karena urutan di mana komponen klien terhidrasi mungkin tidak sesuai dengan urutan di mana HTML server dipancarkan. Dengan memanggil `useId`, Anda memastikan bahwa hidrasi akan berfungsi, dan hasilnya akan cocok antara server dan klien.
181
+
Hal ini sangat sulit untuk dijamin dengan penghitung kenaikan karena urutan di mana komponen klien terhidrasi mungkin tidak sesuai dengan urutan di mana HTML dari *server* dipancarkan. Dengan memanggil `useId`, Anda memastikan bahwa hidrasi akan berfungsi, dan hasilnya akan cocok antara *server* dan klien.
182
182
183
183
184
184
Di dalam React, `useId` dihasilkan dari “jalur induk” dari komponen pemanggil. Inilah sebabnya, jika klien dan pohon server sama, "jalur induk" akan cocok terlepas dari urutan rendering.
@@ -189,7 +189,7 @@ Di dalam React, `useId` dihasilkan dari “jalur induk” dari komponen pemanggi
189
189
190
190
### Menghasilkan ID untuk beberapa elemen terkait {/*generating-ids-for-several-related-elements*/}
191
191
192
-
Jika Anda perlu memberikan ID ke beberapa elemen terkait, Anda dapat memanggil `useId` untuk menghasilkan prefiks bersama untuknya:
192
+
Jika Anda perlu memberikan ID ke beberapa elemen terkait, Anda dapat memanggil `useId` untuk menghasilkan awalan bersama untuk mereka:
193
193
194
194
<Sandpack>
195
195
@@ -220,7 +220,7 @@ Ini memungkinkan Anda menghindari pemanggilan `useId` untuk setiap elemen yang m
220
220
221
221
---
222
222
223
-
### Menentukan prefiks bersama untuk semua ID yang dihasilkan {/*specifying-a-shared-prefix-for-all-generated-ids*/}
223
+
### Menentukan awalan bersama untuk semua ID yang dihasilkan {/*specifying-a-shared-prefix-for-all-generated-ids*/}
224
224
225
225
Jika Anda me-*render* beberapa aplikasi React independen pada satu halaman, berikan `identifierPrefix` sebagai opsi untuk panggilan [`createRoot`](/reference/react-dom/client/createRoot#parameters) atau [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) Anda. Hal ini memastikan bahwa ID yang dihasilkan oleh dua aplikasi berbeda tidak pernah berbenturan karena setiap pengenal yang dibuat dengan `useId` akan dimulai dengan awalan berbeda yang telah Anda tentukan.
0 commit comments