diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md
index adf61e807..f0131331d 100644
--- a/src/content/learn/state-as-a-snapshot.md
+++ b/src/content/learn/state-as-a-snapshot.md
@@ -1,27 +1,27 @@
---
-title: State as a Snapshot
+title: State Sebagai Sebuah Snapshot
---
-State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render.
+*State* mungkin terlihat seperti variabel reguler pada Javascript yang dapat Anda baca dan tulis. Akan tetapi, *state* berperilaku lebih seperti sebuah *snapshot*. Melakukan perubahan pada *state* tidak mengubah kondisi dari variabel yang Anda miliki, akan tetapi memicu terjadinya sebuah *render* ulang.
-* How setting state triggers re-renders
-* When and how state updates
-* Why state does not update immediately after you set it
-* How event handlers access a "snapshot" of the state
+* Bagaimana mengubah suatu *state* memicu terjadinya *render* ulang
+* Kapan dan bagaimana *state* diperbarui
+* Mengapa *state* tidak segera diperbarui setelah Anda mengubahnya
+* Bagaimana *event handlers* dapat mengakses "*snapshot*" dari sebuah *state*
-## Setting state triggers renders {/*setting-state-triggers-renders*/}
+## Mengubah state memicu terjadinya render ulang {/*setting-state-triggers-renders*/}
-You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that [setting state requests a re-render](/learn/render-and-commit#step-1-trigger-a-render) from React. This means that for an interface to react to the event, you need to *update the state*.
+Anda mungkin berpikir bahwa antarmuka pengguna Anda berubah seketika sebagai respons terhadap *event* pengguna seperti sebuah *event* klik. Pada React, cara kerjanya sedikit berbeda dari model mental ini. Pada halaman sebelumnya, Anda dapat melihat bahwa [mengubah *state* mengirim permintaan *render* ulang](/learn/render-and-commit#step-1-trigger-a-render) kepada React. Artinya, agar antarmuka pengguna pada aplikasi Anda dapat bereaksi terhadap *event* tersebut, Anda perlu *memperbarui state tersebut*.
-In this example, when you press "send", `setIsSent(true)` tells React to re-render the UI:
+Pada contoh dibawah, ketika Anda menekan tombol "Kirim", `setIsSent(true)` memberi tahu React untuk melakukan *render* ulang terhadap UI:
@@ -30,9 +30,9 @@ import { useState } from 'react';
export default function Form() {
const [isSent, setIsSent] = useState(false);
- const [message, setMessage] = useState('Hi!');
+ const [message, setMessage] = useState('Halo!');
if (isSent) {
- return
Your message is on its way!
+ return
Pesan anda sedang dikirim!
}
return (
);
}
@@ -61,43 +61,43 @@ label, textarea { margin-bottom: 10px; display: block; }
-Here's what happens when you click the button:
+Inilah yang terjadi ketika Anda menekan tombol "Kirim" pada contoh di atas:
-1. The `onSubmit` event handler executes.
-2. `setIsSent(true)` sets `isSent` to `true` and queues a new render.
-3. React re-renders the component according to the new `isSent` value.
+1. *Event handler* `onSubmit` dijalankan.
+2. `setIsSent(true)` mengubah nilai `isSent` menjadi `true` dan memasukkan antrian *render* baru.
+3. React melakukan *render* ulang pada komponen tersebut sesuai dengan nilai `isSent` yang baru.
-Let's take a closer look at the relationship between state and rendering.
+Mari kita lihat lebih dekat hubungan antara *state* dan *rendering*.
-## Rendering takes a snapshot in time {/*rendering-takes-a-snapshot-in-time*/}
+## Rendering mengambil sebuah snapshot pada waktu render tersebut {/*rendering-takes-a-snapshot-in-time*/}
-["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculated **using its state at the time of the render.**
+["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) berarti React memanggil komponen Anda, yang merupakan sebuah fungsi. JSX yang Anda kembalikan dari fungsi tersebut layaknya seperti sebuah *snapshot* UI pada waktu *render* tersebut. *Props*, *event handler*, dan variabel lokal semuanya dikalkulasi *menggunakan state pada komponen tersebut pada saat render*.
-Unlike a photograph or a movie frame, the UI "snapshot" you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX.
+Tidak seperti sebuah foto atau sebuah bingkai film, "*snapshot*" antarmuka yang Anda kembalikan bersifat interaktif. Ini termasuk logika seperti *event handler* yang menentukan apa yang terjadi sebagai respons terhadap suatu input. React memperbarui antarmuka agar sesuai dengan *snapshot* ini dan menghubungkan *event handler*. Sebagai hasilnya, menekan sebuah tombol akan memicu *handler* klik dari JSX Anda.
-When React re-renders a component:
+Ketika React melakukan *render* ulang pada sebuah komponen:
-1. React calls your function again.
-2. Your function returns a new JSX snapshot.
-3. React then updates the screen to match the snapshot you've returned.
+1. React memanggil fungsi Anda kembali.
+2. Fungsi Anda mengembalikan *snapshot* JSX yang baru.
+3. React lalu memperbarui antarmuka agar sesuai dengan *snapshot* yang Anda kembalikan.
-
-
-
+
+
+
-As a component's memory, state is not like a regular variable that disappears after your function returns. State actually "lives" in React itself--as if on a shelf!--outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated **using the state values from that render!**
+Sebagai memori dari sebuah komponen, *state* tidak seperti variabel biasa yang hilang setelah fungsi Anda selesai. *State* sebenarnya "hidup" didalam React itu sendiri--seolah-olah di sebuah rak!--di luar fungsi Anda. Ketika React memanggil komponen Anda, React memberi Anda *snapshot* dari *state* untuk *render* tersebut. Komponen Anda mengembalikan *snapshot* UI dengan kumpulan *props* dan *event handler* baru di JSX tersebut, yang semuanya dikalkulasi **menggunakan nilai *state* dari *render* tersebut!**
-
-
-
+
+
+
-Here's a little experiment to show you how this works. In this example, you might expect that clicking the "+3" button would increment the counter three times because it calls `setNumber(number + 1)` three times.
+Berikut sedikit eksperimen untuk menunjukkan cara kerjanya. Pada contoh dibawah, Anda mungkin mengira bahwa menekan tombol "+3" akan menaikkan jumlah perhitungannya sebanyak tiga kali karena kode tersebut memanggil `setNumber(number + 1)` sebanyak tiga kali.
-See what happens when you click the "+3" button:
+Lihat apa yang terjadi ketika anda menekan tombol "+3":
@@ -127,9 +127,9 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
-Notice that `number` only increments once per click!
+Perhatikan bahwa `number` hanya bertambah satu kali per klik!
-**Setting state only changes it for the *next* render.** During the first render, `number` was `0`. This is why, in *that render's* `onClick` handler, the value of `number` is still `0` even after `setNumber(number + 1)` was called:
+**Memperbarui state hanya akan mengubahnya untuk *render* selanjutnya.** Pada *render* pertama, `number` bernilai `0`. Inilah sebabnya, dalam *handler* `onClick` pada *render* tersebut, `number` tetap bernilai `0` bahkan setelah `setNumber(number + 1)` dipanggil:
```js
```
-Here is what this button's click handler tells React to do:
+Berikut adalah apa yang *handler* klik pada tombol tersebut beri tahu kepada React apa yang perlu dilakukan:
-1. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
- - React prepares to change `number` to `1` on the next render.
-2. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
- - React prepares to change `number` to `1` on the next render.
-3. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
- - React prepares to change `number` to `1` on the next render.
+1. `setNumber(number + 1)`: `number` bernilai `0` sehingga `setNumber(0 + 1)`.
+ - React mempersiapkan untuk mengubah `number` menjadi `1` pada *render* selanjutnya.
+2. `setNumber(number + 1)`: `number` bernilai `0` sehingga `setNumber(0 + 1)`.
+ - React mempersiapkan untuk mengubah `number` menjadi `1` pada *render* selanjutnya.
+3. `setNumber(number + 1)`: `number` bernilai `0` sehingga `setNumber(0 + 1)`.
+ - React mempersiapkan untuk mengubah `number` menjadi `1` pada *render* selanjutnya.
-Even though you called `setNumber(number + 1)` three times, in *this render's* event handler `number` is always `0`, so you set the state to `1` three times. This is why, after your event handler finishes, React re-renders the component with `number` equal to `1` rather than `3`.
+Walaupun Anda memanggil `setNumber(number + 1)` sebanyak tiga kali, dalam *event handler* pada *render* ini nilai `number` selalu `0`, sehingga Anda mengubah *state* tersebut menjadi `1` sebanyak tiga kali. Inilah sebabnya, setelah *event handler* Anda selesai dijalankan, React melakukan *render* ulang pada komponen tersebut dengan `number` bernilai `1`, bukan `3`.
-You can also visualize this by mentally substituting state variables with their values in your code. Since the `number` state variable is `0` for *this render*, its event handler looks like this:
+Anda juga dapat memvisualisasikan hal ini pada benak Anda dengan mengganti variabel *state* dengan nilai aslinya pada kode Anda. Karena variabel *state* `number` adalah `0` untuk *render* ini, *event handler*-nya terlihat seperti ini:
```js
```
-For the next render, `number` is `1`, so *that render's* click handler looks like this:
+Untuk *render* selanjutnya, `number` bernilai `1`, sehingga *handler* klik untuk *render* tersebut terlihat seperti ini:
```js
```
-This is why clicking the button again will set the counter to `2`, then to `3` on the next click, and so on.
+Inilah sebabnya mengapa menekan tombol lagi akan mengubah mengubah perhitungannya menjadi `2`, kemudian menjadi `3` pada klik selanjutnya, dan seterusnya.
-## State over time {/*state-over-time*/}
+## State dari waktu ke waktu {/*state-over-time*/}
-Well, that was fun. Try to guess what clicking this button will alert:
+Yah, itu menyenangkan. Coba tebak apa yang akan ditampilkan oleh *alert* dengan menekan tombol ini:
@@ -203,14 +203,15 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
-If you use the substitution method from before, you can guess that the alert shows "0":
+Jika Anda menggunakan metode substitusi dari sebelumnya, Anda dapat menebak bahwa *alert* akan menampilkan “0”:
```js
setNumber(0 + 5);
alert(0);
```
-But what if you put a timer on the alert, so it only fires _after_ the component re-rendered? Would it say "0" or "5"? Have a guess!
+
+Tetapi bagaimana jika Anda menaruh *timer* pada *alert*, sehingga kode *alert* tersebut hanya akan dijalankan setelah komponen di-*render* ulang? Apakah akan tertulis "0" atau "5"? Silahkan tebak!
@@ -241,7 +242,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
-Surprised? If you use the substitution method, you can see the "snapshot" of the state passed to the alert.
+Terkejut? Jika Anda menggunakan metode substitusi, Anda dapat melihat "*snapshot*" dari *state* tersebut diteruskan kepada *alert*.
```js
setNumber(0 + 5);
@@ -250,16 +251,16 @@ setTimeout(() => {
}, 3000);
```
-The state stored in React may have changed by the time the alert runs, but it was scheduled using a snapshot of the state at the time the user interacted with it!
+*State* yang disimpan di React mungkin telah berubah pada saat *alert* dijalankan, akan tetapi ia dijadwalkan untuk dijalankan menggunakan *snapshot* dari *state* pada saat pengguna berinteraksi dengannya!
-**A state variable's value never changes within a render,** even if its event handler's code is asynchronous. Inside *that render's* `onClick`, the value of `number` continues to be `0` even after `setNumber(number + 5)` was called. Its value was "fixed" when React "took the snapshot" of the UI by calling your component.
+**Nilai dari *state* tidak pernah berubah pada saat render,** bahkan jika kode *event handler*-nya bersifat asinkron. Didalam `onClick` pada *render* tersebut, nilai dari `number` tetaplah `0`, bahkan setelah `setNumber(number + 5)` dipanggil. Nilainya sudah ditetapkan pada saat React "mengambil *snapshot*" dari UI dengan memanggil komponen Anda.
-Here is an example of how that makes your event handlers less prone to timing mistakes. Below is a form that sends a message with a five-second delay. Imagine this scenario:
+Berikut adalah contoh bagaimana hal tersebut membuat *event handler* Anda tidak terlalu rentan terhadap kesalahan perkiraan waktu. Di bawah ini adalah *form* yang mengirimkan pesan dengan jeda selama lima detik. Bayangkan skenario ini:
-1. You press the "Send" button, sending "Hello" to Alice.
-2. Before the five-second delay ends, you change the value of the "To" field to "Bob".
+1. Anda menekan tombol "Kirim", mengirim pesan "Halo" kepada Alice.
+2. Sebelum jeda lima detik berakhir, Anda mengganti nilai dari *field* "To" menjadi "Bob"
-What do you expect the `alert` to display? Would it display, "You said Hello to Alice"? Or would it display, "You said Hello to Bob"? Make a guess based on what you know, and then try it:
+Apa yang Anda perkirakan akan ditampilkan oleh `alert`? Apakah ia akan menampilkan, "Anda berkata Halo kepada Alice"? Atau apakah ia akan menampilkan, "Anda berkata Halo kepada Bob"? Silahkan menebak berdasarkan apa yang Anda ketahui, lalu coba:
@@ -268,12 +269,12 @@ import { useState } from 'react';
export default function Form() {
const [to, setTo] = useState('Alice');
- const [message, setMessage] = useState('Hello');
+ const [message, setMessage] = useState('Halo');
function handleSubmit(e) {
e.preventDefault();
setTimeout(() => {
- alert(`You said ${message} to ${to}`);
+ alert(`Anda berkata ${message} kepada ${to}`);
}, 5000);
}
@@ -293,7 +294,7 @@ export default function Form() {
value={message}
onChange={e => setMessage(e.target.value)}
/>
-
+
);
}
@@ -305,19 +306,19 @@ label, textarea { margin-bottom: 10px; display: block; }
-**React keeps the state values "fixed" within one render's event handlers.** You don't need to worry whether the state has changed while the code is running.
+**React menjaga *state* bernilai "tetap" dalam satu *event handler* didalam render.** Anda tidak perlu khawatir apakah *state* Anda telah berubah saat kode sedang berjalan.
-But what if you wanted to read the latest state before a re-render? You'll want to use a [state updater function](/learn/queueing-a-series-of-state-updates), covered on the next page!
+Tetapi bagaimana jika Anda ingin membaca *state* terakhir sebelum sebuah *render* ulang? Anda dapat menggunakan [*state updater function*](/learn/queueing-a-series-of-state-updates), yang akan dibahas di halaman selanjutnya!
-* Setting state requests a new render.
-* React stores state outside of your component, as if on a shelf.
-* When you call `useState`, React gives you a snapshot of the state *for that render*.
-* Variables and event handlers don't "survive" re-renders. Every render has its own event handlers.
-* Every render (and functions inside it) will always "see" the snapshot of the state that React gave to *that* render.
-* You can mentally substitute state in event handlers, similarly to how you think about the rendered JSX.
-* Event handlers created in the past have the state values from the render in which they were created.
+* Mengubah *state* mengirim permintaan *render* ulang
+* React menyimpang *state* diluar komponen Anda, seolah-olah berada di rak.
+* Ketika Anda memanggil `useState`, React memberikan Anda *snapshot* dari *state* untuk *render* tersebut.
+* Variabel dan *event handlers* tidak "bertahan" pada saat terjadi *render* ulang. Setiap *render* memiliki *event handlers*-nya sendiri.
+* Setiap *render* (dan fungsi didalamnya) akan selalu "melihat" *snapshot* dari *state* yang diberikan oleh React pada *render* tersebut.
+* Anda dapat melakukan substitusi nilai *state* pada *event handlers* didalam benak anda, mirip dengan apa yang anda pikirkan tentang JSX yang sudah di-*render*.
+* *Event handlers* yang dibuat di masa lalu memiliki nilai *state* dari *render* tempat mereka dibuat.
@@ -325,9 +326,9 @@ But what if you wanted to read the latest state before a re-render? You'll want
-#### Implement a traffic light {/*implement-a-traffic-light*/}
+#### Implementasikan sebuah lampu lalu lintas {/*implement-a-traffic-light*/}
-Here is a crosswalk light component that toggles on when the button is pressed:
+Berikut adalah komponen lampu penyeberangan yang menyala saat tombol ditekan:
@@ -344,12 +345,12 @@ export default function TrafficLight() {
return (
<>
);
@@ -362,13 +363,14 @@ h1 { margin-top: 20px; }
-Add an `alert` to the click handler. When the light is green and says "Walk", clicking the button should say "Stop is next". When the light is red and says "Stop", clicking the button should say "Walk is next".
+Tambahkan sebuah `alert` didalam *handler* klik. Ketika lampu menyala hijau dan tertulis "Jalan", menekan tombol harus menampilkan "Selanjutnya adalah berhenti". Ketika lampu menyala merah dan tertulis "Berhenti", menekan tombol harus menampilkan "Selanjutnya adalah berjalan."
+
+Apakah terdapat perbedaan ketika anda menaruh `alert` sebelum atau sesudah `setWalk` dipanggil?
-Does it make a difference whether you put the `alert` before or after the `setWalk` call?
-Your `alert` should look like this:
+`alert` Anda akan terlihat seperti ini:
@@ -380,18 +382,18 @@ export default function TrafficLight() {
function handleClick() {
setWalk(!walk);
- alert(walk ? 'Stop is next' : 'Walk is next');
+ alert(walk ? 'Selanjutnya adalah berhenti' : 'Selanjutnya adalah berjalan');
}
return (
<>
);
@@ -404,31 +406,31 @@ h1 { margin-top: 20px; }
-Whether you put it before or after the `setWalk` call makes no difference. That render's value of `walk` is fixed. Calling `setWalk` will only change it for the *next* render, but will not affect the event handler from the previous render.
+Apakah Anda meletakkannya sebelum atau sesudah `setWalk` dipanggil tidak ada bedanya. Nilai `jalan` pada *render* tersebut sudah ditetapkan. Memanggil `setWalk` hanya akan mengubahnya untuk *render* berikutnya, tetapi tidak akan memengaruhi *event handler* dari *render* sebelumnya.
-This line might seem counter-intuitive at first:
+Baris ini mungkin tampak kontra-intuitif pada awalnya:
```js
-alert(walk ? 'Stop is next' : 'Walk is next');
+alert(walk ? 'Selanjutnya adalah berhenti' : 'Selanjutnya adalah berjalan');
```
-But it makes sense if you read it as: "If the traffic light shows 'Walk now', the message should say 'Stop is next.'" The `walk` variable inside your event handler matches that render's value of `walk` and does not change.
+Tapi masuk akal jika Anda membacanya sebagai berikut: "Jika lampu lalu lintas menunjukkan 'Jalan sekarang', pesannya harus mengatakan 'Selanjutnya adalah berhenti.'" Variabel `walk` di dalam *event handler* Anda bernilai sama dengan nilai `walk` pada *render* dan tidak berubah.
-You can verify that this is correct by applying the substitution method. When `walk` is `true`, you get:
+Anda dapat memverifikasi bahwa ini benar dengan menerapkan metode substitusi. Ketika `walk` adalah `true`, Anda mendapatkan:
```js
- Walk
+ Jalan
```
-So clicking "Change to Stop" queues a render with `walk` set to `false`, and alerts "Stop is next".
+Sehingga, mengeklik "Ubah menjadi Berhenti" akan membuat antrean *render* dengan `walk` yang diubah ke `false`, dan menampilkan "Berikutnya adalah berhenti".