docs: translate API Reference -> react-dom -> hydrate (#528)

Co-authored-by: Muh Zakir Ramadhan <mzramadhan@digiasia.asia>
Co-authored-by: M Haidar Hanif <git@mhaidarhanif.com>
Co-authored-by: Resi Respati <resir014@gmail.com>

Author: 4 people

src/content/reference/react-dom/hydrate.md

@@ -4,15 +4,15 @@ title: hydrate
 
 <Deprecated>
 
-This API will be removed in a future major version of React.
+API ini akan dihapus pada React versi mayor berikutnya.
 
-In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
+Di React 18, `hydrate` digantikan oleh [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Menggunakan `hydrate` di React 18 akan memberi peringatan bahwa aplikasi Anda akan berperilaku seakan-akan sedang berjalan di React 17. Pelajari selengkapnya [di sini.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
 
 </Deprecated>
 
 <Intro>
 
-`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below.
+`hydrate` memungkinkan Anda menampilkan komponen React di dalam simpul DOM peramban yang konten HTML-nya sebelumnya telah dihasilkan oleh [`react-dom/server`](/reference/react-dom/server) di React versi 17 ke bawah.
 
 ```js
 hydrate(reactNode, domNode, callback?)
@@ -24,68 +24,68 @@ hydrate(reactNode, domNode, callback?)
 
 ---
 
-## Reference {/*reference*/}
+## Referensi {/*reference*/}
 
 ### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/}
 
-Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
+Memanggil `hydrate` di React 17 dan yang lebih rendah untuk "melekatkan" React ke HTML yang sudah ada sebelumnya yang dihasilkan oleh React di lingkungan *server*.
 
 ```js
 import { hydrate } from 'react-dom';
 
 hydrate(reactNode, domNode);
 ```
 
-React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component.
+React akan melekat pada HTML yang ada di dalam `domNode`, dan mengambil alih pengelolaan DOM di dalamnya. Sebuah aplikasi yang sepenuhnya dibangun dengan React biasanya hanya akan memiliki satu pemanggilan `hydrate` dengan komponen akarnya.
 
-[See more examples below.](#usage)
+[Lihat lebih banyak contoh di bawah ini.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parameter {/*parameters*/}
 
-* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToString(<App />)` in React 17.
+* `reactNode`: "Simpul React" yang digunakan untuk me-*render* HTML yang sudah ada. Ini biasanya berupa potongan JSX seperti `<App />` yang di-*render* dengan metode (*method*) `ReactDOM Server` seperti `renderToString(<App />)` di React 17.
 
-* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
+* `domNode`: Sebuah [elemen DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element) yang di-*render* sebagai elemen akar di *server*.
 
-* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated.
+* **opsional**: `callback`: Sebuah fungsi. Jika diberikan, React akan memanggilnya setelah komponen Anda terhidrasi (*hydrated*).
 
-#### Returns {/*returns*/}
+#### Kembalian {/*returns*/}
 
-`hydrate` returns null.
+`hydrate` mengembalikan nilai kosong (*null*).
 
-#### Caveats {/*caveats*/}
-* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them.
-* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
-* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you.
-* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead.
+#### Catatan {/*caveats*/}
+* `hydrate` mengharapkan konten yang di-*render* identik dengan konten yang di-*render* di *server*. React dapat memperbaiki perbedaan dalam konten teks, tetapi Anda seharusnya memperlakukan ketidakcocokan tersebut sebagai *bug* dan memperbaikinya sendiri.
+* Dalam mode pengembangan, React memberi peringatan tentang ketidakcocokan selama hidrasi (*hydration*). Tidak ada jaminan bahwa perbedaan atribut akan diperbaiki dalam kasus ketidakcocokan. Ini penting untuk alasan kinerja karena dalam sebagian besar aplikasi, ketidakcocokan jarang terjadi, sehingga memvalidasi semua markup akan menjadi sangat mahal.
+* Kemungkinan Anda hanya akan memiliki satu pemanggilan `hydrate` dalam aplikasi Anda. Jika Anda menggunakan sebuah *framework*, mungkin *framework* tersebut melakukan panggilan ini untuk Anda.
+* Jika aplikasi Anda di-*render* oleh klien tanpa HTML yang sudah di-*render* sebelumnya, penggunaan `hydrate()` tidak didukung. Alih-alih menggunakan `hydrate()`, gunakanlah [render()](/reference/react-dom/render) (untuk React 17 dan lebih rendah) atau [createRoot()](/reference/react-dom/client/createRoot) (untuk React 18+).
 
 ---
 
-## Usage {/*usage*/}
+## Penggunaan {/*usage*/}
 
-Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
+Panggil `hydrate` untuk melekatkan sebuah <CodeStep step={1}>komponen React</CodeStep> kepada <CodeStep step={2}>simpul DOM peramban</CodeStep> yang di-*render* di *server*.
 
 ```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
 import { hydrate } from 'react-dom';
 
 hydrate(<App />, document.getElementById('root'));
 ```
 
-Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
+Penggunaan `hydrate()` untuk me-*render* aplikasi hanya di sisi klien (aplikasi tanpa HTML yang di-*render* oleh server) tidak didukung. Alih-alih menggunakan `hydrate()`, gunakanlah [`render()`](/reference/react-dom/render) (di React 17 dan lebih rendah) atau [`createRoot()`](/reference/react-dom/client/createRoot) (di React 18+).
 
-### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
+### Menghidrasi HTML yang di-*render* oleh server {/*hydrating-server-rendered-html*/}
 
-In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client.
+Di React, "hidrasi" adalah bagaimana React "melekatkan" ke HTML yang sudah ada sebelumnya yang telah di-*render* oleh React di lingkungan *server*. Selama hidrasi, React akan mencoba untuk melekatkan *event listeners* ke *markup* yang ada dan mengambil alih pe-*render*-an aplikasi pada sisi klien.
 
-In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**.
+Pada aplikasi yang sepenuhnya dibangun dengan React, **biasanya Anda hanya akan menghidrasi satu "akar" ("*root*"), yakni sekali saat memulai menjalankan seluruh aplikasi Anda"**.
 
 <Sandpack>
 
 ```html public/index.html
 <!--
-  HTML content inside <div id="root">...</div>
-  was generated from App by react-dom/server.
+  Konten HTML di dalam <div id="root">...</div>
+  di-*generate* dari App oleh react-dom/server.
 -->
-<div id="root"><h1>Hello, world!</h1></div>
+<div id="root"><h1>Halo, dunia!</h1></div>
 ```
 
 ```js index.js active
@@ -98,23 +98,23 @@ hydrate(<App />, document.getElementById('root'));
 
 ```js App.js
 export default function App() {
-  return <h1>Hello, world!</h1>;
+  return <h1>Halo, dunia!</h1>;
 }
 ```
 
 </Sandpack>
 
-Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
+Biasanya Anda tidak perlu memanggil `hydrate` lagi atau memanggilnya di tempat lain. Dari titik ini, React akan mengelola DOM dari aplikasi Anda. Untuk memperbarui UI, komponen akan [menggunakan state.](/reference/react/useState)
 
-For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot)
+Untuk informasi lebih lanjut tentang hidrasi, lihat dokumen untuk [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot)
 
 ---
 
-### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/}
+### Menghilangkan kesalahan ketidakcocokan hidrasi yang tidak dapat dihindari {/*suppressing-unavoidable-hydration-mismatch-errors*/}
 
-If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning.
+Jika satu atribut elemen atau konten teks secara tidak terhindarkan berbeda antara server dan klien (misalnya, timestamp), Anda dapat menghilangkan peringatan ketidakcocokan hidrasi.
 
-To silence hydration warnings on an element, add `suppressHydrationWarning={true}`:
+Untuk menghilangkan peringatan hidrasi pada elemen, tambahkan `suppressHydrationWarning={true}`:
 
 <Sandpack>
 
@@ -123,7 +123,7 @@ To silence hydration warnings on an element, add `suppressHydrationWarning={true
   HTML content inside <div id="root">...</div>
   was generated from App by react-dom/server.
 -->
-<div id="root"><h1>Current Date: 01/01/2020</h1></div>
+<div id="root"><h1>Tanggal Saat ini: 01/01/2020</h1></div>
 ```
 
 ```js index.js
@@ -138,21 +138,21 @@ hydrate(<App />, document.getElementById('root'));
 export default function App() {
   return (
     <h1 suppressHydrationWarning={true}>
-      Current Date: {new Date().toLocaleDateString()}
+      Tanggal Saat ini: {new Date().toLocaleDateString()}
     </h1>
   );
 }
 ```
 
 </Sandpack>
 
-This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
+Cara ini hanya berfungsi untuk satu tingkat kedalaman dan dimaksudkan untuk menjadi jalan keluar ketika tidak ada pilihan lain. Jangan terlalu sering menggunakannya. Kecuali jika itu adalah konten teks, React masih tidak akan mencoba memperbaikinya, sehingga konten tersebut mungkin tetap tidak konsisten sampai dengan pembaruan di versi-versi mendatang.
 
 ---
 
-### Handling different client and server content {/*handling-different-client-and-server-content*/}
+### Mengatasi konten berbeda antara client dan server {/*handling-different-client-and-server-content*/}
 
-If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect):
+Jika Anda sengaja perlu me-*render* sesuatu yang berbeda di server dan klien, Anda dapat melakukan dua kali pe-*render*-an. Komponen yang me-*render* sesuatu yang berbeda pada sisi klien dapat di baca di [*variabel state*](/reference/react/useState) seperti `isClient`, yang dapat ditetapkan ke `true` dalam sebuah [efek](/reference/react/useEffect):
 
 <Sandpack>
 
@@ -192,10 +192,10 @@ export default function App() {
 
 </Sandpack>
 
-This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
+Dengan cara ini, proses *render* awal akan me-*render* konten yang sama dengan *server*, menghindari ketidakcocokan, tetapi ada tambahan proses synchronously setelah hidrasi.
 
 <Pitfall>
 
-This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user.
+Metode ini membuat hidrasi lebih lambat karena komponen Anda harus di-*render* dua kali. Pertimbangkan pengalaman pengguna pada koneksi yang lambat. Kode JavaScript dapat dimuat jauh setelah *render* HTML awal, sehingga me-*render* UI yang berbeda langsung setelah hidrasi dapat terasa tidak nyaman bagi pengguna.
 
 </Pitfall>