From 08cc694025076d05e5fca76f85cfcfdc1edd86b2 Mon Sep 17 00:00:00 2001
From: Muhammad Irwan Andriawan <irwan@andriawan.com>
Date: Mon, 8 May 2023 03:27:49 +0700
Subject: [PATCH] Translate Manipulating the DOM with Refs page (#366)

---
 .../learn/manipulating-the-dom-with-refs.md   | 186 +++++++++---------
 1 file changed, 93 insertions(+), 93 deletions(-)

diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index b5c193763..fa0a550e0 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -1,52 +1,52 @@
 ---
-title: 'Manipulating the DOM with Refs'
+title: 'Memanipulasi DOM dengan Refs'
 ---
 
 <Intro>
 
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React secara otomatis memperbarui [DOM (*Document Object Model*)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) agar sesuai dengan keluaran *render*, sehingga komponen Anda tidak perlu sering memanipulasinya. Namun, terkadang Anda mungkin perlu mengakses elemen DOM yang dikelola oleh React--misalnya, untuk memberikan fokus pada sebuah simpul (*node*), menggulir ke sana, atau mengukur ukuran dan posisinya. Tidak ada cara bawaan untuk melakukan hal-hal tersebut di React, sehingga Anda memerlukan *ref* ke simpul DOM.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- Bagaimana cara mengakses sebuah simpul DOM yang diatur React dengan atribut `ref`
+- Bagaimana atribut JSX `ref` berelasi dengan Hook `useRef`
+- Bagaimana cara mengakses simpul DOM dari komponen lain
+- Dalam kasus seperti apa memodifikasi DOM yang diatur React dengan aman.
 
 </YouWillLearn>
 
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## Mendapatkan sebuah ref untuk simpul {/*getting-a-ref-to-the-node*/}
 
-To access a DOM node managed by React, first, import the `useRef` Hook:
+Untuk mengakses sebuah simpul DOM yang diatur React, pertama, impor Hook `useRef`:
 
 ```js
 import { useRef } from 'react';
 ```
 
-Then, use it to declare a ref inside your component:
+Kemudian, deklarasikan *ref* di dalam komponen Anda:
 
 ```js
 const myRef = useRef(null);
 ```
 
-Finally, pass it to the DOM node as the `ref` attribute:
+Terakhir, oper ke simpul DOM sebagai atribut `ref`:
 
 ```js
 <div ref={myRef}>
 ```
 
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `<div>`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+Hook `useRef` mengembalikan objek dengan properti tunggal bernama `current`. Awalnya, `myRef.current` akan bernilai `null`. Saat React membuat simpul DOM untuk `<div>`, React akan mereferensikan simpul ini ke dalam `myRef.current`. Anda bisa mengakses simpul DOM ini dari [*event handlers*](/learn/responding-to-events) Anda dan menggunakan [API peramban](https://developer.mozilla.org/docs/Web/API/Element) bawaan.
 
 ```js
-// You can use any browser APIs, for example:
+// Anda dapat menggunakan API peramban apa saja, sebagai contoh:
 myRef.current.scrollIntoView();
 ```
 
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### Contoh: Fokus ke sebuah input teks {/*example-focusing-a-text-input*/}
 
-In this example, clicking the button will focus the input:
+Pada contoh ini, meng-klik tombol tersebut akan fokus ke input:
 
 <Sandpack>
 
@@ -73,18 +73,18 @@ export default function Form() {
 
 </Sandpack>
 
-To implement this:
+Penerapannya:
 
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as `<input ref={inputRef}>`. This tells React to **put this `<input>`'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `<button>` with `onClick`.
+1. Deklarasikan `inputRef` dengan `useRef` Hook.
+2. Oper sebagai `<input ref={inputRef}>`. React akan **meletakkan `<input>` simpul DOM ke dalam `inputRef.current`.**
+3. Pada fungsi `handleClick`, baca input simpul DOM dari `inputRef.current` dan panggil [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) menggunakan `inputRef.current.focus()`.
+4. Oper `handleClick` *event handler* ke `<button>` menggunakan `onClick`.
 
-While DOM manipulation is the most common use case for refs, the `useRef` Hook can be used for storing other things outside React, like timer IDs. Similarly to state, refs remain between renders. Refs are like state variables that don't trigger re-renders when you set them. Read about refs in [Referencing Values with Refs.](/learn/referencing-values-with-refs)
+Mesikpun manipulasi DOM merupakan hal yang sangat umum untuk *ref*, Hook `useRef` dapat digunakan untuk menyimpan hal-hal lain di luar React, seperti ID *timer*. Sama halnya dengan *state*, *ref* tetap sama di antara proses *render*. *Ref* sama seperti variabel *state* yang tidak memicu banyak *render* saat Anda mengaturnya. Baca tentang *ref* pada [Mereferensikan nilai dengan *Ref*.](/learn/referencing-values-with-refs)
 
-### Example: Scrolling to an element {/*example-scrolling-to-an-element*/}
+### Contoh: Menggulir ke sebuah Elemen {/*example-scrolling-to-an-element*/}
 
-You can have more than a single ref in a component. In this example, there is a carousel of three images. Each button centers an image by calling the browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method on the corresponding DOM node:
+Anda dapat memiliki lebih dari satu *ref* dalam sebuah komponen. Pada contoh, terdapat *carousel* terdiri dari 3 gambar. Setiap tombol mengarahkan ke pusat gambar dengan memanggil metode peramban [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) pada simpul DOM terkait:
 
 <Sandpack>
 
@@ -193,27 +193,27 @@ li {
 
 <DeepDive>
 
-#### How to manage a list of refs using a ref callback {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
+#### Bagaimana mengatur daftar ref menggunakan ref callback {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
 
-In the above examples, there is a predefined number of refs. However, sometimes you might need a ref to each item in the list, and you don't know how many you will have. Something like this **wouldn't work**:
+Pada contoh di atas, terdapat beberapa *refs* yang telah didefinisikan. Namun, terkadang Anda mungkin butuh *ref* pada tiap *item* dalam daftar, dan Anda tidak tahu berapa banyak yang akan Anda dapatkan. Hal seperti ini **tidak akan berfungsi**:
 
 ```js
 <ul>
   {items.map((item) => {
-    // Doesn't work!
+    // Tidak akan berfungsi
     const ref = useRef(null);
     return <li ref={ref} />;
   })}
 </ul>
 ```
 
-This is because **Hooks must only be called at the top-level of your component.** You can't call `useRef` in a loop, in a condition, or inside a `map()` call.
+Ini dikarenakan **Hooks hanya dapat dipanggil di tingkat atas komponen Anda.** Anda tidak dapat memanggil `useRef` di dalam perulangan, di dalam kondisi, atau di dalam pemanggilan`map()`.
 
-One possible way around this is to get a single ref to their parent element, and then use DOM manipulation methods like [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to "find" the individual child nodes from it. However, this is brittle and can break if your DOM structure changes.
+Satu cara yang memungkinkan adalah mendapatkan *ref* tunggal dari elemen *parent*, lalu gunakan metode manipulasi DOM seperti  [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) untuk "menemukan" masing-masing *child node*. Namun, hal ini beresiko kacau jika struktur DOM Anda berubah.
 
-Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and with `null` when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+Solusi lainnya adalah dengan **mengoper fungsi pada atribut `ref`.** hal ini dinamakan [`ref` callback.](/reference/react-dom/components/common#ref-callback) React akan memanggil *ref callback* Anda dengan *simpul DOM* saat menyiapkan *ref*, dan dengan `null` saat menghapusnya. hal ini memungkinkan anda mengatur *Array* Anda sendiri atau sebuah [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), dan mengakses *ref* dengan indeks atau sejenis ID.
 
-This example shows how you can use this approach to scroll to an arbitrary node in a long list:
+Contoh di bawah menunjukan bagaimana Anda dapat menggunakan pendekatan ini untuk menggulir simpul di dalam daftar yang panjang:
 
 <Sandpack>
 
@@ -235,7 +235,7 @@ export default function CatFriends() {
 
   function getMap() {
     if (!itemsRef.current) {
-      // Initialize the Map on first usage.
+      // menginisialisasi Map pada pertama kali penggunaan.
       itemsRef.current = new Map();
     }
     return itemsRef.current;
@@ -318,7 +318,7 @@ li {
 
 </Sandpack>
 
-In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
+Pada contoh ini, `itemsRef` tidak menyimpan simpul DOM. Namun,menyimpan sebuah [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) dari ID item ke simpul DOM. ([Refs dapat menyimpan nilai apapun!](/learn/referencing-values-with-refs)) [`Ref` callback](/reference/react-dom/components/common#ref-callback) pada tiap daftar memperhatikan pembaruan *Map*:
 
 ```js
 <li
@@ -336,15 +336,15 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
 >
 ```
 
-This lets you read individual DOM nodes from the Map later.
+Hal ini memungkinkan Anda membaca simpul DOM individu dari *Map* nanti.
 
 </DeepDive>
 
-## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
+## Mengakses simpul DOM komponen lain {/*accessing-another-components-dom-nodes*/}
 
-When you put a ref on a built-in component that outputs a browser element like `<input />`, React will set that ref's `current` property to the corresponding DOM node (such as the actual `<input />` in the browser).
+Saat Anda memasang *ref* pada komponen bawaan yang mana hasilnya adalah elemen peramban seperti `<input />`, React akan mengatur properti `current` *ref* pada simpul DOM tersebut (seperti aktual `<input />` pada peramban).
 
-However, if you try to put a ref on **your own** component, like `<MyInput />`, by default you will get `null`. Here is an example demonstrating it. Notice how clicking the button **does not** focus the input:
+Namun, jika Anda mencoba mengatur *ref* pada komponen Anda sendiri, seperti `<MyInput />`, secara *default* Anda akan mendapatkan `null`. Ini contohnya. Perhatikan bagaimana meng-klik tombol **tidak** membuat fokus pada input:
 
 <Sandpack>
 
@@ -375,17 +375,17 @@ export default function MyForm() {
 
 </Sandpack>
 
-To help you notice the issue, React also prints an error to the console:
+Untuk membantu Anda menanggapi *issue* tersebut, React juga mencetak *error* pada *console*:
 
 <ConsoleBlock level="error">
 
-Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
+Perhatian: fungsional komponen tidak dapat menerima *ref*. Mencoba mengaksesnya akan gagal. Apakah yang Anda maksud React.forwardRef()?
 
 </ConsoleBlock>
 
-This happens because by default React does not let a component access the DOM nodes of other components. Not even for its own children! This is intentional. Refs are an escape hatch that should be used sparingly. Manually manipulating _another_ component's DOM nodes makes your code even more fragile.
+Ini terjadi karena secara *default* React tidak mengizinkan komponen mengakses simpul DOM dari komponen lain. Bahkan *children* dari komponen tersebut! ini ada alasannya. *Ref* merupakan jalan darurat yang seharusnya jarang digunakan. Memanipulasi simpul DOM komponen lain secara manual membuat kode Anda lebih rentan.
 
-Instead, components that _want_ to expose their DOM nodes have to **opt in** to that behavior. A component can specify that it "forwards" its ref to one of its children. Here's how `MyInput` can use the `forwardRef` API:
+Sebaliknya, komponen yang _ingin_ mengekspos simpul DOM harus *memilih* perilaku tersebut. Sebuah komponen dapat menentukan untuk meneruskan *ref* ke salah satu *children*nya. Contoh bagaimana `MyInput` dapat menggunakan API `forwardRef`:
 
 ```js
 const MyInput = forwardRef((props, ref) => {
@@ -393,13 +393,13 @@ const MyInput = forwardRef((props, ref) => {
 });
 ```
 
-This is how it works:
+Ini cara kerjanya:
 
-1. `<MyInput ref={inputRef} />` tells React to put the corresponding DOM node into `inputRef.current`. However, it's up to the `MyInput` component to opt into that--by default, it doesn't.
-2. The `MyInput` component is declared using `forwardRef`. **This opts it into receiving the `inputRef` from above as the second `ref` argument** which is declared after `props`.
-3. `MyInput` itself passes the `ref` it received to the `<input>` inside of it.
+1. `<MyInput ref={inputRef} />` memberitahu React untuk meletakkan simpul DOM yang sesuai ke dalam `inputRef.current`. Namun, itu terserah komponen `MyInput` untuk mengikutinya--secara *default*, tidak.
+2. Komponen `MyInput` menggunakan `forwardRef`. **Dengan ini komponen menerima `inputRef` dari atas sebagai argumen `ref` kedua** yang dideklarasikan setelah `props`.
+3. `MyInput` itu sendiri mengoper `ref` yang diterima ke dalam `<input>`.
 
-Now clicking the button to focus the input works:
+Sekarang meng-klik tombol untuk fokus ke input berfungsi:
 
 <Sandpack>
 
@@ -430,13 +430,13 @@ export default function Form() {
 
 </Sandpack>
 
-In design systems, it is a common pattern for low-level components like buttons, inputs, and so on, to forward their refs to their DOM nodes. On the other hand, high-level components like forms, lists, or page sections usually won't expose their DOM nodes to avoid accidental dependencies on the DOM structure.
+Dalam sistem desain, merupakan pola umum untuk komponen level rendah seperti tombol, input dan sejenisnya untuk meneruskan *ref* ke simpul DOM. Sebaliknya, komponen level atas seperti *form*, *list* atau bagian dari halaman biasanya tidak mengekspos simpul DOM untuk menghindari dependensi yang tidak disengaja pada struktur DOM.
 
 <DeepDive>
 
-#### Exposing a subset of the API with an imperative handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
+#### Ekspos bagian dari API dengan imperatif handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-In the above example, `MyInput` exposes the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with `useImperativeHandle`:
+Pada contoh di atas, `MyInput` mengekspos elemen input DOM. Ini memungkinkan komponen *parent* memanggil `focus()`. Namun, ini juga memungkinkan *parent* komponen melakukan hal lain--contohnya, mengubah CSS (Cascading Style Sheet) *style*. Dalam kasus umum, Anda mungkin ingin membatasi fungsionalitas yang akan diekspos. Anda dapat melakukannya dengan `useImperativeHandle`:
 
 <Sandpack>
 
@@ -478,28 +478,28 @@ export default function Form() {
 
 </Sandpack>
 
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, `useImperativeHandle` instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside `useImperativeHandle` call.
+Di sini, `realInputRef` di dalam `MyInput` memegang aktual simpul DOM input. Namun, `useImperativeHandle` menginstruksikan React untuk menyediakan spesial obyek tersendiri sebagai nilai dari *ref* ke komponen *parent*. Jadi `inputRef.current` di dalam komponen `Form` hanya akan memiliki metode `focus`. Dalam kasus ini, "handle" *ref* bukan simpul DOM, tetap kustom obyek yang Anda buat di dalam pemanggilan `useImperativeHandle`.
 
 </DeepDive>
 
-## When React attaches the refs {/*when-react-attaches-the-refs*/}
+## Ketika React menyematkan Ref {/*when-react-attaches-the-refs*/}
 
-In React, every update is split in [two phases](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
+Dalam React, setiap pembaruan dibagi menjadi [dua fase](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
 
-* During **render,** React calls your components to figure out what should be on the screen.
-* During **commit,** React applies changes to the DOM.
+* Selama proses **render,** React memanggil komponen Anda untuk mencari tahu apa yang seharusnya berada di layar.
+* Selama proses **commit,** React menerapkan perubahan pada DOM.
 
-In general, you [don't want](/learn/referencing-values-with-refs#best-practices-for-refs) to access refs during rendering. That goes for refs holding DOM nodes as well. During the first render, the DOM nodes have not yet been created, so `ref.current` will be `null`. And during the rendering of updates, the DOM nodes haven't been updated yet. So it's too early to read them.
+Secara umum, Anda [tidak ingin](/learn/referencing-values-with-refs#best-practices-for-refs) mengakses *ref* selama proses *rendering*. Keadaan dimana *ref* menyimpan simpul DOM. Selama proses *render* pertama, simpul DOM belum dibuat, jadi `ref.current` bernilai `null`. Dan selama proses pembaharuan *render*, simpul DOM belum diperbarui. Jadi terlalu awal untuk membacanya.
 
-React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.
+React mengatur nilai `ref.current` selama commit. Sebelum memperbarui DOM, React mengatur nilai `ref.current` yang terpengaruh menjadi `null`. Setelah memperbarui DOM, React segera mengatur nilai `ref.current` tersebut menjadi simpul DOM yang sesuai.
 
-**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.
+Biasanya, Anda akan mengakses ref dari *event handler*. Jika Anda ingin melakukan sesuatu dengan sebuah *ref*, tetapi tidak ada cara tertentu untuk melakukannya, Anda mungkin memerlukan *Effect*. Kami akan membahas *effect* pada halaman berikutnya.
 
 <DeepDive>
 
-#### Flushing state updates synchronously with flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}
+#### Mengosongkan pembaruan state secara sinkron dengan flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}
 
-Consider code like this, which adds a new todo and scrolls the screen down to the last child of the list. Notice how, for some reason, it always scrolls to the todo that was *just before* the last added one:
+Perhatikan kode ini, yang menambahkan *todo* baru dan menggulirkan layar ke bawah hingga pada elemen terakhir dari daftar. Perhatikan bagaimana, dengan alasan tertentu, hal ini selalu menggulirkan layar ke todo yang berada *sebelum* yang terakhir ditambahkan.
 
 <Sandpack>
 
@@ -553,16 +553,16 @@ for (let i = 0; i < 20; i++) {
 
 </Sandpack>
 
-The issue is with these two lines:
+Masalah terletak pada dua baris kode ini:
 
 ```js
 setTodos([ ...todos, newTodo]);
 listRef.current.lastChild.scrollIntoView();
 ```
 
-In React, [state updates are queued.](/learn/queueing-a-series-of-state-updates) Usually, this is what you want. However, here it causes a problem because `setTodos` does not immediately update the DOM. So the time you scroll the list to its last element, the todo has not yet been added. This is why scrolling always "lags behind" by one item.
+Di React, [pembaruan state dijadwalkan dalam antrian.](/learn/queueing-a-series-of-state-updates). Biasanya, ini adalah yang diinginkan. Namun, ini menyebabkan masalah karena `setTodos` tidak segera memperbarui DOM. Jadi, saat Anda menggulirkan daftar ke elemen terakhirnya, todo belum ditambahkan. Inilah sebabnya mengapa pengguliran selalu "terlambat" satu item.
 
-To fix this issue, you can force React to update ("flush") the DOM synchronously. To do this, import `flushSync` from `react-dom` and **wrap the state update** into a `flushSync` call:
+Untuk memperbaiki masalah ini, Anda dapat memaksa React untuk memperbarui ("flush") DOM secara sinkron. Untuk melakukan ini, impor `flushSync` dari `react-dom` dan **bungkus pembaruan state** dengan pemanggilan flushSync:
 
 ```js
 flushSync(() => {
@@ -571,7 +571,7 @@ flushSync(() => {
 listRef.current.lastChild.scrollIntoView();
 ```
 
-This will instruct React to update the DOM synchronously right after the code wrapped in `flushSync` executes. As a result, the last todo will already be in the DOM by the time you try to scroll to it:
+Ini akan memberitahu React untuk memperbarui DOM secara sinkron tepat setelah kode yang dibungkus dalam `flushSync` dieksekusi. Sebagai hasilnya, todo terakhir sudah ada di DOM pada saat Anda mencoba untuk menggulirnya:
 
 <Sandpack>
 
@@ -630,15 +630,15 @@ for (let i = 0; i < 20; i++) {
 
 </DeepDive>
 
-## Best practices for DOM manipulation with refs {/*best-practices-for-dom-manipulation-with-refs*/}
+## Praktik terbaik memanipulasi DOM dengan refs. {/*best-practices-for-dom-manipulation-with-refs*/}
 
-Refs are an escape hatch. You should only use them when you have to "step outside React". Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.
+*Ref* adalah jalan keluar. Anda harus hanya menggunakannya ketika Anda harus "keluar dari React". Contoh umum dari hal ini termasuk mengelola fokus, posisi scroll, atau memanggil API peramban yang tidak diekspos React.
 
-If you stick to non-destructive actions like focusing and scrolling, you shouldn't encounter any problems. However, if you try to **modify** the DOM manually, you can risk conflicting with the changes React is making.
+Jika Anda tetap menggunakan tindakan yang tidak merusak seperti fokus dan *scrolling*, Anda tidak akan mengalami masalah. Namun, jika Anda mencoba untuk **memodifikasi** DOM secara manual, Anda dapat berisiko konflik dengan perubahan yang dilakukan React.
 
-To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using [conditional rendering](/learn/conditional-rendering) and [state](/learn/state-a-components-memory), as you would usually do in React. The second button uses the [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) to forcefully remove it from the DOM outside of React's control.
+Untuk mengilustrasikan masalah ini, contoh ini mencakup pesan selamat datang dan dua tombol. Tombol pertama menampilkan/menyembunyikan menggunakan [*conditional rendering*](/learn/conditional-rendering) dan [*state*](/learn/state-a-components-memory), seperti yang biasanya dilakukan di React. Tombol kedua menggunakan [`remove()` API DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) untuk menghapusnya secara paksa dari DOM di luar kendali React.
 
-Try pressing "Toggle with setState" a few times. The message should disappear and appear again. Then press "Remove from the DOM". This will forcefully remove it. Finally, press "Toggle with setState":
+Coba tekan "Toggle with setState" beberapa kali. Pesan seharusnya menghilang dan muncul lagi. Kemudian tekan "Remove from the DOM". Ini akan menghapusnya secara paksa. Kemudian, tekan "Toggle with setState":
 
 <Sandpack>
 
@@ -679,20 +679,20 @@ button {
 
 </Sandpack>
 
-After you've manually removed the DOM element, trying to use `setState` to show it again will lead to a crash. This is because you've changed the DOM, and React doesn't know how to continue managing it correctly.
+Setelah Anda menghapus elemen DOM secara manual, mencoba menggunakan `setState` untuk menampilkannya lagi akan menyebabkan masalah. Hal ini terjadi karena Anda telah mengubah DOM, dan React tidak tahu bagaimana melanjutkan mengelolanya dengan benar.
 
-**Avoid changing DOM nodes managed by React.** Modifying, adding children to, or removing children from elements that are managed by React can lead to inconsistent visual results or crashes like above.
+**Hindari mengubah simpul DOM yang dikelola oleh React.** Memodifikasi, menambahkan *children*, atau menghapus *children* dari elemen yang dikelola oleh React dapat menyebabkan hasil visual yang tidak konsisten atau masalah seperti di atas.
 
-However, this doesn't mean that you can't do it at all. It requires caution. **You can safely modify parts of the DOM that React has _no reason_ to update.** For example, if some `<div>` is always empty in the JSX, React won't have a reason to touch its children list. Therefore, it is safe to manually add or remove elements there.
+Namun, ini tidak berarti bahwa Anda sama sekali tidak dapat melakukannya. Ini membutuhkan kewaspadaan. **Anda dapat dengan aman mengubah bagian dari DOM yang tidak diperbarui oleh React dengan _alasan apapun_**. Misalnya, jika beberapa `<div>` selalu kosong di JSX, React tidak akan memiliki alasan untuk menyentuh daftar *children*. Oleh karena itu, aman untuk menambahkan atau menghapus elemen secara manual di sana.
 
 <Recap>
 
-- Refs are a generic concept, but most often you'll use them to hold DOM elements.
-- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
-- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
-- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using `forwardRef` and passing the second `ref` argument down to a specific node.
-- Avoid changing DOM nodes managed by React.
-- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+- Ref adalah konsep yang umum, tetapi paling sering digunakan untuk menyimpan elemen-elemen DOM.
+- Anda menginstruksikan React untuk menempatkan simpul DOM ke `myRef.current` dengan mengoper `<div ref={myRef}>`.
+- Biasanya, Anda akan menggunakan *ref* untuk tindakan non-destruktif seperti fokus, *scrolling*, atau mengukur elemen-elemen DOM.
+- Komponen tidak secara *default* mengekspos simpul DOM-nya. Anda dapat memilih untuk mengekspos simpul DOM dengan menggunakan `forwardRef` dan mengoper argumen `ref` kedua ke simpul yang spesifik.
+- Hindari mengubah simpul DOM yang dikelola oleh React.
+- Jika Anda mengubah simpul DOM yang dikelola oleh React, ubah bagian yang tidak perlu diperbarui oleh React.
 
 </Recap>
 
@@ -700,9 +700,9 @@ However, this doesn't mean that you can't do it at all. It requires caution. **Y
 
 <Challenges>
 
-#### Play and pause the video {/*play-and-pause-the-video*/}
+#### Putar dan jeda video {/*play-and-pause-the-video*/}
 
-In this example, the button toggles a state variable to switch between a playing and a paused state. However, in order to actually play or pause the video, toggling state is not enough. You also need to call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on the DOM element for the `<video>`. Add a ref to it, and make the button work.
+Dalam contoh ini, tombol mengalihkan *state* variabel untuk beralih antara *state* diputar atau dijeda. Namun, untuk benar-benar memutar atau menjeda video, mengalihkan *state* saja tidak cukup. Anda juga perlu memanggil [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) dan [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) pada elemen DOM untuk `<video>`. Tambahkan sebuah *ref* pada elemen tersebut, dan buat tombol bekerja.
 
 <Sandpack>
 
@@ -739,11 +739,11 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-For an extra challenge, keep the "Play" button in sync with whether the video is playing even if the user right-clicks the video and plays it using the built-in browser media controls. You might want to listen to `onPlay` and `onPause` on the video to do that.
+Untuk tantangan tambahan, usahakan tombol "Play" selalu sejalan dengan apakah video sedang diputar meskipun pengguna mengklik kanan video dan memutarnya menggunakan kontrol media bawaan peramban. Anda mungkin ingin memperhatikan `onPlay` dan `onPause` pada video untuk melakukan hal tersebut.
 
 <Solution>
 
-Declare a ref and put it on the `<video>` element. Then call `ref.current.play()` and `ref.current.pause()` in the event handler depending on the next state.
+Deklarasikan sebuah ref dan letakkan pada elemen `<video>`. Kemudian panggil `ref.current.play()` dan `ref.current.pause()` pada *event handler* tergantung pada state selanjutnya.
 
 <Sandpack>
 
@@ -792,13 +792,13 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-In order to handle the built-in browser controls, you can add `onPlay` and `onPause` handlers to the `<video>` element and call `setIsPlaying` from them. This way, if the user plays the video using the browser controls, the state will adjust accordingly.
+Untuk menangani kontrol bawaan peramban, Anda dapat menambahkan *handler* `onPlay` dan `onPause` ke elemen `<video>` dan memanggil `setIsPlaying` dari kedua *handler* tersebut. Dengan cara ini, jika pengguna memutar video menggunakan kontrol peramban, state akan menyesuaikan dengan benar.
 
 </Solution>
 
-#### Focus the search field {/*focus-the-search-field*/}
+#### Fokus ke input pencarian {/*focus-the-search-field*/}
 
-Make it so that clicking the "Search" button puts focus into the field.
+Buat agar ketiak meng-klik tombol "Search" menempatkan fokus pada input.
 
 <Sandpack>
 
@@ -825,7 +825,7 @@ button { display: block; margin-bottom: 10px; }
 
 <Solution>
 
-Add a ref to the input, and call `focus()` on the DOM node to focus it:
+Tambahkan *ref* ke dalam input, dan panggil `focus()` pada simpul DOM untuk fokus:
 
 <Sandpack>
 
@@ -860,9 +860,9 @@ button { display: block; margin-bottom: 10px; }
 
 </Solution>
 
-#### Scrolling an image carousel {/*scrolling-an-image-carousel*/}
+#### Menggulir sebuah carousel gambar. {/*scrolling-an-image-carousel*/}
 
-This image carousel has a "Next" button that switches the active image. Make the gallery scroll horizontally to the active image on click. You will want to call [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) on the DOM node of the active image:
+Karusel gambar ini memiliki tombol "Next" yang mengubah gambar aktif. Buat galeri bergulir secara horizontal ke gambar aktif saat tombol ditekan. Anda mungkin ingin memanggil [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) pada simpul DOM dari gambar aktif:
 
 ```js
 node.scrollIntoView({
@@ -874,7 +874,7 @@ node.scrollIntoView({
 
 <Hint>
 
-You don't need to have a ref to every image for this exercise. It should be enough to have a ref to the currently active image, or to the list itself. Use `flushSync` to ensure the DOM is updated *before* you scroll.
+Anda tidak perlu *ref* ke setiap gambar untuk latihan ini. Cukup *ref* ke gambar yang sedang aktif, atau ke daftar itu sendiri. Gunakan `flushSync` untuk memastikan DOM diperbarui *sebelum* Anda melakukan scroll.
 
 </Hint>
 
@@ -969,15 +969,15 @@ img {
 
 <Solution>
 
-You can declare a `selectedRef`, and then pass it conditionally only to the current image:
+Anda dapat mendeklarasikan `selectedRef`, dan kemudian mengoper ref ini secara kondisional hanya ke gambar yang sedang dipilih:
 
 ```js
 <li ref={index === i ? selectedRef : null}>
 ```
 
-When `index === i`, meaning that the image is the selected one, the `<li>` will receive the `selectedRef`. React will make sure that `selectedRef.current` always points at the correct DOM node.
+Ketika `index === i`, artinya gambar adalah yang dipilih, `<li>` akan menerima `selectedRef`. React akan memastikan bahwa `selectedRef.current` selalu menunjuk pada simpul DOM yang benar.
 
-Note that the `flushSync` call is necessary to force React to update the DOM before the scroll. Otherwise, `selectedRef.current` would always point at the previously selected item.
+Perlu diperhatikan bahwa panggilan `flushSync` diperlukan untuk memaksa React memperbarui DOM sebelum scroll. Jika tidak, `selectedRef.current` akan selalu menunjuk pada item yang sebelumnya dipilih.
 
 <Sandpack>
 
@@ -1086,13 +1086,13 @@ img {
 
 </Solution>
 
-#### Focus the search field with separate components {/*focus-the-search-field-with-separate-components*/}
+#### Fokus ke input pencarian dengan Komponen terpisah {/*focus-the-search-field-with-separate-components*/}
 
-Make it so that clicking the "Search" button puts focus into the field. Note that each component is defined in a separate file and shouldn't be moved out of it. How do you connect them together?
+Buat agar saat tombol "Search" diklik, fokus masuk ke dalam input. Perhatikan bahwa setiap komponen didefinisikan dalam file terpisah dan tidak seharusnya dipindahkan keluar dari file tersebut. Bagaimana cara menghubungkannya?
 
 <Hint>
 
-You'll need `forwardRef` to opt into exposing a DOM node from your own component like `SearchInput`.
+Anda akan memerlukan `forwardRef` untuk memungkinkan eksposisi sebuah simpul DOM dari komponen Anda sendiri seperti `SearchInput`.
 
 </Hint>
 
@@ -1142,7 +1142,7 @@ button { display: block; margin-bottom: 10px; }
 
 <Solution>
 
-You'll need to add an `onClick` prop to the `SearchButton`, and make the `SearchButton` pass it down to the browser `<button>`. You'll also pass a ref down to `<SearchInput>`, which will forward it to the real `<input>` and populate it. Finally, in the click handler, you'll call `focus` on the DOM node stored inside that ref.
+Anda perlu menambahkan prop `onClick` ke `SearchButton`, dan membuat `SearchButton` meneruskannya ke peramban `<button>`. Anda juga akan meneruskan *ref* ke `<SearchInput>`, yang akan meneruskannya ke `<input>` yang sebenarnya lalu mengisinya. Terakhir, dalam handler klik, Anda akan memanggil `focus` pada simpul DOM yang disimpan dalam *ref* tersebut.
 
 <Sandpack>