You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/concurrent-mode-patterns.md
+10-8Lines changed: 10 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -41,10 +41,10 @@ Contohnya, ketika kita pindah laman, dan belum ada data yang tersedia untuk lama
41
41
-[Delaying a Pending Indicator](#delaying-a-pending-indicator)
42
42
-[Recap](#recap)
43
43
-[Cara lain](#other-patterns)
44
-
-[Splitting High and Low Priority State](#splitting-high-and-low-priority-state)
44
+
-[Memisahkan state dengan prioritas tinggi dan rendah](#splitting-high-and-low-priority-state)
45
45
-[Deferring a Value](#deferring-a-value)
46
46
-[SuspenseList](#suspenselist)
47
-
-[Selanutnya](#next-steps)
47
+
-[Selanjutnya](#next-steps)
48
48
49
49
## Transisi {#transitions}
50
50
@@ -88,11 +88,11 @@ function App() {
88
88
89
89
Kita akan menggunakannya seperti berikut.
90
90
91
-
Note we passed a configuration object to `useTransition`. Its`timeoutMs`property specifies **how long we're willing to wait for the transition to finish**. By passing`{timeoutMs: 3000}`, we say "If the next profile takes more than 3 seconds to load, show the big spinner -- but before that timeout it's okay to keep showing the previous screen".
91
+
Kita menggunakan objek konfigurasi ke `useTransition`. Properti`timeoutMs`menspesifikasi **berapa lama kita ingin menunggu transisi untuk selesai**. Dengan mengoper`{timeoutMs: 3000}`, berarti kita mengatakan "Jika profil perlu lebih dari 3 detik untuk load, tampilkan loading berputar -- tapi sebelum timeout kita bisa tetap memperlihatkan layar sebelumnya".
92
92
93
-
### Wrapping setState in a Transition {#wrapping-setstate-in-a-transition}
Our "Next" button click handler sets the state that switches the current profile in the state:
95
+
Handler klik tombol "Next" kita, mengubah state yang mengganti profile saat ini:
96
96
97
97
```js{4}
98
98
<button
@@ -103,7 +103,7 @@ Our "Next" button click handler sets the state that switches the current profile
103
103
>
104
104
```
105
105
106
-
We'll wrap that state update into`startTransition`. That's how we tell React **we don't mind React delaying that state update**if it leads to an undesirable loading state:
106
+
Kita akan membungkus perubahan state tersebut didalam`startTransition`. Dengan begitu, kita memberitahu React untuk **Boleh delay update state tersebut**jika perubahan tersebut membuat loading state yang tidak diinginkan:
107
107
108
108
```js{3,6}
109
109
<button
@@ -116,13 +116,15 @@ Our "Next" button click handler sets the state that switches the current profile
116
116
>
117
117
```
118
118
119
-
**[Try it on CodeSandbox](https://codesandbox.io/s/musing-driscoll-6nkie)**
119
+
**[Coba di CodeSandbox](https://codesandbox.io/s/musing-driscoll-6nkie)**
120
120
121
121
Press "Next" a few times. Notice it already feels very different. **Instead of immediately seeing an empty screen on click, we now keep seeing the previous page for a while.** When the data has loaded, React transitions us to the new screen.
122
+
Tekan "Next" beberapa kali. Jika diperhatikan, akan terasa bedanya. **Daripada langsung melihat layar kosong ketika klik, sekarang kita melihat layar sebelumnya untuk beberapa saat.** Ketika data sudah diload, React mengarahkan kita ke layar baru.
122
123
123
124
If we make our API responses take 5 seconds, [we can confirm](https://codesandbox.io/s/relaxed-greider-suewh) that now React "gives up" and transitions anyway to the next screen after 3 seconds. This is because we passed `{timeoutMs: 3000}` to `useTransition()`. For example, if we passed `{timeoutMs: 60000}` instead, it would wait a whole minute.
125
+
Jika kita buat API response untuk menunggu selama 5 detik, [kita bisa memastikan](https://codesandbox.io/s/relaxed-greider-suewh) kalau React "menyerah" dan langsung mengarahkan kita ke layar selanjutnya setelah 3 detik. Ini karena kita telah melewati batas `{timeoutMs: 3000}` untuk `useTransition()`. Contohnya, jika kita set `{timeoutMs: 60000}`, React akan menunggu selama semenit penuh.
124
126
125
-
### Adding a Pending Indicator {#adding-a-pending-indicator}
There's still something that feels broken about [our last example](https://codesandbox.io/s/musing-driscoll-6nkie). Sure, it's nice not to see a "bad" loading state. **But having no indication of progress at all feels even worse!** When we click "Next", nothing happens and it feels like the app is broken.
0 commit comments