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: src/content/reference/rules/components-and-hooks-must-be-pure.md
+3-24Lines changed: 3 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -189,19 +189,11 @@ Efek samping yang secara langsung terlihat oleh pengguna tidak diperbolehkan dal
189
189
190
190
```js {2}
191
191
functionProductDetailPage({ product }) {
192
-
<<<<<<<HEAD
193
-
document.window.title=product.title; // 🔴 Buruk: Mengubah DOM
192
+
document.title=product.title; // 🔴 Buruk: Mengubah DOM
194
193
}
195
194
```
196
195
197
-
Salah satu cara untuk mencapai hasil yang diinginkan dengan memperbarui `window.title` di luar *render* adalah dengan [menyinkronkan komponen dengan `window`](/learn/synchronizing-with-effects).
198
-
=======
199
-
document.title = product.title; // 🔴 Bad: Changes the DOM
200
-
}
201
-
```
202
-
203
-
One way to achieve the desired result of updating `document.title` outside of render is to [synchronize the component with `document`](/learn/synchronizing-with-effects).
204
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
196
+
Salah satu cara untuk mencapai hasil yang diinginkan dengan memperbarui `document.title` di luar *render* adalah dengan [menyinkronkan komponen dengan `window`](/learn/synchronizing-with-effects).
205
197
206
198
Selama pemanggilan sebuah komponen beberapa kali aman dan tidak mempengaruhi proses *render* komponen lainnya, React tidak peduli apakah komponen tersebut 100% murni dalam arti pemrograman fungsional yang ketat. Yang lebih penting adalah [komponen harus idempoten](/reference/rules/components-and-hooks-must-be-pure).
207
199
@@ -213,13 +205,8 @@ Sebuah *props* dan *state* dari komponen adalah [*snapshots*](learn/state-as-a-s
213
205
214
206
Anda dapat menganggap *props* dan nilai *state* sebagai *snapshot* yang diperbarui setelah di-*render*. Karena alasan ini, Anda tidak memodifikasi *props* atau variabel state secara langsung: sebagai gantinya, Anda mengoper *props* baru, atau menggunakan fungsi *setter* yang disediakan untuk memberi tahu React bahwa *state* perlu diperbarui pada saat komponen di-*render*.
215
207
216
-
<<<<<<< HEAD
217
208
### Jangan memutasi *Props* {/*props*/}
218
-
*Props* dapat dimutasi karena karena jika anda memutasinya, maka Props tidak dapat diubah karena jika Anda mengubahnya, aplikasi akan menghasilkan output yang tidak konsisten, yang bisa jadi sulit untuk di-*debug* karena mungkin bekerja atau tidak bekerja tergantung pada situasinya.
219
-
=======
220
-
### Don't mutate Props {/*props*/}
221
-
Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug as it may or may not work depending on the circumstances.
222
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
209
+
*Props* tidak dapat dimutasi karena karena jika anda memutasinya, aplikasi akan menghasilkan output yang tidak konsisten, yang bisa jadi sulit untuk di-*debug* karena aplikasi mungkin bekerja atau tidak bekerja tergantung pada situasinya.
223
210
224
211
```js {2}
225
212
functionPost({ item }) {
@@ -319,11 +306,7 @@ function useIconStyle(icon) {
319
306
}
320
307
```
321
308
322
-
<<<<<<< HEAD
323
309
Jika Anda mengubah argumen *Hooks*, memoisasi *hook* kustom akan menjadi salah, jadi penting untuk menghindari hal tersebut.
324
-
=======
325
-
If you were to mutate the Hook's arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that.
326
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
327
310
328
311
```js {4}
329
312
style =useIconStyle(icon); // `style` dimemoisasi berdasarkan `icon`
@@ -343,11 +326,7 @@ Demikian pula, penting untuk tidak memodifikasi nilai yang dikembalikan dari *Ho
343
326
344
327
## Nilai tidak dapat diubah setelah diteruskan ke JSX {/*values-are-immutable-after-being-passed-to-jsx*/}
345
328
346
-
<<<<<<< HEAD
347
329
Jangan melakukan mutasi nilai setelah nilai tersebut digunakan dalam JSX. Pindahkan mutasi sebelum JSX dibuat.
348
-
=======
349
-
Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created.
350
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
351
330
352
331
Ketika Anda menggunakan JSX dalam sebuah ekspresi, React mungkin akan mengevaluasi JSX sebelum komponen selesai di-*render*. Ini berarti bahwa mengubah nilai setelah nilai tersebut dioper ke JSX dapat menyebabkan UI yang sudah usang, karena React tidak akan tahu untuk memperbarui keluaran komponen.
0 commit comments