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/react/StrictMode.md
+22-22Lines changed: 22 additions & 22 deletions
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: <StrictMode>
5
5
6
6
<Intro>
7
7
8
-
`<StrictMode>` memungkinkan Anda menemukan bug umum di komponen Anda lebih awal selama pengembangan.
8
+
`<StrictMode>` memungkinkan Anda menemukan *bug* umum di komponen Anda lebih awal selama pengembangan.
9
9
10
10
11
11
```js
@@ -42,8 +42,8 @@ root.render(
42
42
43
43
Strict Mode mengaktifkan perilaku-perilaku pengembangan berikut:
44
44
45
-
- Komponen Anda akan [me-*render* ulang tambahan satu kali](#fixing-bugs-found-by-double-rendering-in-development) untuk mencari bug yang disebabkan oleh *rendering* yang tidak murni.
46
-
- Komponen Anda akan [menjalankan kembali Efek tambahan satu kali](#fixing-bugs-found-by-re-running-effects-in-development) untuk menemukan bug yang disebabkan oleh tidak adanya pembersihan Efek.
45
+
- Komponen Anda akan [me-*render* ulang tambahan satu kali](#fixing-bugs-found-by-double-rendering-in-development) untuk mencari *bug* yang disebabkan oleh *rendering* yang tidak murni.
46
+
- Komponen Anda akan [menjalankan kembali Efek tambahan satu kali](#fixing-bugs-found-by-re-running-effects-in-development) untuk menemukan *bug* yang disebabkan oleh tidak adanya pembersihan Efek.
47
47
- Komponen Anda akan [memeriksa penggunaan API yang tidak digunakan lagi.](#fixing-deprecation-warnings-enabled-by-strict-mode)
48
48
49
49
#### Props {/*props*/}
@@ -60,7 +60,7 @@ Strict Mode mengaktifkan perilaku-perilaku pengembangan berikut:
60
60
61
61
### Mengaktifkan Strict Mode untuk seluruh aplikasi {/*enabling-strict-mode-for-entire-app*/}
62
62
63
-
Strict Mode memungkinkan pemeriksaan tambahan khusus pengembangan untuk seluruh pohon komponen di dalam komponen `<StrictMode>`. Pemeriksaan ini membantu Anda menemukan bug umum di komponen Anda di awal proses pengembangan.
63
+
Strict Mode memungkinkan pemeriksaan tambahan khusus pengembangan untuk seluruh pohon komponen di dalam komponen `<StrictMode>`. Pemeriksaan ini membantu Anda menemukan *bug* umum di komponen Anda di awal proses pengembangan.
64
64
65
65
66
66
Untuk mengaktifkan Strict Mode pada seluruh aplikasi Anda, bungkus komponen akar Anda dengan `<StrictMode>` ketika Anda me-*render*:
@@ -79,14 +79,14 @@ root.render(
79
79
80
80
Kami merekomendasikan untuk membungkus seluruh aplikasi Anda dalam Strict Mode, terutama untuk aplikasi yang baru dibuat. Jika Anda menggunakan framework yang memanggil [`createRoot`](/reference/react-dom/client/createRoot) untuk Anda, periksa dokumentasinya untuk cara mengaktifkan Strict Mode.
81
81
82
-
Meskipun pemeriksaan Strict Mode **hanya berjalan dalam pengembangan,**, pemeriksaan ini membantu Anda menemukan bug yang sudah ada dalam kode Anda, tetapi sulit untuk direproduksi secara andal dalam produksi. Strict Mode memungkinkan Anda memperbaiki bug sebelum pengguna melaporkannya.
82
+
Meskipun pemeriksaan Strict Mode **hanya berjalan dalam pengembangan,**, pemeriksaan ini membantu Anda menemukan *bug* yang sudah ada dalam kode Anda, tetapi sulit untuk direproduksi secara andal dalam produksi. Strict Mode memungkinkan Anda memperbaiki *bug* sebelum pengguna melaporkannya.
83
83
84
84
<Note>
85
85
86
86
Strict Mode mengaktifkan perilaku-perilaku pengembangan berikut:
87
87
88
-
- Komponen Anda akan [me-*render* ulang tambahan satu kali](#fixing-bugs-found-by-double-rendering-in-development) untuk mencari bug yang disebabkan oleh *rendering* yang tidak murni.
89
-
- Komponen Anda akan [menjalankan kembali Efek tambahan satu kali](#fixing-bugs-found-by-re-running-effects-in-development) untuk menemukan bug yang disebabkan oleh tidak adanya pembersihan Efek.
88
+
- Komponen Anda akan [me-*render* ulang tambahan satu kali](#fixing-bugs-found-by-double-rendering-in-development) untuk mencari *bug* yang disebabkan oleh *rendering* yang tidak murni.
89
+
- Komponen Anda akan [menjalankan kembali Efek tambahan satu kali](#fixing-bugs-found-by-re-running-effects-in-development) untuk menemukan *bug* yang disebabkan oleh tidak adanya pembersihan Efek.
90
90
- Komponen Anda akan [memeriksa penggunaan API yang tidak digunakan lagi.](#fixing-deprecation-warnings-enabled-by-strict-mode)
91
91
92
92
**Semua pemeriksaan ini hanya untuk pengembangan dan tidak memengaruhi build produksi.**
@@ -95,7 +95,7 @@ Strict Mode mengaktifkan perilaku-perilaku pengembangan berikut:
95
95
96
96
---
97
97
98
-
### Mengaktifkan mode ketat untuk bagian dari aplikasi {/*enabling-strict-mode-for-a-part-of-the-app*/}
98
+
### Mengaktifkan Strict Mode untuk bagian dari aplikasi {/*enabling-strict-mode-for-a-part-of-the-app*/}
99
99
100
100
Anda juga dapat mengaktifkan Strict Mode untuk setiap bagian dari aplikasi Anda:
101
101
@@ -122,19 +122,19 @@ Dalam contoh ini, pemeriksaan Strict Mode tidak akan dijalankan terhadap kompone
122
122
123
123
---
124
124
125
-
### Memperbaiki bug yang ditemukan oleh *rendering* ganda dalam pengembangan {/*fixing-bugs-found-by-double-rendering-in-development*/}
125
+
### Memperbaiki *bug* yang ditemukan oleh *rendering* ganda dalam pengembangan {/*fixing-bugs-found-by-double-rendering-in-development*/}
126
126
127
127
[React mengasumsikan bahwa setiap komponen yang Anda tulis adalah fungsi murni.](/learn/keeping-components-pure) Ini berarti bahwa komponen React yang Anda tulis harus selalu mengembalikan JSX yang sama dengan masukan yang sama (props, state, and context).
128
128
129
-
Komponen yang melanggar aturan ini berperilaku tidak terduga dan menyebabkan bug. Untuk membantu Anda menemukan kode tidak murni secara tidak sengaja, Strict Mode memanggil beberapa fungsi Anda (hanya yang seharusnya murni) **dua kali dalam pengembangan.** Ini termasuk:
129
+
Komponen yang melanggar aturan ini berperilaku tidak terduga dan menyebabkan *bug*. Untuk membantu Anda menemukan kode tidak murni secara tidak sengaja, Strict Mode memanggil beberapa fungsi Anda (hanya yang seharusnya murni) **dua kali dalam pengembangan.** Ini termasuk:
130
130
131
131
- Badan fungsi komponen Anda (hanya logika tingkat atas, jadi ini tidak termasuk kode di dalam event handler)
132
132
- Fungsi yang anda teruskan [`useState`](/reference/react/useState), [`set` functions](/reference/react/useState#setstate), [`useMemo`](/reference/react/useMemo), or [`useReducer`](/reference/react/useReducer)
133
133
- Beberapa metode komponen kelas seperti [`constructor`](/reference/react/Component#constructor), [`render`](/reference/react/Component#render), [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) ([lihat seluruh daftar](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects))
134
134
135
-
Jika fungsi murni, menjalankannya dua kali tidak mengubah perilakunya karena fungsi murni menghasilkan hasil yang sama setiap waktu. Namun, jika suatu fungsi tidak murni (misalnya, memutasikan data yang diterimanya), menjalankannya dua kali cenderung terlihat (itulah yang membuatnya tidak murni!) Ini membantu Anda menemukan dan memperbaiki bug lebih awal.
135
+
Jika fungsi murni, menjalankannya dua kali tidak mengubah perilakunya karena fungsi murni menghasilkan hasil yang sama setiap waktu. Namun, jika suatu fungsi tidak murni (misalnya, memutasikan data yang diterimanya), menjalankannya dua kali cenderung terlihat (itulah yang membuatnya tidak murni!) Ini membantu Anda menemukan dan memperbaiki *bug* lebih awal.
136
136
137
-
**Berikut adalah contoh untuk mengilustrasikan bagaimana *rendering* ganda dalam Strict Mode membantu Anda menemukan bug lebih awal.**
137
+
**Berikut adalah contoh untuk mengilustrasikan bagaimana *rendering* ganda dalam Strict Mode membantu Anda menemukan *bug* lebih awal.**
138
138
139
139
Komponen `StoryTray` mengambil larik `stories` dan menambahkan satu item terakhir "Create Story" di bagian akhir:
Ini akan [membuat fungsi `StoryTray` murni.](/learn/keeping-components-pure) Setiap kali dipanggil, ini hanya akan memodifikasi salinan baru dari larik, dan tidak akan memengaruhi objek atau variabel eksternal apa pun. Ini menyelesaikan bug, tetapi Anda harus membuat komponen di-*render* ulang lebih sering sebelum menjadi jelas bahwa ada yang salah dengan perilakunya.
313
+
Ini akan [membuat fungsi `StoryTray` murni.](/learn/keeping-components-pure) Setiap kali dipanggil, ini hanya akan memodifikasi salinan baru dari larik, dan tidak akan memengaruhi objek atau variabel eksternal apa pun. Ini menyelesaikan *bug*, tetapi Anda harus membuat komponen di-*render* ulang lebih sering sebelum menjadi jelas bahwa ada yang salah dengan perilakunya.
314
314
315
-
**Dalam contoh aslinya, bug itu tidak terlihat jelas. Sekarang mari kita bungkus kode asli (penuh dengan bug) `<StrictMode>`:**
315
+
**Dalam contoh aslinya, *bug* itu tidak terlihat jelas. Sekarang mari kita bungkus kode asli (penuh dengan *bug*) `<StrictMode>`:**
316
316
317
317
<Sandpack>
318
318
@@ -393,7 +393,7 @@ li {
393
393
394
394
</Sandpack>
395
395
396
-
**Strict Mode *selalu* memanggil fungsi *rendering* Anda dua kali, sehingga Anda dapat langsung melihat kesalahannya** ("Create Story" muncul dua kali). Ini memungkinkan Anda melihat kesalahan seperti itu di awal proses. Saat Anda memperbaiki komponen untuk di-*render* dalam Strict Mode, Anda *juga* memperbaiki banyak kemungkinan memproduksi bug di masa mendatang seperti fungsi hover sebelumnya:
396
+
**Strict Mode *selalu* memanggil fungsi *rendering* Anda dua kali, sehingga Anda dapat langsung melihat kesalahannya** ("Create Story" muncul dua kali). Ini memungkinkan Anda melihat kesalahan seperti itu di awal proses. Saat Anda memperbaiki komponen untuk di-*render* dalam Strict Mode, Anda *juga* memperbaiki banyak kemungkinan memproduksi *bug* di masa mendatang seperti fungsi hover sebelumnya:
397
397
398
398
<Sandpack>
399
399
@@ -483,7 +483,7 @@ li {
483
483
484
484
</Sandpack>
485
485
486
-
Tanpa Strict Mode, mudah untuk melewatkan bug sampai Anda menambahkan lebih banyak *render* ulang. Strict Mode membuat bug yang sama segera muncul. Strict Mode membantu Anda menemukan bug sebelum mendorongnya ke tim dan pengguna Anda.
486
+
Tanpa Strict Mode, mudah untuk melewatkan *bug* sampai Anda menambahkan lebih banyak *render* ulang. Strict Mode membuat *bug* yang sama segera muncul. Strict Mode membantu Anda menemukan *bug* sebelum mendorongnya ke tim dan pengguna Anda.
487
487
488
488
[Baca lebih lanjut tentang menjaga kemurnian komponen.](/learn/keeping-components-pure)
489
489
@@ -495,15 +495,15 @@ Jika Anda telah menginstal [React DevTools](/learn/react-developer-tools), setia
495
495
496
496
---
497
497
498
-
### Memperbaiki bug yang ditemukan dengan menjalankan kembali Efek dalam pengembangan {/*fixing-bugs-found-by-re-running-effects-in-development*/}
498
+
### Memperbaiki *bug* yang ditemukan dengan menjalankan kembali Efek dalam pengembangan {/*fixing-bugs-found-by-re-running-effects-in-development*/}
499
499
500
-
Strict Mode juga dapat membantu menemukan bug di [Effects.](/learn/synchronizing-with-effects)
500
+
Strict Mode juga dapat membantu menemukan *bug* di [Effects.](/learn/synchronizing-with-effects)
501
501
502
502
Setiap Efek memiliki beberapa setup code dan mungkin memiliki beberapa kode pembersihan. Biasanya, React memanggil setup ketika komponen *mounts* (ditambahkan ke layar) dan memanggil pembersihan ketika komponen *unmounts* (dihapus dari layar). React kemudian memanggil pembersihan dan setup lagi jika dependensinya berubah setelah *render* terakhir.
503
503
504
-
Saat Strict Mode aktif, React juga akan menjalankan **satu siklus setup+pembersihan tambahan dalam pengembangan untuk setiap Efek.** Ini mungkin terasa mengejutkan, tetapi membantu mengungkapkan bug tak kentara yang sulit ditangkap secara manual.
504
+
Saat Strict Mode aktif, React juga akan menjalankan **satu siklus setup+pembersihan tambahan dalam pengembangan untuk setiap Efek.** Ini mungkin terasa mengejutkan, tetapi membantu mengungkapkan *bug* tak kentara yang sulit ditangkap secara manual.
505
505
506
-
**Berikut adalah contoh untuk mengilustrasikan bagaimana menjalankan kembali Efek dalam Strict Mode membantu Anda menemukan bug lebih awal.**
506
+
**Berikut adalah contoh untuk mengilustrasikan bagaimana menjalankan kembali Efek dalam Strict Mode membantu Anda menemukan *bug* lebih awal.**
507
507
508
508
Pertimbangkan contoh ini yang menghubungkan komponen ke obrolan:
509
509
@@ -658,7 +658,7 @@ Anda akan melihat bahwa jumlah koneksi aktif selalu terus bertambah. Dalam aplik
658
658
659
659
Sekarang Efek Anda "membersihkan" setelahnya sendiri dan menghancurkan koneksi yang sudah tidak digunakan, kebocorannya teratasi. Namun, perhatikan bahwa masalahnya tidak terlihat hingga Anda menambahkan lebih banyak fitur (select box).
660
660
661
-
**Dalam contoh aslinya, bug itu tidak terlihat jelas. Sekarang mari bungkus kode asli (buggy) dalam `<StrictMode>`:**
661
+
**Dalam contoh aslinya, *bug*-nya tidak terlihat jelas. Sekarang mari bungkus kode asli (memiliki *bug*) dalam `<StrictMode>`:**
662
662
663
663
<Sandpack>
664
664
@@ -722,7 +722,7 @@ button { margin-left: 10px; }
722
722
723
723
**Dengan Strict Mode, Anda segera melihat bahwa ada masalah** (jumlah koneksi aktif melonjak menjadi 2). Strict Mode menjalankan siklus setup+pembersihan ekstra untuk setiap Efek. Efek ini tidak memiliki logika pembersihan, sehingga membuat koneksi ekstra tetapi tidak menghancurkan. Ini adalah petunjuk bahwa Anda melewatkan fungsi pembersihan.
724
724
725
-
Strict Mode memungkinkan Anda melihat kesalahan seperti itu di awal proses. Saat Anda memperbaiki Efek dengan menambahkan fungsi pembersihan dalam Strict Mode, Anda *juga* memperbaiki banyak kemungkinan memproduksi bug di masa mendatang seperti select box sebelumnya:
725
+
Strict Mode memungkinkan Anda melihat kesalahan seperti itu di awal proses. Saat Anda memperbaiki Efek dengan menambahkan fungsi pembersihan dalam Strict Mode, Anda *juga* memperbaiki banyak kemungkinan memproduksi *bug* di masa mendatang seperti select box sebelumnya:
0 commit comments