docs: translation for useId (#524)

Co-authored-by: M Haidar Hanif <git@mhaidarhanif.com>
Co-authored-by: Zain Fathoni <me@zainf.dev>
Co-authored-by: Zain Fathoni <zain.fathoni@gmail.com>

Author: 3 people

src/content/reference/react/useId.md

@@ -4,8 +4,7 @@ title: useId
 
 <Intro>
 
-`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.
-
+`useId` adalah React Hook untuk menghasilkan ID unik yang dapat diteruskan ke atribut aksesibilitas.
 ```js
 const id = useId()
 ```
@@ -16,11 +15,11 @@ const id = useId()
 
 ---
 
-## Reference {/*reference*/}
+## Referensi {/*reference*/}
 
 ### `useId()` {/*useid*/}
 
-Call `useId` at the top level of your component to generate a unique ID:
+Panggil `useId` di tingkat teratas komponen Anda untuk menghasilkan ID unik:
 
 ```js
 import { useId } from 'react';
@@ -30,35 +29,35 @@ function PasswordField() {
   // ...
 ```
 
-[See more examples below.](#usage)
+[Lihat lebih banyak contoh di bawah ini.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parameter {/*parameters*/}
 
-`useId` does not take any parameters.
+`useId` tidak mengambil parameter apapun.
 
-#### Returns {/*returns*/}
+#### Kembalian {/*returns*/}
 
-`useId` returns a unique ID string associated with this particular `useId` call in this particular component.
+`useId` mengembalikan string ID unik yang terkait dengan panggilan `useId` tertentu dalam komponen khusus ini.
 
 #### Caveats {/*caveats*/}
 
-* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* `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 (*loops*) atau kondisi (*conditions*). Jika Anda membutuhkannya, ekstrak komponen baru dan pindahkan *state* ke dalamnya.
 
-* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+* `useId` **tidak boleh digunakan untuk menghasilkan *key*** dalam daftar. [*Key* harus dihasilkan dari data Anda.](/learn/rendering-lists#where-to-get-your-key)
 
 ---
 
-## Usage {/*usage*/}
+## Pengunaan {/*usage*/}
 
 <Pitfall>
 
-**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
+**Jangan panggil `useId` untuk menghasilkan *key* dalam daftar.** [*Key* harus dihasilkan dari data Anda](/learn/rendering-lists#where-to-get-your-key)
 
 </Pitfall>
 
-### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/}
+### Menghasilkan ID unik untuk atribut aksesibilitas {/*generating-unique-ids-for-accessibility-attributes*/}
 
-Call `useId` at the top level of your component to generate a unique ID:
+Panggil `useId` di tingkat atas komponen Anda untuk menghasilkan ID unik:
 
 ```js [[1, 4, "passwordHintId"]]
 import { useId } from 'react';
@@ -68,7 +67,7 @@ function PasswordField() {
   // ...
 ```
 
-You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different attributes:
+Anda kemudian dapat meneruskan <CodeStep step={1}>ID yang dihasilkan</CodeStep> ke atribut yang berbeda:
 
 ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]]
 <>
@@ -77,11 +76,11 @@ You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different at
 </>
 ```
 
-**Let's walk through an example to see when this is useful.**
+**Mari telusuri contoh untuk melihat kapan ini berguna.**
 
-[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph).
+[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`)).
 
-In regular HTML, you would write it like this:
+Dalam HTML biasa, Anda akan menulisnya seperti ini:
 
 ```html {5,8}
 <label>
@@ -96,7 +95,7 @@ In regular HTML, you would write it like this:
 </p>
 ```
 
-However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`:
+Namun, menuliskan ID secara langsung di dalam kode (*hardcoding*) seperti ini bukanlah praktik yang baik di React. Sebuah komponen dapat di-*render* lebih dari sekali pada halaman—namun ID harus unik! Alih-alih melakukan pemaksaan ID, buat ID unik dengan `useId`:
 
 ```js {4,11,14}
 import { useId } from 'react';
@@ -120,7 +119,7 @@ function PasswordField() {
 }
 ```
 
-Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash.
+Sekarang, meskipun `PasswordField` muncul beberapa kali di layar, ID yang dihasilkan tidak akan berbenturan.
 
 <Sandpack>
 
@@ -163,33 +162,34 @@ input { margin: 5px; }
 
 </Sandpack>
 
-[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
+[Tonton video ini](https://www.youtube.com/watch?v=0dNzNcuEuOo) untuk melihat perbedaan pengalaman pengguna dengan teknologi bantu.
 
 <Pitfall>
 
-With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
+Dengan [*server rendering*](/reference/react-dom/server), **`useId` membutuhkan pohon komponen yang identik di *server* dan klien**. Jika pohon yang Anda *render* di *server* dan klien tidak sama persis, ID yang dihasilkan tidak akan cocok.
 
 </Pitfall>
 
 <DeepDive>
 
-#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/}
+#### Mengapa useId lebih baik daripada penghitung kenaikan? {/*why-is-useid-better-than-an-incrementing-counter*/}
+
+Anda mungkin bertanya-tanya mengapa `useId` lebih baik daripada menambahkan variabel global seperti `nextId++`.
 
-You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.
+Manfaat utama `useId` adalah React memastikan bahwa ia bekerja dengan [*server rendering*.](/reference/react-dom/server) Selama *server rendering*, 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 dari *server*.
 
-The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
+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.
 
-This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
 
-Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
+Di dalam React, `useId` dihasilkan dari “jalur induk” dari komponen pemanggil. Inilah sebabnya, jika pohon di klien dan *server* sama, "jalur induk" akan cocok terlepas dari urutan *rendering*.
 
 </DeepDive>
 
 ---
 
-### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
+### Menghasilkan ID untuk beberapa elemen terkait {/*generating-ids-for-several-related-elements*/}
 
-If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them: 
+Jika Anda perlu memberikan ID ke beberapa elemen terkait, Anda dapat memanggil `useId` untuk menghasilkan awalan bersama untuk mereka:
 
 <Sandpack>
 
@@ -216,13 +216,13 @@ input { margin: 5px; }
 
 </Sandpack>
 
-This lets you avoid calling `useId` for every single element that needs a unique ID.
+Ini memungkinkan Anda menghindari pemanggilan `useId` untuk setiap elemen yang membutuhkan ID unik.
 
 ---
 
-### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
+### Menentukan awalan bersama untuk semua ID yang dihasilkan {/*specifying-a-shared-prefix-for-all-generated-ids*/}
 
-If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified.
+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.
 
 <Sandpack>