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
1. Fungsi `subscribe` harus berlangganan ke tempat penyimpanan dan mengembalikan fungsi untuk berhenti berlangganan.
38
38
2. Fungsi `getSnapshot` harus membaca sebuah *snapshot* dari data yang ada di tempat penyimpanan.
39
39
40
-
[Lihat contoh yang ada di bawah.](#usage)
40
+
[Lihat lebih banyak contoh di bawah.](#usage)
41
41
42
42
#### Parameter {/*parameters*/}
43
43
44
-
* `subscribe`: Sebuah fungsi yang menerima sebuah argumen `callback` dan melanggankan itu ke tempat penyimpanan. Saat tempat penyimpanan berubah, fungsi ini akan memanggil `callback`. Ini akan menyebakan komponen di-*render* ulang. Fungsi `subscribe` harus mengembalikan fungsi yang membersihkan langganan tersebut.
44
+
* `subscribe`: Sebuah fungsi yang menerima sebuah argumen `callback` dan berlangganan ke tempat penyimpanan. Saat tempat penyimpanan berubah, fungsi ini akan memanggil `callback`. Ini akan menyebakan komponen di-*render* ulang. Fungsi `subscribe` harus mengembalikan fungsi yang membersihkan langganan tersebut.
45
45
46
-
* `getSnapshot`: Sebuah fungsi yang mengembalikan sebuah *snapshot* dari data yang dibutuhkan komponen yang berada di tempat penyimpanan. Saat tempat penyimpanan masih belum berubah, pemanggilan `getSnapshot` berulang kali tetap harus mengembalikan nilai yang sama. Jika tempat penyimpanan berubah dan nilai kembalian juga berubah (saat dibandingkan dengan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), React me-*render* ulang komponen tersebut.
46
+
* `getSnapshot`: Sebuah fungsi yang mengembalikan sebuah *snapshot* dari data, di tempat penyimpanan, yang dibutuhkan komponen. Saat tempat penyimpanan masih belum berubah, pemanggilan `getSnapshot` berulang kali tetap harus mengembalikan nilai yang sama. Jika tempat penyimpanan berubah dan nilai kembalian juga berubah (saat dibandingkan dengan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), React me-*render* ulang komponen tersebut.
47
47
48
48
* **opsional** `getServerSnapshot`: Sebuah fungsi yang mengembalikan *snapshot* awal dari data yang ada di tempat penyimpanan. *Snapshot* hanya akan digunakan saat proses *render* dilakukan oleh server dan saat hidrasi konten yang telah di-*render* oleh server ke klien. *Snapshot* server harus sama antara klien dan server, dan biasanya diserialisasi dan diserahkan dari server ke klien. Jika Anda mengabaikan argumen ini, proses *render* komponen di server akan memunculkan kesalahan.
49
49
50
50
#### Kembalian {/*returns*/}
51
51
52
52
*Snapshot* saat ini dari tempat penyimpanan yang dapat Anda gunakan di logika *render* Anda.
53
53
54
-
#### Perhatian {/*caveats*/}
54
+
#### *Caveat* {/*caveats*/}
55
55
56
56
* *Snapshot* tempat penyimpanan yang dikembalikan `getSnapshot` tidak boleh bisa dimutasi. Jika tempat penyimpanan mengandung data yang dapat dimutasi, Anda harus mengembalikan *snapshot* yang tidak dapat dimutasi saat data berubah. Jika data tidak berubah, Anda dapat mengembalikan *snapshot* terakhir yang sudah di-*cache*.
57
57
@@ -65,7 +65,7 @@ function TodosApp() {
65
65
66
66
Sebagian besar komponen React Anda akan membaca data dari [*props*](/learn/passing-props-to-a-component), [*state*](/reference/react/useState), dan [*context*](/reference/react/useContext) mereka. Walaupun begitu, kadang-kadang ada komponen yang harus membaca dari tempat penyimpanan yang ada di luar React dan berubah seiring waktu berjalan. Ini termasuk:
67
67
68
-
* *Library* manajemen *state* dari pihak ketiga yang menyimpan *state* di luar React.
68
+
* Pustaka manajemen *state* dari pihak ketiga yang menyimpan *state* di luar React.
69
69
* API peramban yang mengekspos nilai yang dapat dimutasi dan *event* untuk berlangganan ke perubahannya.
70
70
71
71
Panggil `useSyncExternalStore` di tingkat paling atas dari komponen Anda untuk membaca sebuah nilai dari tempat penyimpanan data eksternal.
@@ -87,7 +87,7 @@ Fungsi ini mengembalikan <CodeStep step={3}>*snapshot*</CodeStep> dari data yang
87
87
88
88
React akan menggunakan dua fungsi ini untuk menjaga status langganan komponen Anda ke tempat penyimpanan tersebut dan me-*render* ulang saat ada perubahan.
89
89
90
-
Misalnya, di *sandbox* di bawah, `todosStore` diimplementasi sebagai tempat penyimpanan eksternal yang menyimpan data di luar React. Komponen `TodosApp` terhubung ke tempat penyimpanan eksternal tersebut melalui *hook* `useSyncExternalStore`.
90
+
Misalnya, di *sandbox* di bawah, `todosStore` diimplementasi sebagai tempat penyimpanan eksternal yang menyimpan data di luar React. Komponen `TodosApp` terhubung ke tempat penyimpanan eksternal tersebut melalui *Hook* `useSyncExternalStore`.
91
91
92
92
<Sandpack>
93
93
@@ -150,7 +150,7 @@ function emitChange() {
150
150
151
151
<Note>
152
152
153
-
Di situasi yang memungkinkan, kami merekomendasikan untuk menggunakan *state* yang sudah ada di dalam React dengan menggunakan [`useState`](/reference/react/useState) dan [`useReducer`](/reference/react/useReducer). API `useSyncExternalStore` biasanya berguna jika Anda ingin mengintegrasi komponen Anda dengan kode non-React.
153
+
Ketika memungkinkan, kami merekomendasikan untuk menggunakan *state* yang sudah ada di dalam React dengan menggunakan [`useState`](/reference/react/useState) dan [`useReducer`](/reference/react/useReducer). API `useSyncExternalStore` biasanya berguna jika Anda ingin mengintegrasi komponen Anda dengan kode non-React.
154
154
155
155
</Note>
156
156
@@ -222,11 +222,11 @@ function subscribe(callback) {
222
222
223
223
---
224
224
225
-
### Mengekstrak logika ke *hook* buatan sendiri {/*extracting-the-logic-to-a-custom-hook*/}
225
+
### Mengekstrak logika ke *Hook* buatan sendiri {/*extracting-the-logic-to-a-custom-Hook*/}
226
226
227
-
Biasanya Anda tidak akan menulis `useSyncExternalStore` langsung di dalam komponen Anda. Alih-alih, Anda akan memanggil `hook` tersebut dari `hook` buatan Anda sendiri. Ini membiarkan Anda menggunakan tempat penyimpanan eksternal yang sama untuk berbagai komponen.
227
+
Biasanya Anda tidak akan menulis `useSyncExternalStore` langsung di dalam komponen Anda. Alih-alih, Anda akan memanggil `Hook` tersebut dari `Hook` buatan Anda sendiri. Ini membiarkan Anda menggunakan tempat penyimpanan eksternal yang sama untuk berbagai komponen.
228
228
229
-
Sebagai contoh, `hook``useOnlineStatus` ini mengikuti apakah jaringan menyala:
229
+
Sebagai contoh, `Hook``useOnlineStatus` ini mengikuti apakah jaringan menyala:
230
230
231
231
```js {3,6}
232
232
import { useSyncExternalStore } from'react';
@@ -399,7 +399,7 @@ function ChatIndicator() {
399
399
}
400
400
```
401
401
402
-
React akan melanggan ulang ke tempat penyimpanan Anda jika Anda memberikan fungsi `subscribe`berda antar-*render*. Jika ini memberikan masalah terhadap performa dan Anda ingin menghindari proses berlangganan ulang, Anda dapat memindahkan fungsi `subscribe` keluar:
402
+
React akan berlangganan ulang ke tempat penyimpanan Anda jika Anda memberikan fungsi `subscribe`berbeda antar-*render*. Jika ini memberikan masalah terhadap performa dan Anda ingin menghindari proses berlangganan ulang, Anda dapat memindahkan fungsi `subscribe` keluar:
403
403
404
404
```js {6-9}
405
405
functionChatIndicator() {
@@ -413,7 +413,7 @@ function subscribe() {
413
413
}
414
414
```
415
415
416
-
Cara alternatif adalah dengan membungkus `subscribe` ke dalam [`useCallback`](/reference/react/useCallback) untuk melanggan ulang hanya jika beberapa argumen berubah:
416
+
Cara alternatif adalah dengan membungkus `subscribe` ke dalam [`useCallback`](/reference/react/useCallback) untuk berlangganan ulang hanya jika beberapa argumen berubah:
0 commit comments