Skip to content

Commit a494d22

Browse files
committed
docs: update wording by feedback
1 parent 77be943 commit a494d22

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/content/reference/react/useId.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function PasswordField() {
4141
4242
#### Caveats {/*caveats*/}
4343
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.
4545
4646
* `useId` **tidak boleh digunakan untuk menghasilkan *key*** dalam daftar. [*Key* harus dihasilkan dari data Anda.](/learn/rendering-lists#where-to-get-your-key)
4747
@@ -78,7 +78,7 @@ Anda kemudian dapat meneruskan <CodeStep step={1}>ID yang dihasilkan</CodeStep>
7878
7979
**Mari telusuri contoh untuk melihat kapan ini berguna.**
8080
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`)).
8282
8383
Dalam HTML biasa, Anda akan menulisnya seperti ini:
8484
@@ -95,7 +95,7 @@ Dalam HTML biasa, Anda akan menulisnya seperti ini:
9595
</p>
9696
```
9797
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`:
9999
100100
```js {4,11,14}
101101
import { useId } from 'react';
@@ -119,7 +119,7 @@ function PasswordField() {
119119
}
120120
```
121121
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.
123123
124124
<Sandpack>
125125
@@ -178,7 +178,7 @@ Anda mungkin bertanya-tanya mengapa `useId` lebih baik daripada menambahkan vari
178178
179179
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.
180180
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.
182182
183183
184184
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
189189
190190
### Menghasilkan ID untuk beberapa elemen terkait {/*generating-ids-for-several-related-elements*/}
191191
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:
193193
194194
<Sandpack>
195195
@@ -220,7 +220,7 @@ Ini memungkinkan Anda menghindari pemanggilan `useId` untuk setiap elemen yang m
220220
221221
---
222222
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*/}
224224
225225
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.
226226

0 commit comments

Comments
 (0)