Skip to content

Commit a78345c

Browse files
committed
docs: React batches state updates section
1 parent c450f20 commit a78345c

File tree

1 file changed

+12
-9
lines changed

1 file changed

+12
-9
lines changed

src/content/learn/queueing-a-series-of-state-updates.md

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ Mengatur variabel *state* akan menambahkan antrean (*queue*) *render* baru. Terk
1010

1111
<YouWillLearn>
1212

13-
* What "batching" is and how React uses it to process multiple state updates
14-
* How to apply several updates to the same state variable in a row
13+
* Apa itu "pengelompokan (*batching*)" dan bagaimana React menggunakannya untuk memproses beberapa pembaruan *state*
14+
* Bagaimana menerapkan beberapa pembaruan ke variabel *state* yang sama secara berurutan
1515

1616
</YouWillLearn>
1717

18-
## React batches state updates {/*react-batches-state-updates*/}
18+
## Mengelompokkan pembaruan state dalam React {/*react-batches-state-updates*/}
1919

20-
You might expect that clicking the "+3" button will increment the counter three times because it calls `setNumber(number + 1)` three times:
20+
Anda mungkin berharap bahwa menekan tombol "+3" akan menambahkan hitungan tiga kali karena memanggil `setNumber(number + 1)` tiga kali:
2121

2222
<Sandpack>
2323

@@ -47,23 +47,26 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
4747

4848
</Sandpack>
4949

50-
However, as you might recall from the previous section, [each render's state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render's event handler is always `0`, no matter how many times you call `setNumber(1)`:
50+
Namun, seperti yang mungkin Anda ingat dari bagian sebelumnya, [nilai *state* setiap *render* adalah tetap](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), sehingga nilai `number` di dalam *event handler* *render* pertama selalu `0`, tidak peduli berapa kali Anda memanggil `setNumber(1)`:
51+
52+
```js
5153

5254
```js
5355
setNumber(0 + 1);
5456
setNumber(0 + 1);
5557
setNumber(0 + 1);
5658
```
5759

58-
But there is one other factor at play here. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls.
60+
Akan tetapi, ada satu faktor lain yang berperan di sini. **React menunggu sampai semua kode dalam *event handler* selesai dijalankan sebelum memproses pembaruan *state* Anda.** Inilah sebabnya mengapa *re-render* hanya terjadi setelah semua `setNumber()` dipanggil.
5961

60-
This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table.
62+
Ini mungkin mengingatkan Anda pada seorang pelayan yang menerima pesanan di restoran. Seorang pelayan tidak berlari ke dapur saat Anda menyebutkan hidangan pertama Anda! Sebaliknya, mereka membiarkan Anda menyelesaikan pesanan Anda, membiarkan Anda mengubahnya, dan bahkan menerima pesanan dari orang lain di meja tersebut.
6163

62-
<Illustration src="/images/docs/illustrations/i_react-batching.png" alt="An elegant cursor at a restaurant places and order multiple times with React, playing the part of the waiter. After she calls setState() multiple times, the waiter writes down the last one she requested as her final order." />
64+
<Illustration src="/images/docs/illustrations/i_react-batching.png" alt="Sebuah kursor elegan di sebuah restoran memesan beberapa kali dengan React, memainkan peran pelayan. Setelah dia memanggil setState() beberapa kali, pelayan menulis yang terakhir yang dia minta sebagai pesanan akhirnya." />
6365

64-
This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated.
66+
Ini memungkinkan Anda memperbarui beberapa variabel *state*--bahkan dari beberapa komponen--tanpa memicu terlalu banyak [*re-render*.](/learn/render-and-commit#re-renders-when-state-updates) Akan tetapi, hal ini ini membuat UI tidak akan diperbarui hingga _setelah_ *event handler* Anda, dan kode apa pun di dalamnya, selesai dijalankan. Perilaku ini, juga dikenal sebagai **pengelompokan,** membuat aplikasi React Anda berjalan lebih cepat. Ini juga menghindari penanganan *render* "setengah jadi" yang membingungkan ketika hanya beberapa variabel yang diperbarui.
6567

6668
**React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again.
69+
**React tidak melakukan pengelompokkan pada beberapa *event* yang disengaja, seperti klik**--setiap klik ditangani secara terpisah. Pastikan bahwa React hanya melakukan pengelompokan ketika aman untuk dilakukan. Ini memastikan bahwa, misalnya, jika klik tombol pertama menonaktifkan *form*, klik kedua tidak akan mengirimkannya lagi.
6770
6871
## Updating the same state multiple times before the next render {/*updating-the-same-state-multiple-times-before-the-next-render*/}
6972

0 commit comments

Comments
 (0)